diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts new file mode 100644 index 00000000..aab3b92e --- /dev/null +++ b/src/components/rating/rating.test.ts @@ -0,0 +1,77 @@ +import { expect, fixture, html } from '@open-wc/testing'; +import type SlRating from './rating'; + +describe('', () => { + it('should pass accessibility tests', async () => { + const el = await fixture(html` `); + await expect(el).to.be.accessible(); + + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + expect(base.getAttribute('role')).to.equal('slider'); + expect(base.getAttribute('aria-disabled')).to.equal('false'); + expect(base.getAttribute('aria-readonly')).to.equal('false'); + expect(base.getAttribute('aria-valuenow')).to.equal('0'); + expect(base.getAttribute('aria-valuemin')).to.equal('0'); + expect(base.getAttribute('aria-valuemax')).to.equal('5'); + expect(base.getAttribute('tabindex')).to.equal('0'); + expect(base.getAttribute('class')).to.equal(' rating '); + }); + + it('should be readonly with the readonly attribute', async () => { + const el = await fixture(html` `); + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + expect(base.getAttribute('aria-readonly')).to.equal('true'); + expect(base.getAttribute('class')).to.equal(' rating rating--readonly '); + }); + + it('should be disabled with the disabled attribute', async () => { + const el = await fixture(html` `); + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + expect(base.getAttribute('aria-disabled')).to.equal('true'); + expect(base.getAttribute('class')).to.equal(' rating rating--disabled '); + }); + + it('should set max value by attribute', async () => { + const el = await fixture(html` `); + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + expect(base.getAttribute('aria-valuemax')).to.equal('12'); + }); + + it('should set selected value by attribute', async () => { + const el = await fixture(html` `); + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + expect(base.getAttribute('aria-valuenow')).to.equal('3'); + }); + + describe('focus', () => { + it('should focus inner div', async () => { + const el = await fixture(html` `); + + const base = el.shadowRoot!.querySelector('[part="base"]')!; + + el.focus(); + await el.updateComplete; + + expect(el.shadowRoot!.activeElement).to.equal(base); + }); + }); + + describe('blur', () => { + it('should blur inner div', async () => { + const el = await fixture(html` `); + + el.focus(); + await el.updateComplete; + + el.blur(); + await el.updateComplete; + + expect(el.shadowRoot!.activeElement).to.equal(null); + }); + }); +});