refactor(sbb-image): lit migration (#2029)

sbb-design-systems · Oct 2, 2023 · 8d915b8 · 8d915b8
1 parent b00745a
commit 8d915b8
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 126 deletions.
diff --git a/src/components/sbb-image/index.ts b/src/components/sbb-image/index.ts
@@ -0,0 +1 @@
+export * from './sbb-image';
diff --git a/src/components/sbb-image/sbb-image.e2e.ts b/src/components/sbb-image/sbb-image.e2e.ts
@@ -1,39 +1,38 @@
+import { aTimeout, assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { SbbImage } from './sbb-image';
 import images from '../../global/images';
-import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
 
 describe('sbb-image', () => {
-  let element: E2EElement, page: E2EPage;
+  let element: SbbImage;
 
   it('renders', async () => {
     const url = images[0];
+    element = await fixture(html`<sbb-image image-src="${url}"></sbb-image>`);
 
-    page = await newE2EPage();
-    await page.setContent(`<sbb-image image-src="${url}"></sbb-image>`);
-    element = await page.find('sbb-image');
-    expect(element).toHaveClass('hydrated');
-
-    await page.waitForChanges();
+    assert.instanceOf(element, SbbImage);
+    await element.updateComplete;
     // Wait five seconds in hope the image will successfully be loaded
     // TODO: Find more reliable solution
-    await new Promise((res) => setTimeout(res, 5000));
-    await page.waitForChanges();
+    await aTimeout(2000);
+    await element.updateComplete;
+
+    expect(element).dom.to.be.equal(`
+      <sbb-image image-src="${url}"></sbb-image>
+    `);
 
-    expect(element).toEqualHtml(`
-        <sbb-image image-src="${url}" class="hydrated">
-          <mock:shadow-root>
-            <figure class="image__figure image__figure--loaded image__figure--ratio-16-9">
-              <div class="image__wrapper">
-                <img alt="" class="image__blur-hash" decoding="auto" height="562" loading="eager" src="${url}?blur=100&amp;w=100&amp;h=56" width="1000">
-                <picture>
-                  <source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
-                  <source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
-                  <source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
-                  <img class="image__img" decoding="auto" height="562" importance="high" loading="eager" src="${url}" width="1000">
-                </picture>
-              </div>
-            </figure>
-          </mock:shadow-root>
-        </sbb-image>
-      `);
+    expect(element).shadowDom.to.be.equal(`
+      <figure class="image__figure image__figure--loaded image__figure--ratio-16-9">
+        <div class="image__wrapper">
+          <img alt="" class="image__blur-hash" decoding="auto" height="562" loading="eager" src="${url}?blur=100&amp;w=100&amp;h=56" width="1000">
+          <picture>
+            <source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
+            <source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
+            <source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
+            <img class="image__img" decoding="auto" height="562" importance="high" loading="eager" src="${url}" width="1000">
+          </picture>
+        </div>
+      </figure>
+    `);
   });
 });
diff --git a/src/components/sbb-image/sbb-image.stories.tsx b/src/components/sbb-image/sbb-image.stories.tsx
@@ -1,10 +1,11 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
 import images from '../../global/images';
-import readme from './readme.md';
+import readme from './readme.md?raw';
 import isChromatic from 'chromatic';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
+import './sbb-image';
 
 const Template = (args): JSX.Element => <sbb-image {...args} />;
 
@@ -15,11 +16,10 @@ const imageSrc: InputType = {
   options: images,
 };
 
-const borderRadius: InputType = {
+const noBorderRadius: InputType = {
   control: {
-    type: 'select',
+    type: 'boolean',
   },
-  options: ['true', 'false'],
 };
 
 const aspectRatio: InputType = {
@@ -92,7 +92,7 @@ const loading: InputType = {
   },
 };
 
-const lqip: InputType = {
+const skipLqip: InputType = {
   control: {
     type: 'boolean',
   },
@@ -119,7 +119,7 @@ const disableAnimation: InputType = {
 const defaultArgTypes: ArgTypes = {
   alt: {},
   caption: {},
-  'border-radius': borderRadius,
+  'no-border-radius': noBorderRadius,
   'aspect-ratio': aspectRatio,
   copyright,
   'copyright-holder': copyrightHolder,
@@ -129,7 +129,7 @@ const defaultArgTypes: ArgTypes = {
   'focal-point-y': focalPointY,
   'image-src': imageSrc,
   loading,
-  lqip,
+  'skip-lqip': skipLqip,
   'performance-mark': performanceMark,
   'disable-animation': disableAnimation,
 };
@@ -138,7 +138,7 @@ const defaultArgs: Args = {
   alt: '',
   caption: undefined,
   // we need a string and not boolean, otherwise storybook add/remove the attribute but don't write the value
-  'border-radius': 'true',
+  'no-border-radius': false,
   'aspect-ratio': aspectRatio.options[0],
   copyright: '',
   'copyright-holder': copyrightHolder.options[0],
@@ -148,7 +148,7 @@ const defaultArgs: Args = {
   'focal-point-y': '',
   'image-src': imageSrc.options[0],
   loading: loading.options[1],
-  lqip: true,
+  'skip-lqip': false,
   'performance-mark': '',
   'disable-animation': isChromatic(),
 };
@@ -177,7 +177,7 @@ export const NoCaptionNoRadius: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'border-radius': 'false',
+    'no-border-radius': true,
   },
 };