From 1762a345e62abc46ac03f80bad5d881a65c6137b Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 14 Feb 2024 14:35:45 +0000 Subject: [PATCH] improve tests --- test/test.js | 130 ++++++++++++++++++++++++--------------------------- 1 file changed, 61 insertions(+), 69 deletions(-) diff --git a/test/test.js b/test/test.js index a734e2c..4d01744 100644 --- a/test/test.js +++ b/test/test.js @@ -44,16 +44,18 @@ describe('tab-container', function () { it('click works and `tab-container-changed` event is dispatched', function () { const tabContainer = document.querySelector('tab-container') const tabs = document.querySelectorAll('button') - const panels = document.querySelectorAll('[role="tabpanel"]') + const panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) let counter = 0 tabContainer.addEventListener('tab-container-changed', event => { counter++ - assert.equal(event.detail.relatedTarget, panels[1]) + assert.equal(event.panel, panels[1]) + assert.equal(event.tab, tabs[1]) }) + const isHidden = e => !e.assignedSlot tabs[1].click() - assert(panels[0].hidden) - assert(!panels[1].hidden) + assert.equal(tabContainer.activePanel, panels[1]) + assert.deepStrictEqual(panels.map(isHidden), [true, false, true]) assert.equal(counter, 1) assert.equal(document.activeElement, tabs[1]) }) @@ -61,18 +63,19 @@ describe('tab-container', function () { it('keyboard shortcuts work and `tab-container-changed` events are dispatched', function () { const tabContainer = document.querySelector('tab-container') const tabs = document.querySelectorAll('button') - const panels = document.querySelectorAll('[role="tabpanel"]') + const panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) let counter = 0 tabContainer.addEventListener('tab-container-changed', () => counter++) + const isHidden = e => !e.assignedSlot tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true})) - assert(panels[0].hidden) - assert(!panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[2]) + assert.deepStrictEqual(panels.map(isHidden), [true, true, false]) assert.equal(document.activeElement, tabs[2]) tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'Home', bubbles: true})) - assert(!panels[0].hidden) - assert(panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[0]) + assert.deepStrictEqual(panels.map(isHidden), [false, true, true]) assert.equal(document.activeElement, tabs[0]) assert.equal(counter, 2) }) @@ -102,19 +105,22 @@ describe('tab-container', function () { it('click works and a cancellable `tab-container-change` event is dispatched', function () { const tabContainer = document.querySelector('tab-container') const tabs = document.querySelectorAll('button') - const panels = document.querySelectorAll('[role="tabpanel"]') + const panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) let counter = 0 tabContainer.addEventListener('tab-container-change', event => { counter++ - assert.equal(event.detail.relatedTarget, panels[1]) + assert.equal(event.panel, panels[0]) + assert.equal(event.tab, tabs[0]) event.preventDefault() }) + const isHidden = e => !e.assignedSlot + + assert.deepStrictEqual(panels.map(isHidden), [false, true, true]) tabs[1].click() // Since we prevented the event, nothing should have changed. - assert(!panels[0].hidden) - assert(panels[1].hidden) + assert.deepStrictEqual(panels.map(isHidden), [false, true, true]) // The event listener should have been called. assert.equal(counter, 1) @@ -161,7 +167,8 @@ describe('tab-container', function () { let counter = 0 tabContainer.addEventListener('tab-container-changed', event => { counter++ - assert.equal(event.detail.relatedTarget, panels[1]) + assert.equal(event.panel, panels[1]) + assert.equal(event.tab, tabs[1]) }) tabContainer.selectTab(1) @@ -188,17 +195,13 @@ describe('tab-container', function () { beforeEach(function () { document.body.innerHTML = ` -
- - - -
+ + +
-
- - -
+ +
Nested Panel 1
 @@ -213,29 +216,22 @@ describe('tab-container', function () { ` }) - afterEach(function () { - // Check to make sure we still have accessible markup after the test finishes running. - expect(document.body).to.be.accessible() - + afterEach(async function () { document.body.innerHTML = '' }) - it('has accessible markup', function () { - expect(document.body).to.be.accessible() - }) - - it('only switches closest tab-containers on click', () => { - const tabs = Array.from(document.querySelectorAll('.test-top > [role="tablist"] [role="tab"]')) - const nestedTabs = Array.from(document.querySelectorAll('.test-nested > [role="tablist"] > [role="tab"]')) + it.only('only switches closest tab-containers on click', () => { + const tabs = Array.from(document.querySelectorAll('.test-top > [role="tab"]')) + const nestedTabs = Array.from(document.querySelectorAll('.test-nested > [role="tab"]')) const panels = Array.from(document.querySelectorAll('.test-top > [role="tabpanel"]')) const nestedPanels = Array.from(document.querySelectorAll('.test-nested > [role="tabpanel"]')) const isSelected = e => e.matches('[aria-selected=true]') - const isHidden = e => e.hidden + const isHidden = e => !e.assignedSlot - assert.deepStrictEqual(tabs.map(isSelected), [true, false, false]) - assert.deepStrictEqual(nestedTabs.map(isSelected), [true, false]) - assert.deepStrictEqual(panels.map(isHidden), [false, true, true]) - assert.deepStrictEqual(nestedPanels.map(isHidden), [false, true]) + assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected') + assert.deepStrictEqual(nestedTabs.map(isSelected), [true, false], 'First nested tab is selected') + assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible') + assert.deepStrictEqual(nestedPanels.map(isHidden), [false, true], 'First nested panel is visible') nestedTabs[1].click() @@ -255,7 +251,7 @@ describe('tab-container', function () { const panels = Array.from(document.querySelectorAll('.test-top > [role="tabpanel"]')) const nestedPanels = Array.from(document.querySelectorAll('.test-nested > [role="tabpanel"]')) const isSelected = e => e.matches('[aria-selected=true]') - const isHidden = e => e.hidden + const isHidden = e => !e.assignedSlot assert.deepStrictEqual(tabs.map(isSelected), [true, false, false]) assert.deepStrictEqual(nestedTabs.map(isSelected), [true, false]) @@ -284,15 +280,13 @@ describe('tab-container', function () { }) }) - describe('with [role="tablist"][aria-orientation="vertical"]', function () { + describe('with [role="tablist"] vertical', function () { beforeEach(function () { document.body.innerHTML = ` - -
- - - -
+ + + +
Panel 1
@@ -313,30 +307,29 @@ describe('tab-container', function () { it('up and down keyboard shortcuts work and `tab-container-changed` events are dispatched', () => { const tabContainer = document.querySelector('tab-container') const tabs = document.querySelectorAll('button') - const panels = document.querySelectorAll('[role="tabpanel"]') + const panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) let counter = 0 tabContainer.addEventListener('tab-container-changed', () => counter++) + const isHidden = e => !e.assignedSlot tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowUp', bubbles: true})) - assert(panels[0].hidden) - assert(!panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[2]) + assert.deepStrictEqual(panels.map(isHidden), [true, true, false]) assert.equal(document.activeElement, tabs[2]) tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'Home', bubbles: true})) - assert(!panels[0].hidden) - assert(panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[0]) + assert.deepStrictEqual(panels.map(isHidden), [false, true, true]) assert.equal(document.activeElement, tabs[0]) tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowDown', bubbles: true})) - assert(panels[0].hidden) - assert(!panels[1].hidden) - assert(panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[1]) + assert.deepStrictEqual(panels.map(isHidden), [true, false, true]) assert.equal(document.activeElement, tabs[1]) tabs[1].dispatchEvent(new KeyboardEvent('keydown', {code: 'End', bubbles: true})) - assert(panels[0].hidden) - assert(panels[1].hidden) - assert(!panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[2]) + assert.deepStrictEqual(panels.map(isHidden), [true, true, false]) assert.equal(document.activeElement, tabs[2]) assert.equal(counter, 4) }) @@ -344,30 +337,29 @@ describe('tab-container', function () { it('left and right keyboard shortcuts work and `tab-container-changed` events are dispatched', () => { const tabContainer = document.querySelector('tab-container') const tabs = document.querySelectorAll('button') - const panels = document.querySelectorAll('[role="tabpanel"]') + const panels = Array.from(document.querySelectorAll('[role="tabpanel"]')) let counter = 0 tabContainer.addEventListener('tab-container-changed', () => counter++) + const isHidden = e => !e.assignedSlot tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true})) - assert(panels[0].hidden) - assert(!panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[2]) + assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'ArrowLeft cycles from first to last tab') assert.equal(document.activeElement, tabs[2]) tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'Home', bubbles: true})) - assert(!panels[0].hidden) - assert(panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[0]) + assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'Home goes back to first tab') assert.equal(document.activeElement, tabs[0]) tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowRight', bubbles: true})) - assert(panels[0].hidden) - assert(!panels[1].hidden) - assert(panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[1]) + assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'ArrowRight goes to next tab') assert.equal(document.activeElement, tabs[1]) tabs[1].dispatchEvent(new KeyboardEvent('keydown', {code: 'End', bubbles: true})) - assert(panels[0].hidden) - assert(panels[1].hidden) - assert(!panels[2].hidden) + assert.equal(tabContainer.activePanel, panels[2]) + assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'End goes to last tab') assert.equal(document.activeElement, tabs[2]) assert.equal(counter, 4) })