fix(sbb-icon): fix preserving space during loading (#2308)

sbb-design-systems · Jan 8, 2024 · 2a01652 · 2a01652
1 parent a4439e4
commit 2a01652
Show file tree

Hide file tree

Showing 26 changed files with 192 additions and 60 deletions.
diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
@@ -1,7 +1,10 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+
 import type { SbbAlertElement } from './alert';
+
 import './alert';
 
 describe('sbb-alert', () => {
@@ -12,6 +15,8 @@ describe('sbb-alert', () => {
       html`<sbb-alert disable-animation title-content="Interruption">Alert content</sbb-alert>`,
     );
 
+    await waitForLitRender(element);
+
     expect(element).dom.to.be.equal(
       `
         <sbb-alert disable-animation title-content="Interruption" size="m">
@@ -68,6 +73,8 @@ describe('sbb-alert', () => {
       >`,
     );
 
+    await waitForLitRender(element);
+
     expect(element).dom.to.be.equal(
       `
         <sbb-alert title-content="Interruption" title-level="2" size="l" disable-animation icon-name="disruption" accessibility-label="label" href="https://www.sbb.ch" rel="noopener" target="_blank" link-content="Show much more">

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -3,6 +3,7 @@ import { html } from 'lit/static-html.js';
 
 import '../breadcrumb';
 import './breadcrumb-group';
+import { waitForLitRender } from '../../core/testing';
 
 describe('sbb-breadcrumb-group', () => {
   it('renders', async () => {
@@ -14,6 +15,8 @@ describe('sbb-breadcrumb-group', () => {
       </sbb-breadcrumb-group>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-breadcrumb-group role='navigation' data-loaded>
         <sbb-breadcrumb id="sbb-breadcrumb-0" href="/" icon-name="pie-small" slot="breadcrumb-0" dir="ltr" role="link" tabindex="0"></sbb-breadcrumb>

diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../core/testing';
+
 import '../form-field';
 import './button';
 
@@ -53,6 +56,8 @@ describe('sbb-button', () => {
       </sbb-button> `,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-button size="l" variant="primary" role="button" tabindex="0" dir="ltr">
         <sbb-icon slot="icon" name="chevron-small-left-small" role="img" aria-hidden="true" data-namespace="default"></sbb-icon>

diff --git a/src/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts
@@ -1,9 +1,11 @@
-import './calendar';
-import '../button';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../core/testing';
+
+import './calendar';
+import '../button';
+
 describe('sbb-calendar', () => {
   it('renders', async () => {
     const root = await fixture(
@@ -13,6 +15,8 @@ describe('sbb-calendar', () => {
       ></sbb-calendar>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `<sbb-calendar data-now="1672790400000" selected-date="2023-01-20T00:00:00"></sbb-calendar>`,
     );

diff --git a/src/components/checkbox/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox/checkbox.spec.ts
@@ -1,7 +1,10 @@
-import './checkbox';
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+
+import './checkbox';
+
 describe('sbb-checkbox', () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-checkbox>Label</sbb-checkbox>`);
@@ -12,6 +15,8 @@ describe('sbb-checkbox', () => {
       </sbb-checkbox>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).shadowDom.to.be.equal(`
       <span class="sbb-checkbox-wrapper">
         <label class="sbb-checkbox">
@@ -37,6 +42,8 @@ describe('sbb-checkbox', () => {
         >`,
       );
 
+      await waitForLitRender(root);
+
       expect(root).dom.to.be.equal(`
         <sbb-checkbox aria-checked="false" aria-disabled="false" aria-required="false" icon-name="tickets-class-small" icon-placement="start" role="checkbox" size="s" tabindex="0">
           Label

diff --git a/src/components/core/testing/test-setup.ts b/src/components/core/testing/test-setup.ts
@@ -4,7 +4,7 @@ import { mergeConfig, SbbIconConfig } from '../config';
 function setupIconConfig(): void {
   const icon: SbbIconConfig = {
     interceptor: ({ namespace, name, request }) => {
-      if (namespace === 'default') {
+      if (namespace === 'default' || namespace === 'picto') {
         const dimension = name.endsWith('-large') ? 48 : name.endsWith('-medium') ? 36 : 24;
         return Promise.resolve(
           `<svg-fake data-name='${name}' width='${dimension}' height='${dimension}' style="width:${dimension}px;height:${dimension}px"></svg-fake>`,

diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+
 import './expansion-panel-header';
 
 describe('sbb-expansion-panel-header', () => {
@@ -8,6 +11,8 @@ describe('sbb-expansion-panel-header', () => {
       html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
         <sbb-expansion-panel-header slot='header' dir="ltr" role="button" slot="header" tabindex="0">
@@ -22,11 +27,11 @@ describe('sbb-expansion-panel-header', () => {
             <slot></slot>
           </span>
           <span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon 
-            aria-hidden="true" 
-            data-namespace="default" 
-            role="img" 
-            class="sbb-expansion-panel-header__toggle-icon" 
+            <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            role="img"
+            class="sbb-expansion-panel-header__toggle-icon"
             name="chevron-small-down-medium"></sbb-icon>
           </span>
         </span>
@@ -39,15 +44,17 @@ describe('sbb-expansion-panel-header', () => {
       html`<sbb-expansion-panel-header icon-name="pie-medium">Header</sbb-expansion-panel-header>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
-        <sbb-expansion-panel-header 
-          slot='header' 
-          icon-name="pie-medium" 
-          dir="ltr" 
-          role="button" 
-          slot="header" 
-          tabindex="0" 
+        <sbb-expansion-panel-header
+          slot='header'
+          icon-name="pie-medium"
+          dir="ltr"
+          role="button"
+          slot="header"
+          tabindex="0"
           data-icon
         >
           Header
@@ -71,11 +78,11 @@ describe('sbb-expansion-panel-header', () => {
             <slot></slot>
           </span>
           <span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon 
-            aria-hidden="true" 
-            data-namespace="default" 
-            role="img" 
-            class="sbb-expansion-panel-header__toggle-icon" 
+            <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            role="img"
+            class="sbb-expansion-panel-header__toggle-icon"
             name="chevron-small-down-medium"></sbb-icon>
           </span>
         </span>
@@ -91,14 +98,16 @@ describe('sbb-expansion-panel-header', () => {
       </sbb-expansion-panel-header>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
         <sbb-expansion-panel-header slot='header' dir="ltr" role="button" slot="header" tabindex="0" data-icon>
-          <sbb-icon 
-            aria-hidden="true" 
-            data-namespace="default" 
-            role="img" 
-            slot='icon' 
+          <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            role="img"
+            slot='icon'
             name='pie-medium'></sbb-icon>
           Header
         </sbb-expansion-panel-header>
@@ -115,11 +124,11 @@ describe('sbb-expansion-panel-header', () => {
             <slot></slot>
           </span>
           <span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon 
-              aria-hidden="true" 
-              data-namespace="default" 
-              role="img" 
-              class="sbb-expansion-panel-header__toggle-icon" 
+            <sbb-icon
+              aria-hidden="true"
+              data-namespace="default"
+              role="img"
+              class="sbb-expansion-panel-header__toggle-icon"
               name="chevron-small-down-medium"></sbb-icon>
           </span>
         </span>

diff --git a/src/components/file-selector/file-selector.spec.ts b/src/components/file-selector/file-selector.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../core/testing';
+
 import './file-selector';
 
 describe('sbb-file-selector', () => {
@@ -28,6 +31,8 @@ describe('sbb-file-selector', () => {
   it('renders with dropzone area', async () => {
     const root = await fixture(html`<sbb-file-selector variant="dropzone"></sbb-file-selector>`);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-file-selector variant='dropzone'>
       </sbb-file-selector>

diff --git a/src/components/form-field/form-field-clear/form-field-clear.spec.ts b/src/components/form-field/form-field-clear/form-field-clear.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+
 import './form-field-clear';
 import '../form-field';
 
@@ -11,6 +14,8 @@ describe('sbb-form-field-clear', () => {
         <sbb-form-field-clear></sbb-form-field-clear>
       </sbb-form-field>
     `);
+    await waitForLitRender(formField);
+
     const formFieldClear = formField.querySelector('sbb-form-field-clear');
 
     expect(formField).dom.to.be.equal(`

diff --git a/src/components/form-field/form-field/form-field.spec.ts b/src/components/form-field/form-field/form-field.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+
 import './form-field';
 
 describe('sbb-form-field', () => {
@@ -197,6 +200,8 @@ describe('sbb-form-field', () => {
       </sbb-form-field>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-form-field error-space="none" size="m" width="default" data-input-type="select">
         <select>
@@ -238,6 +243,8 @@ describe('sbb-form-field', () => {
       </sbb-form-field>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-form-field error-space="none" size="m" label="Select option:" optional borderless width="default" data-input-type="select">
         <label data-creator="SBB-FORM-FIELD" slot="label" for="sbb-form-field-input-4">

diff --git a/src/components/header/header-action/header-action.spec.ts b/src/components/header/header-action/header-action.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../../core/testing';
+
 import './header-action';
 
 describe('sbb-header-action', () => {
@@ -16,6 +19,8 @@ describe('sbb-header-action', () => {
       </sbb-header-action>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-header-action icon-name='pie-small' expand-from="zero" name="test" type="reset" value="value" role="button" tabindex="0" data-expanded dir="ltr">

diff --git a/src/components/icon/icon-base.ts b/src/components/icon/icon-base.ts
@@ -9,8 +9,6 @@ import style from './icon.scss?lit&inline';
 export abstract class SbbIconBase extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  @state() private _svgFetchInProgress: boolean;
-
   @state() private _svgNamespace = 'default';
 
   /**
@@ -37,9 +35,7 @@ export abstract class SbbIconBase extends LitElement {
       this._svgNamespace = namespace;
     }
 
-    this._svgFetchInProgress = true;
     this._svgIcon = await this.fetchSvgIcon(this._svgNamespace, name);
-    this._svgFetchInProgress = false;
   }
 
   protected async fetchSvgIcon(namespace: string, name: string): Promise<string> {
@@ -64,7 +60,7 @@ export abstract class SbbIconBase extends LitElement {
   protected override render(): TemplateResult {
     setAttribute(this, 'role', this.getAttribute('role') ?? 'img');
     setAttribute(this, 'data-namespace', this._svgNamespace);
-    setAttribute(this, 'data-empty', !this._svgIcon && !this._svgFetchInProgress);
+    setAttribute(this, 'data-empty', !this._svgIcon);
 
     return html`
       ${this._svgIcon

diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts
@@ -106,8 +106,10 @@ describe('sbb-icon', () => {
     };
 
     const root = await fixture(html`<sbb-icon name="kom:heart-medium"></sbb-icon>`);
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
-      <sbb-icon name="kom:heart-medium" aria-hidden="true" role="img" data-namespace="kom">
+      <sbb-icon name="kom:heart-medium" aria-hidden="true" role="img" data-namespace="kom" data-empty>
       </sbb-icon>
     `);
     await expect(root).shadowDom.to.equalSnapshot();

diff --git a/src/components/journey-header/journey-header.spec.ts b/src/components/journey-header/journey-header.spec.ts
@@ -1,5 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { waitForLitRender } from '../core/testing';
+
 import './journey-header';
 
 describe('sbb-journey-header', () => {
@@ -8,6 +11,8 @@ describe('sbb-journey-header', () => {
       html`<sbb-journey-header origin="A" destination="B"></sbb-journey-header>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-journey-header origin="A" destination="B" size="m">
       </sbb-journey-header>
@@ -45,8 +50,10 @@ describe('sbb-journey-header', () => {
       ></sbb-journey-header>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
-      <sbb-journey-header level="1"size="l" round-trip="" origin="B" destination="C" negative>
+      <sbb-journey-header level="1" size="l" round-trip="" origin="B" destination="C" negative>
       </sbb-journey-header>
     `);
     expect(root).shadowDom.to.be.equal(`