From d4c1fc86e3f2eb872c1135e2d9979158c3438c5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 16 Jun 2026 18:37:53 +0200
Subject: [PATCH] Stabilize flaky Argos stories in twenty-front storybook
 (#21691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three twenty-front stories rendered non-deterministically and
intermittently tripped Argos as false positives (flaky on `main`, not
caused by any recent change). Each is now deterministic:

- **SettingsDataModelFieldSettingsFormCard › WithRelationForm**: the
relation preview was screenshotted mid-settle — it briefly shows the
fallback object/record before the form default and the sample record
load. Added a `play` that waits for the settled state so Argos captures
it consistently.
- **MultiSelectInput › SingleSelection**: the final deselect click left
a transient hover/tooltip. The play now moves the pointer off the option
and waits for the tooltip to disappear.
- **Breadcrumb › Default**: ambiguous intrinsic width made the last
crumb flip between "New" and "N…". Gave the story a fixed container
width.

Verified the three stories pass in the Storybook vitest runner across
repeated runs.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21691?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../SettingsDataModelFieldSettingsFormCard.stories.tsx    | 8 ++++++++
 .../components/__stories__/MultiSelectInput.stories.tsx   | 6 ++++++
 .../components/__stories__/Breadcrumb.stories.tsx         | 3 +++
 3 files changed, 17 insertions(+)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx
index 74e750ddb5..a7685fe4b1 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldSettingsFormCard.stories.tsx
@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, waitFor, within } from 'storybook/test';
 
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
@@ -57,6 +58,13 @@ export const WithRelationForm: Story = {
     fieldType: FieldMetadataType.RELATION,
     objectNameSingular: 'company',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(() => {
+      expect(canvas.getByText('Housecall Pro')).toBeVisible();
+    });
+  },
 };
 
 export const WithSelectForm: Story = {
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx b/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
index 98930866df..a6d64fedce 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
@@ -210,6 +210,12 @@ export const SingleSelection: Story = {
 
       expect(checkboxes).toHaveLength(0);
     });
+
+    await userEvent.unhover(canvas.getByText('Professional Network'));
+
+    await waitFor(() => {
+      expect(canvas.queryByRole('tooltip')).not.toBeInTheDocument();
+    });
   },
 };
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
index fc7c1b2feb..de1b20dd4d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
@@ -15,6 +15,9 @@ const meta: Meta<typeof Breadcrumb> = {
       { children: 'New' },
     ],
   },
+  parameters: {
+    container: { width: 350 },
+  },
 };
 
 export default meta;