diff --git a/examples/tests/.eslintrc.yml b/examples/tests/.eslintrc.yml new file mode 100644 index 0000000..6dec7af --- /dev/null +++ b/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 diff --git a/examples/tests/client-tests.js b/examples/tests/client-tests.js new file mode 100644 index 0000000..7124780 --- /dev/null +++ b/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
.', + ); + + 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 `

` 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 `` element in a `section`.', + ); + assert.ok( + as[0].classList.contains('img'), + 'The `` element must have the class `img`.', + ); + assert.strictEqual( + as[0].href, + data[0].file, + 'The `` element must have its `href` attribute set to the good value.', + ); + + // test the image inside the a + assert.strictEqual( + images.length, + 1, + 'In a `` element there must be only one image.', + ); + assert.strictEqual( + images[0].src, + data[0].file, + 'The `` element must have its `src` attribute set to the link of the image.', + ); + assert.strictEqual( + images[0].alt, + data[0].title, + 'The `` 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 `

` 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 `

` 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 `` element in a `section`.', + ); + assert.ok( + as[0].classList.contains('img'), + 'The `` element must have the class `img`.', + ); + assert.strictEqual( + as[0].href, + data[1].file, + 'The `` element must have its `href` attribute set to the good value.', + ); + + // test the image inside the a + assert.strictEqual( + images.length, + 1, + 'In a `` element there must be only one image.', + ); + assert.strictEqual( + images[0].src, + data[1].file, + 'The `` element must have its `src` attribute set to the link of the image.', + ); + assert.strictEqual( + images[0].alt, + data[1].title, + 'The `` 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 `

` 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.', + ); + }, +); diff --git a/examples/tests/index.html b/examples/tests/index.html new file mode 100644 index 0000000..f185a87 --- /dev/null +++ b/examples/tests/index.html @@ -0,0 +1,59 @@ + + + + + + WebScript + + + + + +
+
+ +
+
+

JStagram

+
+
+   +
+
+
+ Order:  +
+
+ +
+ +

loading...

+

sorry, something went wrong...

+
+ upload a new picture +

or drag a file here to upload

+

drop a file here to upload

+

cannot accept this file

+
+ + + + +
+
+
+
+ + + + + + + + diff --git a/examples/webpages/pictures.js b/examples/webpages/pictures.js index 4a4f1b3..b081e44 100644 --- a/examples/webpages/pictures.js +++ b/examples/webpages/pictures.js @@ -96,6 +96,10 @@ } } + window.forTesting = { + putPicturesInPage, + requestDelete, + }; function isDragAcceptable(e) { return e.dataTransfer.items.length > 0 &&