From 61c6204d6c2ea79e8ff46b5e0a92ee32cea8a898 Mon Sep 17 00:00:00 2001 From: jkodu Date: Wed, 12 Sep 2018 06:17:03 +0100 Subject: [PATCH 1/6] refactor: onload listener for stylesheets in before hook of tests --- .../full/css-orientation-lock/passes.js | 26 +++----- .../full/css-orientation-lock/violations.js | 26 +++----- .../full/preload-cssom/preload-cssom.js | 34 +++------- test/integration/full/preload/preload.js | 32 +++------- test/testutils.js | 62 +++++++++++++++++++ 5 files changed, 99 insertions(+), 81 deletions(-) diff --git a/test/integration/full/css-orientation-lock/passes.js b/test/integration/full/css-orientation-lock/passes.js index fdc072f160..96c4504845 100644 --- a/test/integration/full/css-orientation-lock/passes.js +++ b/test/integration/full/css-orientation-lock/passes.js @@ -4,20 +4,6 @@ describe('css-orientation-lock passes test', function() { var shadowSupported = axe.testUtils.shadowSupport.v1; var isPhantom = window.PHANTOMJS ? true : false; - function addSheet(data) { - if (data.href) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = data.href; - document.head.appendChild(link); - } else { - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(data.text)); - document.head.appendChild(style); - } - } - var styleSheets = [ { href: @@ -34,9 +20,15 @@ describe('css-orientation-lock passes test', function() { this.skip(); done(); } else { - styleSheets.forEach(addSheet); - // wait for network request to complete for added sheets - setTimeout(done, 5000); + axe.testUtils + .addStyleSheets(styleSheets) + .then(function() { + done(); + }) + .catch(function(error) { + console.error('Could not load stylesheets for testing.', error); + done(); + }); } }); diff --git a/test/integration/full/css-orientation-lock/violations.js b/test/integration/full/css-orientation-lock/violations.js index 760f2cccc7..f53c12380e 100644 --- a/test/integration/full/css-orientation-lock/violations.js +++ b/test/integration/full/css-orientation-lock/violations.js @@ -4,20 +4,6 @@ describe('css-orientation-lock violations test', function() { var shadowSupported = axe.testUtils.shadowSupport.v1; var isPhantom = window.PHANTOMJS ? true : false; - function addSheet(data) { - if (data.href) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = data.href; - document.head.appendChild(link); - } else { - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(data.text)); - document.head.appendChild(style); - } - } - var styleSheets = [ { href: @@ -33,9 +19,15 @@ describe('css-orientation-lock violations test', function() { this.skip(); done(); } else { - styleSheets.forEach(addSheet); - // wait for network request to complete for added sheets - setTimeout(done, 5000); + axe.testUtils + .addStyleSheets(styleSheets) + .then(function() { + done(); + }) + .catch(function(error) { + console.error('Could not load stylesheets for testing.', error); + done(); + }); } }); diff --git a/test/integration/full/preload-cssom/preload-cssom.js b/test/integration/full/preload-cssom/preload-cssom.js index 635357b8c4..b9c3824baf 100644 --- a/test/integration/full/preload-cssom/preload-cssom.js +++ b/test/integration/full/preload-cssom/preload-cssom.js @@ -6,23 +6,6 @@ describe('preload cssom integration test', function() { var shadowSupported = axe.testUtils.shadowSupport.v1; var isPhantom = window.PHANTOMJS ? true : false; - function addSheet(data) { - if (data.href) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = data.href; - if (data.mediaPrint) { - link.media = 'print'; - } - document.head.appendChild(link); - } else { - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(data.text)); - document.head.appendChild(style); - } - } - var styleSheets = [ { href: @@ -44,14 +27,15 @@ describe('preload cssom integration test', function() { this.skip(); done(); } else { - styleSheets.forEach(addSheet); - // cache original axios object - if (axe.imports.axios) { - origAxios = axe.imports.axios; - } - - // wait for network request to complete for added sheets - setTimeout(done, 5000); + axe.testUtils + .addStyleSheets(styleSheets) + .then(function() { + done(); + }) + .catch(function(error) { + console.error('Could not load stylesheets for testing.', error); + done(); + }); } }); diff --git a/test/integration/full/preload/preload.js b/test/integration/full/preload/preload.js index 8a9bcbb312..8d4938a408 100644 --- a/test/integration/full/preload/preload.js +++ b/test/integration/full/preload/preload.js @@ -5,23 +5,6 @@ describe('preload integration test', function() { var origAxios; var isPhantom = window.PHANTOMJS ? true : false; - function addSheet(data) { - if (data.href) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = data.href; - if (data.mediaPrint) { - link.media = 'print'; - } - document.head.appendChild(link); - } else { - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(data.text)); - document.head.appendChild(style); - } - } - var styleSheets = [ { href: 'https://unpkg.com/gutenberg-css@0.4' @@ -41,8 +24,6 @@ describe('preload integration test', function() { this.skip(); done(); } else { - styleSheets.forEach(addSheet); - // cache originals if (axe.imports.axios) { origAxios = axe.imports.axios; @@ -82,9 +63,16 @@ describe('preload integration test', function() { } ] }); - - // wait for network request to complete for added sheets - setTimeout(done, 5000); + // load stylesheets + axe.testUtils + .addStyleSheets(styleSheets) + .then(function() { + done(); + }) + .catch(function(error) { + console.error('Could not load stylesheets for testing.', error); + done(); + }); } }); diff --git a/test/testutils.js b/test/testutils.js index af2bc610a3..f9f2df69ed 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -1,3 +1,5 @@ +/* global Promise */ + // Let the user know they need to disable their axe/attest extension before running the tests. if (window.__AXE_EXTENSION__) { throw new Error( @@ -220,4 +222,64 @@ testUtils.awaitNestedLoad = function awaitNestedLoad(win, cb) { }); }; +/** + * Add a given stylesheet dynamically to the document + * + * @param {Object} data composite object containing properties to create stylesheet + * @property {String} data.href relative or absolute url for stylesheet to be loaded + * @property {Boolean} data.mediaPrint boolean to represent if the constructed sheet is for print media + * @property {String} data.text text contents to be written to the stylesheet + * @returns {Object} a Promise + */ +testUtils.addStyleSheet = function addStyleSheet(data) { + function loadAsLinkTag(href, mediaPrint, resolve, reject) { + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = href; + if (mediaPrint) { + link.media = 'print'; + } + link.onload = function() { + resolve(); + }; + link.onerror = function() { + reject(); + }; + document.head.appendChild(link); + } + + function loadAsStyleTag(text, resolve) { + const style = document.createElement('style'); + style.type = 'text/css'; + style.appendChild(document.createTextNode(text)); + document.head.appendChild(style); + resolve(); + } + + return new Promise(function(resolve) { + if (data.href) { + loadAsLinkTag(data.href, data.mediaPrint, resolve); + } else { + loadAsStyleTag(data.text, resolve); + } + }); +}; + +/** + * Add a list of stylesheets + * + * @param {Object} sheets array of sheets data object + * @returns {Object} a Promise + */ +testUtils.addStyleSheets = function addStyleSheets(sheets) { + var promises = []; + + sheets.forEach(function(data) { + var p = axe.testUtils.addStyleSheet(data); + promises.push(p); + }); + + return Promise.all(promises); +}; + axe.testUtils = testUtils; From 7fb455c712620fc3e06e639de9a0909a37b8196b Mon Sep 17 00:00:00 2001 From: jkodu Date: Wed, 10 Oct 2018 14:40:59 +0100 Subject: [PATCH 2/6] test: allow for tests to fail if stylesheets are not loaded --- test/integration/full/css-orientation-lock/passes.js | 3 +-- test/integration/full/css-orientation-lock/violations.js | 3 +-- test/integration/full/preload-cssom/preload-cssom.js | 3 +-- test/integration/full/preload/preload.js | 3 +-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/test/integration/full/css-orientation-lock/passes.js b/test/integration/full/css-orientation-lock/passes.js index 96c4504845..1a62f0e3ae 100644 --- a/test/integration/full/css-orientation-lock/passes.js +++ b/test/integration/full/css-orientation-lock/passes.js @@ -26,8 +26,7 @@ describe('css-orientation-lock passes test', function() { done(); }) .catch(function(error) { - console.error('Could not load stylesheets for testing.', error); - done(); + done(new Error('Could not load stylesheets for testing. ' + error)); }); } }); diff --git a/test/integration/full/css-orientation-lock/violations.js b/test/integration/full/css-orientation-lock/violations.js index 134840424d..73c58ded7f 100644 --- a/test/integration/full/css-orientation-lock/violations.js +++ b/test/integration/full/css-orientation-lock/violations.js @@ -25,8 +25,7 @@ describe('css-orientation-lock violations test', function() { done(); }) .catch(function(error) { - console.error('Could not load stylesheets for testing.', error); - done(); + done(new Error('Could not load stylesheets for testing. ' + error)); }); } }); diff --git a/test/integration/full/preload-cssom/preload-cssom.js b/test/integration/full/preload-cssom/preload-cssom.js index 418d3951b2..837ecd6481 100644 --- a/test/integration/full/preload-cssom/preload-cssom.js +++ b/test/integration/full/preload-cssom/preload-cssom.js @@ -33,8 +33,7 @@ describe('preload cssom integration test', function() { done(); }) .catch(function(error) { - console.error('Could not load stylesheets for testing.', error); - done(); + done(new Error('Could not load stylesheets for testing. ' + error)); }); } }); diff --git a/test/integration/full/preload/preload.js b/test/integration/full/preload/preload.js index 8d4938a408..061e1d78d4 100644 --- a/test/integration/full/preload/preload.js +++ b/test/integration/full/preload/preload.js @@ -70,8 +70,7 @@ describe('preload integration test', function() { done(); }) .catch(function(error) { - console.error('Could not load stylesheets for testing.', error); - done(); + done(new Error('Could not load stylesheets for testing. ' + error)); }); } }); From e9560c0b90960ecfb4e3cd8fe6f0238bcb871309 Mon Sep 17 00:00:00 2001 From: jkodu Date: Wed, 17 Oct 2018 16:23:01 +0100 Subject: [PATCH 3/6] test: use queue instead of promise --- test/testutils.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/test/testutils.js b/test/testutils.js index f9f2df69ed..9f1dd2fa95 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -272,14 +272,11 @@ testUtils.addStyleSheet = function addStyleSheet(data) { * @returns {Object} a Promise */ testUtils.addStyleSheets = function addStyleSheets(sheets) { - var promises = []; - + var q = axe.utils.queue(); sheets.forEach(function(data) { - var p = axe.testUtils.addStyleSheet(data); - promises.push(p); + q.defer(axe.testUtils.addStyleSheet(data)); }); - - return Promise.all(promises); + return q; }; axe.testUtils = testUtils; From 8324f8b9bf202cd9493e7f63f9baf1378e4fcb46 Mon Sep 17 00:00:00 2001 From: jkodu Date: Sun, 28 Oct 2018 16:27:25 +0000 Subject: [PATCH 4/6] fix: remove promise usage --- test/testutils.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/testutils.js b/test/testutils.js index 9f1dd2fa95..bd2daedfd2 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -1,5 +1,3 @@ -/* global Promise */ - // Let the user know they need to disable their axe/attest extension before running the tests. if (window.__AXE_EXTENSION__) { throw new Error( @@ -229,7 +227,7 @@ testUtils.awaitNestedLoad = function awaitNestedLoad(win, cb) { * @property {String} data.href relative or absolute url for stylesheet to be loaded * @property {Boolean} data.mediaPrint boolean to represent if the constructed sheet is for print media * @property {String} data.text text contents to be written to the stylesheet - * @returns {Object} a Promise + * @returns {Object} axe.utils.queue */ testUtils.addStyleSheet = function addStyleSheet(data) { function loadAsLinkTag(href, mediaPrint, resolve, reject) { @@ -256,20 +254,22 @@ testUtils.addStyleSheet = function addStyleSheet(data) { resolve(); } - return new Promise(function(resolve) { + var q = axe.utils.queue(); + q.defer(function(resolve) { if (data.href) { loadAsLinkTag(data.href, data.mediaPrint, resolve); } else { loadAsStyleTag(data.text, resolve); } }); + return q; }; /** * Add a list of stylesheets * * @param {Object} sheets array of sheets data object - * @returns {Object} a Promise + * @returns {Object} axe.utils.queue */ testUtils.addStyleSheets = function addStyleSheets(sheets) { var q = axe.utils.queue(); From b1fafe6beaf06a9300dda449542fc5168e798b49 Mon Sep 17 00:00:00 2001 From: jkodu Date: Mon, 29 Oct 2018 16:20:13 +0000 Subject: [PATCH 5/6] fix: revert to promise usage to understand ci failing --- test/testutils.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/testutils.js b/test/testutils.js index bd2daedfd2..89b8023bef 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -1,3 +1,5 @@ +/* global axe, Promise */ + // Let the user know they need to disable their axe/attest extension before running the tests. if (window.__AXE_EXTENSION__) { throw new Error( @@ -227,7 +229,7 @@ testUtils.awaitNestedLoad = function awaitNestedLoad(win, cb) { * @property {String} data.href relative or absolute url for stylesheet to be loaded * @property {Boolean} data.mediaPrint boolean to represent if the constructed sheet is for print media * @property {String} data.text text contents to be written to the stylesheet - * @returns {Object} axe.utils.queue + * @returns {Object} promise */ testUtils.addStyleSheet = function addStyleSheet(data) { function loadAsLinkTag(href, mediaPrint, resolve, reject) { @@ -254,22 +256,20 @@ testUtils.addStyleSheet = function addStyleSheet(data) { resolve(); } - var q = axe.utils.queue(); - q.defer(function(resolve) { + return new Promise(function(resolve) { if (data.href) { loadAsLinkTag(data.href, data.mediaPrint, resolve); } else { loadAsStyleTag(data.text, resolve); } }); - return q; }; /** * Add a list of stylesheets * * @param {Object} sheets array of sheets data object - * @returns {Object} axe.utils.queue + * @returns {Object} ""axe.utils.queue */ testUtils.addStyleSheets = function addStyleSheets(sheets) { var q = axe.utils.queue(); From b13de3e456cd611d676403b128400e736e7662a6 Mon Sep 17 00:00:00 2001 From: jkodu Date: Mon, 29 Oct 2018 16:31:48 +0000 Subject: [PATCH 6/6] fix: update testutils to not use promise --- test/testutils.js | 60 ++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/test/testutils.js b/test/testutils.js index 89b8023bef..705672ca57 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -1,4 +1,4 @@ -/* global axe, Promise */ +/* global axe */ // Let the user know they need to disable their axe/attest extension before running the tests. if (window.__AXE_EXTENSION__) { @@ -229,47 +229,43 @@ testUtils.awaitNestedLoad = function awaitNestedLoad(win, cb) { * @property {String} data.href relative or absolute url for stylesheet to be loaded * @property {Boolean} data.mediaPrint boolean to represent if the constructed sheet is for print media * @property {String} data.text text contents to be written to the stylesheet - * @returns {Object} promise + * @returns {Object} axe.utils.queue */ testUtils.addStyleSheet = function addStyleSheet(data) { - function loadAsLinkTag(href, mediaPrint, resolve, reject) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = href; - if (mediaPrint) { - link.media = 'print'; - } - link.onload = function() { + var q = axe.utils.queue(); + if (data.href) { + q.defer(function(resolve, reject) { + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = data.href; + if (data.mediaPrint) { + link.media = 'print'; + } + link.onload = function() { + resolve(); + }; + link.onerror = function() { + reject(); + }; + document.head.appendChild(link); + }); + } else { + q.defer(function(resolve) { + var style = document.createElement('style'); + style.type = 'text/css'; + style.appendChild(document.createTextNode(data.text)); + document.head.appendChild(style); resolve(); - }; - link.onerror = function() { - reject(); - }; - document.head.appendChild(link); - } - - function loadAsStyleTag(text, resolve) { - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(text)); - document.head.appendChild(style); - resolve(); + }); } - - return new Promise(function(resolve) { - if (data.href) { - loadAsLinkTag(data.href, data.mediaPrint, resolve); - } else { - loadAsStyleTag(data.text, resolve); - } - }); + return q; }; /** * Add a list of stylesheets * * @param {Object} sheets array of sheets data object - * @returns {Object} ""axe.utils.queue + * @returns {Object} axe.utils.queue */ testUtils.addStyleSheets = function addStyleSheets(sheets) { var q = axe.utils.queue();