@patternfly/elements 2.0.0-rc.2 → 2.0.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +36 -0
- package/package.json +2 -2
- package/pf-tabs/BaseTab.d.ts +1 -0
- package/pf-tabs/BaseTab.js +8 -5
- package/pf-tabs/BaseTab.js.map +1 -1
- package/pf-tabs/BaseTabs.d.ts +6 -0
- package/pf-tabs/BaseTabs.js +39 -72
- package/pf-tabs/BaseTabs.js.map +1 -1
- package/pf-tabs/pf-tab.css +1 -0
- package/pf-tabs/pf-tab.js +1 -1
- package/pf-tabs/test/pf-tabs.spec.js +58 -2
- package/pf-tabs/test/pf-tabs.spec.js.map +1 -1
- package/pfe.min.js +129 -129
- package/pfe.min.js.map +4 -4
|
@@ -4,6 +4,7 @@ import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
|
|
|
4
4
|
import { setViewport, sendKeys } from '@web/test-runner-commands';
|
|
5
5
|
import { BaseTab } from '../BaseTab.js';
|
|
6
6
|
import { PfTabs } from '../pf-tabs.js';
|
|
7
|
+
import { PfTab } from '../pf-tab.js';
|
|
7
8
|
import '@patternfly/pfe-tools/test/stub-logger.js';
|
|
8
9
|
const TEMPLATE = html `
|
|
9
10
|
<pf-tabs>
|
|
@@ -49,8 +50,6 @@ describe('<pf-tabs>', function () {
|
|
|
49
50
|
tabs.forEach(function (tab, index) {
|
|
50
51
|
const tabId = tab.getAttribute('id');
|
|
51
52
|
const tabControls = tab.getAttribute('aria-controls');
|
|
52
|
-
const tabButton = tab.shadowRoot?.querySelector('button');
|
|
53
|
-
expect(tabButton?.getAttribute('role')).to.equal('tab');
|
|
54
53
|
tabPanels.forEach(function (panel, pindex) {
|
|
55
54
|
if (index === pindex) {
|
|
56
55
|
expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);
|
|
@@ -174,5 +173,62 @@ describe('<pf-tabs>', function () {
|
|
|
174
173
|
expect(nextDisplayStyle).to.not.equal('none');
|
|
175
174
|
});
|
|
176
175
|
});
|
|
176
|
+
describe('manual activation', function () {
|
|
177
|
+
let element;
|
|
178
|
+
let firstTab;
|
|
179
|
+
let secondTab;
|
|
180
|
+
let initialFocus;
|
|
181
|
+
let afterFocus;
|
|
182
|
+
beforeEach(async function () {
|
|
183
|
+
element = await createFixture(html `
|
|
184
|
+
<pf-tabs manual>
|
|
185
|
+
<pf-tab slot="tab" active>Users</pf-tab>
|
|
186
|
+
<pf-tab-panel>Users</pf-tab-panel>
|
|
187
|
+
<pf-tab slot="tab">Containers</pf-tab>
|
|
188
|
+
<pf-tab-panel>Containers</pf-tab-panel>
|
|
189
|
+
<pf-tab slot="tab">Database</pf-tab>
|
|
190
|
+
<pf-tab-panel>Database</pf-tab-panel>
|
|
191
|
+
<pf-tab slot="tab" disabled>Disabled</pf-tab>
|
|
192
|
+
<pf-tab-panel>Disabled</pf-tab-panel>
|
|
193
|
+
<pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
|
|
194
|
+
<pf-tab-panel>Aria Disabled</pf-tab-panel>
|
|
195
|
+
</pf-tabs>
|
|
196
|
+
`);
|
|
197
|
+
[firstTab, secondTab] = element.querySelectorAll('pf-tab');
|
|
198
|
+
await element.updateComplete;
|
|
199
|
+
await nextFrame();
|
|
200
|
+
initialFocus = document.activeElement;
|
|
201
|
+
});
|
|
202
|
+
describe('pressing right arrow', function () {
|
|
203
|
+
beforeEach(async function () {
|
|
204
|
+
firstTab?.focus();
|
|
205
|
+
await sendKeys({ down: 'ArrowRight' });
|
|
206
|
+
await element.updateComplete;
|
|
207
|
+
await nextFrame();
|
|
208
|
+
afterFocus = document.activeElement;
|
|
209
|
+
});
|
|
210
|
+
it('should not activate second tab', function () {
|
|
211
|
+
expect(firstTab.active).to.be.true;
|
|
212
|
+
expect(secondTab.active).to.be.false;
|
|
213
|
+
expect(initialFocus).to.be.ok
|
|
214
|
+
.and.to.not.equal(afterFocus)
|
|
215
|
+
.and.to.not.equal(secondTab);
|
|
216
|
+
});
|
|
217
|
+
describe('then pressing enter', function () {
|
|
218
|
+
beforeEach(async function () {
|
|
219
|
+
await sendKeys({ down: 'Enter' });
|
|
220
|
+
await nextFrame();
|
|
221
|
+
afterFocus = document.activeElement;
|
|
222
|
+
});
|
|
223
|
+
it('should activate second tab', async function () {
|
|
224
|
+
expect(firstTab.active).to.be.false;
|
|
225
|
+
expect(secondTab.active).to.be.true;
|
|
226
|
+
expect(afterFocus).to.equal(secondTab)
|
|
227
|
+
.and.to.not.equal(initialFocus)
|
|
228
|
+
.and.to.not.equal(firstTab);
|
|
229
|
+
});
|
|
230
|
+
});
|
|
231
|
+
});
|
|
232
|
+
});
|
|
177
233
|
});
|
|
178
234
|
//# sourceMappingURL=pf-tabs.spec.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-tabs.spec.js","sourceRoot":"","sources":["pf-tabs.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { BaseTab } from '../BaseTab.js';\nimport { PfTabs } from '../pf-tabs.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nconst TEMPLATE = html`\n <pf-tabs>\n <pf-tab slot=\"tab\" active>Users</pf-tab>\n <pf-tab-panel>Users</pf-tab-panel>\n <pf-tab slot=\"tab\">Containers</pf-tab>\n <pf-tab-panel>Containers</pf-tab-panel>\n <pf-tab slot=\"tab\">Database</pf-tab>\n <pf-tab-panel>Database</pf-tab-panel>\n <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n <pf-tab-panel>Disabled</pf-tab-panel>\n <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n <pf-tab-panel>Aria Disabled</pf-tab-panel>\n </pf-tabs>\n `;\n\nconst DISABLED = html`\n <pf-tabs>\n <pf-tab slot=\"tab\" disabled>Users</pf-tab>\n <pf-tab-panel>Users</pf-tab-panel>\n <pf-tab slot=\"tab\">Containers</pf-tab>\n <pf-tab-panel>Containers</pf-tab-panel>\n <pf-tab slot=\"tab\">Database</pf-tab>\n <pf-tab-panel>Database</pf-tab-panel>\n <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n <pf-tab-panel>Disabled</pf-tab-panel>\n <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n <pf-tab-panel>Aria Disabled</pf-tab-panel>\n </pf-tabs>\n`;\n\ndescribe('<pf-tabs>', function() {\n it('should upgrade', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n expect(el, 'pf-tabs should be an instance of PfeTabs')\n .to.be.an.instanceOf(customElements.get('pf-tabs'))\n .and\n .to.be.an.instanceOf(PfTabs);\n });\n\n it('should apply correct aria attributes', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await nextFrame();\n const tabs = el.querySelectorAll('pf-tab');\n const tabPanels = el.querySelectorAll('pf-tab-panels');\n\n tabs.forEach(function(tab: Element, index: number) {\n const tabId = tab.getAttribute('id');\n const tabControls = tab.getAttribute('aria-controls');\n const tabButton = tab.shadowRoot?.querySelector('button');\n expect(tabButton?.getAttribute('role')).to.equal('tab');\n tabPanels.forEach(function(panel: Element, pindex: number) {\n if (index === pindex) {\n expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);\n expect(panel.id).to.equal(tabControls);\n }\n });\n });\n });\n\n it('should activate the first focusable tab when first tab is disabled and no active is given', async function() {\n const el = await createFixture<PfTabs>(DISABLED);\n await nextFrame();\n const secondTab = el.querySelector('pf-tab:nth-of-type(2)');\n expect(secondTab!.hasAttribute('active')).to.equal(true);\n });\n\n it('should activate tab when given an active attribute', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const tab = el.querySelector('pf-tab:nth-of-type(3)');\n tab!.setAttribute('active', '');\n await nextFrame();\n expect(tab!.hasAttribute('active'), 'active attr').to.equal(true);\n const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n expect(panel?.name, 'active panel').to.equal('Database');\n });\n\n it('should activate tab when activeIndex property is changed', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n el.activeIndex = 2;\n await nextFrame();\n el.activeIndex = 0;\n await nextFrame();\n const tab = el.querySelector('pf-tab:first-of-type');\n expect(tab!.hasAttribute('active')).to.equal(true);\n const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n expect(panel?.name, 'active panel').to.equal('Users');\n });\n\n it('should change focus when keyboard navigation is used', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await el.updateComplete;\n const firstTab = el.querySelector('pf-tab:first-of-type') as HTMLElement;\n const secondTab = el.querySelector('pf-tab:nth-of-type(2)')?.id;\n firstTab?.focus();\n await nextFrame();\n const initial = document.activeElement?.id;\n await sendKeys({ down: 'ArrowRight' });\n await nextFrame();\n const after = document.activeElement?.id;\n expect(initial).to.not.equal(after);\n expect(secondTab).to.equal(after);\n });\n\n it('should open panel at same index of selected tab', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await nextFrame();\n el.activeIndex = 1;\n await nextFrame();\n const inactivePanel = el.querySelector('pf-tab-panel:first-of-type');\n /* given active-key of 1 on a zero based index, nth-of-type(n) takes a 1 based index = 2. */\n const activePanel = el.querySelector('pf-tab-panel:nth-of-type(2)');\n expect(inactivePanel!.hasAttribute('hidden')).to.equal(true);\n expect(activePanel!.hasAttribute('hidden')).to.equal(false);\n });\n\n describe('vertical tabs', function() {\n it('should have vertical styles', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n el.setAttribute('vertical', '');\n await nextFrame();\n const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;\n expect(tabsVerticalStyles).to.be.equal('column');\n });\n });\n\n describe('disabled tabs', function() {\n beforeEach(async function() {\n await setViewport({ width: 320, height: 640 });\n });\n\n it('should aria-disable the tab if disabled', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:nth-of-type(2)')! as BaseTab;\n disabledTab.disabled = true;\n await nextFrame();\n const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');\n expect(tab?.disabled).to.be.true;\n });\n\n it('should have disabled css styles if disabled', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n disabledTab.setAttribute('disabled', 'disabled');\n await nextFrame();\n const button = disabledTab!.shadowRoot!.firstElementChild!;\n const disabledStyles = getComputedStyle(button).backgroundColor;\n expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n });\n\n it('should have disabled css styles if aria-disabled attribute is true', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n disabledTab.setAttribute('aria-disabled', 'true');\n await nextFrame();\n const button = disabledTab!.shadowRoot!.firstElementChild!;\n const disabledStyles = getComputedStyle(button).backgroundColor;\n expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n });\n });\n\n describe('on small screen', function() {\n beforeEach(async function() {\n await setViewport({ width: 320, height: 640 });\n });\n\n it('should overflow if too wide', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';\n expect(tabsOverflow).to.equal(true);\n });\n\n it('should have visible scroll buttons if overflowed', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n // Property 'scrollTimeoutDelay' is protected and only accessible within class 'PfeTabs' and its subclasses.\n // using 150 as a static representation.\n await aTimeout(150);\n const previousTab = el.shadowRoot!.querySelector('#previousTab')!;\n const nextTab = el.shadowRoot!.querySelector('#nextTab')!;\n const prevDisplayStyle = getComputedStyle(previousTab).display;\n const nextDisplayStyle = getComputedStyle(nextTab).display;\n expect(prevDisplayStyle ).to.not.equal('none');\n expect(nextDisplayStyle).to.not.equal('none');\n });\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"pf-tabs.spec.js","sourceRoot":"","sources":["pf-tabs.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { BaseTab } from '../BaseTab.js';\nimport { PfTabs } from '../pf-tabs.js';\nimport { PfTab } from '../pf-tab.js';\n\nimport '@patternfly/pfe-tools/test/stub-logger.js';\n\nconst TEMPLATE = html`\n <pf-tabs>\n <pf-tab slot=\"tab\" active>Users</pf-tab>\n <pf-tab-panel>Users</pf-tab-panel>\n <pf-tab slot=\"tab\">Containers</pf-tab>\n <pf-tab-panel>Containers</pf-tab-panel>\n <pf-tab slot=\"tab\">Database</pf-tab>\n <pf-tab-panel>Database</pf-tab-panel>\n <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n <pf-tab-panel>Disabled</pf-tab-panel>\n <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n <pf-tab-panel>Aria Disabled</pf-tab-panel>\n </pf-tabs>\n `;\n\nconst DISABLED = html`\n <pf-tabs>\n <pf-tab slot=\"tab\" disabled>Users</pf-tab>\n <pf-tab-panel>Users</pf-tab-panel>\n <pf-tab slot=\"tab\">Containers</pf-tab>\n <pf-tab-panel>Containers</pf-tab-panel>\n <pf-tab slot=\"tab\">Database</pf-tab>\n <pf-tab-panel>Database</pf-tab-panel>\n <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n <pf-tab-panel>Disabled</pf-tab-panel>\n <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n <pf-tab-panel>Aria Disabled</pf-tab-panel>\n </pf-tabs>\n`;\n\ndescribe('<pf-tabs>', function() {\n it('should upgrade', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n expect(el, 'pf-tabs should be an instance of PfeTabs')\n .to.be.an.instanceOf(customElements.get('pf-tabs'))\n .and\n .to.be.an.instanceOf(PfTabs);\n });\n\n it('should apply correct aria attributes', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await nextFrame();\n const tabs = el.querySelectorAll('pf-tab');\n const tabPanels = el.querySelectorAll('pf-tab-panels');\n\n tabs.forEach(function(tab: Element, index: number) {\n const tabId = tab.getAttribute('id');\n const tabControls = tab.getAttribute('aria-controls');\n tabPanels.forEach(function(panel: Element, pindex: number) {\n if (index === pindex) {\n expect(panel.getAttribute('aria-labelledby')).to.equal(tabId);\n expect(panel.id).to.equal(tabControls);\n }\n });\n });\n });\n\n it('should activate the first focusable tab when first tab is disabled and no active is given', async function() {\n const el = await createFixture<PfTabs>(DISABLED);\n await nextFrame();\n const secondTab = el.querySelector('pf-tab:nth-of-type(2)');\n expect(secondTab!.hasAttribute('active')).to.equal(true);\n });\n\n it('should activate tab when given an active attribute', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const tab = el.querySelector('pf-tab:nth-of-type(3)');\n tab!.setAttribute('active', '');\n await nextFrame();\n expect(tab!.hasAttribute('active'), 'active attr').to.equal(true);\n const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n expect(panel?.name, 'active panel').to.equal('Database');\n });\n\n it('should activate tab when activeIndex property is changed', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n el.activeIndex = 2;\n await nextFrame();\n el.activeIndex = 0;\n await nextFrame();\n const tab = el.querySelector('pf-tab:first-of-type');\n expect(tab!.hasAttribute('active')).to.equal(true);\n const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');\n expect(panel?.name, 'active panel').to.equal('Users');\n });\n\n it('should change focus when keyboard navigation is used', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await el.updateComplete;\n const firstTab = el.querySelector('pf-tab:first-of-type') as HTMLElement;\n const secondTab = el.querySelector('pf-tab:nth-of-type(2)')?.id;\n firstTab?.focus();\n await nextFrame();\n const initial = document.activeElement?.id;\n await sendKeys({ down: 'ArrowRight' });\n await nextFrame();\n const after = document.activeElement?.id;\n expect(initial).to.not.equal(after);\n expect(secondTab).to.equal(after);\n });\n\n it('should open panel at same index of selected tab', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n await nextFrame();\n el.activeIndex = 1;\n await nextFrame();\n const inactivePanel = el.querySelector('pf-tab-panel:first-of-type');\n /* given active-key of 1 on a zero based index, nth-of-type(n) takes a 1 based index = 2. */\n const activePanel = el.querySelector('pf-tab-panel:nth-of-type(2)');\n expect(inactivePanel!.hasAttribute('hidden')).to.equal(true);\n expect(activePanel!.hasAttribute('hidden')).to.equal(false);\n });\n\n describe('vertical tabs', function() {\n it('should have vertical styles', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n el.setAttribute('vertical', '');\n await nextFrame();\n const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;\n expect(tabsVerticalStyles).to.be.equal('column');\n });\n });\n\n describe('disabled tabs', function() {\n beforeEach(async function() {\n await setViewport({ width: 320, height: 640 });\n });\n\n it('should aria-disable the tab if disabled', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:nth-of-type(2)')! as BaseTab;\n disabledTab.disabled = true;\n await nextFrame();\n const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');\n expect(tab?.disabled).to.be.true;\n });\n\n it('should have disabled css styles if disabled', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n disabledTab.setAttribute('disabled', 'disabled');\n await nextFrame();\n const button = disabledTab!.shadowRoot!.firstElementChild!;\n const disabledStyles = getComputedStyle(button).backgroundColor;\n expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n });\n\n it('should have disabled css styles if aria-disabled attribute is true', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const disabledTab = el.querySelector('pf-tab:first-of-type')!;\n disabledTab.setAttribute('aria-disabled', 'true');\n await nextFrame();\n const button = disabledTab!.shadowRoot!.firstElementChild!;\n const disabledStyles = getComputedStyle(button).backgroundColor;\n expect(disabledStyles).to.equal('rgb(245, 245, 245)');\n });\n });\n\n describe('on small screen', function() {\n beforeEach(async function() {\n await setViewport({ width: 320, height: 640 });\n });\n\n it('should overflow if too wide', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n const tabs = el.shadowRoot!.querySelector('[part=\"tabs\"]')!;\n const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';\n expect(tabsOverflow).to.equal(true);\n });\n\n it('should have visible scroll buttons if overflowed', async function() {\n const el = await createFixture<PfTabs>(TEMPLATE);\n // Property 'scrollTimeoutDelay' is protected and only accessible within class 'PfeTabs' and its subclasses.\n // using 150 as a static representation.\n await aTimeout(150);\n const previousTab = el.shadowRoot!.querySelector('#previousTab')!;\n const nextTab = el.shadowRoot!.querySelector('#nextTab')!;\n const prevDisplayStyle = getComputedStyle(previousTab).display;\n const nextDisplayStyle = getComputedStyle(nextTab).display;\n expect(prevDisplayStyle ).to.not.equal('none');\n expect(nextDisplayStyle).to.not.equal('none');\n });\n });\n\n describe('manual activation', function() {\n let element: PfTabs;\n let firstTab: PfTab;\n let secondTab: PfTab;\n let initialFocus: Element|null;\n let afterFocus: Element|null;\n beforeEach(async function() {\n element = await createFixture<PfTabs>(html`\n <pf-tabs manual>\n <pf-tab slot=\"tab\" active>Users</pf-tab>\n <pf-tab-panel>Users</pf-tab-panel>\n <pf-tab slot=\"tab\">Containers</pf-tab>\n <pf-tab-panel>Containers</pf-tab-panel>\n <pf-tab slot=\"tab\">Database</pf-tab>\n <pf-tab-panel>Database</pf-tab-panel>\n <pf-tab slot=\"tab\" disabled>Disabled</pf-tab>\n <pf-tab-panel>Disabled</pf-tab-panel>\n <pf-tab slot=\"tab\" aria-disabled=\"true\">Aria Disabled</pf-tab>\n <pf-tab-panel>Aria Disabled</pf-tab-panel>\n </pf-tabs>\n `);\n [firstTab, secondTab] = element.querySelectorAll('pf-tab');\n await element.updateComplete;\n await nextFrame();\n initialFocus = document.activeElement;\n });\n\n describe('pressing right arrow', function() {\n beforeEach(async function() {\n firstTab?.focus();\n await sendKeys({ down: 'ArrowRight' });\n await element.updateComplete;\n await nextFrame();\n afterFocus = document.activeElement;\n });\n it('should not activate second tab', function() {\n expect(firstTab.active).to.be.true;\n expect(secondTab.active).to.be.false;\n expect(initialFocus).to.be.ok\n .and.to.not.equal(afterFocus)\n .and.to.not.equal(secondTab);\n });\n describe('then pressing enter', function() {\n beforeEach(async function() {\n await sendKeys({ down: 'Enter' });\n await nextFrame();\n afterFocus = document.activeElement;\n });\n it('should activate second tab', async function() {\n expect(firstTab.active).to.be.false;\n expect(secondTab.active).to.be.true;\n expect(afterFocus).to.equal(secondTab)\n .and.to.not.equal(initialFocus)\n .and.to.not.equal(firstTab);\n });\n });\n });\n });\n});\n"]}
|