Skip to content

Commit 071c235

Browse files
keithamuskeithamus
authored
Merge branch 'main' into expand-tests-to-be-more-descriptive-strict
2 parents 42c61ec + ddbcba0 commit 071c235

2 files changed

Lines changed: 153 additions & 36 deletions

File tree

‎src/tab-container-element.ts‎

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const HTMLElement = globalThis.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
2+
13
type IncrementKeyCode = 'ArrowRight' | 'ArrowDown'
24
type DecrementKeyCode = 'ArrowUp' | 'ArrowLeft'
35

@@ -7,6 +9,30 @@ function getTabs(el: TabContainerElement): HTMLElement[] {
79
)
810
}
911

12+
export class TabContainerChangeEvent extends Event {
13+
constructor(type: string, {tab, panel, ...init}: EventInit & {tab?: Element; panel?: Element}) {
14+
super(type, init)
15+
this.#tab = tab || null
16+
this.#panel = panel || null
17+
}
18+
19+
get detail() {
20+
// eslint-disable-next-line no-console
21+
console.warn('TabContainerElement.detail is deprecated, please use .panel instead')
22+
return {relatedTarget: this.#panel}
23+
}
24+
25+
#panel: Element | null = null
26+
get panel(): Element | null {
27+
return this.#panel
28+
}
29+
30+
#tab: Element | null = null
31+
get tab(): Element | null {
32+
return this.#tab
33+
}
34+
}
35+
1036
function getNavigationKeyCodes(vertical: boolean): [IncrementKeyCode[], DecrementKeyCode[]] {
1137
if (vertical) {
1238
return [
@@ -24,6 +50,42 @@ export class TabContainerElement extends HTMLElement {
2450
return this
2551
}
2652

53+
#onTabContainerChange: ((event: TabContainerChangeEvent) => void) | null = null
54+
get onTabContainerChange() {
55+
return this.#onTabContainerChange
56+
}
57+
58+
set onTabContainerChange(listener: ((event: TabContainerChangeEvent) => void) | null) {
59+
if (this.#onTabContainerChange) {
60+
this.removeEventListener(
61+
'tab-container-change',
62+
this.#onTabContainerChange as unknown as EventListenerOrEventListenerObject,
63+
)
64+
}
65+
this.#onTabContainerChange = typeof listener === 'object' || typeof listener === 'function' ? listener : null
66+
if (typeof listener === 'function') {
67+
this.addEventListener('tab-container-change', listener as unknown as EventListenerOrEventListenerObject)
68+
}
69+
}
70+
71+
#onTabContainerChanged: ((event: TabContainerChangeEvent) => void) | null = null
72+
get onTabContainerChanged() {
73+
return this.#onTabContainerChanged
74+
}
75+
76+
set onTabContainerChanged(listener: ((event: TabContainerChangeEvent) => void) | null) {
77+
if (this.#onTabContainerChanged) {
78+
this.removeEventListener(
79+
'tab-container-changed',
80+
this.#onTabContainerChanged as unknown as EventListenerOrEventListenerObject,
81+
)
82+
}
83+
this.#onTabContainerChanged = typeof listener === 'object' || typeof listener === 'function' ? listener : null
84+
if (typeof listener === 'function') {
85+
this.addEventListener('tab-container-changed', listener as unknown as EventListenerOrEventListenerObject)
86+
}
87+
}
88+
2789
connectedCallback(): void {
2890
this.addEventListener('keydown', (event: KeyboardEvent) => {
2991
const target = event.target
@@ -99,10 +161,11 @@ export class TabContainerElement extends HTMLElement {
99161
const selectedPanel = panels[index]
100162

101163
const cancelled = !this.dispatchEvent(
102-
new CustomEvent('tab-container-change', {
164+
new TabContainerChangeEvent('tab-container-change', {
103165
bubbles: true,
104166
cancelable: true,
105-
detail: {relatedTarget: selectedPanel},
167+
tab: selectedTab,
168+
panel: selectedPanel,
106169
}),
107170
)
108171
if (cancelled) return
@@ -124,9 +187,10 @@ export class TabContainerElement extends HTMLElement {
124187
selectedPanel.hidden = false
125188

126189
this.dispatchEvent(
127-
new CustomEvent('tab-container-changed', {
190+
new TabContainerChangeEvent('tab-container-changed', {
128191
bubbles: true,
129-
detail: {relatedTarget: selectedPanel},
192+
tab: selectedTab,
193+
panel: selectedPanel,
130194
}),
131195
)
132196
}

‎test/test.js‎

Lines changed: 85 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {assert, expect} from '@open-wc/testing'
1+
import {assert} from '@open-wc/testing'
22
import '../src/index.ts'
33

44
describe('tab-container', function () {
@@ -21,6 +21,30 @@ describe('tab-container', function () {
2121
})
2222
})
2323

24+
describe('events', function () {
25+
it('has an onTabContainerChange property for the change event', function () {
26+
const el = document.createElement('tab-container')
27+
let called = false
28+
const listener = () => (called = true)
29+
el.onTabContainerChange = listener
30+
assert.equal(el.onTabContainerChange, listener)
31+
assert.equal(called, false)
32+
el.dispatchEvent(new Event('tab-container-change'))
33+
assert.equal(called, true)
34+
})
35+
36+
it('has an onTabContainerChanged property for the changed event', function () {
37+
const el = document.createElement('tab-container')
38+
let called = false
39+
const listener = () => (called = true)
40+
el.onTabContainerChanged = listener
41+
assert.equal(el.onTabContainerChanged, listener)
42+
assert.equal(called, false)
43+
el.dispatchEvent(new Event('tab-container-changed'))
44+
assert.equal(called, true)
45+
})
46+
})
47+
2448
describe('after tree insertion', function () {
2549
beforeEach(function () {
2650
document.body.innerHTML = `
@@ -50,16 +74,9 @@ describe('tab-container', function () {
5074
})
5175

5276
afterEach(function () {
53-
// Check to make sure we still have accessible markup after the test finishes running.
54-
expect(document.body).to.be.accessible()
55-
5677
document.body.innerHTML = ''
5778
})
5879

59-
it('has accessible markup', function () {
60-
expect(document.body).to.be.accessible()
61-
})
62-
6380
it('click works and `tab-container-changed` event is dispatched', function () {
6481
tabs[1].click()
6582
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
@@ -71,7 +88,12 @@ describe('tab-container', function () {
7188
'events fired in right order',
7289
)
7390
assert.deepStrictEqual(
74-
events.map(e => e.detail.relatedTarget),
91+
events.map(e => e.tab),
92+
[tabs[1], tabs[1]],
93+
'change events point to second tab',
94+
)
95+
assert.deepStrictEqual(
96+
events.map(e => e.panel),
7597
[panels[1], panels[1]],
7698
'change events point to second panel',
7799
)
@@ -184,7 +206,12 @@ describe('tab-container', function () {
184206
'events fired in right order',
185207
)
186208
assert.deepStrictEqual(
187-
events.map(e => e.detail.relatedTarget),
209+
events.map(e => e.tab),
210+
[tabs[1], tabs[1]],
211+
'change events point to second tab',
212+
)
213+
assert.deepStrictEqual(
214+
events.map(e => e.panel),
188215
[panels[1], panels[1]],
189216
'change events point to second panel',
190217
)
@@ -240,16 +267,9 @@ describe('tab-container', function () {
240267
})
241268

242269
afterEach(function () {
243-
// Check to make sure we still have accessible markup after the test finishes running.
244-
expect(document.body).to.be.accessible()
245-
246270
document.body.innerHTML = ''
247271
})
248272

249-
it('has accessible markup', function () {
250-
expect(document.body).to.be.accessible()
251-
})
252-
253273
it('only switches closest tab-containers on click', () => {
254274
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false])
255275
assert.deepStrictEqual(nestedTabs.map(isSelected), [true, false])
@@ -325,16 +345,9 @@ describe('tab-container', function () {
325345
})
326346

327347
afterEach(function () {
328-
// Check to make sure we still have accessible markup after the test finishes running.
329-
expect(document.body).to.be.accessible()
330-
331348
document.body.innerHTML = ''
332349
})
333350

334-
it('has accessible markup', function () {
335-
expect(document.body).to.be.accessible()
336-
})
337-
338351
it('up and down keyboard shortcuts work and `tab-container-changed` events are dispatched', () => {
339352
tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowUp', bubbles: true}))
340353
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
@@ -347,7 +360,12 @@ describe('tab-container', function () {
347360
'events fired in right order',
348361
)
349362
assert.deepStrictEqual(
350-
events.map(e => e.detail.relatedTarget),
363+
events.map(e => e.tab),
364+
[tabs[2], tabs[2]],
365+
'change events point to second tab',
366+
)
367+
assert.deepStrictEqual(
368+
events.map(e => e.panel),
351369
[panels[2], panels[2]],
352370
'change events point to second panel',
353371
)
@@ -364,7 +382,12 @@ describe('tab-container', function () {
364382
'events fired in right order',
365383
)
366384
assert.deepStrictEqual(
367-
events.map(e => e.detail.relatedTarget),
385+
events.map(e => e.tab),
386+
[tabs[0], tabs[0]],
387+
'change events point to first tab',
388+
)
389+
assert.deepStrictEqual(
390+
events.map(e => e.panel),
368391
[panels[0], panels[0]],
369392
'change events point to first panel',
370393
)
@@ -381,7 +404,12 @@ describe('tab-container', function () {
381404
'events fired in right order',
382405
)
383406
assert.deepStrictEqual(
384-
events.map(e => e.detail.relatedTarget),
407+
events.map(e => e.tab),
408+
[tabs[1], tabs[1]],
409+
'change events point to second tab',
410+
)
411+
assert.deepStrictEqual(
412+
events.map(e => e.panel),
385413
[panels[1], panels[1]],
386414
'change events point to second panel',
387415
)
@@ -398,7 +426,12 @@ describe('tab-container', function () {
398426
'events fired in right order',
399427
)
400428
assert.deepStrictEqual(
401-
events.map(e => e.detail.relatedTarget),
429+
events.map(e => e.tab),
430+
[tabs[2], tabs[2]],
431+
'change events point to third tab',
432+
)
433+
assert.deepStrictEqual(
434+
events.map(e => e.panel),
402435
[panels[2], panels[2]],
403436
'change events point to third panel',
404437
)
@@ -416,7 +449,12 @@ describe('tab-container', function () {
416449
'events fired in right order',
417450
)
418451
assert.deepStrictEqual(
419-
events.map(e => e.detail.relatedTarget),
452+
events.map(e => e.tab),
453+
[tabs[2], tabs[2]],
454+
'change events point to third tab',
455+
)
456+
assert.deepStrictEqual(
457+
events.map(e => e.panel),
420458
[panels[2], panels[2]],
421459
'change events point to third panel',
422460
)
@@ -433,7 +471,12 @@ describe('tab-container', function () {
433471
'events fired in right order',
434472
)
435473
assert.deepStrictEqual(
436-
events.map(e => e.detail.relatedTarget),
474+
events.map(e => e.tab),
475+
[tabs[0], tabs[0]],
476+
'change events point to first tab',
477+
)
478+
assert.deepStrictEqual(
479+
events.map(e => e.panel),
437480
[panels[0], panels[0]],
438481
'change events point to first panel',
439482
)
@@ -450,7 +493,12 @@ describe('tab-container', function () {
450493
'events fired in right order',
451494
)
452495
assert.deepStrictEqual(
453-
events.map(e => e.detail.relatedTarget),
496+
events.map(e => e.tab),
497+
[tabs[1], tabs[1]],
498+
'change events point to second tab',
499+
)
500+
assert.deepStrictEqual(
501+
events.map(e => e.panel),
454502
[panels[1], panels[1]],
455503
'change events point to second panel',
456504
)
@@ -467,7 +515,12 @@ describe('tab-container', function () {
467515
'events fired in right order',
468516
)
469517
assert.deepStrictEqual(
470-
events.map(e => e.detail.relatedTarget),
518+
events.map(e => e.tab),
519+
[tabs[2], tabs[2]],
520+
'change events point to third tab',
521+
)
522+
assert.deepStrictEqual(
523+
events.map(e => e.panel),
471524
[panels[2], panels[2]],
472525
'change events point to third panel',
473526
)

0 commit comments

Comments
 (0)