# All files / src/test-utils storybook-decorators.tsx

75% Statements 3/4
0% Branches 0/1
66.66% Functions 2/3
75% Lines 3/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51

    5x

    5x
    15x

     /**
     * Storybook decorators for page-level components that call useGrackle().
     */

    import type { Decorator } from "@storybook/react";
    import { MemoryRouter, Routes, Route } from "react-router";
    import { MockGrackleProvider } from "../mocks/MockGrackleProvider.js";
    import { SidebarProvider } from "../context/SidebarContext.js";

    /**
     * Decorator for stories that test page-level components which call useGrackle().
     * Apply via `decorators: [withMockGrackle]` in the story meta.
     */
    export const withMockGrackle: Decorator = (Story) => (
      <MockGrackleProvider>
        <SidebarProvider>
          <Story />
        </SidebarProvider>
      </MockGrackleProvider>
    );

    /**
     * Creates a decorator that wraps the story in MockGrackleProvider + MemoryRouter
     * with the given initial route entries and a catch-all Route for useParams().
     *
     * Use with `parameters: { skipRouter: true }` in the story meta to prevent
     * the global preview.tsx from adding a second MemoryRouter.
     *
     * @example
     * ```tsx
     * const meta = {
     *   component: TaskPage,
     *   decorators: [withMockGrackleRoute(["/tasks/task-001"], "/tasks/:taskId")],
     *   parameters: { skipRouter: true },
     * };
     * ```
     */
    export function withMockGrackleRoute(initialEntries: string[], routePath: string = "*"): Decorator {
      return (Story) => (
        <MockGrackleProvider>
          <MemoryRouter initialEntries={initialEntries}>
            <SidebarProvider>
              <Routes>
                <Route path={routePath} element={<Story />} />
              </Routes>
            </SidebarProvider>
          </MemoryRouter>
        </MockGrackleProvider>
      );
    }