From 5ba2906e299795ced130a225d143eaa6dccf56ff Mon Sep 17 00:00:00 2001 From: Valariael Date: Mon, 23 Apr 2018 18:30:10 +0100 Subject: [PATCH 1/3] added tests of putPicturesInPage --- examples/tests/client-tests.js | 173 +++++++++++++++++++++++++++++++++ examples/tests/index.html | 59 +++++++++++ examples/webpages/pictures.js | 4 + package.json | 7 +- 4 files changed, 241 insertions(+), 2 deletions(-) create mode 100644 examples/tests/client-tests.js create mode 100644 examples/tests/index.html diff --git a/examples/tests/client-tests.js b/examples/tests/client-tests.js new file mode 100644 index 0000000..f88cdc0 --- /dev/null +++ b/examples/tests/client-tests.js @@ -0,0 +1,173 @@ +'use strict'; + +fetch = () => { + 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.strictEqual( + elM.childElementCount, + (0+baseMainChildrenNumber), + 'Before using the function, the element `main` must be empty of pictures.', + ); + assert.ok( + document.querySelector('main .picture') == null, + ); + + // 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'); + + assert.ok( + section.classList.contains('picture'), + 'A `section` must have the class `picture`.', + ); + + assert.strictEqual( + paragraphs.length, + 1, + 'There must be one `

` element in a `section`.', + ); + assert.strictEqual( + paragraphs[0].className, + 'title', + 'The first paragraph must have the class `title`', + ); + + 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.', + ); + + 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.', + ); + + 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 entity 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); + assert.ok(section.classList.contains('picture')); + assert.strictEqual(paragraphs.length, 1); + assert.strictEqual(paragraphs[0].className, 'title'); + assert.strictEqual(as.length, 1); + assert.ok(as[0].classList.contains('img')); + assert.strictEqual(as[0].href, data[1].file); + assert.strictEqual(images.length, 1); + assert.strictEqual(images[0].src, data[1].file); + assert.strictEqual(images[0].alt, data[1].title); + assert.strictEqual(deletes.length, 1); + assert.ok(deletes[0].classList.contains('delete')); + assert.strictEqual(deletes[0].textContent, 'X'); + assert.strictEqual(deletes[0].dataset.id, String(data[1].id)); + assert.strictEqual(deletes[0].onclick, window.forTesting.requestDelete); + }, +); 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 && diff --git a/package.json b/package.json index a76d3f0..8f992ab 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,15 @@ "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.5.1", - "nodemon": "^1.12.1" + "nodemon": "^1.12.1", + "qnit": "^0.13.0", + "qunit": "^0.9.1" }, "repository": "https://github.com/portsoc/ws_api.git", "dependencies": { "express": "^4.16.2", "multer": "^1.3.0", - "mysql2": "^1.5.1" + "mysql2": "^1.5.1", + "node-fetch": "^1.7.3" } } From bda5da6864082d7525f6c83e50fa7f0c8bf52329 Mon Sep 17 00:00:00 2001 From: Valariael Date: Tue, 24 Apr 2018 12:42:41 +0100 Subject: [PATCH 2/3] polishing --- examples/tests/.eslintrc.yml | 30 ++++++++ examples/tests/client-tests.js | 124 +++++++++++++++++++++++++-------- package.json | 7 +- 3 files changed, 127 insertions(+), 34 deletions(-) create mode 100644 examples/tests/.eslintrc.yml 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 index f88cdc0..551ae9f 100644 --- a/examples/tests/client-tests.js +++ b/examples/tests/client-tests.js @@ -1,5 +1,6 @@ 'use strict'; +// replacing the original fetch so we can test the functions wihtout needing a server fetch = () => { return { ok: true, @@ -20,13 +21,14 @@ QUnit.test( ); const elM = document.querySelector('main'); - assert.strictEqual( - elM.childElementCount, - (0+baseMainChildrenNumber), - 'Before using the function, the element `main` must be empty of pictures.', - ); 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 @@ -35,7 +37,7 @@ QUnit.test( assert.strictEqual( el.length, - (0), + 0, 'When there is no picture to be added, there must be only the base code of the page.', ); @@ -49,7 +51,7 @@ QUnit.test( assert.strictEqual( elM.childElementCount, - (1+baseMainChildrenNumber), + 1+baseMainChildrenNumber, 'After passing one image entity to the function, there must be only one `section`.', ); @@ -60,11 +62,7 @@ QUnit.test( let images = as[0].querySelectorAll('img'); let deletes = section.querySelectorAll('div'); - assert.ok( - section.classList.contains('picture'), - 'A `section` must have the class `picture`.', - ); - + // test the p inside the section assert.strictEqual( paragraphs.length, 1, @@ -73,9 +71,10 @@ QUnit.test( assert.strictEqual( paragraphs[0].className, 'title', - 'The first paragraph must have the class `title`', + 'The paragraph must have the class `title`', ); + // test the a inside the section assert.strictEqual( as.length, 1, @@ -91,6 +90,7 @@ QUnit.test( 'The `` element must have its `href` attribute set to the good value.', ); + // test the image inside the a assert.strictEqual( images.length, 1, @@ -107,6 +107,7 @@ QUnit.test( '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, @@ -145,7 +146,11 @@ QUnit.test( }]; window.forTesting.putPicturesInPage(data); - assert.strictEqual(elM.childElementCount, (2+baseMainChildrenNumber), 'After passing two image entity to the function, there must be two sections.'); + 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]; @@ -154,20 +159,81 @@ QUnit.test( images = as[0].querySelectorAll('img'); deletes = section.querySelectorAll('div'); - assert.strictEqual(listOfSections.length, 2); - assert.ok(section.classList.contains('picture')); - assert.strictEqual(paragraphs.length, 1); - assert.strictEqual(paragraphs[0].className, 'title'); - assert.strictEqual(as.length, 1); - assert.ok(as[0].classList.contains('img')); - assert.strictEqual(as[0].href, data[1].file); - assert.strictEqual(images.length, 1); - assert.strictEqual(images[0].src, data[1].file); - assert.strictEqual(images[0].alt, data[1].title); - assert.strictEqual(deletes.length, 1); - assert.ok(deletes[0].classList.contains('delete')); - assert.strictEqual(deletes[0].textContent, 'X'); - assert.strictEqual(deletes[0].dataset.id, String(data[1].id)); - assert.strictEqual(deletes[0].onclick, window.forTesting.requestDelete); + 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/package.json b/package.json index 8f992ab..a76d3f0 100644 --- a/package.json +++ b/package.json @@ -21,15 +21,12 @@ "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.5.1", - "nodemon": "^1.12.1", - "qnit": "^0.13.0", - "qunit": "^0.9.1" + "nodemon": "^1.12.1" }, "repository": "https://github.com/portsoc/ws_api.git", "dependencies": { "express": "^4.16.2", "multer": "^1.3.0", - "mysql2": "^1.5.1", - "node-fetch": "^1.7.3" + "mysql2": "^1.5.1" } } From 48ee7ad1678c5fdba6f1e45f8faca476b7bb73d1 Mon Sep 17 00:00:00 2001 From: Valariael Date: Wed, 25 Apr 2018 10:26:15 +0100 Subject: [PATCH 3/3] eslint fixes --- examples/tests/client-tests.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/tests/client-tests.js b/examples/tests/client-tests.js index 551ae9f..7124780 100644 --- a/examples/tests/client-tests.js +++ b/examples/tests/client-tests.js @@ -1,7 +1,9 @@ 'use strict'; +/* global QUnit */ + // replacing the original fetch so we can test the functions wihtout needing a server -fetch = () => { +fetch = () => { // eslint-disable-line no-global-assign return { ok: true, json() { return []; },