diff --git a/src/components/tab-panel/tab-panel.test.ts b/src/components/tab-panel/tab-panel.test.ts new file mode 100644 index 000000000..e8521e00c --- /dev/null +++ b/src/components/tab-panel/tab-panel.test.ts @@ -0,0 +1,51 @@ +import { aTimeout, expect, fixture, html } from '@open-wc/testing'; +import type SlTabPanel from './tab-panel'; + +describe('', () => { + it('passes accessibility test', async () => { + const el = await fixture(html` Test `); + expect(el).to.be.accessible(); + }); + + it('default properties', async () => { + const el = await fixture(html` Test `); + + expect(el.id).to.equal('sl-tab-panel-2'); + expect(el.name).to.equal(''); + expect(el.active).to.equal(false); + expect(el.getAttribute('role')).to.equal('tabpanel'); + expect(el.getAttribute('aria-hidden')).to.equal('true'); + }); + + it('properties should reflect', async () => { + const el = await fixture(html` Test `); + + el.name = 'test'; + el.active = true; + await aTimeout(100); + expect(el.getAttribute('name')).to.equal('test'); + expect(el.hasAttribute('active')).to.equal(true); + }); + + it('changing active should always update aria-hidden role', async () => { + const el = await fixture(html` Test `); + + el.active = true; + await aTimeout(100); + expect(el.getAttribute('aria-hidden')).to.equal('false'); + }); + + it('changing active should always update aria-hidden role', async () => { + const el = await fixture(html` Test `); + + el.active = true; + await aTimeout(100); + expect(el.getAttribute('aria-hidden')).to.equal('false'); + }); + + it('passed id should be used', async () => { + const el = await fixture(html` Test `); + + expect(el.id).to.equal('test-id'); + }); +}); diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts index 91fd23c9f..2def1541e 100644 --- a/src/components/tab/tab.test.ts +++ b/src/components/tab/tab.test.ts @@ -3,6 +3,15 @@ import sinon from 'sinon'; import type SlTab from './tab'; describe('', () => { + it('passes accessibility test', async () => { + const el = await fixture(html` + + Test + + `); + expect(el).to.be.accessible(); + }); + it('should render default tab', async () => { const el = await fixture(html` Test `);