Added tests of putPicturesInPage

examples/tests/.eslintrc.yml

@@ -0,0 +1,30 @@
+extends: airbnb
+
+env:
+  browser: true
+  node: false
+
+parserOptions:
+  ecmaVersion: 8
+
+rules:
+  no-console: off
+  strict: off
+  func-names: off
+  prefer-template: off
+  new-cap: off
+  no-use-before-define: off
+  no-param-reassign: off
+  prefer-rest-params: off
+  no-trailing-spaces: off
+  arrow-body-style: off
+  key-spacing: off
+  max-len:
+    - "error"
+    - 120
+    - ignoreTrailingComments: true
+  space-infix-ops: off
+  no-restricted-syntax: off
+  prefer-destructuring: off
+  arrow-parens: off
+  no-alert: off

examples/tests/client-tests.js

@@ -0,0 +1,241 @@
+'use strict';
+
+/* global QUnit */
+
+// replacing the original fetch so we can test the functions wihtout needing a server
+fetch = () => { // eslint-disable-line no-global-assign
+  return {
+    ok: true,
+    json() { return []; },
+  };
+};
+
+const baseMainChildrenNumber = document.querySelector('main').childElementCount;
+
+QUnit.module('Pictures');
+
+QUnit.test(
+  'putPicturesInPage',
+  (assert) => {
+    assert.ok(
+      typeof window.forTesting.putPicturesInPage === 'function',
+      '`putPicturesInPage` takes an array of picture objects and puts them as sections in <main>.',
+    );
+
+    const elM = document.querySelector('main');
+    assert.ok(
+      document.querySelector('main .picture') == null,
+      'Before using the function, there must be no picture in `main`.',
+    );
+    assert.strictEqual(
+      elM.childElementCount,
+      baseMainChildrenNumber,
+      'The element `main` must only have the initial children.',
+    );
+
+    // with an empty array
+    window.forTesting.putPicturesInPage([]);
+    const el = document.querySelectorAll('main section.picture');
+
+    assert.strictEqual(
+      el.length,
+      0,
+      'When there is no picture to be added, there must be only the base code of the page.',
+    );
+
+    // with an array of one picture
+    let data = [{
+      id: 1,
+      file: 'http://placebear.com/400/200',
+      title: 'A bear',
+    }];
+    window.forTesting.putPicturesInPage(data);
+
+    assert.strictEqual(
+      elM.childElementCount,
+      1+baseMainChildrenNumber,
+      'After passing one image entity to the function, there must be only one `section`.',
+    );
+
+    let listOfSections = elM.querySelectorAll('section.picture');
+    let section = listOfSections[0];
+    let paragraphs = section.querySelectorAll('p');
+    let as = section.querySelectorAll('a');
+    let images = as[0].querySelectorAll('img');
+    let deletes = section.querySelectorAll('div');
+
+    // test the p inside the section
+    assert.strictEqual(
+      paragraphs.length,
+      1,
+      'There must be one `<p>` element in a `section`.',
+    );
+    assert.strictEqual(
+      paragraphs[0].className,
+      'title',
+      'The paragraph must have the class `title`',
+    );
+
+    // test the a inside the section
+    assert.strictEqual(
+      as.length,
+      1,
+      'There must be one `<a>` element in a `section`.',
+    );
+    assert.ok(
+      as[0].classList.contains('img'),
+      'The `<a>` element must have the class `img`.',
+    );
+    assert.strictEqual(
+      as[0].href,
+      data[0].file,
+      'The `<a>` element must have its `href` attribute set to the good value.',
+    );
+
+    // test the image inside the a
+    assert.strictEqual(
+      images.length,
+      1,
+      'In a `<a>` element there must be only one image.',
+    );
+    assert.strictEqual(
+      images[0].src,
+      data[0].file,
+      'The `<img>` element must have its `src` attribute set to the link of the image.',
+    );
+    assert.strictEqual(
+      images[0].alt,
+      data[0].title,
+      'The `<img>` element must have its `alt` attribute set to the title of the image.',
+    );
+
+    // test the div inside the section
+    assert.strictEqual(
+      deletes.length,
+      1,
+      'There must be only one `<div>` that displays an X in the `section`.',
+    );
+    assert.ok(
+      deletes[0].classList.contains('delete'),
+      'The `div` must have the class `delete`.',
+    );
+    assert.strictEqual(
+      deletes[0].textContent,
+      'X',
+      'The content of the `div` is `X`.',
+    );
+    assert.strictEqual(
+      deletes[0].dataset.id,
+      String(data[0].id),
+      'The `dataset.id` attribute of the `div` must be set to the `id` of the image.',
+    );
+    assert.strictEqual(
+      deletes[0].onclick,
+      window.forTesting.requestDelete,
+      'When clicking the `X`, the `requestDelete` function must run.',
+    );
+
+    // with an array of two pictures
+    data = [{
+      id: 1,
+      file: 'http://placebear.com/400/200',
+      title: 'A bear',
+    },
+    {
+      id: 2,
+      file: 'https://placebear.com/200/200',
+      title: 'Another bear',
+    }];
+    window.forTesting.putPicturesInPage(data);
+
+    assert.strictEqual(
+      elM.childElementCount,
+      2+baseMainChildrenNumber,
+      'After passing two image entities to the function, there must be two sections.',
+    );
+
+    listOfSections = elM.querySelectorAll('section.picture');
+    section = listOfSections[1];
+    paragraphs = section.querySelectorAll('p');
+    as = section.querySelectorAll('a');
+    images = as[0].querySelectorAll('img');
+    deletes = section.querySelectorAll('div');
+
+    assert.strictEqual(
+      listOfSections.length,
+      2,
+      'There must be two sections in `main`.',
+    );
+
+    // test the p in the section
+    assert.strictEqual(
+      paragraphs.length,
+      1,
+      'There must be one `<p>` element in a `section`.',
+    );
+    assert.strictEqual(
+      paragraphs[0].className,
+      'title',
+      'The paragraph must have the class ',
+    );
+
+    // test the a inside the section
+    assert.strictEqual(
+      as.length,
+      1,
+      'There must be one `<a>` element in a `section`.',
+    );
+    assert.ok(
+      as[0].classList.contains('img'),
+      'The `<a>` element must have the class `img`.',
+    );
+    assert.strictEqual(
+      as[0].href,
+      data[1].file,
+      'The `<a>` element must have its `href` attribute set to the good value.',
+    );
+
+    // test the image inside the a
+    assert.strictEqual(
+      images.length,
+      1,
+      'In a `<a>` element there must be only one image.',
+    );
+    assert.strictEqual(
+      images[0].src,
+      data[1].file,
+      'The `<img>` element must have its `src` attribute set to the link of the image.',
+    );
+    assert.strictEqual(
+      images[0].alt,
+      data[1].title,
+      'The `<img>` element must have its `alt` attribute set to the title of the image.',
+    );
+
+    // test the div inside the section
+    assert.strictEqual(
+      deletes.length,
+      1,
+      'There must be only one `<div>` that displays an X in the `section`.',
+    );
+    assert.ok(
+      deletes[0].classList.contains('delete'),
+      'The `div` must have the class `delete`.',
+    );
+    assert.strictEqual(
+      deletes[0].textContent,
+      'X',
+      'The content of the `div` is `X`.',
+    );
+    assert.strictEqual(
+      deletes[0].dataset.id,
+      String(data[1].id),
+      'The `dataset.id` attribute of the `div` must be set to the `id` of the image.',
+    );
+    assert.strictEqual(
+      deletes[0].onclick,
+      window.forTesting.requestDelete,
+      'When clicking the `X`, the `requestDelete` function must run.',
+    );
+  },
+);

