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:
Konnor Rogers
2024-09-11 10:25:42 -04:00
committed by GitHub
parent cd9fa25a2e
commit 14914abf65
129 changed files with 12195 additions and 10038 deletions

View File

@@ -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);
});
});
}
});