321 consolidate duplicated generatemocktoken helper into shared teststory utility

apps/docs/package.json

@@ -56,5 +56,10 @@
 	"engines": {
 		"node": ">=18.0"
 	},
+	"pnpm": {
+		"overrides": {
+			"minimatch": ">=10.2.3"
+		}
+	},
 	"license": "MIT"
 }

apps/ui-sharethrift/.storybook/preview.tsx

@@ -1,4 +1,8 @@
 import type { Preview } from '@storybook/react-vite';
+import "@sthrift/ui-components/src/styles/theme.css";
+import '../src/index.css';
+import '../src/App.css'
+import '@ant-design/v5-patch-for-react-19';
 
 const preview: Preview = {
 	parameters: {
@@ -11,7 +15,32 @@ const preview: Preview = {
 		a11y: {
 			test: 'todo',
 		},
+		options: {
+			storySort: {
+				order: [
+					'Pages', 
+            ['Home - Unauthenticated',
+            'Login', 
+            'Signup', ['Select Account Type', 'Account Setup', 'Profile Setup', 'Terms', 'Payment'],
+            'Home - Authenticated',
+            'My Listings',
+            'My Reservations',
+            'Messages',
+            'Account', ['Profile', 'Settings']],
+					'Components',
+          'Containers'
+				],
+			},
+		},
 	},
 };
 
+// Remove Storybook's default 1rem padding from .sb-show-main.sb-main-padded
+const style = document.createElement("style");
+style.innerHTML = `
+  .sb-show-main.sb-main-padded {
+    padding: 0 !important;
+  }
+`;
+document.head.appendChild(style);
 export default preview;

apps/ui-sharethrift/package.json

@@ -37,11 +37,11 @@
 		"@chromatic-com/storybook": "^4.1.3",
 		"@eslint/js": "^9.30.1",
 		"@graphql-typed-document-node/core": "^3.2.0",
-		"@storybook/addon-a11y": "^10.1.11",
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/addon-vitest": "^10.1.11",
-		"@storybook/react": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-a11y": "catalog:",
+		"@storybook/addon-docs": "catalog:",
+		"@storybook/addon-vitest": "catalog:",
+		"@storybook/react": "catalog:",
+		"@storybook/react-vite": "catalog:",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/lodash": "^4.17.20",
 		"@types/react": "^19.1.9",
@@ -53,7 +53,7 @@
 		"eslint-plugin-react-hooks": "^5.2.0",
 		"eslint-plugin-react-refresh": "^0.4.20",
 		"globals": "^16.3.0",
-		"storybook": "^10.2.10",
+		"storybook": "catalog:",
 		"typescript": "~5.8.3",
 		"typescript-eslint": "^8.35.1",
 		"vite": "catalog:",

apps/ui-sharethrift/src/app.container.stories.tsx

@@ -3,10 +3,10 @@ import { AppContainer } from './app.container.tsx';
 import {
 	withMockApolloClient,
 	withMockRouter,
-	MockUnauthWrapper,
 } from './test-utils/storybook-decorators.tsx';
 import { AppContainerCurrentUserDocument, ListingsPageContainerGetListingsDocument, UseUserIsAdminDocument } from './generated.tsx';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MockUnauthWrapper } from './test-utils/storybook-mock-auth-wrappers.tsx';
 
 
 

apps/ui-sharethrift/src/app.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect } from 'storybook/test';
 import { MemoryRouter } from 'react-router-dom';
-import { AuthProvider } from 'react-oidc-context';
-import { MockedProvider } from '@apollo/client/testing/react';
 import { App } from './app.tsx';
+import { withAuthDecorator } from './test-utils/storybook-decorators.tsx';
 
 const mockEnv = {
 	VITE_FUNCTION_ENDPOINT: 'https://mock-functions.example.com',
@@ -50,6 +49,7 @@ const meta: Meta<typeof App> = {
 		hasCompletedOnboarding: false,
 		isAuthenticated: false,
 	},
+  tags: ['!dev'], // functional testing story, not rendered in sidebar - https://storybook.js.org/docs/writing-stories/tags
 	parameters: {
 		layout: 'fullscreen',
 		docs: {
@@ -59,21 +59,7 @@ const meta: Meta<typeof App> = {
 			},
 		},
 	},
-	decorators: [
-		(Story) => (
-			<MockedProvider mocks={[]}>
-				<AuthProvider
-					authority={mockEnv.VITE_B2C_AUTHORITY}
-					client_id={mockEnv.VITE_B2C_CLIENTID}
-					redirect_uri={globalThis.location.origin}
-					post_logout_redirect_uri={globalThis.location.origin}
-					userStore={mockStorage}
-				>
-					<Story />
-				</AuthProvider>
-			</MockedProvider>
-		),
-	],
+	decorators: [withAuthDecorator],
 } satisfies Meta<typeof App>;
 
 export default meta;

apps/ui-sharethrift/src/app.tsx

