Skip to content

Commit

Permalink
improve tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@keithamus
keithamus committed Feb 14, 2024
1 parent 385656a commit 1762a34
Showing 1 changed file with 61 additions and 69 deletions.
130 changes: 61 additions & 69 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,35 +44,38 @@ 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])
})

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)
})
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -188,17 +195,13 @@ describe('tab-container', function () {
beforeEach(function () {
document.body.innerHTML = `
<tab-container class="test-top">
<div role="tablist" >
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab">Tab two</button>
<button type="button" role="tab">Tab three</button>
</div>
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab">Tab two</button>
<button type="button" role="tab">Tab three</button>
<div role="tabpanel">
<tab-container class="test-nested">
<div role="tablist">
<button type="button" role="tab" aria-selected="true">Nested Tab one</button>
<button type="button" role="tab">Nested Tab two</button>
</div>
<button type="button" role="tab" aria-selected="true">Nested Tab one</button>
<button type="button" role="tab">Nested Tab two</button>
<div role="tabpanel">Nested Panel 1</div>
<div role="tabpanel" hidden>Nested Panel 2</div>
</tab-container>
Expand All @@ -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', () => {

Check failure on line 223 in test/test.js

View workflow job for this annotation

GitHub Actions / build 

it.only not permitted
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()

Expand All @@ -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])
Expand Down Expand Up @@ -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 = `
<tab-container>
<div role="tablist" aria-orientation="vertical">
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab">Tab two</button>
<button type="button" role="tab">Tab three</button>
</div>
<tab-container vertical>
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab">Tab two</button>
<button type="button" role="tab">Tab three</button>
<div role="tabpanel">
Panel 1
</div>
Expand All @@ -313,61 +307,59 @@ 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)
})

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)
})
Expand Down

0 comments on commit 1762a34

Please sign in to comment.