From 9006451c2c70dc642fe6cc343bb9bccdabc35f37 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Tue, 29 Jan 2019 18:34:06 +0200 Subject: [PATCH 01/14] Tests: Don't check if the Proxy API is defined --- test/index.js | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/test/index.js b/test/index.js index 5671352..6a10c1c 100644 --- a/test/index.js +++ b/test/index.js @@ -222,32 +222,21 @@ test('Test that `isElement` is defined', function (t) { }); // -- Test the Proxy API -- -test('Test that the Proxy API is defined', function (t) { +test('Test that the Proxy API works', function (t) { if (typeof Proxy === 'undefined') { t.plan(1) t.pass('Proxies are not supported in the current environment'); } else { - var proxyCrel = crel.proxy; + // I'm not proficient with proxies, so + // TODO: Add #moar-tests + t.plan(4); - t.plan(proxyCrel ? 2 : 1); + var testElement = crel.proxy.div({'class': 'test'}, + crel.proxy.span('test')); - t.ok(proxyCrel, 'The Proxy API is defined'); - - if (proxyCrel) { - // Do further tests - t.test('Test that the Proxy API works', function (ts) { - // I'm not proficient with proxies, so - // TODO: Add #moar-tests - ts.plan(4); - - var testElement = proxyCrel.div({'class': 'test'}, - proxyCrel.span('test')); - - ts.equal(testElement.className, 'test'); - ts.equal(testElement.childNodes.length, 1); - ts.equal(testElement.childNodes[0].tagName, 'SPAN'); - ts.equal(testElement.childNodes[0].textContent, 'test'); - }); - } + t.equal(testElement.className, 'test'); + t.equal(testElement.childNodes.length, 1); + t.equal(testElement.childNodes[0].tagName, 'SPAN'); + t.equal(testElement.childNodes[0].textContent, 'test'); } }); From 80e3264ce61b2d848e172f5fecfcae66e5e8ff30 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 02:44:22 +0200 Subject: [PATCH 02/14] Tests: Import Crel to global context for manual testing --- test/test.html | 1 + 1 file changed, 1 insertion(+) diff --git a/test/test.html b/test/test.html index d6b99f3..cb90462 100644 --- a/test/test.html +++ b/test/test.html @@ -12,6 +12,7 @@ }; + From 47ed4bf842925e37415de1fd5dec9e820e9f6ac7 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 02:48:16 +0200 Subject: [PATCH 03/14] Crel: Use `target` instead of `crel` in proxy interface --- crel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crel.js b/crel.js index 9073057..e8d06c6 100644 --- a/crel.js +++ b/crel.js @@ -74,8 +74,8 @@ This might make it harder to read at times, but the code's intention should be t // Expose proxy interface crel.proxy = new Proxy(crel, { get: (target, key) => { - !(key in crel) && (crel[key] = crel.bind(null, key)); - return crel[key]; + !(key in target) && (target[key] = target.bind(null, key)); + return target[key]; } }); // Export crel From 265760dc54df782d7f8b28ebb461116ff6162b58 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 02:49:54 +0200 Subject: [PATCH 04/14] Crel: Turn `crel` into a `Proxy` --- crel.js | 86 +++++++++++++++++++++++++++------------------------------ 1 file changed, 41 insertions(+), 45 deletions(-) diff --git a/crel.js b/crel.js index e8d06c6..8ef4b1e 100644 --- a/crel.js +++ b/crel.js @@ -9,7 +9,6 @@ This might make it harder to read at times, but the code's intention should be t // IIFE our function ((exporter) => { - // Define our function and its properties // These strings are used multiple times, so this makes things smaller once compiled const func = 'function', isNodeString = 'isNode', @@ -28,56 +27,53 @@ This might make it harder to read at times, but the code's intention should be t element.appendChild(child); } } - }; - // - function crel (element, settings) { - // Define all used variables / shortcuts here, to make things smaller once compiled - let args = arguments, // Note: assigned to a variable to assist compilers. - index = 1, - key, - attribute; - // If first argument is an element, use it as is, otherwise treat it as a tagname - element = crel.isElement(element) ? element : d.createElement(element); - // Check if second argument is a settings object - if (isType(settings, 'object') && !crel[isNodeString](settings) && !Array.isArray(settings)) { - // Don't treat settings as a child - index++; - // Go through settings / attributes object, if it exists - for (key in settings) { - // Store the attribute into a variable, before we potentially modify the key - attribute = settings[key]; - // Get mapped key / function, if one exists - key = crel.attrMap[key] || key; - // Note: We want to prioritise mapping over properties - if (isType(key, func)) { - key(element, attribute); - } else if (isType(attribute, func)) { // ex. onClick property - element[key] = attribute; - } else { - // Set the element attribute - element.setAttribute(key, attribute); + }, + // Define our function as a proxy interface + crel = new Proxy(function (element, settings) { + // Define all used variables / shortcuts here, to make things smaller once compiled + let args = arguments, // Note: assigned to a variable to assist compilers. + index = 1, + key, + attribute; + // If first argument is an element, use it as is, otherwise treat it as a tagname + element = crel.isElement(element) ? element : d.createElement(element); + // Check if second argument is a settings object + if (isType(settings, 'object') && !crel[isNodeString](settings) && !Array.isArray(settings)) { + // Don't treat settings as a child + index++; + // Go through settings / attributes object, if it exists + for (key in settings) { + // Store the attribute into a variable, before we potentially modify the key + attribute = settings[key]; + // Get mapped key / function, if one exists + key = crel.attrMap[key] || key; + // Note: We want to prioritise mapping over properties + if (isType(key, func)) { + key(element, attribute); + } else if (isType(attribute, func)) { // ex. onClick property + element[key] = attribute; + } else { + // Set the element attribute + element.setAttribute(key, attribute); + } } } - } - // Loop through all arguments, if any, and append them to our element if they're not `null` - for (; index < args.length; index++) { - appendChild(element, args[index]); - } - - return element; - } + // Loop through all arguments, if any, and append them to our element if they're not `null` + for (; index < args.length; index++) { + appendChild(element, args[index]); + } - // Used for mapping attribute keys to supported versions in bad browsers, or to custom functionality + return element; + }, {// Binds specific tagnames to crel function calls with that tag as the first argument + get: (target, key) => { + !(key in target) && (target[key] = target.bind(null, key)); + return target[key]; + } + }); + // Used for mapping attribute keys to custom functionality, or to supported versions in bad browsers crel.attrMap = {}; crel.isElement = object => object instanceof Element; crel[isNodeString] = node => node instanceof Node; - // Expose proxy interface - crel.proxy = new Proxy(crel, { - get: (target, key) => { - !(key in target) && (target[key] = target.bind(null, key)); - return target[key]; - } - }); // Export crel exporter(crel, func); })((product, func) => { From e7ea04f5f83f420157fc0ad6c5d9dcffd9d8d654 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 03:11:42 +0200 Subject: [PATCH 05/14] Crel: Support old `crel.proxy` calls --- crel.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/crel.js b/crel.js index 8ef4b1e..018ace3 100644 --- a/crel.js +++ b/crel.js @@ -12,6 +12,7 @@ This might make it harder to read at times, but the code's intention should be t // These strings are used multiple times, so this makes things smaller once compiled const func = 'function', isNodeString = 'isNode', + proxyString = 'proxy', d = document, // Helper functions used throughout the script isType = (object, type) => typeof object === type, @@ -66,14 +67,21 @@ This might make it harder to read at times, but the code's intention should be t return element; }, {// Binds specific tagnames to crel function calls with that tag as the first argument get: (target, key) => { - !(key in target) && (target[key] = target.bind(null, key)); - return target[key]; + if (key in target) { + return target[key]; + } + if (!(key in target[proxyString])) { + target[proxyString][key] = target.bind(null, key); + } + return target[proxyString][key]; } }); // Used for mapping attribute keys to custom functionality, or to supported versions in bad browsers crel.attrMap = {}; crel.isElement = object => object instanceof Element; crel[isNodeString] = node => node instanceof Node; + // Bound functions are "cached" here for legacy support and to keep Crels internal structure clean + crel[proxyString] = new Proxy({}, { get: (target, key) => target[key] || crel[key] }); // Export crel exporter(crel, func); })((product, func) => { From 4cd4f29edfe01c82137c69fe6d09572915384ea6 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 03:34:35 +0200 Subject: [PATCH 06/14] Crel: Add tag / key transformations --- crel.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/crel.js b/crel.js index 018ace3..bb1798b 100644 --- a/crel.js +++ b/crel.js @@ -13,6 +13,7 @@ This might make it harder to read at times, but the code's intention should be t const func = 'function', isNodeString = 'isNode', proxyString = 'proxy', + tagTransformString = 'tagTransform', d = document, // Helper functions used throughout the script isType = (object, type) => typeof object === type, @@ -70,6 +71,7 @@ This might make it harder to read at times, but the code's intention should be t if (key in target) { return target[key]; } + key = target[tagTransformString](key); if (!(key in target[proxyString])) { target[proxyString][key] = target.bind(null, key); } @@ -82,6 +84,8 @@ This might make it harder to read at times, but the code's intention should be t crel[isNodeString] = node => node instanceof Node; // Bound functions are "cached" here for legacy support and to keep Crels internal structure clean crel[proxyString] = new Proxy({}, { get: (target, key) => target[key] || crel[key] }); + // Transforms tags on call, to for example allow dashes in tags + crel[tagTransformString] = key => key; // Export crel exporter(crel, func); })((product, func) => { From e9bab6ff2865e757cdf31f399a0bcea6088a6e16 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Thu, 31 Jan 2019 04:09:24 +0200 Subject: [PATCH 07/14] Crel: Turn handler into an arrow function --- crel.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/crel.js b/crel.js index bb1798b..14e6cd6 100644 --- a/crel.js +++ b/crel.js @@ -17,7 +17,7 @@ This might make it harder to read at times, but the code's intention should be t d = document, // Helper functions used throughout the script isType = (object, type) => typeof object === type, - // Recursively appends children to given element. As a text node if not already an element + // Recursively appends children to given element if they're not `null`. As a text node if not already an element appendChild = (element, child) => { if (child !== null) { if (Array.isArray(child)) { // Support (deeply) nested child elements @@ -31,10 +31,9 @@ This might make it harder to read at times, but the code's intention should be t } }, // Define our function as a proxy interface - crel = new Proxy(function (element, settings) { + crel = new Proxy((element, ...children) => { // Define all used variables / shortcuts here, to make things smaller once compiled - let args = arguments, // Note: assigned to a variable to assist compilers. - index = 1, + let settings = children[0], key, attribute; // If first argument is an element, use it as is, otherwise treat it as a tagname @@ -42,7 +41,7 @@ This might make it harder to read at times, but the code's intention should be t // Check if second argument is a settings object if (isType(settings, 'object') && !crel[isNodeString](settings) && !Array.isArray(settings)) { // Don't treat settings as a child - index++; + children.shift(); // Go through settings / attributes object, if it exists for (key in settings) { // Store the attribute into a variable, before we potentially modify the key @@ -60,11 +59,8 @@ This might make it harder to read at times, but the code's intention should be t } } } - // Loop through all arguments, if any, and append them to our element if they're not `null` - for (; index < args.length; index++) { - appendChild(element, args[index]); - } - + // Append remaining children to element and return it + appendChild(element, children); return element; }, {// Binds specific tagnames to crel function calls with that tag as the first argument get: (target, key) => { From 0309b125f7e8aedbcc59d79d50c44d10a9db5343 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sat, 2 Feb 2019 16:57:00 +0200 Subject: [PATCH 08/14] Tests: Add test for tag / key transformation --- test/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/index.js b/test/index.js index 6a10c1c..84ad205 100644 --- a/test/index.js +++ b/test/index.js @@ -240,3 +240,17 @@ test('Test that the Proxy API works', function (t) { t.equal(testElement.childNodes[0].textContent, 'test'); } }); + +// -- Test the Proxy APIs features -- +test('Test the proxy APIs tag transformations', (t) => { + t.plan(4); + + crel.tagTransform = (key) => key.replace(/([0-9a-z])([A-Z])/g, '$1-$2').toLowerCase(); + let testElement = crel.myTable(crel.span('test')); + + t.equal(testElement.tagName, 'MY-TABLE', + 'tagname had dashes added to it'); + t.equal(testElement.childNodes.length, 1); + t.equal(testElement.childNodes[0].tagName, 'SPAN'); + t.equal(testElement.childNodes[0].textContent, 'test'); +}); From 0379094238c2851cfba0bee8e2783a4245038d48 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sun, 3 Feb 2019 00:11:25 +0200 Subject: [PATCH 09/14] README: Update proxy example --- README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4ef8818..626b308 100644 --- a/README.md +++ b/README.md @@ -124,8 +124,6 @@ _But don't._ If you are using Crel in an environment that supports Proxies, you can also use the new API: ```javascript -let crel = require('crel').proxy; - let element = crel.div( crel.h1('Crello World!'), crel.p('This is crel'), @@ -133,6 +131,17 @@ let element = crel.div( ); ``` +If you want to transform tags to for example get dashes in them, you can define a `tagTransform` function: + +```javascript +// Adds dashes on camelCase, ex: `camelCase` -> `camel-case` +crel.tagTransform = key => key.replace(/([0-9a-z])([A-Z])/g, '$1-$2'); + +let element = crel.myTag('Crello World!'); + +console.log(element.tagName); // my-tag +``` + # Browser support Crel uses ES6 features, so it'll work in all evergreen browsers. From 21a9dd1f1c35759be34d68ee7436c6bef2ee8f4c Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sun, 3 Feb 2019 00:22:26 +0200 Subject: [PATCH 10/14] Rebuild crel.min.js --- crel.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crel.min.js b/crel.min.js index d17ea8c..ade5193 100644 --- a/crel.min.js +++ b/crel.min.js @@ -1 +1 @@ -(e=>{const t="function",n="isNode",r=document,o=(e,t)=>typeof e===t,i=(e,t)=>{null!==t&&(Array.isArray(t)?t.map(t=>i(e,t)):(a[n](t)||(t=r.createTextNode(t)),e.appendChild(t)))};function a(e,f){let l,d,s=arguments,c=1;if(e=a.isElement(e)?e:r.createElement(e),o(f,"object")&&!a[n](f)&&!Array.isArray(f))for(l in c++,f)d=f[l],l=a.attrMap[l]||l,o(l,t)?l(e,d):o(d,t)?e[l]=d:e.setAttribute(l,d);for(;ce instanceof Element),a[n]=(e=>e instanceof Node),a.proxy=new Proxy(a,{get:(e,t)=>(!(t in a)&&(a[t]=a.bind(null,t)),a[t])}),e(a,t)})((e,t)=>{"object"==typeof exports?module.exports=e:typeof define===t&&define.amd?define(e):this.crel=e}); \ No newline at end of file +(e=>{const t="function",n="isNode",r="proxy",o="tagTransform",i=document,a=(e,t)=>typeof e===t,s=(e,t)=>{null!==t&&(Array.isArray(t)?t.map(t=>s(e,t)):(f[n](t)||(t=i.createTextNode(t)),e.appendChild(t)))},f=new Proxy((e,...r)=>{let o,d,l=r[0];if(e=f.isElement(e)?e:i.createElement(e),a(l,"object")&&!f[n](l)&&!Array.isArray(l))for(o in r.shift(),l)d=l[o],a(o=f.attrMap[o]||o,t)?o(e,d):a(d,t)?e[o]=d:e.setAttribute(o,d);return s(e,r),e},{get:(e,t)=>t in e?e[t]:((t=e[o](t))in e[r]||(e[r][t]=e.bind(null,t)),e[r][t])});f.attrMap={},f.isElement=(e=>e instanceof Element),f[n]=(e=>e instanceof Node),f[r]=new Proxy({},{get:(e,t)=>e[t]||f[t]}),f[o]=(e=>e),e(f,t)})((e,t)=>{"object"==typeof exports?module.exports=e:typeof define===t&&define.amd?define(e):this.crel=e}); \ No newline at end of file From a7b47d9722f1f20d3d38b6baa7b12de04e457097 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sat, 2 Feb 2019 17:12:13 +0200 Subject: [PATCH 11/14] Tests: Store most of the tests in a `message` - `test function` object --- test/index.js | 308 +++++++++++++++++++++++++------------------------- 1 file changed, 152 insertions(+), 156 deletions(-) diff --git a/test/index.js b/test/index.js index 84ad205..8c0b64f 100644 --- a/test/index.js +++ b/test/index.js @@ -1,159 +1,155 @@ var crel = require('../'), test = require('tape'); -// -- Test element creation -- -test('Create an element with no arguments', function (t) { - t.plan(2); - - var testElement = crel('div'); - - t.ok(testElement instanceof HTMLElement, - 'element is an instance of `HTMLElement`'); - t.equal(testElement.tagName, 'DIV', - 'element is an instance of `div`'); -}); - -test('Create an element with no arguments, using an invalid tag name', function (t) { - t.plan(2); - - var testElement = crel('invalidtagname'); - - t.ok(testElement instanceof HTMLUnknownElement, - 'element is an instance of `HTMLUnknownElement `'); - t.equal(testElement.tagName, 'INVALIDTAGNAME', - 'element is an instance of `invalidtagname`'); -}); - -test('Crel doesn\'t modify existing elements if not instructed', function (t) { - t.plan(1); - - var testElement = document.createElement('div'); - var testedElement = crel(testElement); - - t.ok(testElement.isSameNode(testedElement), - 'element is still the same'); -}); - -// -- Test attribute handling -- -test('Create an element with simple attributes', function (t) { - t.plan(2); - - var testElement = crel('div', {'class': 'test', id: 'test'}); - - t.equal(testElement.className, 'test', - 'element has a `test` class'); - t.equal(testElement.getAttribute('id'), 'test', - 'element has a `test` id'); -}); - -test('Add attributes to an already existing element', function (t) { - t.plan(2); - - var testElement = document.createElement('div'); - crel(testElement, {'class': 'test', id: 'test'}); - - t.equal(testElement.className, 'test', - 'element has a `test` class'); - t.equal(testElement.getAttribute('id'), 'test', - 'element has a `test` id'); -}); - -test('Modify attributes of an already existing element', function (t) { - t.plan(2); - - var testElement = document.createElement('div'); - testElement.setAttribute('class', 'test'); - testElement.setAttribute('id', 'test'); - crel(testElement, {'class': 'testier', id: 'testier'}); - - t.equal(testElement.getAttribute('class'), 'testier', - 'elements class was changed'); - t.equal(testElement.getAttribute('id'), 'testier', - 'elements id was changed'); -}); - -test('Add an `onEvent` property to an element', function (t) { - t.plan(1); - - var testElement = crel('button', { - onclick: function () { - t.pass('onClick event triggered'); - } - }); - - testElement.click(); -}); - -test('Add an `onEvent` property to an element through attribute mapping', function (t) { - t.plan(1); - - crel.attrMap.on = function (element, value) { - for (var eventName in value) { - element.addEventListener(eventName, value[eventName]); - } - }; - - var testElement = crel('img', { on: { - click: function () { - t.pass('onClick event triggered'); - } - }}); - - testElement.click(); -}); - -// -- Test child node handling -- -test('Create an element with a child element', function (t) { - t.plan(2); - - var testElement = crel('div', document.createElement('p')); - - t.equal(testElement.childNodes.length, 1, - 'element has a child element'); - t.equal(testElement.childNodes[0].tagName, 'P', - 'child element is an instance of `p`'); -}); - -test('Create an element with a child text node', function (t) { - t.plan(2); - - var testElement = crel('div', document.createTextNode('test')); - - t.equal(testElement.childNodes.length, 1, - 'element has a child element'); - t.equal(testElement.childNodes[0].nodeType, 3, - 'child element is a text node'); -}); - -test('Create an element with an array of children', function (t) { - t.plan(6); - // TODO: make these more compact / robust - var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; - var testElement = crel('div', testArray); - - t.equal(testElement.childNodes.length, 3, - 'element has three children'); - t.equal(testElement.childNodes[0].tagName, 'P'); - t.equal(testElement.childNodes[1].nodeType, 3); - t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); - t.equal(testElement.childNodes[2].nodeType, 3); - t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); -}); +// All tests in message - test function pairs +const tests = { + // -- Test element creation -- + 'Create an element with no arguments': (t) => { + t.plan(2); + + var testElement = crel('div'); + + t.ok(testElement instanceof HTMLElement, + 'element is an instance of `HTMLElement`'); + t.equal(testElement.tagName, 'DIV', + 'element is an instance of `div`'); + }, + 'Create an element with no arguments, using an invalid tag name': (t) => { + t.plan(2); + + var testElement = crel('invalidtagname'); + + t.ok(testElement instanceof HTMLUnknownElement, + 'element is an instance of `HTMLUnknownElement `'); + t.equal(testElement.tagName, 'INVALIDTAGNAME', + 'element is an instance of `invalidtagname`'); + }, + 'Crel doesn\'t modify existing elements if not instructed': (t) => { + t.plan(1); + + var testElement = document.createElement('div'); + var testedElement = crel(testElement); + + t.ok(testElement.isSameNode(testedElement), + 'element is still the same'); + }, + // -- Test attribute handling -- + 'Create an element with simple attributes': (t) => { + t.plan(2); + + var testElement = crel('div', {class: 'test', id: 'test'}); + + t.equal(testElement.className, 'test', + 'element has a `test` class'); + t.equal(testElement.getAttribute('id'), 'test', + 'element has a `test` id'); + }, + 'Add attributes to an already existing element': (t) => { + t.plan(2); + + var testElement = document.createElement('div'); + crel(testElement, {class: 'test', id: 'test'}); + + t.equal(testElement.className, 'test', + 'element has a `test` class'); + t.equal(testElement.getAttribute('id'), 'test', + 'element has a `test` id'); + }, + 'Modify attributes of an already existing element': (t) => { + t.plan(2); + + var testElement = document.createElement('div'); + testElement.setAttribute('class', 'test'); + testElement.setAttribute('id', 'test'); + crel(testElement, {class: 'testier', id: 'testier'}); + + t.equal(testElement.getAttribute('class'), 'testier', + 'elements class was changed'); + t.equal(testElement.getAttribute('id'), 'testier', + 'elements id was changed'); + }, + 'Add an `onEvent` property to an element': (t) => { + t.plan(1); + + var testElement = crel('button', { + onclick: function () { + t.pass('onClick event triggered'); + } + }); -test('Create an element with a deep array of children', function (t) { - t.plan(6); - // TODO: make these more compact / robust - var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; - var testElement = crel('div', [[testArray]]); - - t.equal(testElement.childNodes.length, 3, - 'element has three children'); - t.equal(testElement.childNodes[0].tagName, 'P'); - t.equal(testElement.childNodes[1].nodeType, 3); - t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); - t.equal(testElement.childNodes[2].nodeType, 3); - t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); -}); + testElement.click(); + }, + 'Add an `onEvent` property to an element through attribute mapping': (t) => { + t.plan(1); + + crel.attrMap.on = function (element, value) { + for (var eventName in value) { + element.addEventListener(eventName, value[eventName]); + } + }; + + var testElement = crel('img', { on: { + click: function () { + t.pass('onClick event triggered'); + } + }}); + + testElement.click(); + }, + // -- Test child node handling -- + 'Create an element with a child element': (t) => { + t.plan(2); + + var testElement = crel('div', document.createElement('p')); + + t.equal(testElement.childNodes.length, 1, + 'element has a child element'); + t.equal(testElement.childNodes[0].tagName, 'P', + 'child element is an instance of `p`'); + }, + 'Create an element with a child text node': (t) => { + t.plan(2); + + var testElement = crel('div', document.createTextNode('test')); + + t.equal(testElement.childNodes.length, 1, + 'element has a child element'); + t.equal(testElement.childNodes[0].nodeType, 3, + 'child element is a text node'); + }, + 'Create an element with an array of children': (t) => { + t.plan(6); + // TODO: make these more compact / robust + var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; + var testElement = crel('div', testArray); + + t.equal(testElement.childNodes.length, 3, + 'element has three children'); + t.equal(testElement.childNodes[0].tagName, 'P'); + t.equal(testElement.childNodes[1].nodeType, 3); + t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); + t.equal(testElement.childNodes[2].nodeType, 3); + t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); + }, + 'Create an element with a deep array of children': (t) => { + t.plan(6); + // TODO: make these more compact / robust + var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; + var testElement = crel('div', [[testArray]]); + + t.equal(testElement.childNodes.length, 3, + 'element has three children'); + t.equal(testElement.childNodes[0].tagName, 'P'); + t.equal(testElement.childNodes[1].nodeType, 3); + t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); + t.equal(testElement.childNodes[2].nodeType, 3); + t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); + } +}; + +for (const message in tests) { + test(message, tests[message]); +} // -- Test exposed methods -- test('Test that `isNode` is defined', function (t) { @@ -229,15 +225,15 @@ test('Test that the Proxy API works', function (t) { } else { // I'm not proficient with proxies, so // TODO: Add #moar-tests - t.plan(4); + t.plan(4); var testElement = crel.proxy.div({'class': 'test'}, crel.proxy.span('test')); t.equal(testElement.className, 'test'); - t.equal(testElement.childNodes.length, 1); - t.equal(testElement.childNodes[0].tagName, 'SPAN'); - t.equal(testElement.childNodes[0].textContent, 'test'); + t.equal(testElement.childNodes.length, 1); + t.equal(testElement.childNodes[0].tagName, 'SPAN'); + t.equal(testElement.childNodes[0].textContent, 'test'); } }); From 1315d955c62a0be0b2a9b23c88a839ada5799600 Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sat, 2 Feb 2019 22:00:04 +0200 Subject: [PATCH 12/14] Tests: Test object list --- test/index.js | 497 ++++++++++++++++++++++++++------------------------ 1 file changed, 255 insertions(+), 242 deletions(-) diff --git a/test/index.js b/test/index.js index 8c0b64f..17ae8dd 100644 --- a/test/index.js +++ b/test/index.js @@ -1,252 +1,265 @@ -var crel = require('../'), - test = require('tape'); +const test = require('tape'); +const crel = require('../crel.js'); // All tests in message - test function pairs -const tests = { +const tests = [ // -- Test element creation -- - 'Create an element with no arguments': (t) => { - t.plan(2); - - var testElement = crel('div'); - - t.ok(testElement instanceof HTMLElement, - 'element is an instance of `HTMLElement`'); - t.equal(testElement.tagName, 'DIV', - 'element is an instance of `div`'); + { + message: 'Create an element with no arguments', + test: (t) => { + let testElement = crel('div'); + + t.ok(testElement instanceof HTMLElement, + 'element is an instance of `HTMLElement`'); + t.equal(testElement.tagName, 'DIV', + 'element is an instance of `div`'); + }, + checks: 2, + proxyable: true }, - 'Create an element with no arguments, using an invalid tag name': (t) => { - t.plan(2); - - var testElement = crel('invalidtagname'); - - t.ok(testElement instanceof HTMLUnknownElement, - 'element is an instance of `HTMLUnknownElement `'); - t.equal(testElement.tagName, 'INVALIDTAGNAME', - 'element is an instance of `invalidtagname`'); + { + message: 'Create an element with no arguments, using an invalid tag name', + test: (t) => { + let testElement = crel('invalidtagname'); + + t.ok(testElement instanceof HTMLUnknownElement, + 'element is an instance of `HTMLUnknownElement `'); + t.equal(testElement.tagName, 'INVALIDTAGNAME', + 'element is an instance of `invalidtagname`'); + }, + checks: 2, + proxyable: true }, - 'Crel doesn\'t modify existing elements if not instructed': (t) => { - t.plan(1); - - var testElement = document.createElement('div'); - var testedElement = crel(testElement); - - t.ok(testElement.isSameNode(testedElement), - 'element is still the same'); + { + message: 'Crel doesn\'t modify existing elements if not instructed', + test: (t) => { + let testElement = document.createElement('div'); + let testedElement = crel(testElement); + + t.ok(testElement.isSameNode(testedElement), + 'element is still the same'); + }, + checks: 1, + proxyable: false }, // -- Test attribute handling -- - 'Create an element with simple attributes': (t) => { - t.plan(2); - - var testElement = crel('div', {class: 'test', id: 'test'}); - - t.equal(testElement.className, 'test', - 'element has a `test` class'); - t.equal(testElement.getAttribute('id'), 'test', - 'element has a `test` id'); + { + message: 'Create an element with simple attributes', + test: (t) => { + let testElement = crel('div', {class: 'test', id: 'test'}); + + t.equal(testElement.className, 'test', + 'element has a `test` class'); + t.equal(testElement.getAttribute('id'), 'test', + 'element has a `test` id'); + }, + checks: 2, + proxyable: true }, - 'Add attributes to an already existing element': (t) => { - t.plan(2); - - var testElement = document.createElement('div'); - crel(testElement, {class: 'test', id: 'test'}); - - t.equal(testElement.className, 'test', - 'element has a `test` class'); - t.equal(testElement.getAttribute('id'), 'test', - 'element has a `test` id'); - }, - 'Modify attributes of an already existing element': (t) => { - t.plan(2); - - var testElement = document.createElement('div'); - testElement.setAttribute('class', 'test'); - testElement.setAttribute('id', 'test'); - crel(testElement, {class: 'testier', id: 'testier'}); - - t.equal(testElement.getAttribute('class'), 'testier', - 'elements class was changed'); - t.equal(testElement.getAttribute('id'), 'testier', - 'elements id was changed'); - }, - 'Add an `onEvent` property to an element': (t) => { - t.plan(1); - - var testElement = crel('button', { - onclick: function () { - t.pass('onClick event triggered'); - } - }); - - testElement.click(); - }, - 'Add an `onEvent` property to an element through attribute mapping': (t) => { - t.plan(1); - - crel.attrMap.on = function (element, value) { - for (var eventName in value) { - element.addEventListener(eventName, value[eventName]); - } - }; - - var testElement = crel('img', { on: { - click: function () { - t.pass('onClick event triggered'); - } - }}); - - testElement.click(); - }, - // -- Test child node handling -- - 'Create an element with a child element': (t) => { - t.plan(2); - - var testElement = crel('div', document.createElement('p')); - - t.equal(testElement.childNodes.length, 1, - 'element has a child element'); - t.equal(testElement.childNodes[0].tagName, 'P', - 'child element is an instance of `p`'); - }, - 'Create an element with a child text node': (t) => { - t.plan(2); - - var testElement = crel('div', document.createTextNode('test')); - - t.equal(testElement.childNodes.length, 1, - 'element has a child element'); - t.equal(testElement.childNodes[0].nodeType, 3, - 'child element is a text node'); - }, - 'Create an element with an array of children': (t) => { - t.plan(6); - // TODO: make these more compact / robust - var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; - var testElement = crel('div', testArray); - - t.equal(testElement.childNodes.length, 3, - 'element has three children'); - t.equal(testElement.childNodes[0].tagName, 'P'); - t.equal(testElement.childNodes[1].nodeType, 3); - t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); - t.equal(testElement.childNodes[2].nodeType, 3); - t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); - }, - 'Create an element with a deep array of children': (t) => { - t.plan(6); - // TODO: make these more compact / robust - var testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; - var testElement = crel('div', [[testArray]]); - - t.equal(testElement.childNodes.length, 3, - 'element has three children'); - t.equal(testElement.childNodes[0].tagName, 'P'); - t.equal(testElement.childNodes[1].nodeType, 3); - t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); - t.equal(testElement.childNodes[2].nodeType, 3); - t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); - } -}; - -for (const message in tests) { - test(message, tests[message]); -} - -// -- Test exposed methods -- -test('Test that `isNode` is defined', function (t) { - // Assign into a variable to help readability - var isDefined = crel.isNode; - - t.plan(isDefined ? 2 : 1); - - t.ok(isDefined, '`isNode` is defined'); - - if (isDefined) { - // Do further tests - t.test('Test `isNode` against various arguments', function (ts) { - var testInputInvalid = ['', null, undefined, 'non-empty', - 42, 4.2, {'key': 'value'}, function () { return 'hi'; }]; - - var testInputValid = [document, - document.createElement('div'), - document.createTextNode('test'), - document.createElement('invalidtagname'), - document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - document.createElementNS('http://www.w3.org/1998/mathml', 'element')]; - - ts.plan(testInputInvalid.lenght + testInputValid.lenght); // Test all values in arrays - - testInputInvalid.map(function (value) { - ts.notOk(crel.isNode(value), '`' + value + '` is not a Node'); - }); - testInputValid.map(function (value) { - ts.ok(crel.isNode(value), '`' + value + '` is a Node'); - }); - }); - } -}); - -test('Test that `isElement` is defined', function (t) { - // Assign into a variable to help readability - var isDefined = crel.isElement; - - t.plan(isDefined ? 2 : 1); - - t.ok(isDefined, '`isElement` is defined'); - - if (isDefined) { - // Do further tests - t.test('Test `isElement` against various arguments', function (ts) { - var testInputInvalid = ['', null, undefined, 'non-empty', - 42, 4.2, {'key': 'value'}, function () {}, - document.createTextNode('test'), document]; - - var testInputValid = [document.createElement('div'), - document.createElement('invalidtagname'), - document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - document.createElementNS('http://www.w3.org/1998/mathml', 'element')]; - - ts.plan(testInputInvalid.lenght + testInputValid.lenght); // Test all values in arrays - - testInputInvalid.map(function (value) { - ts.notOk(crel.isElement(value), '`' + value + '` is not an Element'); - }); - testInputValid.map(function (value) { - ts.ok(crel.isElement(value), '`' + value + '` is an Element'); - }); - }); - } -}); - -// -- Test the Proxy API -- -test('Test that the Proxy API works', function (t) { - if (typeof Proxy === 'undefined') { - t.plan(1) - t.pass('Proxies are not supported in the current environment'); - } else { - // I'm not proficient with proxies, so - // TODO: Add #moar-tests - t.plan(4); - - var testElement = crel.proxy.div({'class': 'test'}, - crel.proxy.span('test')); - - t.equal(testElement.className, 'test'); - t.equal(testElement.childNodes.length, 1); - t.equal(testElement.childNodes[0].tagName, 'SPAN'); - t.equal(testElement.childNodes[0].textContent, 'test'); + { + message: 'Add attributes to an already existing element', + test: (t) => { + let testElement = document.createElement('div'); + crel(testElement, {class: 'test', id: 'test'}); + + t.equal(testElement.className, 'test', + 'element has a `test` class'); + t.equal(testElement.getAttribute('id'), 'test', + 'element has a `test` id'); + }, + checks: 2, + proxyable: false + }, + { + message: 'Modify attributes of an already existing element', + test: (t) => { + let testElement = document.createElement('div'); + testElement.setAttribute('class', 'test'); + testElement.setAttribute('id', 'test'); + crel(testElement, {class: 'testier', id: 'testier'}); + + t.equal(testElement.getAttribute('class'), 'testier', + 'elements class was changed'); + t.equal(testElement.getAttribute('id'), 'testier', + 'elements id was changed'); + }, + checks: 2, + proxyable: false + }, + { + message: 'Add an `onEvent` property to an element', + test: (t) => { + let testElement = crel('button', { + onclick: () => { + t.pass('onClick event triggered'); + } + }); + + testElement.click(); + }, + checks: 1, + proxyable: true + }, + { + message: 'Add an `onEvent` property to an element through attribute mapping', + test: (t) => { + crel.attrMap.on = (element, value) => { + for (const eventName in value) { + element.addEventListener(eventName, value[eventName]); + } + }; + + let testElement = crel('img', { on: { + click: () => { + t.pass('onClick event triggered'); + } + }}); + + testElement.click(); + }, + checks: 1, + proxyable: true + }, + // -- Test child node handling -- + { + message: 'Create an element with a child element', + test: (t) => { + let testElement = crel('div', document.createElement('p')); + + t.equal(testElement.childNodes.length, 1, + 'element has a child element'); + t.equal(testElement.childNodes[0].tagName, 'P', + 'child element is an instance of `p`'); + }, + checks: 2, + proxyable: true + }, + { + message: 'Create an element with a child text node', + test: (t) => { + let testElement = crel('div', document.createTextNode('test')); + + t.equal(testElement.childNodes.length, 1, + 'element has a child element'); + t.equal(testElement.childNodes[0].nodeType, 3, + 'child element is a text node'); + }, + checks: 2, + proxyable: true + }, + { + message: 'Create an element with an array of children', + test: (t) => { + // TODO: make these more compact / robust + const testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; + let testElement = crel('div', testArray); + + t.equal(testElement.childNodes.length, 3, + 'element has three children'); + t.equal(testElement.childNodes[0].tagName, 'P'); + t.equal(testElement.childNodes[1].nodeType, 3); + t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); + t.equal(testElement.childNodes[2].nodeType, 3); + t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); + }, + checks: 6, + proxyable: true + }, + { + message: 'Create an element with a deep array of children', + test: (t) => { + // TODO: make these more compact / robust + const testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; + let testElement = crel('div', [[testArray]]); + + t.equal(testElement.childNodes.length, 3, + 'element has three children'); + t.equal(testElement.childNodes[0].tagName, 'P'); + t.equal(testElement.childNodes[1].nodeType, 3); + t.equal(testElement.childNodes[1].textContent, 'I\'m a text node!'); + t.equal(testElement.childNodes[2].nodeType, 3); + t.equal(testElement.childNodes[2].textContent, 'I will be a text node!'); + }, + checks: 6, + proxyable: true + }, + // -- Test the Proxy APIs features -- + { + message: 'Test the proxy APIs tag transformations', + test: (t) => { + crel.tagTransform = (key) => key.replace(/([0-9a-z])([A-Z])/g, '$1-$2').toLowerCase(); + let testElement = crel.myTable(crel.span('test')); + + t.ok(testElement.isEqualNode(crel.proxy.myTable(crel.proxy.span('test'))), + 'proxies produce the same results'); + t.equal(testElement.tagName, 'MY-TABLE', + 'tagname had dashes added to it'); + t.equal(testElement.childNodes.length, 1); + t.equal(testElement.childNodes[0].tagName, 'SPAN'); + t.equal(testElement.childNodes[0].textContent, 'test'); + }, + checks: 5, + proxyable: false + }, + // -- Test exposed methods -- + { + message: 'Test `isNode` against various arguments', + test: (t) => { + if (!crel.isNode) { + t.end('`isNode` is undefined'); + } + + const testInputInvalid = ['', null, undefined, 'non-empty', + 42, 4.2, {'key': 'value'}, () => { return 'hi'; }]; + + const testInputValid = [document, + document.createElement('div'), + document.createTextNode('test'), + document.createElement('invalidtagname'), + document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + document.createElementNS('http://www.w3.org/1998/mathml', 'element')]; + + testInputInvalid.map(value => { + t.notOk(crel.isNode(value), '`' + value + '` is not a Node'); + }); + testInputValid.map(value => { + t.ok(crel.isNode(value), '`' + value + '` is a Node'); + }); + }, + checks: 8 + 6, // Test all values in arrays + proxyable: false + }, + { + message: 'Test `isElement` against various arguments', + test: (t) => { + if (!crel.isElement) { + t.end('`isElement` is undefined'); + } + + const testInputInvalid = ['', null, undefined, 'non-empty', + 42, 4.2, {'key': 'value'}, () => { return 'hi'; }, + document.createTextNode('test'), document]; + + const testInputValid = [document.createElement('div'), + document.createElement('invalidtagname'), + document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + document.createElementNS('http://www.w3.org/1998/mathml', 'element')]; + + testInputInvalid.map(value => { + t.notOk(crel.isElement(value), '`' + value + '` is not an Element'); + }); + testInputValid.map(value => { + t.ok(crel.isElement(value), '`' + value + '` is an Element'); + }); + }, + checks: 10 + 4, // Test all values in arrays + proxyable: false } -}); - -// -- Test the Proxy APIs features -- -test('Test the proxy APIs tag transformations', (t) => { - t.plan(4); +]; - crel.tagTransform = (key) => key.replace(/([0-9a-z])([A-Z])/g, '$1-$2').toLowerCase(); - let testElement = crel.myTable(crel.span('test')); - - t.equal(testElement.tagName, 'MY-TABLE', - 'tagname had dashes added to it'); - t.equal(testElement.childNodes.length, 1); - t.equal(testElement.childNodes[0].tagName, 'SPAN'); - t.equal(testElement.childNodes[0].textContent, 'test'); -}); +for (const value of tests) { + test(value.message, (t) => { + t.plan(value.checks); + value.test(t); + }); +} From 99f28402938d1d4a468a13833d99d3ca1439069b Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Fri, 22 Feb 2019 23:21:38 +0200 Subject: [PATCH 13/14] Tests: Rerun all "proxy-able" tests through the Proxy API --- test/index.js | 55 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/test/index.js b/test/index.js index 17ae8dd..c3dd1e3 100644 --- a/test/index.js +++ b/test/index.js @@ -1,12 +1,12 @@ const test = require('tape'); const crel = require('../crel.js'); -// All tests in message - test function pairs +// All tests inside a handy object list format const tests = [ // -- Test element creation -- { message: 'Create an element with no arguments', - test: (t) => { + test: (t, crel) => { let testElement = crel('div'); t.ok(testElement instanceof HTMLElement, @@ -19,7 +19,7 @@ const tests = [ }, { message: 'Create an element with no arguments, using an invalid tag name', - test: (t) => { + test: (t, crel) => { let testElement = crel('invalidtagname'); t.ok(testElement instanceof HTMLUnknownElement, @@ -32,7 +32,7 @@ const tests = [ }, { message: 'Crel doesn\'t modify existing elements if not instructed', - test: (t) => { + test: (t, crel) => { let testElement = document.createElement('div'); let testedElement = crel(testElement); @@ -45,7 +45,7 @@ const tests = [ // -- Test attribute handling -- { message: 'Create an element with simple attributes', - test: (t) => { + test: (t, crel) => { let testElement = crel('div', {class: 'test', id: 'test'}); t.equal(testElement.className, 'test', @@ -58,7 +58,7 @@ const tests = [ }, { message: 'Add attributes to an already existing element', - test: (t) => { + test: (t, crel) => { let testElement = document.createElement('div'); crel(testElement, {class: 'test', id: 'test'}); @@ -72,7 +72,7 @@ const tests = [ }, { message: 'Modify attributes of an already existing element', - test: (t) => { + test: (t, crel) => { let testElement = document.createElement('div'); testElement.setAttribute('class', 'test'); testElement.setAttribute('id', 'test'); @@ -88,7 +88,7 @@ const tests = [ }, { message: 'Add an `onEvent` property to an element', - test: (t) => { + test: (t, crel) => { let testElement = crel('button', { onclick: () => { t.pass('onClick event triggered'); @@ -102,7 +102,7 @@ const tests = [ }, { message: 'Add an `onEvent` property to an element through attribute mapping', - test: (t) => { + test: (t, crel) => { crel.attrMap.on = (element, value) => { for (const eventName in value) { element.addEventListener(eventName, value[eventName]); @@ -118,12 +118,12 @@ const tests = [ testElement.click(); }, checks: 1, - proxyable: true + proxyable: false }, // -- Test child node handling -- { message: 'Create an element with a child element', - test: (t) => { + test: (t, crel) => { let testElement = crel('div', document.createElement('p')); t.equal(testElement.childNodes.length, 1, @@ -136,7 +136,7 @@ const tests = [ }, { message: 'Create an element with a child text node', - test: (t) => { + test: (t, crel) => { let testElement = crel('div', document.createTextNode('test')); t.equal(testElement.childNodes.length, 1, @@ -149,7 +149,7 @@ const tests = [ }, { message: 'Create an element with an array of children', - test: (t) => { + test: (t, crel) => { // TODO: make these more compact / robust const testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; let testElement = crel('div', testArray); @@ -167,7 +167,7 @@ const tests = [ }, { message: 'Create an element with a deep array of children', - test: (t) => { + test: (t, crel) => { // TODO: make these more compact / robust const testArray = [document.createElement('p'), document.createTextNode('I\'m a text node!'), 'I will be a text node!']; let testElement = crel('div', [[testArray]]); @@ -186,7 +186,7 @@ const tests = [ // -- Test the Proxy APIs features -- { message: 'Test the proxy APIs tag transformations', - test: (t) => { + test: (t, crel) => { crel.tagTransform = (key) => key.replace(/([0-9a-z])([A-Z])/g, '$1-$2').toLowerCase(); let testElement = crel.myTable(crel.span('test')); @@ -204,7 +204,7 @@ const tests = [ // -- Test exposed methods -- { message: 'Test `isNode` against various arguments', - test: (t) => { + test: (t, crel) => { if (!crel.isNode) { t.end('`isNode` is undefined'); } @@ -231,7 +231,7 @@ const tests = [ }, { message: 'Test `isElement` against various arguments', - test: (t) => { + test: (t, crel) => { if (!crel.isElement) { t.end('`isElement` is undefined'); } @@ -257,9 +257,28 @@ const tests = [ } ]; +let proxyableChecks = 0; + for (const value of tests) { test(value.message, (t) => { t.plan(value.checks); - value.test(t); + value.test(t, crel); }); + + if (value.proxyable) { + proxyableChecks += value.checks; + } } + +test('Rerun all "proxy-able" tests through the Proxy API', (t) => { + t.plan(proxyableChecks); + for (const value of tests) { + if (value.proxyable) { + value.test(t, (...args) => { + let tag = args[0]; + args.shift(); + return crel.proxy[tag].apply(this, args); + }); + } + } +}); From 675fac1a4cc4da19bdca6f7eae24f0b7df0d359d Mon Sep 17 00:00:00 2001 From: Dev_Bon_Bon Date: Sat, 23 Feb 2019 00:48:32 +0200 Subject: [PATCH 14/14] Tests: Store list of tests in a separate file and modify build commands accordingly --- package.json | 3 ++- test/test.html | 3 ++- test/{index.js => test_list.js} | 41 ++++++++------------------------- test/test_logic.js | 28 ++++++++++++++++++++++ 4 files changed, 42 insertions(+), 33 deletions(-) rename test/{index.js => test_list.js} (92%) create mode 100644 test/test_logic.js diff --git a/package.json b/package.json index fb36550..935ff68 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ }, "scripts": { "test": "npm run testBuild && opn ./test/test.html", - "testBuild": "browserify ./test/index.js > ./test/index.browser.js", + "buildTest": "browserify ./test/test_logic.js > ./test/test_logic.browser.js", + "buildTestData": "browserify ./test/test_list.js > ./test/test_list.browser.js", "build": "terser crel.js -o crel.min.js --warn --ecma 6 -c evaluate=false,pure_getters -m" }, "repository": { diff --git a/test/test.html b/test/test.html index cb90462..868170e 100644 --- a/test/test.html +++ b/test/test.html @@ -11,7 +11,8 @@ document.body.innerHTML += '
'; }; - + + diff --git a/test/index.js b/test/test_list.js similarity index 92% rename from test/index.js rename to test/test_list.js index c3dd1e3..438cf7d 100644 --- a/test/index.js +++ b/test/test_list.js @@ -1,8 +1,13 @@ -const test = require('tape'); -const crel = require('../crel.js'); - -// All tests inside a handy object list format -const tests = [ +// Contains all tests in an object list +// All Object should have the properties: +// - message : The message, or title, that Tape shows when running a test +// - test : The test function, takes as arguments: +// - t : the Tape test Object +// - crel : the function to be ran as crel, replaced by a wrapper when running proxyable tests +// - checks : the number of test checks ran inside the test function +// - proxyable : true / false, can the tests crel calls be converted to a proxy format +// aka. is the crel calls first argument a tag name (and there's no need to access crels internal properties) +window.tests = [ // -- Test element creation -- { message: 'Create an element with no arguments', @@ -256,29 +261,3 @@ const tests = [ proxyable: false } ]; - -let proxyableChecks = 0; - -for (const value of tests) { - test(value.message, (t) => { - t.plan(value.checks); - value.test(t, crel); - }); - - if (value.proxyable) { - proxyableChecks += value.checks; - } -} - -test('Rerun all "proxy-able" tests through the Proxy API', (t) => { - t.plan(proxyableChecks); - for (const value of tests) { - if (value.proxyable) { - value.test(t, (...args) => { - let tag = args[0]; - args.shift(); - return crel.proxy[tag].apply(this, args); - }); - } - } -}); diff --git a/test/test_logic.js b/test/test_logic.js new file mode 100644 index 0000000..988d307 --- /dev/null +++ b/test/test_logic.js @@ -0,0 +1,28 @@ +const test = require('tape'); +const crel = require('../crel.js'); + +let proxyableChecks = 0; +// Tests are sourced in 'test.html' before this file is +for (const value of tests) { + test(value.message, (t) => { + t.plan(value.checks); + value.test(t, crel); + }); + + if (value.proxyable) { + proxyableChecks += value.checks; + } +} + +test('Rerun all "proxy-able" tests through the Proxy API', (t) => { + t.plan(proxyableChecks); + for (const value of tests) { + if (value.proxyable) { + value.test(t, (...args) => { + let tag = args[0]; + args.shift(); + return crel.proxy[tag].apply(this, args); + }); + } + } +});