Storybook Helpers (#35158)

app/javascript/mastodon/components/__tests__/button-test.jsx

@@ -1,6 +1,6 @@
 import renderer from 'react-test-renderer';
 
-import { render, fireEvent, screen } from 'mastodon/test_helpers';
+import { render, fireEvent, screen } from '@/testing/rendering';
 
 import { Button } from '../button';
 

app/javascript/mastodon/components/account/account.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { accountFactoryState, relationshipsFactory } from '@/testing/factories';
+
+import { Account } from './index';
+
+const meta = {
+  title: 'Components/Account',
+  component: Account,
+  argTypes: {
+    id: {
+      type: 'string',
+      description: 'ID of the account to display',
+    },
+    size: {
+      type: 'number',
+      description: 'Size of the avatar in pixels',
+    },
+    hidden: {
+      type: 'boolean',
+      description: 'Whether the account is hidden or not',
+    },
+    minimal: {
+      type: 'boolean',
+      description: 'Whether to display a minimal version of the account',
+    },
+    defaultAction: {
+      type: 'string',
+      control: 'select',
+      options: ['block', 'mute'],
+      description: 'Default action to take on the account',
+    },
+    withBio: {
+      type: 'boolean',
+      description: 'Whether to display the account bio or not',
+    },
+    withMenu: {
+      type: 'boolean',
+      description: 'Whether to display the account menu or not',
+    },
+  },
+  args: {
+    id: '1',
+    size: 46,
+    hidden: false,
+    minimal: false,
+    defaultAction: 'mute',
+    withBio: false,
+    withMenu: true,
+  },
+  parameters: {
+    state: {
+      accounts: {
+        '1': accountFactoryState(),
+      },
+    },
+  },
+} satisfies Meta<typeof Account>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    id: '1',
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    hidden: true,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    minimal: true,
+  },
+};
+
+export const WithBio: Story = {
+  args: {
+    withBio: true,
+  },
+};
+
+export const NoMenu: Story = {
+  args: {
+    withMenu: false,
+  },
+};
+
+export const Blocked: Story = {
+  args: {
+    defaultAction: 'block',
+  },
+  parameters: {
+    state: {
+      relationships: {
+        '1': relationshipsFactory({
+          blocking: true,
+        }),
+      },
+    },
+  },
+};
+
+export const Muted: Story = {
+  args: {},
+  parameters: {
+    state: {
+      relationships: {
+        '1': relationshipsFactory({
+          muting: true,
+        }),
+      },
+    },
+  },
+};

app/javascript/mastodon/features/ui/components/__tests__/column-test.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from 'mastodon/test_helpers';
+import { render, fireEvent, screen } from '@/testing/rendering';
 
 import Column from '../column';
 

app/javascript/mastodon/test_helpers.tsx

@@ -1,52 +0,0 @@
-import { IntlProvider } from 'react-intl';
-
-import { MemoryRouter } from 'react-router';
-
-import type { RenderOptions } from '@testing-library/react';
-import { render as rtlRender } from '@testing-library/react';
-
-import { IdentityContext } from './identity_context';
-
-beforeAll(() => {
-  global.requestIdleCallback = vi.fn((cb: IdleRequestCallback) => {
-    // @ts-expect-error IdleRequestCallback expects an argument of type IdleDeadline,
-    // but that doesn't exist in this environment.
-    cb();
-    return 0;
-  });
-});
-
-function render(
-  ui: React.ReactElement,
-  {
-    locale = 'en',
-    signedIn = true,
-    ...renderOptions
-  }: RenderOptions & { locale?: string; signedIn?: boolean } = {},
-) {
-  const fakeIdentity = {
-    signedIn: signedIn,
-    accountId: '123',
-    disabledAccountId: undefined,
-    permissions: 0,
-  };
-
-  const Wrapper = (props: { children: React.ReactNode }) => {
-    return (
-      <MemoryRouter>
-        <IntlProvider locale={locale}>
-          <IdentityContext.Provider value={fakeIdentity}>
-            {props.children}
-          </IdentityContext.Provider>
-        </IntlProvider>
-      </MemoryRouter>
-    );
-  };
-  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
-}
-
-// re-export everything
-export * from '@testing-library/react';
-
-// override render method
-export { render };