feat(ui): simplify timeout speedup for button stories

pkgs/clan-app/ui/src/components/v2/Button/Button.stories.tsx

@@ -3,9 +3,6 @@ import { Button, ButtonProps } from "./Button";
 import { Component } from "solid-js";
 import { expect, fn, waitFor } from "storybook/test";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
-import { StorybookClock } from "@/tests/clock";
-
-const clock = StorybookClock();
 
 const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
 
@@ -147,12 +144,14 @@ export default meta;
 
 type Story = StoryObj<ButtonProps>;
 
+const timeout = process.env.NODE_ENV === "test" ? 100 : 2000;
+
 export const Primary: Story = {
   args: {
     hierarchy: "primary",
     onAction: fn(async () => {
       // wait 500 ms to simulate an action
-      await new Promise((resolve) => clock.setTimeout(resolve, 2000));
+      await new Promise((resolve) => setTimeout(resolve, timeout));
       // randomly fail to check that the loading state still returns to normal
       if (Math.random() > 0.5) {
         throw new Error("Action failure");
@@ -166,13 +165,7 @@ export const Primary: Story = {
     },
   },
 
-  play: async ({
+  play: async ({ canvas, step, userEvent, args }: StoryContext) => {
-    canvas,
-    canvasElement,
-    step,
-    userEvent,
-    args,
-  }: StoryContext) => {
     const buttons = await canvas.findAllByRole("button");
 
     for (const button of buttons) {
@@ -201,9 +194,6 @@ export const Primary: Story = {
         // click the button
         await userEvent.click(button);
 
-        // advance the clock
-        clock.tick(1);
-
         // check the button has changed
         await waitFor(async () => {
           // the action handler should have been called
@@ -216,9 +206,6 @@ export const Primary: Story = {
           await expect(getCursorStyle(button)).toEqual("wait");
         });
 
-        // advance the clock
-        clock.tick(2000);
-
         // wait for the action handler to finish
         await waitFor(
           async () => {
@@ -229,7 +216,7 @@ export const Primary: Story = {
             // the pointer should be normal
             await expect(getCursorStyle(button)).toEqual("pointer");
           },
-          { timeout: 2500 },
+          { timeout: timeout + 500 },
         );
       });
     }

pkgs/clan-app/ui/tests/clock.ts

@@ -1,56 +0,0 @@
-import { query } from "@solidjs/router";
-import set = query.set;
-import FakeTimers, { Clock } from "@sinonjs/fake-timers";
-
-export interface StorybookClock {
-  tick: (ms: number) => void;
-  setTimeout: (
-    callback: (...args: any[]) => void,
-    delay: number,
-    ...args: any[]
-  ) => void;
-}
-
-class BrowserClock implements StorybookClock {
-  setTimeout(
-    callback: (...args: any[]) => void,
-    delay: number,
-    args: any,
-  ): void {
-    // set a normal timeout
-    setTimeout(callback, delay, args);
-  }
-
-  tick(_: number): void {
-    // do nothing
-  }
-}
-
-class FakeClock implements StorybookClock {
-  private clock: Clock;
-
-  constructor() {
-    this.clock = FakeTimers.createClock();
-  }
-
-  setTimeout(
-    callback: (...args: any[]) => void,
-    delay: number,
-    args: any,
-  ): void {
-    this.clock.setTimeout(callback, delay, args);
-  }
-
-  tick(ms: number): void {
-    this.clock.tick(ms);
-  }
-}
-
-export function StorybookClock(): StorybookClock {
-  // Check if we're in a browser environment
-  const isBrowser = process.env.NODE_ENV !== "test";
-
-  console.log("is browser", isBrowser);
-
-  return isBrowser ? new BrowserClock() : new FakeClock();
-}