diff --git a/test/fixtures/data-attribute.html b/test/fixtures/basic-data-attribute.html similarity index 100% rename from test/fixtures/data-attribute.html rename to test/fixtures/basic-data-attribute.html diff --git a/test/fixtures/nested-data-attribute.html b/test/fixtures/nested-data-attribute.html new file mode 100644 index 0000000..32939d1 --- /dev/null +++ b/test/fixtures/nested-data-attribute.html @@ -0,0 +1,26 @@ + + + + + + + nested fixture + + + + + +
+ +
Click me
+
+ +
Click me
+
+
+ + + diff --git a/test/specs/basic-data-attribute.spec.js b/test/specs/basic-data-attribute.spec.js new file mode 100644 index 0000000..940ec1e --- /dev/null +++ b/test/specs/basic-data-attribute.spec.js @@ -0,0 +1,91 @@ +describe('Basic Data-Attribute', function() { + before(function() { + fixture.setBase('test/fixtures'); + }); + + beforeEach(function(done) { + fixture.load('basic-data-attribute.html'); + // Because inert relies on MutationObservers, + // wait till next microtask before running tests. + setTimeout(function() { + done(); + }, 0); + }); + + afterEach(function() { + fixture.cleanup(); + }); + + it('should have no effect on elements outside inert region', function() { + var button = fixture.el.querySelector('#non-inert'); + expect(isUnfocusable(button)).to.equal(false); + }); + + it('should make implicitly focusable child not focusable', function() { + var button = fixture.el.querySelector('[data-inert] button'); + expect(isUnfocusable(button)).to.equal(true); + }); + + it('should make explicitly focusable child not focusable', function() { + var div = fixture.el.querySelector('#fake-button'); + expect(div.hasAttribute('tabindex')).to.equal(false); + expect(isUnfocusable(div)).to.equal(true); + }); + + it('should remove attribute and un-inert content if set to false', function() { + var inertContainer = fixture.el.querySelector('[data-inert]'); + expect(inertContainer.hasAttribute('inert')).to.equal(true); + expect(inertContainer.inert).to.equal(true); + var button = inertContainer.querySelector('button'); + expect(isUnfocusable(button)).to.equal(true); + + inertContainer.inert = false; + expect(inertContainer.hasAttribute('inert')).to.equal(false); + expect(inertContainer.inert).to.equal(false); + expect(isUnfocusable(button)).to.equal(false); + }); + + it('should be able to be reapplied multiple times', function() { + var inertContainer = fixture.el.querySelector('[data-inert]'); + var button = document.querySelector('[data-inert] button'); + expect(isUnfocusable(button)).to.equal(true); + + inertContainer.inert = false; + expect(isUnfocusable(button)).to.equal(false); + + inertContainer.inert = true; + expect(isUnfocusable(button)).to.equal(true); + + inertContainer.inert = false; + expect(isUnfocusable(button)).to.equal(false); + + inertContainer.inert = true; + expect(isUnfocusable(button)).to.equal(true); + }); + + it('should apply to dynamically added content', function(done) { + var newButton = document.createElement('button'); + newButton.textContent = 'Click me too'; + var inertContainer = fixture.el.querySelector('[data-inert]'); + inertContainer.appendChild(newButton); + // Wait for the next microtask to allow mutation observers to react to the DOM change + setTimeout(function() { + expect(isUnfocusable(newButton)).to.equal(true); + done(); + }, 0); + }); + + it('should be detected on dynamically added content', function(done) { + var temp = document.createElement('div'); + fixture.el.appendChild(temp); + temp.outerHTML = '
'; + var div = fixture.el.querySelector('#inert2'); + // Wait for the next microtask to allow mutation observers to react to the DOM change + setTimeout(function() { + expect(div.inert).to.equal(true); + var button = div.querySelector('button'); + expect(isUnfocusable(button)).to.equal(true); + done(); + }, 0); + }); +}); diff --git a/test/specs/data-attribute.spec.js b/test/specs/data-attribute.spec.js deleted file mode 100644 index 4bf6a55..0000000 --- a/test/specs/data-attribute.spec.js +++ /dev/null @@ -1,29 +0,0 @@ -describe('Data-Attribute', function() { - before(function() { - fixture.setBase('test/fixtures'); - }); - - beforeEach(function(done) { - fixture.load('data-attribute.html'); - // Because inert relies on MutationObservers, - // wait till next microtask before running tests. - setTimeout(function() { - done(); - }, 0); - }); - - afterEach(function() { - fixture.cleanup(); - }); - - it('should make implicitly focusable child not focusable', function() { - var button = fixture.el.querySelector('[data-inert] button'); - expect(isUnfocusable(button)).to.equal(true); - }); - - it('should make explicitly focusable child not focusable', function() { - var div = fixture.el.querySelector('#fake-button'); - expect(div.hasAttribute('tabindex')).to.equal(false); - expect(isUnfocusable(div)).to.equal(true); - }); -}); diff --git a/test/specs/nested-data-attribute.spec.js b/test/specs/nested-data-attribute.spec.js new file mode 100644 index 0000000..9ab0a3b --- /dev/null +++ b/test/specs/nested-data-attribute.spec.js @@ -0,0 +1,39 @@ +describe('Nested inert regions with data-attribute', function() { + before(function() { + fixture.setBase('test/fixtures'); + }); + + beforeEach(function(done) { + fixture.load('nested-data-attribute.html'); + // Because inert relies on MutationObservers, + // wait till next microtask before running tests. + setTimeout(function() { + done(); + }, 0); + }); + + afterEach(function() { + fixture.cleanup(); + }); + + it('should be detected on dynamically added content within an inert root', function(done) { + var temp = document.createElement('div'); + var outerContainer = fixture.el.querySelector('#outer'); + outerContainer.appendChild(temp); + expect(temp.parentElement).to.eql(outerContainer); + temp.outerHTML = '
'; + var div = outerContainer.querySelector('#inner2'); + // Wait for the next microtask to allow mutation observers to react to the DOM change + setTimeout(function() { + expect(div.inert).to.equal(true); + var button = div.querySelector('button'); + expect(isUnfocusable(button)).to.equal(true); + + // un-inerting outer container doesn't mess up the new inner container + outerContainer.inert = false; + expect(div.inert).to.equal(true); + expect(isUnfocusable(button)).to.equal(true); + done(); + }, 0); + }); +});