tests: use new axe.setup method (#2757)

* tests: use new axe.setup method * fix tests
dequelabs · Jan 15, 2021 · 1c1654a · 1c1654a
1 parent fa03543
commit 1c1654a
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 172 deletions.
diff --git a/lib/core/public/teardown.js b/lib/core/public/teardown.js
@@ -15,6 +15,7 @@ function teardown() {
   cache.clear();
   axe._tree = undefined;
   axe._selectorData = undefined;
+  axe._selectCache = undefined;
 }
 
 export default teardown;
diff --git a/test/commons/aria/arialabelledby-text.js b/test/commons/aria/arialabelledby-text.js
@@ -1,117 +1,110 @@
 describe('aria.arialabelledbyText', function() {
   'use strict';
   var aria = axe.commons.aria;
-  var fixtureSetup = axe.testUtils.fixtureSetup;
+  var queryFixture = axe.testUtils.queryFixture;
 
   it('returns the accessible name of the aria-labelledby references', function() {
-    var fixture = fixtureSetup(
-      '<div role="heading" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo">Foo text</div>'
     );
-    var accName = aria.arialabelledbyText(fixture.firstChild);
+    var accName = aria.arialabelledbyText(target);
     assert.equal(accName, 'Foo text');
   });
 
   it('works with virtual nodes', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target);
     assert.equal(accName, 'Foo text');
   });
 
   it('returns references in order', function() {
-    var fixture = fixtureSetup(
-      '<div role="heading" aria-labelledby="bar baz foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="bar baz foo"></div>' +
         '<div id="foo">Foo</div>' +
         '<div id="bar">Bar</div>' +
         '<div id="baz">Baz</div>'
     );
-    var accName = aria.arialabelledbyText(fixture.firstChild);
+    var accName = aria.arialabelledbyText(target);
     assert.equal(accName, 'Bar Baz Foo');
   });
 
   it('returns "" if the node is not an element', function() {
-    var fixture = fixtureSetup('foo');
-    var accName = aria.arialabelledbyText(fixture.firstChild);
+    var target = queryFixture('<div id="target">foo</div>');
+    var accName = aria.arialabelledbyText(target.actualNode.firstChild);
     assert.equal(accName, '');
   });
 
   it('returns "" with context.inLabelledByContext: true', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target, {
       inLabelledByContext: true
     });
     assert.equal(accName, '');
   });
 
   it('returns "" with context.inControlContext: true', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target, {
       inControlContext: true
     });
     assert.equal(accName, '');
   });
 
   it('returns content of a aria-hidden reference', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo" aria-hidden="true">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target);
     assert.equal(accName, 'Foo text');
   });
 
   it('returns content of a `display:none` reference', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo" style="display:none">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target);
     assert.equal(accName, 'Foo text');
   });
 
   it('returns does not return hidden content of a visible reference', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo"><div style="display:none">Foo text</div></div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target);
     assert.equal(accName, '');
   });
 
   it('does not follow more than one aria-labelledy reference', function() {
-    fixtureSetup(
-      '<div role="heading" id="hdr" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo"><div aria-labelledby="bar" role="heading"></div></div>' +
         '<div id="bar">Foo text</div>'
     );
-    var target = axe.utils.querySelectorAll(axe._tree[0], '#hdr')[0];
     var accName = aria.arialabelledbyText(target, {
       inControlContext: true
     });
     assert.equal(accName, '');
   });
 
   it('preserves spacing', function() {
-    var fixture = fixtureSetup(
-      '<div role="heading" aria-labelledby="foo"></div>' +
+    var target = queryFixture(
+      '<div role="heading" id="target" aria-labelledby="foo"></div>' +
         '<div id="foo"> \t Foo \n text \t </div>'
     );
-    var accName = aria.arialabelledbyText(fixture.firstChild);
+    var accName = aria.arialabelledbyText(target);
     assert.equal(accName, ' \t Foo \n text \t ');
   });
 });
