fix: chromatic (to be tested)

sbb-design-systems · Dec 11, 2023 · 5d6fcd3 · 5d6fcd3
1 parent f9316da
commit 5d6fcd3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
@@ -1,8 +1,11 @@
+import { within } from '@storybook/testing-library';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
+import isChromatic from 'chromatic';
 import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
 import { sbbSpread } from '../../core/dom';
 
 import readme from './readme.md?raw';
@@ -11,6 +14,15 @@ import '../../button';
 import './breadcrumb-group';
 import '../breadcrumb';
 
+// Story interaction executed after the story renders
+const playStory = async ({ canvasElement }): Promise<void> => {
+  const canvas = within(canvasElement);
+  await waitForComponentsReady(() =>
+    canvas.getByTestId('breadcrumb-group').shadowRoot.querySelectorAll('sbb-breadcrumb'),
+  );
+  await waitForStablePosition(() => canvas.getByTestId('breadcrumb-group'));
+};
+
 const addBreadcrumb = (event: Event): void => {
   const breadcrumbGroup = (event.target as HTMLElement)
     .closest('.container')
@@ -130,10 +142,10 @@ const createBreadcrumbs = ({ numberOfBreadcrumbs, text, ...args }): TemplateResu
 
 const Template = (args): TemplateResult => html`
   <div class="container">
-    <sbb-breadcrumb-group aria-label="You are here:">
+    <sbb-breadcrumb-group aria-label="You are here:" data-testid="breadcrumb-group">
       ${createBreadcrumbs(args)}
     </sbb-breadcrumb-group>
-    <div style=${styleMap({ 'margin-block': '2rem', gap: '1rem', display: 'flex' })}>
+    <div style="margin-block: 2rem; gap: 1rem; display: flex;">
       <sbb-button variant="secondary" @click=${(event: Event) => addBreadcrumb(event)}
         >Add</sbb-button
       >
@@ -148,18 +160,20 @@ export const Default: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs },
+  play: isChromatic() ? playStory : undefined,
 };
 
 export const CollapsedState: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, numberOfBreadcrumbs: 25 },
+  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {
   decorators: [
     (story) => html`
-      <div style=${styleMap({ padding: '2rem' })}>
+      <div style="padding: 2rem;">
         ${story()}
         <div>Page content</div>
       </div>

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -1,7 +1,6 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';
 
@@ -131,9 +130,7 @@ export const LongContent: StoryObj = {
     'icon-name': 'house-small',
     text: 'This label name is so long that it needs ellipsis to fit.',
   },
-  decorators: [
-    (story) => html` <div style=${styleMap({ 'max-width': '200px' })}>${story()}</div> `,
-  ],
+  decorators: [(story) => html` <div style="max-width: 200px;">${story()}</div> `],
 };
 
 export const NoLink: StoryObj = {
@@ -143,7 +140,7 @@ export const NoLink: StoryObj = {
 };
 
 const meta: Meta = {
-  decorators: [(story) => html` <div style=${styleMap({ padding: '2rem' })}>${story()}</div> `],
+  decorators: [(story) => html` <div style="padding: 2rem;">${story()}</div> `],
   parameters: {
     backgrounds: {
       disable: true,