diff --git a/lib/core/utils/get-ancestry.js b/lib/core/utils/get-ancestry.js index b80edb9338..f3ed38d272 100644 --- a/lib/core/utils/get-ancestry.js +++ b/lib/core/utils/get-ancestry.js @@ -2,22 +2,24 @@ import getShadowSelector from './get-shadow-selector'; function generateAncestry(node) { const nodeName = node.nodeName.toLowerCase(); - const parent = node.parentElement; - if (!parent) { - return nodeName; - } + const parentElement = node.parentElement; + const parentNode = node.parentNode; let nthChild = ''; if ( nodeName !== 'head' && nodeName !== 'body' && - parent.children.length > 1 + parentNode.children.length > 1 ) { - const index = Array.prototype.indexOf.call(parent.children, node) + 1; + const index = Array.prototype.indexOf.call(parentNode.children, node) + 1; nthChild = `:nth-child(${index})`; } - return generateAncestry(parent) + ' > ' + nodeName + nthChild; + if (!parentElement) { + return nodeName + nthChild; + } + + return generateAncestry(parentElement) + ' > ' + nodeName + nthChild; } /** diff --git a/test/core/utils/get-ancestry.js b/test/core/utils/get-ancestry.js index c074f6f138..071853fb8d 100644 --- a/test/core/utils/get-ancestry.js +++ b/test/core/utils/get-ancestry.js @@ -1,50 +1,69 @@ -describe('axe.utils.getAncestry', function () { +describe('axe.utils.getAncestry', () => { 'use strict'; - var fixture = document.getElementById('fixture'); - var shadowTest = axe.testUtils.shadowSupport.v1 ? it : xit; + const fixture = document.getElementById('fixture'); - afterEach(function () { + afterEach(() => { fixture.innerHTML = ''; }); - it('should be a function', function () { + it('should be a function', () => { assert.isFunction(axe.utils.getAncestry); }); - it('should generate an ancestry selector', function () { + it('should generate an ancestry selector', () => { fixture.innerHTML = '
1

2

3

'; - var sel1 = axe.utils.getAncestry(fixture.children[0]); + const sel1 = axe.utils.getAncestry(fixture.children[0]); assert.equal(sel1, 'html > body > div:nth-child(1) > div:nth-child(1)'); assert.isNotNull(document.querySelector(sel1)); - var sel2 = axe.utils.getAncestry(fixture.children[1]); + const sel2 = axe.utils.getAncestry(fixture.children[1]); assert.equal(sel2, 'html > body > div:nth-child(1) > p:nth-child(2)'); assert.isNotNull(document.querySelector(sel1)); - var sel3 = axe.utils.getAncestry(fixture.children[2]); + const sel3 = axe.utils.getAncestry(fixture.children[2]); assert.equal(sel3, 'html > body > div:nth-child(1) > p:nth-child(3)'); assert.isNotNull(document.querySelector(sel1)); }); - shadowTest('generates selectors of nested shadow trees', function () { - var node = document.createElement('section'); + it('generates selectors of nested shadow trees', () => { + const node = document.createElement('section'); fixture.appendChild(node); - var shadowRoot1 = node.attachShadow({ mode: 'open' }); + const shadowRoot1 = node.attachShadow({ mode: 'open' }); shadowRoot1.innerHTML = '
'; - var shadowRoot2 = shadowRoot1 + const shadowRoot2 = shadowRoot1 .querySelector('article') .attachShadow({ mode: 'open' }); shadowRoot2.innerHTML = '

Hello world

'; - var target = shadowRoot2.querySelector('h1'); - var sel = axe.utils.getAncestry(target); + const target = shadowRoot2.querySelector('h1'); + const sel = axe.utils.getAncestry(target); assert.deepEqual(sel, [ 'html > body > div:nth-child(1) > section', 'div > article', 'h1' ]); }); + + it('generates selectors of siblings in shadow tree', () => { + const node = document.createElement('section'); + fixture.appendChild(node); + + const shadowRoot = node.attachShadow({ mode: 'open' }); + shadowRoot.innerHTML = '
1
2
'; + + const sel1 = axe.utils.getAncestry(shadowRoot.children[0]); + assert.deepEqual(sel1, [ + 'html > body > div:nth-child(1) > section', + 'div:nth-child(1)' + ]); + + const sel2 = axe.utils.getAncestry(shadowRoot.children[1]); + assert.deepEqual(sel2, [ + 'html > body > div:nth-child(1) > section', + 'div:nth-child(2)' + ]); + }); });