@@ -1,8 +1,8 @@
+import type React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppRoutes } from './components/layouts/app/index.tsx';
-import type React from 'react';
-import SignupRoutes from './components/layouts/signup/index.tsx';
-import { LoginSelection } from './components/shared/login-selection.tsx';
+import { LoginSelection } from './components/layouts/login/login-selection.tsx';
+import { SignupRoutes } from './components/layouts/signup/index.tsx';
 import { AuthRedirectAdmin } from './components/shared/auth-redirect-admin.tsx';
 import { AuthRedirectUser } from './components/shared/auth-redirect-user.tsx';
 import { RequireAuth } from './components/shared/require-auth.tsx';

apps/ui-sharethrift/src/components/layouts/app/app-routes.stories.tsx

@@ -1,41 +1,26 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from 'storybook/test';
 import { AppRoutes } from "./index.tsx";
-import { ListingsPageContainerGetListingsDocument, UseUserIsAdminDocument } from "../../../generated.tsx";
-import { withMockApolloClient, withMockRouter } from "../../../test-utils/storybook-decorators.tsx";
-import { expect } from 'storybook/test';
+import { withMockApolloClient,withMockRouter } from "../../../test-utils/storybook-decorators.tsx";
+import { ListingsPageContainerGetListingsDocument } from "../../../generated.tsx";
 
 const meta: Meta<typeof AppRoutes> = {
-	title: "Layouts/App Routes",
+	title: "Pages/Home - Authenticated",
 	component: AppRoutes,
 	decorators: [
 		withMockApolloClient,
-		withMockRouter("/"),
+		withMockRouter("/", true),
 	],
 };
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof AppRoutes> = () => <AppRoutes />;
-
-export const DefaultView: StoryFn<typeof AppRoutes> = Template.bind({});
 
+export const DefaultView: Story = {};
 DefaultView.play = async ({ canvasElement }) => {
-	// Component renders with lazy-loaded routes
-	expect(canvasElement).toBeTruthy();
-};
-
-/**
- * Tests that routes render correctly with lazy loading and Suspense.
- * Verifies the lazy() import mechanism and Suspense wrapper are working for all route components.
- */
-export const LazyLoadedRoutes: StoryFn<typeof AppRoutes> = Template.bind({});
-LazyLoadedRoutes.play = async ({ canvasElement }) => {
-	// Component should render (Suspense wrapper is present)
-	expect(canvasElement).toBeTruthy();
-
-	// Verify the component has rendered content
-	const textContent = canvasElement.textContent || '';
-	expect(textContent.length).toBeGreaterThan(0);
+	const canvas = within(canvasElement);
+	await expect(canvas.getByRole('main')).toBeInTheDocument();
 };
 
 DefaultView.parameters = {
@@ -148,7 +133,58 @@ DefaultView.parameters = {
       },
       {
         request: {
-          query: UseUserIsAdminDocument,
+          query: {
+            kind: "Document",
+            definitions: [
+              {
+                kind: "OperationDefinition",
+                operation: "query",
+                name: { kind: "Name", value: "useUserIsAdmin" },
+                selectionSet: {
+                  kind: "SelectionSet",
+                  selections: [
+                    {
+                      kind: "Field",
+                      name: { kind: "Name", value: "currentUser" },
+                      selectionSet: {
+                        kind: "SelectionSet",
+                        selections: [
+                          {
+                            kind: "InlineFragment",
+                            typeCondition: {
+                              kind: "NamedType",
+                              name: { kind: "Name", value: "PersonalUser" },
+                            },
+                            selectionSet: {
+                              kind: "SelectionSet",
+                              selections: [
+                                { kind: "Field", name: { kind: "Name", value: "id" } },
+                                { kind: "Field", name: { kind: "Name", value: "userIsAdmin" } },
+                              ],
+                            },
+                          },
+                          {
+                            kind: "InlineFragment",
+                            typeCondition: {
+                              kind: "NamedType",
+                              name: { kind: "Name", value: "AdminUser" },
+                            },
+                            selectionSet: {
+                              kind: "SelectionSet",
+                              selections: [
+                                { kind: "Field", name: { kind: "Name", value: "id" } },
+                                { kind: "Field", name: { kind: "Name", value: "userIsAdmin" } },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
         },
         result: {
           data: {
@@ -162,4 +198,4 @@ DefaultView.parameters = {
       },
     ],
   },
-};
+};

apps/ui-sharethrift/src/components/layouts/app/pages/account/pages/profile/components/profile-view.stories.tsx

@@ -73,9 +73,9 @@ export const Default: Story = {
 		listings: [],
 		isOwnProfile: true,
 		onEditSettings: () => console.log('Edit settings clicked'),
-		onListingClick: (_id: string) => console.log('Listing clicked'),
+		onListingClick: () => console.log('Listing clicked'),
 	},
-	play: async ({ canvasElement }) => {
+	play:  ({ canvasElement }) => {
 		expect(canvasElement).toBeTruthy();
 	},
 };
@@ -134,7 +134,7 @@ export const EmptyListingsOwnProfile: Story = {
 		onEditSettings: fn(),
 		onListingClick: fn(),
 	},
-	play: async ({ canvasElement }) => {
+	play: async  ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		await expect(canvas.getByText('No listings yet')).toBeInTheDocument();
 		await expect(canvas.getByRole('button', { name: /Create Your First Listing/i })).toBeInTheDocument();