From 2a01652bfa5d206583e5e411b97bc0aed55818a5 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Mon, 8 Jan 2024 12:07:40 +0100
Subject: [PATCH] fix(sbb-icon): fix preserving space during loading (#2308)

---
 src/components/alert/alert/alert.spec.ts      |  7 +++
 .../breadcrumb-group/breadcrumb-group.spec.ts |  3 +
 src/components/button/button.spec.ts          |  5 ++
 src/components/calendar/calendar.spec.ts      | 10 ++-
 .../checkbox/checkbox/checkbox.spec.ts        |  9 ++-
 src/components/core/testing/test-setup.ts     |  2 +-
 .../expansion-panel-header.spec.ts            | 63 +++++++++++--------
 .../file-selector/file-selector.spec.ts       |  5 ++
 .../form-field-clear/form-field-clear.spec.ts |  5 ++
 .../form-field/form-field/form-field.spec.ts  |  7 +++
 .../header-action/header-action.spec.ts       |  5 ++
 src/components/icon/icon-base.ts              |  6 +-
 src/components/icon/icon.spec.ts              |  4 +-
 .../journey-header/journey-header.spec.ts     |  9 ++-
 src/components/link/link.spec.ts              |  9 ++-
 .../menu/menu-action/menu-action.spec.ts      |  5 ++
 .../notification/notification.spec.ts         | 19 ++++--
 src/components/slider/slider.spec.ts          |  5 ++
 src/components/status/status.spec.ts          |  7 +++
 .../tabs/tab-title/tab-title.spec.ts          |  5 ++
 src/components/tag/tag/tag.spec.ts            |  7 +++
 .../timetable-row/timetable-row.spec.ts       |  1 -
 src/components/toast/toast.spec.ts            | 11 ++--
 .../toggle-check/toggle-check.spec.ts         | 18 +++++-
 .../toggle-option/toggle-option.spec.ts       | 10 ++-
 .../tooltip-trigger/tooltip-trigger.spec.ts   | 15 +++--
 26 files changed, 192 insertions(+), 60 deletions(-)

diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
index 7f26f854f8..afe1675e51 100644
--- 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
index 57fca3fa3c..859548f7b0 100644
--- 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
index a1f316ca42..0009f67858 100644
--- 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
index 146519c1c6..167762b9cb 100644
--- 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
index fd0612c33b..32223fbab3 100644
--- 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
index c598070d92..d150431f24 100644
--- 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
index a64f1a06bc..7382ac4988 100644
--- 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
index 119a843653..375867d4db 100644
--- 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
index db7623b5ef..273d9e4274 100644
--- 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
index e774c37310..6bde2cfbf6 100644
--- 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
index 6a83828028..7f1bf5a0fc 100644
--- 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
index 9c528cddc1..e017351948 100644
--- 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
index 4e9624a6d6..ab24a03800 100644
--- 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
index 6b9e675fa6..e8bf6511cb 100644
--- 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(`
diff --git a/src/components/link/link.spec.ts b/src/components/link/link.spec.ts
index 92bb2ab1d9..3aad81bdcc 100644
--- a/src/components/link/link.spec.ts
+++ b/src/components/link/link.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 './link';
 
 describe('sbb-link', () => {
@@ -58,6 +61,8 @@ describe('sbb-link', () => {
       </sbb-link>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-link
         role="button"
@@ -106,7 +111,7 @@ describe('sbb-link', () => {
           is-static
           dir="ltr"
           >
-        
+
         Travelcards &amp; tickets.
       </sbb-link>
     `);
@@ -154,7 +159,7 @@ describe('sbb-link', () => {
         target="_blank"
         dir="ltr"
       >
-        
+
         Travelcards &amp; tickets.
       </sbb-link>
     `);
diff --git a/src/components/menu/menu-action/menu-action.spec.ts b/src/components/menu/menu-action/menu-action.spec.ts
index 1c41cb958f..f16ccd4545 100644
--- a/src/components/menu/menu-action/menu-action.spec.ts
+++ b/src/components/menu/menu-action/menu-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 './menu-action';
 
 describe('sbb-menu-action', () => {
@@ -45,6 +48,8 @@ describe('sbb-menu-action', () => {
       </sbb-menu-action>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
         <sbb-menu-action  amount="123456" icon-name="menu-small" href="https://github.com/lyne-design-system/lyne-components" target="_blank" role="link" tabindex="0" dir="ltr">
diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
index 6ecc30a906..c1ee7918da 100644
--- a/src/components/notification/notification.spec.ts
+++ b/src/components/notification/notification.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 './notification';
 import '../link';
 import '../button';
@@ -14,6 +17,8 @@ describe('sbb-notification', () => {
       >`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-notification disable-animation data-state="opened" type="info" style="--sbb-notification-height: auto;">
@@ -22,7 +27,7 @@ describe('sbb-notification', () => {
     );
     expect(root).shadowDom.to.be.equal(
       `
-        <div class="sbb-notification__wrapper">  
+        <div class="sbb-notification__wrapper">
           <div class="sbb-notification">
             <sbb-icon aria-hidden="true" data-namespace="default" role="img" class="sbb-notification__icon" name="circle-information-small"></sbb-icon>
             <span class="sbb-notification__content">
@@ -45,6 +50,8 @@ describe('sbb-notification', () => {
       >`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-notification disable-animation data-has-title data-state="opened" title-content="Title" type="info" style="--sbb-notification-height: auto;">
@@ -53,7 +60,7 @@ describe('sbb-notification', () => {
     );
     expect(root).shadowDom.to.be.equal(
       `
-        <div class="sbb-notification__wrapper">  
+        <div class="sbb-notification__wrapper">
           <div class="sbb-notification">
             <sbb-icon aria-hidden="true" data-namespace="default" role="img" class="sbb-notification__icon" name="circle-information-small"></sbb-icon>
             <span class="sbb-notification__content">
@@ -82,6 +89,8 @@ describe('sbb-notification', () => {
       </sbb-notification>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-notification disable-animation data-has-title data-state="opened" type="info" style="--sbb-notification-height: auto;">
@@ -93,7 +102,7 @@ describe('sbb-notification', () => {
     );
     expect(root).shadowDom.to.be.equal(
       `
-        <div class="sbb-notification__wrapper">  
+        <div class="sbb-notification__wrapper">
           <div class="sbb-notification">
             <sbb-icon aria-hidden="true" data-namespace="default" role="img" class="sbb-notification__icon" name="circle-information-small"></sbb-icon>
             <span class="sbb-notification__content">
@@ -119,6 +128,8 @@ describe('sbb-notification', () => {
       >`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-notification disable-animation data-has-title readonly data-state="opened" title-content="Title" type="info" style="--sbb-notification-height: auto;">
@@ -127,7 +138,7 @@ describe('sbb-notification', () => {
     );
     expect(root).shadowDom.to.be.equal(
       `
-        <div class="sbb-notification__wrapper">  
+        <div class="sbb-notification__wrapper">
           <div class="sbb-notification">
             <sbb-icon aria-hidden="true" data-namespace="default" role="img" class="sbb-notification__icon" name="circle-information-small"></sbb-icon>
             <span class="sbb-notification__content">
diff --git a/src/components/slider/slider.spec.ts b/src/components/slider/slider.spec.ts
index 256e8ad953..0ccc9eee2c 100644
--- a/src/components/slider/slider.spec.ts
+++ b/src/components/slider/slider.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 './slider';
 
 describe('sbb-slider', () => {
@@ -13,6 +16,8 @@ describe('sbb-slider', () => {
       ></sbb-slider>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-slider
         role="slider"
diff --git a/src/components/status/status.spec.ts b/src/components/status/status.spec.ts
index 55e6d541d9..8864b7e9e6 100644
--- a/src/components/status/status.spec.ts
+++ b/src/components/status/status.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 './status';
 import '../icon';
 
@@ -7,6 +10,8 @@ describe('sbb-status', () => {
   it('renders', async () => {
     const root = await fixture(html` <sbb-status type="info"> Status info text </sbb-status>`);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`<sbb-status type="info">Status info text</sbb-status>`);
 
     await expect(root).shadowDom.to.be.equalSnapshot();
@@ -17,6 +22,8 @@ describe('sbb-status', () => {
       html` <sbb-status type="info" title-content="Title"> Status info text </sbb-status>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
       <sbb-status type="info" title-content="Title" data-has-title="">
         Status info text
diff --git a/src/components/tabs/tab-title/tab-title.spec.ts b/src/components/tabs/tab-title/tab-title.spec.ts
index 614493f7e6..bbbee09180 100644
--- a/src/components/tabs/tab-title/tab-title.spec.ts
+++ b/src/components/tabs/tab-title/tab-title.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 './tab-title';
 
 describe('sbb-tab-title', () => {
@@ -25,6 +28,8 @@ describe('sbb-tab-title', () => {
       html`<sbb-tab-title level="2" icon-name="pie-small"></sbb-tab-title>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`<sbb-tab-title level="2" icon-name="pie-small"></sbb-tab-title>`);
     expect(root).shadowDom.to.be.equal(
       `
diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts
index 9f52565163..c9f07ed27a 100644
--- a/src/components/tag/tag/tag.spec.ts
+++ b/src/components/tag/tag/tag.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 './tag';
 
 describe('sbb-tag', () => {
@@ -54,6 +57,8 @@ describe('sbb-tag', () => {
       </sbb-tag>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
         <sbb-tag amount="123" aria-disabled="true" aria-pressed="false" disabled icon-name="circle-information-small" role="button" value="information" dir="ltr">
@@ -97,6 +102,8 @@ describe('sbb-tag', () => {
       </sbb-tag>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
         <sbb-tag value="foo" aria-pressed="false" role="button" tabindex="0" dir="ltr">
diff --git a/src/components/timetable-row/timetable-row.spec.ts b/src/components/timetable-row/timetable-row.spec.ts
index 806e7384cc..337cc87d23 100644
--- a/src/components/timetable-row/timetable-row.spec.ts
+++ b/src/components/timetable-row/timetable-row.spec.ts
@@ -20,7 +20,6 @@ import {
   walkTimeTrip,
 } from './timetable-row.sample-data';
 import '.';
-import '../timetable-occupancy';
 
 const now = new Date('2022-08-16T15:00:00Z').valueOf();
 
diff --git a/src/components/toast/toast.spec.ts b/src/components/toast/toast.spec.ts
index 7a894cd78b..cf3201dd3c 100644
--- a/src/components/toast/toast.spec.ts
+++ b/src/components/toast/toast.spec.ts
@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { isFirefox } from '../core/dom';
+import { waitForLitRender } from '../core/testing';
 
 import type { SbbToastElement } from './toast';
 
@@ -13,8 +14,10 @@ describe('sbb-toast', () => {
       <sbb-toast icon-name="circle-tick-small" dismissible> 'Lorem ipsum dolor' </sbb-toast>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(`
-      <sbb-toast position="bottom-center" icon-name="circle-tick-small" dismissible="" data-state="closed" 
+      <sbb-toast position="bottom-center" icon-name="circle-tick-small" dismissible="" data-state="closed"
         data-has-icon data-has-action
       >
         <span>'Lorem ipsum dolor'</span>
@@ -34,9 +37,9 @@ describe('sbb-toast', () => {
           </div>
           <div class="sbb-toast__action">
             <slot name="action">
-              <sbb-button class="sbb-toast__action-button" aria-label="Close message" 
-                variant="transparent" negative size="m" icon-name="cross-small" 
-                dir="ltr" role="button" tabindex="0" data-icon-only sbb-toast-close 
+              <sbb-button class="sbb-toast__action-button" aria-label="Close message"
+                variant="transparent" negative size="m" icon-name="cross-small"
+                dir="ltr" role="button" tabindex="0" data-icon-only sbb-toast-close
               >
               </sbb-button>
             </slot>
diff --git a/src/components/toggle-check/toggle-check.spec.ts b/src/components/toggle-check/toggle-check.spec.ts
index 97ac5ea77f..63089e44b4 100644
--- a/src/components/toggle-check/toggle-check.spec.ts
+++ b/src/components/toggle-check/toggle-check.spec.ts
@@ -1,8 +1,10 @@
-import './toggle-check';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../core/testing';
+
+import './toggle-check';
+
 describe('sbb-toggle-check', () => {
   it('renders sbb-toggle-check', async () => {
     const root = await fixture(html`<sbb-toggle-check></sbb-toggle-check>`);
@@ -12,6 +14,8 @@ describe('sbb-toggle-check', () => {
         </sbb-toggle-check>
     `);
 
+    await waitForLitRender(root);
+
     expect(root).shadowDom.to.be.equal(`
       <label class="sbb-toggle-check">
         <input aria-hidden="true" tabindex="-1" type="checkbox"/>
@@ -44,6 +48,8 @@ describe('sbb-toggle-check', () => {
         <sbb-toggle-check label-position="before">Check it</sbb-toggle-check>
       `);
 
+      await waitForLitRender(root);
+
       expect(root).dom.to.be.equal(`
         <sbb-toggle-check size="s" aria-checked="false" aria-disabled="false" aria-required="false" label-position="before" role="checkbox" tabindex="0">
           Check it
@@ -80,6 +86,8 @@ describe('sbb-toggle-check', () => {
       it('renders toggle in checked state', async () => {
         const root = await fixture(html`<sbb-toggle-check checked></sbb-toggle-check>`);
 
+        await waitForLitRender(root);
+
         expect(root).dom.to.be.equal(
           `
           <sbb-toggle-check size="s" aria-checked="true" aria-disabled="false" aria-required="false" checked label-position="after" role="checkbox" tabindex="0">
@@ -117,6 +125,8 @@ describe('sbb-toggle-check', () => {
       it('renders toggle in disabled state', async () => {
         const root = await fixture(html`<sbb-toggle-check disabled></sbb-toggle-check>`);
 
+        await waitForLitRender(root);
+
         expect(root).dom.to.be.equal(`
           <sbb-toggle-check size="s" aria-checked="false" aria-disabled="true" aria-required="false" disabled label-position="after" role="checkbox">
           </sbb-toggle-check>
@@ -152,10 +162,12 @@ describe('sbb-toggle-check', () => {
       it('renders toggle in disabled and checked state', async () => {
         const root = await fixture(html`<sbb-toggle-check checked disabled></sbb-toggle-check>`);
 
+        await waitForLitRender(root);
+
         expect(root).dom.to.be.equal(
           `
           <sbb-toggle-check checked disabled size="s" label-position="after" aria-checked="true" aria-disabled="true" aria-required="false" role="checkbox">
-            
+
           </sbb-toggle-check>
         `,
         );
diff --git a/src/components/toggle/toggle-option/toggle-option.spec.ts b/src/components/toggle/toggle-option/toggle-option.spec.ts
index 2c9b2947b4..aca3e7319e 100644
--- a/src/components/toggle/toggle-option/toggle-option.spec.ts
+++ b/src/components/toggle/toggle-option/toggle-option.spec.ts
@@ -1,9 +1,11 @@
-import './toggle-option';
-import '../../icon';
-
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+
+import './toggle-option';
+import '../../icon';
+
 describe('sbb-toggle-option', () => {
   it('renders', async () => {
     const root = await fixture(
@@ -34,6 +36,8 @@ describe('sbb-toggle-option', () => {
       html`<sbb-toggle-option checked icon-name="arrow-right-small"></sbb-toggle-option>`,
     );
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `
       <sbb-toggle-option
diff --git a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
index 05373097b9..4280a35430 100644
--- a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
+++ b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts
@@ -1,19 +1,24 @@
-import '../../icon';
-import './tooltip-trigger';
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+
+import '../../icon';
+import './tooltip-trigger';
+
 describe('sbb-tooltip-trigger', () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-tooltip-trigger></sbb-tooltip-trigger>`);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr"></sbb-tooltip-trigger>`,
     );
     expect(root).shadowDom.to.be.equal(
       `<span class="sbb-tooltip-trigger">
         <slot>
-          <sbb-icon 
+          <sbb-icon
             aria-hidden="true"
             data-namespace="default"
             name="circle-information-small"
@@ -28,6 +33,8 @@ describe('sbb-tooltip-trigger', () => {
   it('renders with custom content', async () => {
     const root = await fixture(html`<sbb-tooltip-trigger>Custom Content</sbb-tooltip-trigger>`);
 
+    await waitForLitRender(root);
+
     expect(root).dom.to.be.equal(
       `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr">
         Custom Content
@@ -36,7 +43,7 @@ describe('sbb-tooltip-trigger', () => {
     expect(root).shadowDom.to.be.equal(
       `<span class="sbb-tooltip-trigger">
         <slot>
-          <sbb-icon 
+          <sbb-icon
             aria-hidden="true"
             data-namespace="default"
             name="circle-information-small"