diff --git a/test/commons/dom/find-elms-in-context.js b/test/commons/dom/find-elms-in-context.js
@@ -5,12 +5,8 @@ describe('dom.findElmsInContext', function() {
   var fixtureSetup = axe.testUtils.fixtureSetup;
   var findElmsInContext = axe.commons.dom.findElmsInContext;
 
-  afterEach(function() {
-    fixtureSetup('');
-  });
-
   it('returns an array or elements in the same context', function() {
-    var fixture = fixtureSetup(
+    var rootNode = fixtureSetup(
       '<b name="foo">1</b>' +
         '<b name="foo">2</b>' +
         '<b name="bar">3</b>' +
@@ -22,7 +18,7 @@ describe('dom.findElmsInContext', function() {
         elm: 'b',
         attr: 'name',
         value: 'foo',
-        context: fixture
+        context: rootNode.actualNode
       }),
       Array.from(document.querySelectorAll('b[name=foo]'))
     );
@@ -35,13 +31,13 @@ describe('dom.findElmsInContext', function() {
       node.innerHTML = '<b name="foo">1</b>';
       var shadow = node.attachShadow({ mode: 'open' });
       shadow.innerHTML = '<b name="foo">2</b> <slot></slot>';
-      var fixture = fixtureSetup(node);
+      var rootNode = fixtureSetup(node);
 
       var result = findElmsInContext({
         elm: 'b',
         attr: 'name',
         value: 'foo',
-        context: fixture
+        context: rootNode.actualNode
       });
       assert.lengthOf(result, 1);
       assert.equal(result[0].innerText, '1');

diff --git a/test/commons/dom/get-tabbable-elements.js b/test/commons/dom/get-tabbable-elements.js
@@ -1,69 +1,57 @@
 describe('dom.getTabbableElements', function() {
   'use strict';
 
-  var fixtureSetup = axe.testUtils.fixtureSetup;
+  var queryFixture = axe.testUtils.queryFixture;
+  var injectIntoFixture = axe.testUtils.injectIntoFixture;
   var shadowSupported = axe.testUtils.shadowSupport.v1;
   var getTabbableElementsFn = axe.commons.dom.getTabbableElements;
 
-  afterEach(function() {
-    document.getElementById('fixture').innerHTML = '';
-  });
-
   it('returns tabbable elms when node contains tabbable element', function() {
-    var fixture = fixtureSetup(
+    var virtualNode = queryFixture(
       '<div id="target">' +
         '<label>Enter description:' +
         '<textarea></textarea>' +
         '</label>' +
         '</div>'
     );
-    var node = fixture.querySelector('#target');
-    var virtualNode = axe.utils.getNodeFromTree(node);
     var actual = getTabbableElementsFn(virtualNode);
     assert.lengthOf(actual, 1);
     assert.equal(actual[0].actualNode.nodeName.toUpperCase(), 'TEXTAREA');
   });
 
   it('returns empty [] when element does not contains tabbable element (using tabindex to take element out of tab-order)', function() {
-    var fixture = fixtureSetup(
+    var virtualNode = queryFixture(
       '<div id="target">' + '<input tabindex="-1">' + '</div>'
     );
-    var node = fixture.querySelector('#target');
-    var virtualNode = axe.utils.getNodeFromTree(node);
     var actual = getTabbableElementsFn(virtualNode);
     assert.lengthOf(actual, 0);
   });
 
   it('returns empty [] when element contains disabled (tabbable) element', function() {
-    var fixture = fixtureSetup(
+    var virtualNode = queryFixture(
       '<div id="target">' + '<button disabled>Submit Me</button>' + '</div>'
     );
-    var node = fixture.querySelector('#target');
-    var virtualNode = axe.utils.getNodeFromTree(node);
     var actual = getTabbableElementsFn(virtualNode);
     assert.lengthOf(actual, 0);
   });
 
   it('returns empty [] when element does not contain tabbable element', function() {
-    var fixture = fixtureSetup(
+    var virtualNode = queryFixture(
       '<div id="target">' + '<p>Some text</p>' + '</div>'
     );
-    var node = fixture.querySelector('#target');
-    var virtualNode = axe.utils.getNodeFromTree(node);
     var actual = getTabbableElementsFn(virtualNode);
     assert.lengthOf(actual, 0);
   });
 
   (shadowSupported ? it : xit)(
     'returns tabbable elms when element contains tabbable element inside shadowDOM',
     function() {
-      var fixture = fixtureSetup('<div id="target"></div>`');
+      var fixture = injectIntoFixture('<div id="target"></div>`');
       var node = fixture.querySelector('#target');
       var shadow = node.attachShadow({ mode: 'open' });
       shadow.innerHTML = '<button>btn</button>';
       // re build tree after shadowDOM is constructed
-      axe.testUtils.flatTreeSetup(fixture);
-      axe._selectorData = axe.utils.getSelectorData(axe._tree);
+      axe.setup(fixture);
       var virtualNode = axe.utils.getNodeFromTree(node);
       var actual = getTabbableElementsFn(virtualNode);
       assert.lengthOf(actual, 1);
@@ -74,13 +62,12 @@ describe('dom.getTabbableElements', function() {
   (shadowSupported ? it : xit)(
     'returns empty [] when element contains disabled (tabbable) element inside shadowDOM',
     function() {
-      var fixture = fixtureSetup('<div id="target"></div>`');
+      var fixture = injectIntoFixture('<div id="target"></div>`');
       var node = fixture.querySelector('#target');
       var shadow = node.attachShadow({ mode: 'open' });
       shadow.innerHTML = '<button disabled>btn</button>';
       // re build tree after shadowDOM is constructed
-      axe.testUtils.flatTreeSetup(fixture);
-      axe._selectorData = axe.utils.getSelectorData(axe._tree);
+      axe.setup(fixture);
       var virtualNode = axe.utils.getNodeFromTree(node);
       var actual = getTabbableElementsFn(virtualNode);
       assert.lengthOf(actual, 0);
@@ -90,13 +77,12 @@ describe('dom.getTabbableElements', function() {
   (shadowSupported ? it : xit)(
     'returns empty [] when element does not contain tabbable element inside shadowDOM',
     function() {
-      var fixture = fixtureSetup('<div id="target"></div>`');
+      var fixture = injectIntoFixture('<div id="target"></div>`');
       var node = fixture.querySelector('#target');
       var shadow = node.attachShadow({ mode: 'open' });
       shadow.innerHTML = '<p>I am not tabbable</p>';
       // re build tree after shadowDOM is constructed
-      axe.testUtils.flatTreeSetup(fixture);
-      axe._selectorData = axe.utils.getSelectorData(axe._tree);
+      axe.setup(fixture);
       var virtualNode = axe.utils.getNodeFromTree(node);
       var actual = getTabbableElementsFn(virtualNode);
       assert.lengthOf(actual, 0);

diff --git a/test/commons/dom/is-modal-open.js b/test/commons/dom/is-modal-open.js
@@ -6,10 +6,6 @@ describe('dom.isModalOpen', function() {
   var dialogElSupport =
     typeof document.createElement('dialog').open !== 'undefined';
 
-  afterEach(function() {
-    fixtureSetup('');
-  });
-
   it('returns true if there is a visible element with role=dialog', function() {
     fixtureSetup('<div role="dialog">Modal</div>');
     assert.isTrue(isModalOpen());

diff --git a/test/commons/dom/is-visible.js b/test/commons/dom/is-visible.js
@@ -3,7 +3,6 @@ describe('dom.isVisible', function() {
 
   var fixture = document.getElementById('fixture');
   var queryFixture = axe.testUtils.queryFixture;
-  var fixtureSetup = axe.testUtils.fixtureSetup;
   var isIE11 = axe.testUtils.isIE11;
   var shadowSupported = axe.testUtils.shadowSupport.v1;
   var fakeNode = {
@@ -85,29 +84,26 @@ describe('dom.isVisible', function() {
     });
 
     it('should return false on STYLE tag', function() {
-      var fixture = fixtureSetup(
+      var vNode = queryFixture(
         '<style id="target"> @import "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"; .green { background-color: green; } </style>'
       );
-      var node = fixture.querySelector('#target');
-      var actual = axe.commons.dom.isVisible(node);
+      var actual = axe.commons.dom.isVisible(vNode.actualNode);
       assert.isFalse(actual);
     });
 
     it('should return false on NOSCRIPT tag', function() {
-      var fixture = fixtureSetup(
+      var vNode = queryFixture(
         '<noscript id="target"><p class="invisible"><img src="/piwik/piwik.php?idsite=1" alt="" /></p></noscript>'
       );
-      var node = fixture.querySelector('#target');
-      var actual = axe.commons.dom.isVisible(node);
+      var actual = axe.commons.dom.isVisible(vNode.actualNode);
       assert.isFalse(actual);
     });
 
     it('should return false on TEMPLATE tag', function() {
-      var fixture = fixtureSetup(
+      var vNode = queryFixture(
         '<template id="target"><div>Name:</div></template>'
       );
-      var node = fixture.querySelector('#target');
-      var actual = axe.commons.dom.isVisible(node);
+      var actual = axe.commons.dom.isVisible(vNode.actualNode);
       assert.isFalse(actual);
     });
 

diff --git a/test/commons/text/is-icon-ligature.js b/test/commons/text/is-icon-ligature.js
@@ -170,9 +170,7 @@ describe('text.isIconLigature', function() {
       isIconLigature(target.children[0]);
 
       // change text to non-icon
-      var target = queryFixture(
-        '<div id="target" style="font-family: \'LigatureSymbols\'">__non-icon text__</div>'
-      );
+      target.children[0].actualNode.textContent = '__non-icon text__';
       assert.isTrue(isIconLigature(target.children[0]));
     }
   );
@@ -189,9 +187,7 @@ describe('text.isIconLigature', function() {
       isIconLigature(target.children[0]);
 
       // change text to icon
-      var target = queryFixture(
-        '<div id="target" style="font-family: \'Roboto\'">delete</div>'
-      );
+      target.children[0].actualNode.textContent = 'delete';
       assert.isFalse(isIconLigature(target.children[0]));
     }
   );
@@ -231,9 +227,7 @@ describe('text.isIconLigature', function() {
         isIconLigature(target.children[0]);
 
         // change text to non-icon
-        var target = queryFixture(
-          '<div id="target" style="font-family: \'LigatureSymbols\'">__non-icon text__</div>'
-        );
+        target.children[0].actualNode.textContent = '__non-icon text__';
         assert.isTrue(isIconLigature(target.children[0], 0.1, 1));
         assert.isFalse(isIconLigature(target.children[0]));
       }