diff --git a/test/checks/navigation/heading-order.js b/test/checks/navigation/heading-order.js index 9d056573ed..779b62604f 100644 --- a/test/checks/navigation/heading-order.js +++ b/test/checks/navigation/heading-order.js @@ -1,14 +1,14 @@ -describe('heading-order', function() { +describe('heading-order', function () { 'use strict'; var checkContext = axe.testUtils.MockCheckContext(); var queryFixture = axe.testUtils.queryFixture; - afterEach(function() { + afterEach(function () { checkContext.reset(); }); - it('should store the heading order path and level for [role=heading] elements and return true', function() { + it('should store the heading order path and level for [role=heading] elements and return true', function () { var vNode = queryFixture( '
One
Three
' ); @@ -31,7 +31,7 @@ describe('heading-order', function() { }); }); - it('should handle incorrect aria-level values', function() { + it('should handle incorrect aria-level values', function () { var vNode = queryFixture( '
One
Two
' ); @@ -54,7 +54,7 @@ describe('heading-order', function() { }); }); - it('should allow high aria-level values', function() { + it('should allow high aria-level values', function () { var vNode = queryFixture( '
One
' ); @@ -73,7 +73,7 @@ describe('heading-order', function() { }); }); - it('should store the correct header level for hn tags and return true', function() { + it('should store the correct header level for hn tags and return true', function () { var vNode = queryFixture('

One

Three

'); assert.isTrue( axe.testUtils @@ -94,7 +94,7 @@ describe('heading-order', function() { }); }); - it('should allow aria-level to override semantic level for hn tags and return true', function() { + it('should allow aria-level to override semantic level for hn tags and return true', function () { var vNode = queryFixture( '

Two

Four

' ); @@ -117,8 +117,8 @@ describe('heading-order', function() { }); }); - it('should ignore aria-level on iframe when not used with role=heading', function() { - var vNode = queryFixture(''); + it('should ignore aria-level on iframe when not used with role=heading', function () { + var vNode = queryFixture(''); axe.testUtils .getCheckEvaluate('heading-order') .call(checkContext, null, {}, vNode, { initiator: true }); @@ -132,7 +132,7 @@ describe('heading-order', function() { }); }); - it('should correctly give level on hn tag with role=heading', function() { + it('should correctly give level on hn tag with role=heading', function () { var vNode = queryFixture( '

One

Three

' ); @@ -155,7 +155,7 @@ describe('heading-order', function() { }); }); - it('should return the heading level when an hn tag has an invalid aria-level', function() { + it('should return the heading level when an hn tag has an invalid aria-level', function () { var vNode = queryFixture('

One

'); assert.isTrue( axe.testUtils @@ -172,7 +172,7 @@ describe('heading-order', function() { }); }); - it('should store the location of iframes', function() { + it('should store the location of iframes', function () { var vNode = queryFixture( '

One

Three

' ); @@ -197,8 +197,8 @@ describe('heading-order', function() { }); }); - describe('after', function() { - it('should return false when header level increases by 2', function() { + describe('after', function () { + it('should return false when header level increases by 2', function () { var results = [ { data: { @@ -224,7 +224,7 @@ describe('heading-order', function() { assert.isFalse(checks['heading-order'].after(results)[1].result); }); - it('should return true when header level decreases by 1', function() { + it('should return true when header level decreases by 1', function () { var results = [ { data: { @@ -250,7 +250,7 @@ describe('heading-order', function() { assert.isTrue(checks['heading-order'].after(results)[1].result); }); - it('should return true when header level decreases by 2', function() { + it('should return true when header level decreases by 2', function () { var results = [ { data: { @@ -276,7 +276,7 @@ describe('heading-order', function() { assert.isTrue(checks['heading-order'].after(results)[1].result); }); - it('should return true when there is only one header', function() { + it('should return true when there is only one header', function () { var results = [ { data: { @@ -294,7 +294,7 @@ describe('heading-order', function() { assert.isTrue(checks['heading-order'].after(results)[0].result); }); - it('should return true when header level increases by 1', function() { + it('should return true when header level increases by 1', function () { var results = [ { data: { @@ -324,7 +324,7 @@ describe('heading-order', function() { assert.isTrue(checks['heading-order'].after(results)[1].result); }); - it('should return true if heading levels are correct across iframes', function() { + it('should return true if heading levels are correct across iframes', function () { var results = [ { data: { @@ -374,7 +374,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[2].result); }); - it('should return false if heading levels are incorrect across iframes', function() { + it('should return false if heading levels are incorrect across iframes', function () { var results = [ { data: { @@ -424,7 +424,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[2].result); }); - it('should handle nested iframes', function() { + it('should handle nested iframes', function () { var results = [ { data: { @@ -493,7 +493,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[3].result); }); - it('sets the result to undefined when the heading is not in the map', function() { + it('sets the result to undefined when the heading is not in the map', function () { var results = [ { data: { @@ -522,7 +522,7 @@ describe('heading-order', function() { assert.isUndefined(afterResults[1].result); }); - it('ignores frames for which there are no results', function() { + it('ignores frames for which there are no results', function () { var results = [ { data: { @@ -574,7 +574,7 @@ describe('heading-order', function() { assert.isFalse(afterResults[2].result); }); - it('should not error if iframe is first result', function() { + it('should not error if iframe is first result', function () { var results = [ { data: { @@ -624,7 +624,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[2].result); }); - it('runs when the top frame has no heading', function() { + it('runs when the top frame has no heading', function () { var results = [ { data: { @@ -657,7 +657,7 @@ describe('heading-order', function() { assert.isFalse(afterResults[1].result); }); - it('understand shadow DOM in ancestries', function() { + it('understand shadow DOM in ancestries', function () { var results = [ { data: { @@ -720,7 +720,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[3].result); }); - it('run when an in-between frame has no heading', function() { + it('run when an in-between frame has no heading', function () { var results = [ { data: { @@ -779,7 +779,7 @@ describe('heading-order', function() { assert.isTrue(afterResults[3].result); }); - it('can fail the second heading, if the first is excluded', function() { + it('can fail the second heading, if the first is excluded', function () { var results = [ { data: { diff --git a/test/commons/text/form-control-value.js b/test/commons/text/form-control-value.js index 88f6d39345..56041ed5f3 100644 --- a/test/commons/text/form-control-value.js +++ b/test/commons/text/form-control-value.js @@ -1,4 +1,4 @@ -describe('text.formControlValue', function() { +describe('text.formControlValue', function () { var formControlValue = axe.commons.text.formControlValue; var queryFixture = axe.testUtils.queryFixture; var fixtureSetup = axe.testUtils.fixtureSetup; @@ -16,7 +16,7 @@ describe('text.formControlValue', function() { return nodeType; } - it('returns the first truthy result from text.formControlValueMethods', function() { + it('returns the first truthy result from text.formControlValueMethods', function () { var target = queryFixture( '
bar
' ); @@ -24,28 +24,28 @@ describe('text.formControlValue', function() { assert.equal(formControlValue(target, { startNode: fixture }), 'bar'); }); - it('returns `` when the node equals context.startNode', function() { + it('returns `` when the node equals context.startNode', function () { var target = queryFixture(''); assert.equal(formControlValue(target, { startNode: target }), ''); }); - it('returns `` when accessibleNameFromFieldValue says the role is unsupported', function() { + it('returns `` when accessibleNameFromFieldValue says the role is unsupported', function () { var target = queryFixture( '' ); assert.equal(formControlValue(target), ''); }); - describe('nativeTextboxValue', function() { + describe('nativeTextboxValue', function () { var nativeTextboxValue = axe.commons.text.formControlValueMethods.nativeTextboxValue; - it('returns the value of textarea elements', function() { + it('returns the value of textarea elements', function () { var target = queryFixture('', 'textarea'); assert.equal(nativeTextboxValue(target), 'foo'); }); - it('returns the value of text field input elements', function() { + it('returns the value of text field input elements', function () { var formData = { text: 'foo', date: '2018-12-12', @@ -60,7 +60,7 @@ describe('text.formControlValue', function() { week: '2018-W46' }; fixtureSetup( - Object.keys(formData).reduce(function(html, fieldType) { + Object.keys(formData).reduce(function (html, fieldType) { return ( html + '' + '' + @@ -100,7 +100,7 @@ describe('text.formControlValue', function() { ); axe.utils .querySelectorAll(axe._tree[0], '#fixture input') - .forEach(function(target) { + .forEach(function (target) { // Safari and IE11 do not support the color input type // and thus treat them as text inputs. ignore fallback // inputs @@ -116,16 +116,16 @@ describe('text.formControlValue', function() { }); }); - it('returns the value of DOM nodes', function() { + it('returns the value of DOM nodes', function () { fixture.innerHTML = ''; axe.utils.getFlattenedTree(fixture); assert.equal(nativeTextboxValue(fixture.querySelector('input')), 'foo'); }); - it('returns `` for other elements', function() { + it('returns `` for other elements', function () { // some random elements: ['div', 'span', 'h1', 'output', 'summary', 'style', 'template'].forEach( - function(nodeName) { + function (nodeName) { var target = document.createElement(nodeName); target.value = 'foo'; // That shouldn't do anything fixture.appendChild(target); @@ -136,11 +136,11 @@ describe('text.formControlValue', function() { }); }); - describe('nativeSelectValue', function() { + describe('nativeSelectValue', function () { var nativeSelectValue = axe.commons.text.formControlValueMethods.nativeSelectValue; - it('returns the selected option text', function() { + it('returns the selected option text', function () { var target = queryFixture( '' + ' ' + @@ -163,7 +163,7 @@ describe('text.formControlValue', function() { assert.equal(nativeSelectValue(target), 'baz'); }); - it('returns multiple options, space seperated', function() { + it('returns multiple options, space seperated', function () { // Can't apply multiple "selected" props without setting "multiple" var target = queryFixture( '' + ' ' + @@ -196,7 +196,7 @@ describe('text.formControlValue', function() { assert.equal(nativeSelectValue(target), 'foo bar baz'); }); - it('returns the first option when there are no selected options', function() { + it('returns the first option when there are no selected options', function () { // Browser automatically selectes the first option var target = queryFixture( '' ); assert.equal(nativeTextAlternative(vNode), 'foo'); }); - it('returns `` when no method matches', function() { + it('returns `` when no method matches', function () { var vNode = queryFixture('
baz
'); assert.equal(nativeTextAlternative(vNode), ''); }); - it('returns `` when no accessible text method returned something', function() { - queryFixture('
baz
'); - var div = axe.utils.querySelectorAll(axe._tree[0], '.baz')[0]; + it('returns `` when no accessible text method returned something', function () { + var div = queryFixture('
baz
'); assert.equal(nativeTextAlternative(div), ''); }); - it('returns `` when the node is not an element', function() { - queryFixture('foo bar baz'); + it('returns `` when the node is not an element', function () { + fixtureSetup('foo bar baz'); var fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0]; assert.equal(fixture.children[0].actualNode.nodeType, 3); assert.equal(nativeTextAlternative(fixture.children[0]), ''); }); - it('returns `` when the element has role=presentation', function() { + it('returns `` when the element has role=presentation', function () { var vNode = queryFixture( 'foo' ); assert.equal(nativeTextAlternative(vNode), ''); }); - it('returns `` when the element has role=none', function() { + it('returns `` when the element has role=none', function () { var vNode = queryFixture('foo'); assert.equal(nativeTextAlternative(vNode), ''); }); diff --git a/test/testutils.js b/test/testutils.js index 984a029e2c..362a9cfb99 100644 --- a/test/testutils.js +++ b/test/testutils.js @@ -422,28 +422,46 @@ testUtils.assertStylesheet = function assertStylesheet( } }; -/* +/** * Injecting content into a fixture and return queried element within fixture * - * @param {String|Node} content to go into the fixture (html or DOM node) - * @return HTMLElement + * @param {String|Node} html - content to go into the fixture (html or DOM node) + * @param {String} [query=#target] - the CSS selector query to find target DOM node + * @return {VirtualNode} */ testUtils.queryFixture = function queryFixture(html, query) { + query = query || '#target'; var rootNode = testUtils.fixtureSetup(html); - return axe.utils.querySelectorAll(rootNode, query || '#target')[0]; + var vNode = axe.utils.querySelectorAll(rootNode, query)[0]; + assert.exists( + vNode, + 'Node does not exist in query `' + + query + + '`. This is usually fixed by adding the default target (`id="target"`) to your html parameter. If you do not intend on querying the fixture for #target, consider using `axe.testUtils.fixtureSetup()` instead.' + ); + return vNode; }; /** * Return the checks evaluate method and apply default options - * @param {String} checkId - ID of the check - * @return Function + * @param {string} checkId - ID of the check + * @param {} testOptions - Options for the test + * @returns {evaluateWrapper} evaluateWrapper - Check evaluation wrapper */ testUtils.getCheckEvaluate = function getCheckEvaluate(checkId, testOptions) { var check = checks[checkId]; testOptions = testOptions || {}; - return function evaluateWrapper(node, options, virtualNode, context) { + /** + * Wraps a check for evaluation using .call() + * @param {HTMLElement} node + * @param {*} options + * @param {VirtualNode} virtualNode + * @param {Context} context + */ + var evaluateWrapper = function (node, options, virtualNode, context) { var opts = check.getOptions(options); + var result = check.evaluate.call(this, node, opts, virtualNode, context); // ensure that every result has a corresponding message @@ -519,6 +537,7 @@ testUtils.getCheckEvaluate = function getCheckEvaluate(checkId, testOptions) { return result; }; + return evaluateWrapper; }; /**