From 5d6fcd39a7be85aa00e0fe44d877fae8af244914 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 11 Dec 2023 11:13:49 +0100
Subject: [PATCH] fix: chromatic (to be tested)

---
 .../breadcrumb-group.stories.ts               | 22 +++++++++++++++----
 .../breadcrumb/breadcrumb.stories.ts          |  7 ++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
index b38f3c042ac..5bb224e2d03 100644
--- 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
index d442da87874..d4d834da531 100644
--- 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,