From 0b4cbf0ba17a9ed32acc69fbc4705b9afc996b17 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Thu, 21 Sep 2023 14:29:53 +0200 Subject: [PATCH] refactor(sbb-icon): lit migration (#1994) --- ci/lit-migration.mts | 2 +- package.json | 1 + src/components/sbb-icon/index.ts | 1 + .../sbb-icon/sbb-icon-validate.spec.ts | 15 +- src/components/sbb-icon/sbb-icon.e2e.ts | 12 +- src/components/sbb-icon/sbb-icon.spec.ts | 138 +++++++++--------- src/components/sbb-icon/sbb-icon.stories.tsx | 3 +- src/components/sbb-icon/sbb-icon.tsx | 91 ++++++------ src/global/testing/jest-setup.ts | 2 + web-test-runner.config.js | 14 +- yarn.lock | 33 ++++- 11 files changed, 177 insertions(+), 135 deletions(-) create mode 100644 src/components/sbb-icon/index.ts diff --git a/ci/lit-migration.mts b/ci/lit-migration.mts index 3a15ccd1a6..2c85733757 100644 --- a/ci/lit-migration.mts +++ b/ci/lit-migration.mts @@ -779,7 +779,7 @@ declare global { (n) => ts.isReturnStatement(n) || ts.isVariableStatement(n), )!; if (codeToAdd.length > 0) { - codeToAdd.unshift('// ## Host attributes ##'); + codeToAdd.unshift('// ## Migr: Host attributes ##'); codeToAdd.push('// ####'); } mutator.insertAt(node, codeToAdd.join('\n') + '\n\n'); diff --git a/package.json b/package.json index 2e3fdc3bc7..d401e9064c 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@web/test-runner": "^0.16.1", "@web/test-runner-commands": "^0.7.0", "@web/test-runner-playwright": "^0.10.1", + "@web/test-runner-puppeteer": "^0.13.1", "chromatic": "7.2.0", "date-fns": "2.30.0", "eslint": "8.49.0", diff --git a/src/components/sbb-icon/index.ts b/src/components/sbb-icon/index.ts new file mode 100644 index 0000000000..0110098000 --- /dev/null +++ b/src/components/sbb-icon/index.ts @@ -0,0 +1 @@ +export * from './sbb-icon'; diff --git a/src/components/sbb-icon/sbb-icon-validate.spec.ts b/src/components/sbb-icon/sbb-icon-validate.spec.ts index 91845f95f3..2d705920dc 100644 --- a/src/components/sbb-icon/sbb-icon-validate.spec.ts +++ b/src/components/sbb-icon/sbb-icon-validate.spec.ts @@ -1,3 +1,4 @@ +import { expect } from '@open-wc/testing'; import { isValid } from './sbb-icon-validate'; describe('isValid', () => { @@ -8,7 +9,7 @@ describe('isValid', () => { attributes: [{ name: 'onload' }], childNodes: [], } as any; - expect(isValid(el)).toBe(false); + expect(isValid(el)).to.be.equal(false); }); it('invalid onclick attr', () => { @@ -18,7 +19,7 @@ describe('isValid', () => { attributes: [{ name: 'OnClIcK' }], childNodes: [], } as any; - expect(isValid(el)).toBe(false); + expect(isValid(el)).to.be.equal(false); }); it('invalid child SCRIPT elm', () => { @@ -28,17 +29,17 @@ describe('isValid', () => { attributes: [], childNodes: [{ nodeType: 1, nodeName: 'SCRIPT', attributes: [], childNodes: [] }], } as any; - expect(isValid(el)).toBe(false); + expect(isValid(el)).to.be.equal(false); }); it('invalid script elm', () => { const el = { nodeType: 1, nodeName: 'script', attributes: [], childNodes: [] } as any; - expect(isValid(el)).toBe(false); + expect(isValid(el)).to.be.equal(false); }); it('is valid circle elm', () => { const el = { nodeType: 1, nodeName: 'circle', attributes: [], childNodes: [] } as any; - expect(isValid(el)).toBe(true); + expect(isValid(el)).to.be.equal(true); }); it('is valid SVG elm', () => { @@ -48,11 +49,11 @@ describe('isValid', () => { attributes: [], childNodes: [{ nodeType: 1, nodeName: 'line', attributes: [], childNodes: [] }], } as any; - expect(isValid(el)).toBe(true); + expect(isValid(el)).to.be.equal(true); }); it('is valid text node', () => { const el = { nodeType: 3, nodeName: '#text' } as any; - expect(isValid(el)).toBe(true); + expect(isValid(el)).to.be.equal(true); }); }); diff --git a/src/components/sbb-icon/sbb-icon.e2e.ts b/src/components/sbb-icon/sbb-icon.e2e.ts index a3815995d9..d0a583fca4 100644 --- a/src/components/sbb-icon/sbb-icon.e2e.ts +++ b/src/components/sbb-icon/sbb-icon.e2e.ts @@ -1,13 +1,13 @@ -import { newE2EPage } from '@stencil/core/testing'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbIcon } from './sbb-icon'; describe('sbb-icon', () => { - let element, page; + let element; it('renders', async () => { - page = await newE2EPage(); - await page.setContent(''); + element = await fixture(html``); - element = await page.find('sbb-icon'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbIcon); }); }); diff --git a/src/components/sbb-icon/sbb-icon.spec.ts b/src/components/sbb-icon/sbb-icon.spec.ts index 6a98d751d2..b9711b0fff 100644 --- a/src/components/sbb-icon/sbb-icon.spec.ts +++ b/src/components/sbb-icon/sbb-icon.spec.ts @@ -1,124 +1,120 @@ import { SbbIcon } from './sbb-icon'; -import { newSpecPage } from '@stencil/core/testing'; -import { SbbIconConfig } from '../../global/config'; + +import { SbbIconConfig, readConfig } from '../../global/config'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-icon'; describe('sbb-icon', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbIcon], - html: '', - }); - - expect(root).toEqualHtml(` - - `); + const root = await fixture(html``); + + expect(root).dom.to.be.equal(` + + `); + expect(root).shadowDom.to.be.equal(` + + `); }); it('renders aria-hidden and no aria-label', async () => { - const { root } = await newSpecPage({ - components: [SbbIcon], - html: ``, - }); + const root: SbbIcon = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal(` `); + expect(root).shadowDom.to.be.equal(` + + `); }); it('renders default aria-label', async () => { - const { root } = await newSpecPage({ - components: [SbbIcon], - html: ``, - }); + const root = await fixture( + html``, + ); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal(` - - - `); + expect(root).shadowDom.to.be.equal(` + + `); }); it('renders custom aria-label', async () => { - const { root } = await newSpecPage({ - components: [SbbIcon], - html: ``, - }); - - expect(root).toEqualHtml(` - - - - + const root = await fixture( + html``, + ); + + expect(root).dom.to.be.equal(` + `); + expect(root).shadowDom.to.be.equal(` + + `); }); it('renders default label after changing source', async () => { - const page = await newSpecPage({ - components: [SbbIcon], - html: ``, - }); - - const icon = page.root; + const icon: SbbIcon = await fixture( + html``, + ); - expect(icon).toEqualHtml(` + expect(icon).dom.to.be.equal(` - - - `); + expect(icon).shadowDom.to.be.equal(` + + `); icon.setAttribute('name', 'pie-medium'); - await page.waitForChanges(); + await icon.updateComplete; - expect(icon).toEqualHtml(` + expect(icon).dom.to.be.equal(` - - - `); + expect(icon).shadowDom.to.be.equal(` + + `); }); it('registers a custom namespace', async () => { + const globalConfig = readConfig(); + let interceptorCalled = false; + globalConfig.icon = {}; + const sbbIconConfig: SbbIconConfig = globalThis.sbbConfig.icon; sbbIconConfig.namespaces = new Map().set( 'kom', 'https://icons.app.sbb.ch/kom/', ); sbbIconConfig.interceptor = (parameters) => { - expect(parameters.namespace).toEqual('kom'); - expect(parameters.name).toEqual('heart-medium'); - expect(parameters.url).toEqual('https://icons.app.sbb.ch/kom/heart-medium.svg'); + expect(parameters.namespace).to.be.equal('kom'); + expect(parameters.name).to.be.equal('heart-medium'); + expect(parameters.url).to.be.equal('https://icons.app.sbb.ch/kom/heart-medium.svg'); + interceptorCalled = true; return parameters.request(); }; - const interceptorSpy = jest.spyOn(sbbIconConfig, 'interceptor'); - - const { root } = await newSpecPage({ - components: [SbbIcon], - html: ``, - }); - - expect(root).toEqualHtml(` -