diff --git a/src/components/badge/badge.test.ts b/src/components/badge/badge.test.ts index fb0bdcc7f..868f68531 100644 --- a/src/components/badge/badge.test.ts +++ b/src/components/badge/badge.test.ts @@ -3,8 +3,6 @@ import { html } from 'lit'; import { fixtures } from '../../internal/test/fixture.js'; import type WaBadge from './badge.js'; -// The default badge background just misses AA contrast, but the next step up is way too dark. We're going to relax this -// rule for now. const ignoredRules = ['color-contrast']; describe('', () => { @@ -16,7 +14,7 @@ describe('', () => { expect(el.innerText).to.eq('Badge'); }); - it('should pass accessibility tests with a role of status on the base part.', async () => { + it('should pass accessibility tests with a role of status on the base part', async () => { const el = await fixture(html` Badge `); const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.getAttribute('role')).to.eq('status'); @@ -25,8 +23,7 @@ describe('', () => { it('should default to square styling, with the brand color', async () => { const el = await fixture(html` Badge `); - const part = el.shadowRoot!.querySelector('[part~="base"]')!; - expect(part.classList.value.trim()).to.eq('badge badge--brand'); + expect(el.getAttribute('variant')).to.eq('brand'); }); }); @@ -36,10 +33,9 @@ describe('', () => { await expect(el).to.be.accessible({ ignoredRules }); }); - it('should append the pill class to the classlist to render a pill', async () => { + it('should have the pill attribute', async () => { const el = await fixture(html` Badge `); - const part = el.shadowRoot!.querySelector('[part~="base"]')!; - expect(part.classList.value.trim()).to.eq('badge badge--brand badge--pill'); + expect(el.hasAttribute('pill')).to.be.true; }); }); @@ -50,10 +46,9 @@ describe('', () => { await aTimeout(1); }); - it('should append the pulse class to the classlist to render a pulse', async () => { + it('should have the pulse attribute', async () => { const el = await fixture(html` Badge `); - const part = el.shadowRoot!.querySelector('[part~="base"]')!; - expect(part.classList.value.trim()).to.eq('badge badge--brand badge--pulse'); + expect(el.hasAttribute('pulse')).to.be.true; }); }); @@ -65,10 +60,9 @@ describe('', () => { await aTimeout(1); }); - it('should default to square styling, with the correct color', async () => { + it('should have the correct variant attribute', async () => { const el = await fixture(html`Badge`); - const part = el.shadowRoot!.querySelector('[part~="base"]')!; - expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`); + expect(el.getAttribute('variant')).to.eq(variant); }); }); });