mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
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
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
import { expect } from '@open-wc/testing';
|
||||
import { fixtures } from '../../internal/test/fixture.js';
|
||||
import { html } from 'lit';
|
||||
import type WaQrCode from './qr-code.js';
|
||||
|
||||
const getCanvas = (qrCode: WaQrCode): HTMLCanvasElement => {
|
||||
@@ -94,50 +96,54 @@ const expectQrCodeColorsToBe = (qrCode: WaQrCode, expectedColors: QrCodeColors):
|
||||
};
|
||||
|
||||
describe('<wa-qr-code>', () => {
|
||||
it('should render a component', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
for (const fixture of fixtures) {
|
||||
describe(`with "${fixture.type}" rendering`, () => {
|
||||
it('should render a component', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
|
||||
expect(qrCode).to.exist;
|
||||
});
|
||||
expect(qrCode).to.exist;
|
||||
});
|
||||
|
||||
it('should be accessible', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
it('should be accessible', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
|
||||
await expect(qrCode).to.be.accessible();
|
||||
});
|
||||
await expect(qrCode).to.be.accessible();
|
||||
});
|
||||
|
||||
it('uses the value as label if none given', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
it('uses the value as label if none given', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data"></wa-qr-code>`);
|
||||
|
||||
expectCanvasToHaveAriaLabel(qrCode, 'test data');
|
||||
});
|
||||
expectCanvasToHaveAriaLabel(qrCode, 'test data');
|
||||
});
|
||||
|
||||
it('uses the label if given', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" label="test label"></wa-qr-code>`);
|
||||
it('uses the label if given', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" label="test label"></wa-qr-code>`);
|
||||
|
||||
expectCanvasToHaveAriaLabel(qrCode, 'test label');
|
||||
});
|
||||
expectCanvasToHaveAriaLabel(qrCode, 'test label');
|
||||
});
|
||||
|
||||
it('sets the correct color for the qr code', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" fill="red"></wa-qr-code>`);
|
||||
it('sets the correct color for the qr code', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" fill="red"></wa-qr-code>`);
|
||||
|
||||
expectQrCodeColorsToBe(qrCode, { foreground: red, background: white });
|
||||
});
|
||||
expectQrCodeColorsToBe(qrCode, { foreground: red, background: white });
|
||||
});
|
||||
|
||||
it('sets the correct background for the qr code', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(
|
||||
html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>`
|
||||
);
|
||||
it('sets the correct background for the qr code', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(
|
||||
html` <wa-qr-code value="test data" fill="red" background="blue"></wa-qr-code>`
|
||||
);
|
||||
|
||||
expectQrCodeColorsToBe(qrCode, { foreground: red, background: blue });
|
||||
});
|
||||
expectQrCodeColorsToBe(qrCode, { foreground: red, background: blue });
|
||||
});
|
||||
|
||||
it('has the expected size', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" size="100"></wa-qr-code>`);
|
||||
it('has the expected size', async () => {
|
||||
const qrCode = await fixture<WaQrCode>(html` <wa-qr-code value="test data" size="100"></wa-qr-code>`);
|
||||
|
||||
const height = qrCode.getBoundingClientRect().height;
|
||||
const width = qrCode.getBoundingClientRect().width;
|
||||
expect(height).to.equal(100);
|
||||
expect(width).to.equal(100);
|
||||
});
|
||||
const height = qrCode.getBoundingClientRect().height;
|
||||
const width = qrCode.getBoundingClientRect().width;
|
||||
expect(height).to.equal(100);
|
||||
expect(width).to.equal(100);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user