Skip to content

Commit d58bdba

Browse files
Copilotsnomiao
Copilot
and
snomiao
committed
Remove isolated components and use real auth components with mocked state
Co-authored-by: snomiao <[email protected]>
1 parent 862b3f1 commit d58bdba

File tree

9 files changed

+374
-300
lines changed

9 files changed

+374
-300
lines changed

‎.storybook/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,11 @@ const config: StorybookConfig = {
7676
console.log('!!!! Redirecting to mock:', resolved)
7777
return resolved
7878
}
79+
if (id === 'react-firebase-hooks/auth') {
80+
const resolved = PATH('./react-firebase-hooks/auth.mock.ts')
81+
console.log('!!!! Redirecting react-firebase-hooks/auth to mock:', resolved)
82+
return resolved
83+
}
7984
},
8085
},
8186
],

‎react-firebase-hooks/auth.mock.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { fn } from '@storybook/test'
2+
3+
// Mock the Firebase auth hooks for Storybook
4+
export const useSignInWithGoogle = fn().mockName('useSignInWithGoogle')
5+
export const useSignInWithGithub = fn().mockName('useSignInWithGithub')
6+
export const useSignOut = fn().mockName('useSignOut')
7+
8+
// Set default return values
9+
useSignInWithGoogle.mockReturnValue([fn(), undefined, false, undefined])
10+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, undefined])
11+
useSignOut.mockReturnValue([fn(), false, undefined])
12+
13+
console.log('mocking react-firebase-hooks/auth', {
14+
useSignInWithGoogle,
15+
useSignInWithGithub,
16+
useSignOut,
17+
})

‎src/stories/components/auth/AuthUI.stories.tsx‎

Lines changed: 142 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1+
import AuthUI from '@/components/AuthUI/AuthUI'
12
import { Meta, StoryObj } from '@storybook/nextjs-vite'
3+
import { CAPI, handlers } from '@/src/mocks/handlers'
4+
import { http, HttpResponse } from 'msw'
5+
import { User } from '@/src/api/generated'
6+
import { User as FirebaseUser } from 'firebase/auth'
7+
import { useFirebaseUser } from '@/src/hooks/useFirebaseUser.mock'
8+
import {
9+
useSignInWithGoogle,
10+
useSignInWithGithub
11+
} from 'react-firebase-hooks/auth'
212
import { fn } from '@storybook/test'
3-
import AuthUIStory from './AuthUIStory'
413

5-
const meta: Meta<typeof AuthUIStory> = {
6-
title: 'Auth/SignIn',
7-
component: AuthUIStory,
14+
const meta: Meta<typeof AuthUI> = {
15+
title: 'Components/Auth/SignIn',
16+
component: AuthUI,
817
parameters: {
918
layout: 'fullscreen',
19+
backgrounds: { default: 'dark' },
20+
msw: {
21+
handlers: handlers,
22+
},
1023
},
1124
tags: ['autodocs'],
1225
decorators: [
@@ -16,67 +29,148 @@ const meta: Meta<typeof AuthUIStory> = {
1629
</div>
1730
),
1831
],
19-
argTypes: {
20-
isLoading: {
21-
control: 'boolean',
22-
description: 'Whether the sign-in process is loading',
23-
},
24-
error: {
25-
control: 'text',
26-
description: 'Error message to display',
27-
},
28-
showLoginButton: {
29-
control: 'boolean',
30-
description: 'Whether to show the login buttons',
31-
},
32-
onGoogleSignIn: {
33-
action: 'google-signin',
34-
description: 'Callback for Google sign-in',
35-
},
36-
onGithubSignIn: {
37-
action: 'github-signin',
38-
description: 'Callback for GitHub sign-in',
39-
},
40-
},
4132
}
4233

4334
export default meta
44-
type Story = StoryObj<typeof AuthUIStory>
35+
type Story = StoryObj<typeof AuthUI>
36+
37+
// Mock user data
38+
const mockUser: User = {
39+
id: 'user-123',
40+
name: 'John Doe',
41+
email: '[email protected]',
42+
isAdmin: false,
43+
isApproved: true,
44+
}
45+
46+
// Mock Firebase user data
47+
const mockFirebaseUser = {
48+
uid: 'firebase-user-123',
49+
email: '[email protected]',
50+
displayName: 'John Doe',
51+
photoURL: 'https://picsum.photos/40/40',
52+
emailVerified: true,
53+
isAnonymous: false,
54+
metadata: {},
55+
providerData: [],
56+
refreshToken: '',
57+
tenantId: null,
58+
delete: async () => undefined,
59+
getIdToken: async () => '',
60+
getIdTokenResult: async () => ({}) as any,
61+
reload: async () => undefined,
62+
toJSON: () => ({}),
63+
phoneNumber: null,
64+
providerId: 'google',
65+
} satisfies FirebaseUser
4566

4667
export const Default: Story = {
47-
args: {
48-
isLoading: false,
49-
error: undefined,
50-
showLoginButton: true,
51-
onGoogleSignIn: fn(),
52-
onGithubSignIn: fn(),
68+
parameters: {
69+
msw: {
70+
handlers: [
71+
http.get(CAPI('/users'), () =>
72+
HttpResponse.json(null, { status: 401 })
73+
),
74+
...handlers,
75+
],
76+
},
77+
},
78+
beforeEach: () => {
79+
// Mock Firebase user as logged out
80+
useFirebaseUser.mockReturnValue([null, false, undefined])
81+
82+
// Mock Firebase auth hooks
83+
useSignInWithGoogle.mockReturnValue([fn(), undefined, false, undefined])
84+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, undefined])
5385
},
5486
}
5587