examples/tests/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>WebScript</title>
+    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-2.6.0.css">
+    <link rel="stylesheet" href="../webpages/style.css">
+</head>
+
+<body>
+    <div id="qunit">
+    </div>
+
+    <section>
+        <header>
+          <h1>JStagram</h1>
+          <div class="search">
+            <form id=searchform>
+              <input id="search" type="search" autofocus>&nbsp;<input type="button" id="searchnow" value="search">
+            </form>
+          </div>
+          <div class="sort">
+            Order:&nbsp;<select id="sort">
+              <option value="new">newest first</option>
+              <option value="old">oldest first</option>
+              <option value="a2z">A-Z</option>
+              <option value="z2a">Z-A</option>
+              <option value="rnd">random</option>
+            </select>
+          </div>
+        </header>
+
+        <main class="loading">
+          <!-- we will put the pictures here -->
+          <p class="loading">loading...</p>
+          <p class="error">sorry, something went wrong...</p>
+          <section class="upload" id="upload">
+            <a class="normal" href="/upload">upload a new picture</a>
+            <p class="normal hint">or drag a file here to upload</p>
+            <p class="drop">drop a file here to upload</p>
+            <p class="deny">cannot accept this file</p>
+            <form class="confirm">
+              <span class="preview"></span>
+              <label class="title">Title: <input id="title" type="text" size="40" placeholder="enter title" minlength="4" maxlength="60" required></label>
+              <button class="upload">upload</button>
+              <button class="cancel">cancel</button>
+            </form>
+          </section>
+        </main>
+    </section>
+
+</body>
+<script src="http://code.jquery.com/qunit/qunit-2.6.0.js"></script>
+<script src="../webpages/pictures.js"></script>
+<script src="index.js"></script>
+<script src="client-tests.js"></script>
+
+</html>

examples/webpages/pictures.js

@@ -96,6 +96,10 @@
     }
   }
 
+  window.forTesting = {
+    putPicturesInPage,
+    requestDelete,
+  };
 
   function isDragAcceptable(e) {
     return e.dataTransfer.items.length > 0 &&