refactor(sbb-icon): lit migration (#1994)

sbb-design-systems · Sep 21, 2023 · 0b4cbf0 · 0b4cbf0
1 parent 6a34174
commit 0b4cbf0
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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('<sbb-icon></sbb-icon>');
+    element = await fixture(html`<sbb-icon></sbb-icon>`);
 
-    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
@@ -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: '<sbb-icon />',
-    });
-
-    expect(root).toEqualHtml(`
-        <sbb-icon aria-hidden="true" role="img" data-empty data-namespace="default">
-          <mock:shadow-root>
-            <span class="sbb-icon-inner"><svg height="0" width="0"></svg></span>
-          </mock:shadow-root>
-        </sbb-icon>
-      `);
+    const root = await fixture(html`<sbb-icon />`);
+
+    expect(root).dom.to.be.equal(`
+      <sbb-icon aria-hidden="true" role="img" data-empty data-namespace="default">
+      </sbb-icon>
+    `);
+    expect(root).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="0" width="0"></svg></span>
+    `);
   });
 
   it('renders aria-hidden and no aria-label', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbIcon],
-      html: `<sbb-icon name="app-icon-medium"></sbb-icon>`,
-    });
+    const root: SbbIcon = await fixture(html`<sbb-icon name="app-icon-medium"></sbb-icon>`);
 
-    expect(root).toEqualHtml(`
+    expect(root).dom.to.be.equal(`
       <sbb-icon name="app-icon-medium" aria-hidden="true" role="img" data-namespace="default">
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
-        </mock:shadow-root>
       </sbb-icon>
     `);
+    expect(root).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
+    `);
   });
 
   it('renders default aria-label', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbIcon],
-      html: `<sbb-icon name="app-icon-medium" aria-hidden="false"></sbb-icon>`,
-    });
+    const root = await fixture(
+      html`<sbb-icon name="app-icon-medium" aria-hidden="false"></sbb-icon>`,
+    );
 
-    expect(root).toEqualHtml(`
+    expect(root).dom.to.be.equal(`
       <sbb-icon name="app-icon-medium" aria-hidden="false" aria-label="Icon app icon medium" role="img" data-namespace="default">
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
-        </mock:shadow-root>
       </sbb-icon>
     `);
+    expect(root).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
+    `);
   });
 
   it('renders custom aria-label', async () => {
-    const { root } = await newSpecPage({
-      components: [SbbIcon],
-      html: `<sbb-icon name="app-icon-medium" aria-hidden="false" aria-label="Custom label"></sbb-icon>`,
-    });
-
-    expect(root).toEqualHtml(`
-      <sbb-icon name="app-icon-medium" aria-hidden="false" aria-label="Custom label" role="img" data-namespace="default">
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
-        </mock:shadow-root>
+    const root = await fixture(
+      html`<sbb-icon
+        name="app-icon-medium"
+        aria-hidden="false"
+        aria-label="Custom label"
+      ></sbb-icon>`,
+    );
+
+    expect(root).dom.to.be.equal(`
+      <sbb-icon name="app-icon-medium" aria-hidden="false" aria-label="Custom label" role="img" data-namespace="default"> 
       </sbb-icon>
     `);
+    expect(root).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
+    `);
   });
 
   it('renders default label after changing source', async () => {
-    const page = await newSpecPage({
-      components: [SbbIcon],
-      html: `<sbb-icon name="app-icon-medium" aria-hidden="false"></sbb-icon>`,
-    });
-
-    const icon = page.root;
+    const icon: SbbIcon = await fixture(
+      html`<sbb-icon name="app-icon-medium" aria-hidden="false"></sbb-icon>`,
+    );
 
-    expect(icon).toEqualHtml(`
+    expect(icon).dom.to.be.equal(`
       <sbb-icon name="app-icon-medium" aria-hidden="false" aria-label="Icon app icon medium" role="img" data-namespace="default">
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
-        </mock:shadow-root>
       </sbb-icon>
     `);
+    expect(icon).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
+    `);
 
     icon.setAttribute('name', 'pie-medium');
-    await page.waitForChanges();
+    await icon.updateComplete;
 
-    expect(icon).toEqualHtml(`
+    expect(icon).dom.to.be.equal(`
       <sbb-icon name="pie-medium" aria-hidden="false" aria-label="Icon pie medium" role="img" data-namespace="default">
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
-        </mock:shadow-root>
       </sbb-icon>
     `);
+    expect(icon).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="36" width="36"></svg></span>
+    `);
   });
 
   it('registers a custom namespace', async () => {
+    const globalConfig = readConfig();
+    let interceptorCalled = false;
+    globalConfig.icon = {};
+
     const sbbIconConfig: SbbIconConfig = globalThis.sbbConfig.icon;
     sbbIconConfig.namespaces = new Map<string, string>().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: `<sbb-icon name="kom:heart-medium"></sbb-icon>`,
-    });
-
-    expect(root).toEqualHtml(`
-      <sbb-icon name="kom:heart-medium" aria-hidden="true" role="img" data-namespace="kom" data-empty>
-        <mock:shadow-root>
-          <span class="sbb-icon-inner"><svg height="0" width="0"></svg></span>
-        </mock:shadow-root>
+
+    const root = await fixture(html`<sbb-icon name="kom:heart-medium"></sbb-icon>`);
+    expect(root).dom.to.be.equal(`
+      <sbb-icon name="kom:heart-medium" aria-hidden="true" role="img" data-namespace="kom"> 
       </sbb-icon>
     `);
+    expect(root).shadowDom.to.be.equal(`
+      <span class="sbb-icon-inner"><svg height="0" width="0"></svg></span>
+    `);
 
-    expect(interceptorSpy).toHaveBeenCalled();
+    expect(interceptorCalled).to.be.true;
 
     // Reset icon config
     delete globalThis.sbbConfig.icon;

diff --git a/src/components/sbb-icon/sbb-icon.stories.tsx b/src/components/sbb-icon/sbb-icon.stories.tsx
@@ -1,8 +1,9 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
-import type { Meta, StoryObj, ArgTypes } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
+import './sbb-icon';
 
 const Template = (args): JSX.Element => <sbb-icon {...args}></sbb-icon>;