5688
export const Loading: Story = {
57-
args: {
58-
...Default.args,
59-
isLoading: true,
89+
parameters: {
90+
msw: {
91+
handlers: [
92+
http.get(CAPI('/users'), () =>
93+
HttpResponse.json(null, { status: 401 })
94+
),
95+
...handlers,
96+
],
97+
},
98+
},
99+
beforeEach: () => {
100+
// Mock Firebase user as loading
101+
useFirebaseUser.mockReturnValue([null, true, undefined])
102+
103+
// Mock Firebase auth hooks with Google loading state
104+
useSignInWithGoogle.mockReturnValue([fn(), undefined, true, undefined])
105+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, undefined])
60106
},
61107
}
62108

63-
export const WithError: Story = {
64-
args: {
65-
...Default.args,
66-
error: 'Account already exists with different credential',
109+
export const GoogleError: Story = {
110+
parameters: {
111+
msw: {
112+
handlers: [
113+
http.get(CAPI('/users'), () =>
114+
HttpResponse.json(null, { status: 401 })
115+
),
116+
...handlers,
117+
],
118+
},
119+
},
120+
beforeEach: () => {
121+
// Mock Firebase user as logged out
122+
useFirebaseUser.mockReturnValue([null, false, undefined])
123+
124+
// Mock Firebase auth hooks with Google error
125+
const googleError = {
126+
code: 'auth/account-exists-with-different-credential',
127+
message: 'Account already exists with different credential'
128+
}
129+
useSignInWithGoogle.mockReturnValue([fn(), undefined, false, googleError])
130+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, undefined])
67131
},
68132
}
69133

70-
export const NetworkError: Story = {
71-
args: {
72-
...Default.args,
73-
error: 'Network error. Please try again.',
134+
export const GitHubError: Story = {
135+
parameters: {
136+
msw: {
137+
handlers: [
138+
http.get(CAPI('/users'), () =>
139+
HttpResponse.json(null, { status: 401 })
140+
),
141+
...handlers,
142+
],
143+
},
144+
},
145+
beforeEach: () => {
146+
// Mock Firebase user as logged out
147+
useFirebaseUser.mockReturnValue([null, false, undefined])
148+
149+
// Mock Firebase auth hooks with GitHub error
150+
const githubError = {
151+
code: 'auth/network-request-failed',
152+
message: 'Network error. Please try again.'
153+
}
154+
useSignInWithGoogle.mockReturnValue([fn(), undefined, false, undefined])
155+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, githubError])
74156
},
75157
}
76158

77-
export const ButtonsDisabled: Story = {
78-
args: {
79-
...Default.args,
80-
showLoginButton: false,
159+
export const AlreadyLoggedIn: Story = {
160+
parameters: {
161+
msw: {
162+
handlers: [
163+
http.get(CAPI('/users'), () => HttpResponse.json(mockUser)),
164+
...handlers,
165+
],
166+
},
167+
},
168+
beforeEach: () => {
169+
// Mock Firebase user as logged in (component should redirect)
170+
useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
171+
172+
// Mock Firebase auth hooks
173+
useSignInWithGoogle.mockReturnValue([fn(), undefined, false, undefined])
174+
useSignInWithGithub.mockReturnValue([fn(), undefined, false, undefined])
81175
},
82176
}

0 commit comments

Comments
 (0)