Remove randomness from flaky twenty-front Storybook stories (#21594)

Several twenty-front Storybook stories were flagged flaky by Argos because they render different pixels across runs. This removes the non-determinism behind them. **What changed** - **Images** — replaced random `picsum.photos` URLs in the Logo and TabList stories with the existing `AVATAR_URL_MOCK`, and added global MSW handlers in `.storybook/preview.tsx` that serve a deterministic image for every remote host (picsum, twenty-icons.com, twentyhq.github.io, etc.) so no story depends on a network image load. - **Numbers** — the line-chart story built its data with `Math.random()`; now uses a deterministic formula. - **Dates** — the terminal "long output" story stamped its lines with `new Date()`; now uses a fixed base timestamp. The calendar-channel date/time format previews and example event used render-time `Date.now()`/`new Date()` in shared components; they now use a fixed reference date (`DateTimeSettingsPreviewDate`). - **Lazy-load timing** — the date-picker story now waits for the lazily-loaded calendar before the snapshot.  <a href="https://cubic.dev/pr/twentyhq/twenty/pull/21594?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>
2026-06-15 13:37:19 +02:00
parent c848ac34fd
commit ecc7b38b75
10 changed files with 88 additions and 40 deletions
@@ -112,12 +112,18 @@ export const Empty: Story = {
  },
 };

+const LONG_OUTPUT_BASE_TIMESTAMP_MS = new Date(
+  '2024-03-12T09:30:00.000Z',
+).getTime();
+
 export const LongOutput: Story = {
  args: {
    stdout: Array.from(
      { length: 100 },
-      (_, i) =>
-        `[${new Date().toISOString()}] Processing batch ${i + 1}/100...`,
+      (_, index) =>
+        `[${new Date(
+          LONG_OUTPUT_BASE_TIMESTAMP_MS + index * 1000,
+        ).toISOString()}] Processing batch ${index + 1}/100...`,
    ).join('\n'),
    stderr: '',
    isRunning: false,
@@ -2,11 +2,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { Logo } from '@/auth/components/Logo';
 import {
+  AVATAR_URL_MOCK,
  ComponentDecorator,
  RouterDecorator,
 } from 'twenty-ui-deprecated/testing';

-const logoUrl = 'https://picsum.photos/192/192';
+const logoUrl = AVATAR_URL_MOCK;

 const meta: Meta<typeof Logo> = {
  title: 'Modules/Auth/Logo',
@@ -0,0 +1,3 @@
+export const DATE_TIME_SETTINGS_PREVIEW_DATE = new Date(
+  '2024-03-12T09:30:00.000Z',
+);
@@ -115,7 +115,7 @@ const renderChart = (args: ChartArgs) => (
 const generateLinearData = (points: number = 10) => {
  return Array.from({ length: points }, (_, i) => ({
    x: i,
-    y: Math.floor(Math.random() * 100) + 20,
+    y: 20 + ((i * 37 + 13) % 80),
  }));
 };

@@ -1,6 +1,7 @@
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
@@ -24,7 +25,7 @@ const StyledGeneralContainer = styled.div`
 export const SettingsAccountsCalendarChannelsGeneral = () => {
  const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);

-  const exampleStartDate = new Date();
+  const exampleStartDate = DATE_TIME_SETTINGS_PREVIEW_DATE;
  const exampleEndDate = min([
    addMinutes(exampleStartDate, 30),
    endOfDay(exampleStartDate),
@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';

 import { DateFormat } from '@/localization/constants/DateFormat';
+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { detectDateFormat } from '@/localization/utils/detection/detectDateFormat';
 import { detectTimeZone } from '@/localization/utils/detection/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
@@ -26,7 +27,7 @@ export const DateTimeSettingsDateFormatSelect = ({
  const systemDateFormat = DateFormat[detectDateFormat()];

  const systemDateFormatLabel = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
    usedTimeZone,
    systemDateFormat,
  );
@@ -46,7 +47,7 @@ export const DateTimeSettingsDateFormatSelect = ({
      options={[
        {
          label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
            usedTimeZone,
            DateFormat.MONTH_FIRST,
          ),
@@ -54,7 +55,7 @@ export const DateTimeSettingsDateFormatSelect = ({
        },
        {
          label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
            usedTimeZone,
            DateFormat.DAY_FIRST,
          ),
@@ -62,7 +63,7 @@ export const DateTimeSettingsDateFormatSelect = ({
        },
        {
          label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
            usedTimeZone,
            DateFormat.YEAR_FIRST,
          ),
@@ -1,5 +1,6 @@
 import { formatInTimeZone } from 'date-fns-tz';

+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeFormat } from '@/localization/utils/detection/detectTimeFormat';
 import { detectTimeZone } from '@/localization/utils/detection/detectTimeZone';
@@ -25,19 +26,19 @@ export const DateTimeSettingsTimeFormatSelect = ({
  const systemTimeFormat = TimeFormat[detectTimeFormat()];

  const systemTimeFormatLabel = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
    usedTimeZone,
    systemTimeFormat,
  );

  const hour24Label = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
    usedTimeZone,
    TimeFormat.HOUR_24,
  );

  const hour12Label = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
    usedTimeZone,
    TimeFormat.HOUR_12,
  );
@@ -31,7 +31,16 @@ const meta: Meta<typeof DateTimePicker> = {
 export default meta;
 type Story = StoryObj<typeof DateTimePicker>;

-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByRole(
+      'button',
+      { name: 'Select month and year' },
+      { timeout: 10000 },
+    );
+  },
+};

 export const WithOpenMonthSelect: Story = {
  play: async ({ canvasElement }) => {
@@ -10,10 +10,13 @@ import {
  IconPhone,
  IconUser,
 } from 'twenty-ui-deprecated/display';
-import { ComponentWithRouterDecorator } from 'twenty-ui-deprecated/testing';
+import {
+  AVATAR_URL_MOCK,
+  ComponentWithRouterDecorator,
+} from 'twenty-ui-deprecated/testing';

 const tabs = [
-  { id: 'general', title: 'General', logo: 'https://picsum.photos/200' },
+  { id: 'general', title: 'General', logo: AVATAR_URL_MOCK },
  { id: 'contacts', title: 'Contacts', Icon: IconUser },
  { id: 'messages', title: 'Messages', Icon: IconMail },
  { id: 'calls', title: 'Calls', Icon: IconPhone },
@@ -23,7 +26,7 @@ const tabs = [
  {
    id: 'time',
    title: 'Time Tracking',
-    logo: 'https://picsum.photos/192/192',
+    logo: AVATAR_URL_MOCK,
  },
  {
    id: 'activity',