321 consolidate duplicated generatemocktoken helper into shared teststory utility

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/src/App.container.stories.tsx

@@ -3,42 +3,77 @@ import { AppContainer } from './App.container.tsx';
 import {
 	withMockApolloClient,
 	withMockRouter,
-	MockUnauthWrapper,
 } from './test-utils/storybook-decorators.tsx';
-import { AppContainerCurrentUserDocument } from './generated.tsx';
+import {
+	AppContainerCurrentUserDocument,
+	ListingsPageContainerGetListingsDocument,
+	SelectAccountTypeContainerAccountPlansDocument,
+	SelectAccountTypeCurrentPersonalUserAndCreateIfNotExistsDocument,
+} from './generated.tsx';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MockUnauthWrapper } from './test-utils/storybook-mock-auth-wrappers.tsx';
+import { userIsAdminMockRequest } from './test-utils/storybook-helpers.ts';
+
+const mockListings = [
+	{
+		__typename: 'ItemListing',
+		id: '1',
+		title: 'Projector',
+		description: 'High-quality projector for home and office use',
+		category: 'Tools & Equipment',
+		location: 'Toronto, ON',
+		state: 'Active',
+		images: ['/assets/item-images/projector.png'],
+		sharingPeriodStart: '2025-01-01',
+		sharingPeriodEnd: '2025-12-31',
+		createdAt: '2025-01-01T00:00:00Z',
+		updatedAt: '2025-01-01T00:00:00Z',
+		schemaVersion: '1.0',
+		version: '1.0',
+		reports: 0,
+		sharingHistory: [],
+	},
+	{
+		__typename: 'ItemListing',
+		id: '2',
+		title: 'Umbrella',
+		description: 'Umbrella in excellent condition',
+		category: 'Accessories',
+		location: 'Vancouver, BC',
+		state: 'Active',
+		images: ['/assets/item-images/umbrella.png'],
+		sharingPeriodStart: '2025-02-01',
+		sharingPeriodEnd: '2025-06-30',
+		createdAt: '2025-01-15T00:00:00Z',
+		updatedAt: '2025-01-15T00:00:00Z',
+		schemaVersion: '1.0',
+		version: '1.0',
+		reports: 0,
+		sharingHistory: [],
+	},
+];
+
+const buildListingsMock = (listings = mockListings) => ({
+	request: { query: ListingsPageContainerGetListingsDocument },
+	result: { data: { itemListings: listings } },
+});
 
 const meta: Meta<typeof AppContainer> = {
 	title: 'App/AppContainer',
 	component: AppContainer,
 	parameters: {
 		layout: 'fullscreen',
 	},
+	tags: ['!dev'], // functional testing story, not rendered in sidebar - https://storybook.js.org/docs/writing-stories/tags
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Mock for authenticated user who has completed onboarding
-const mockAuthenticatedCompletedOnboarding = {
-	request: {
-		query: AppContainerCurrentUserDocument,
-		variables: {},
-	},
-	result: {
-		data: {
-			currentUser: {
-				__typename: 'PersonalUser' as const,
-				id: 'user-123',
-				userType: 'personal-user',
-				hasCompletedOnboarding: true,
-			},
-		},
-	},
-};
-
-// Mock for authenticated user who hasn't completed onboarding
-const mockAuthenticatedNotCompletedOnboarding = {
+// Helper to build a current-user mock
+const buildCurrentUserMock = (
+	opts: { id?: string; hasCompletedOnboarding?: boolean } = {},
+) => ({
 	request: {
 		query: AppContainerCurrentUserDocument,
 		variables: {},
@@ -47,19 +82,33 @@ const mockAuthenticatedNotCompletedOnboarding = {
 		data: {
 			currentUserAndCreateIfNotExists: {
 				__typename: 'PersonalUser' as const,
-				id: 'user-456',
+				id: opts.id ?? 'user-123',
 				userType: 'personal-user',
-				hasCompletedOnboarding: false,
+				hasCompletedOnboarding: opts.hasCompletedOnboarding ?? true,
 			},
 		},
 	},
-};
+});
+
+// Reusable canned responses
+const mockAuthenticatedCompletedOnboarding = buildCurrentUserMock({
+	id: 'user-123',
+	hasCompletedOnboarding: true,
+});
+const mockAuthenticatedNotCompletedOnboarding = buildCurrentUserMock({
+	id: 'user-456',
+	hasCompletedOnboarding: false,
+});
 
 export const AuthenticatedCompletedOnboarding: Story = {
 	decorators: [withMockApolloClient, withMockRouter('/')],
 	parameters: {
 		apolloClient: {
-			mocks: [mockAuthenticatedCompletedOnboarding],
+			mocks: [
+				mockAuthenticatedCompletedOnboarding,
+				buildListingsMock(),
+				userIsAdminMockRequest('user-123', false),
+			],
 		},
 	},
 };
@@ -68,7 +117,105 @@ export const AuthenticatedNotCompletedOnboarding: Story = {
 	decorators: [withMockApolloClient, withMockRouter('/')],
 	parameters: {
 		apolloClient: {
-			mocks: [mockAuthenticatedNotCompletedOnboarding],
+			mocks: [
+				mockAuthenticatedNotCompletedOnboarding,
+				{
+					request: {
+						query:
+							SelectAccountTypeCurrentPersonalUserAndCreateIfNotExistsDocument,
+					},
+					result: {
+						data: {
+							currentPersonalUserAndCreateIfNotExists: {
+								id: 'user-456',
+								account: {
+									accountType: 'personal-user',
+								},
+							},
+						},
+					},
+				},
+				buildListingsMock(),
+				userIsAdminMockRequest('user-456', false),
+				{
+					request: { query: SelectAccountTypeContainerAccountPlansDocument },
+					result: {
+						data: {
+							accountPlans: [
+								{
+									name: 'non-verified-personal',
+									description: 'Non-Verified Personal',
+									billingPeriodLength: 0,
+									billingPeriodUnit: 'month',
+									billingAmount: 0,
+									currency: 'USD',
+									setupFee: 0,
+									feature: {
+										activeReservations: 0,
+										bookmarks: 3,
+										itemsToShare: 15,
+										friends: 5,
+										__typename: 'AccountPlanFeature',
+									},
+									status: null,
+									cybersourcePlanId: null,
+									id: '607f1f77bcf86cd799439001',
+									schemaVersion: '1.0.0',
+									createdAt: '2023-05-02T10:00:00.000Z',
+									updatedAt: '2023-05-02T10:00:00.000Z',
+									__typename: 'AccountPlan',
+								},
+								{
+									name: 'verified-personal',
+									description: 'Verified Personal',
+									billingPeriodLength: 0,
+									billingPeriodUnit: 'month',
+									billingAmount: 0,
+									currency: 'USD',
+									setupFee: 0,
+									feature: {
+										activeReservations: 10,
+										bookmarks: 10,
+										itemsToShare: 30,
+										friends: 10,
+										__typename: 'AccountPlanFeature',
+									},
+									status: null,
+									cybersourcePlanId: null,
+									id: '607f1f77bcf86cd799439002',
+									schemaVersion: '1.0.0',
+									createdAt: '2023-05-02T10:00:00.000Z',
+									updatedAt: '2023-05-02T10:00:00.000Z',
+									__typename: 'AccountPlan',
+								},
+								{
+									name: 'verified-personal-plus',
+									description: 'Verified Personal Plus',
+									billingPeriodLength: 12,
+									billingPeriodUnit: 'month',
+									billingAmount: 4.99,
+									currency: 'USD',
+									setupFee: 0,
+									feature: {
+										activeReservations: 30,
+										bookmarks: 30,
+										itemsToShare: 50,
+										friends: 30,
+										__typename: 'AccountPlanFeature',
+									},
+									status: 'active',
+									cybersourcePlanId: 'cybersource_plan_001',
+									id: '607f1f77bcf86cd799439000',
+									schemaVersion: '1.0.0',
+									createdAt: '2023-05-02T10:00:00.000Z',
+									updatedAt: '2023-05-02T10:00:00.000Z',
+									__typename: 'AccountPlan',
+								},
+							],
+						},
+					},
+				},
+			],
 		},
 	},
 };
@@ -88,7 +235,7 @@ export const Unauthenticated: Story = {
 	],
 	parameters: {
 		apolloClient: {
-			mocks: [],
+			mocks: [buildListingsMock(), userIsAdminMockRequest('user-456', false)],
 		},
 	},
 };

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

@@ -1,46 +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';
-
-const mockEnv = {
-	VITE_FUNCTION_ENDPOINT: 'https://mock-functions.example.com',
-	VITE_BLOB_STORAGE_CONFIG_URL: 'https://mock-storage.example.com',
-	VITE_B2C_AUTHORITY: 'https://mock-authority.example.com',
-	VITE_B2C_CLIENTID: 'mock-client-id',
-	NODE_ENV: 'development',
-};
-
-const mockStorage = {
-	getItem: (key: string) => {
-		if (key.includes('oidc.user')) {
-			return JSON.stringify({
-				access_token: '',
-				profile: { sub: 'test-user' },
-			});
-		}
-		return null;
-	},
-	setItem: (_key: string, _value: string) => Promise.resolve(),
-	removeItem: (_key: string) => Promise.resolve(),
-	clear: () => Promise.resolve(),
-	key: () => null,
-	length: 0,
-	set: (_key: string, _value: unknown) => Promise.resolve(),
-	get: (_key: string) => Promise.resolve(null),
-	remove: (_key: string) => Promise.resolve(null),
-	getAllKeys: () => Promise.resolve([]),
-};
-
-Object.defineProperty(globalThis, 'sessionStorage', { value: mockStorage, writable: true });
-Object.defineProperty(globalThis, 'localStorage', { value: mockStorage, writable: true });
-
-Object.defineProperty(import.meta, 'env', {
-	value: mockEnv,
-	writable: true,
-});
+import { withAuthDecorator } from './test-utils/storybook-decorators.tsx';
 
 const meta: Meta<typeof App> = {
 	title: 'App/Main Application',
@@ -49,6 +11,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: {
@@ -58,21 +21,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;