Files
webawesome/src/components/progress-ring/progress-ring.test.ts
Konnor Rogers 14914abf65 Initial SSR implementation (#157)
* continued ssr work

* continued ssr work

* prettier

* all components now rendering

* everything finally works

* fix type issues

* working on breadcrumb

* working on breadcrumb

* radio group

* convert all tests to ssr

* prettier

* test suite finally passing

* add layout stuff

* add changelog

* fix TS issue

* fix tests

* fixing deploy stuff

* get QR code displaying

* fix tests

* fix tests

* prettier

* condense hydration stuff

* prettier

* comment out range test

* fixing issues

* use base fixtures

* fixing examples

* dont vendor

* fix import of hydration support

* adding notes

* add notesg

* add ssr loader

* fix build

* prettier

* add notes

* add notes

* prettier

* fixing bundled stuff

* remove cdn

* remove cdn

* prettier

* fiixng tests

* prettier

* split jobs??

* prettier

* fix build stuff

* add reset mouse and await aTimeout

* prettier

* fix improper tests

* prettier

* bail on first

* fix linting

* only test form with client

* redundancy on ssr-loader??

* maybe this will work

* prettier

* try callout now

* fix form.test.ts

* fix form.test.ts

* prettier

* fix forms

* fix forms

* try again

* prettier

* add some awaits

* prettier

* comment out broken SSR tests

* prettier

* comment out broken SSR tests

* prettier

* dont skip in CI

* upgrade playwright to beta

* prettier

* try some trickery

* try some trickery

* await updateComplete

* try to fix form.test.ts

* import hydrateable elements 1 time

* prettier

* fix input defaultValue issues

* fix form controls to behave like their native counterpartS

* add changelog entry

* prettier

* fix unexpected behavior with range / button
2024-09-11 10:25:42 -04:00

71 lines
2.4 KiB
TypeScript

import { expect } from '@open-wc/testing';
import { fixtures } from '../../internal/test/fixture.js';
import { html } from 'lit';
import type WaProgressRing from './progress-ring.js';
describe('<wa-progress-ring>', () => {
let el: WaProgressRing;
for (const fixture of fixtures) {
describe(`with "${fixture.type}" rendering`, () => {
describe('when provided just a value parameter', () => {
beforeEach(async () => {
el = await fixture<WaProgressRing>(html`<wa-progress-ring value="25"></wa-progress-ring>`);
});
it('should pass accessibility tests', async () => {
await expect(el).to.be.accessible();
});
});
describe('when provided a title, and value parameter', () => {
let base: HTMLDivElement;
beforeEach(async () => {
el = await fixture<WaProgressRing>(
html`<wa-progress-ring title="Titled Progress Ring" value="25"></wa-progress-ring>`
);
base = el.shadowRoot!.querySelector('[part~="base"]')!;
});
it('should pass accessibility tests', async () => {
await expect(el).to.be.accessible();
});
it('uses the value parameter on the base, as aria-valuenow', () => {
expect(base).attribute('aria-valuenow', '25');
});
it('translates the value parameter to a percentage, and uses translation on the base, as percentage css variable', () => {
expect(base).attribute('style', '--percentage: 0.25');
});
});
describe('when provided a ariaLabel, and value parameter', () => {
beforeEach(async () => {
el = await fixture<WaProgressRing>(
html`<wa-progress-ring ariaLabel="Labelled Progress Ring" value="25"></wa-progress-ring>`
);
});
it('should pass accessibility tests', async () => {
await expect(el).to.be.accessible();
});
});
describe('when provided a ariaLabelledBy, and value parameter', () => {
beforeEach(async () => {
el = await fixture<WaProgressRing>(html`
<label id="labelledby">Progress Ring Label</label>
<wa-progress-ring ariaLabelledBy="labelledby" value="25"></wa-progress-ring>
`);
});
it('should pass accessibility tests', async () => {
await expect(el).to.be.accessible();
});
});
});
}
});