|
| 1 | +import { expect, test } from '@playwright/test'; |
| 2 | + |
| 3 | +import type { Application } from '../../models/application'; |
| 4 | +import { appConfigs } from '../../presets'; |
| 5 | +import type { FakeUser } from '../../testUtils'; |
| 6 | +import { createTestUtils } from '../../testUtils'; |
| 7 | + |
| 8 | +test.describe('basic tests for @react-router without middleware', () => { |
| 9 | + test.describe.configure({ mode: 'parallel' }); |
| 10 | + let app: Application; |
| 11 | + let fakeUser: FakeUser; |
| 12 | + |
| 13 | + test.beforeAll(async () => { |
| 14 | + test.setTimeout(90_000); // Wait for app to be ready |
| 15 | + app = await appConfigs.reactRouter.reactRouterNode |
| 16 | + .clone() |
| 17 | + .addFile( |
| 18 | + `app/root.tsx`, |
| 19 | + () => `import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'; |
| 20 | +import { rootAuthLoader } from '@clerk/react-router/ssr.server'; |
| 21 | +import { ClerkProvider } from '@clerk/react-router'; |
| 22 | +
|
| 23 | +import type { Route } from './+types/root'; |
| 24 | +
|
| 25 | +export async function loader(args: Route.LoaderArgs) { |
| 26 | + return rootAuthLoader(args); |
| 27 | +} |
| 28 | +
|
| 29 | +export function Layout({ children }: { children: React.ReactNode }) { |
| 30 | + return ( |
| 31 | + <html lang='en'> |
| 32 | + <head> |
| 33 | + <meta charSet='utf-8' /> |
| 34 | + <meta |
| 35 | + name='viewport' |
| 36 | + content='width=device-width, initial-scale=1' |
| 37 | + /> |
| 38 | + <Meta /> |
| 39 | + <Links /> |
| 40 | + </head> |
| 41 | + <body> |
| 42 | + {children} |
| 43 | + <ScrollRestoration /> |
| 44 | + <Scripts /> |
| 45 | + </body> |
| 46 | + </html> |
| 47 | + ); |
| 48 | +} |
| 49 | +
|
| 50 | +export default function App({ loaderData }: Route.ComponentProps) { |
| 51 | + return ( |
| 52 | + <ClerkProvider loaderData={loaderData}> |
| 53 | + <main> |
| 54 | + <Outlet /> |
| 55 | + </main> |
| 56 | + </ClerkProvider> |
| 57 | + ); |
| 58 | +} |
| 59 | +
|
| 60 | +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { |
| 61 | + let message = 'Oops!'; |
| 62 | + let details = 'An unexpected error occurred.'; |
| 63 | + let stack: string | undefined; |
| 64 | +
|
| 65 | + if (isRouteErrorResponse(error)) { |
| 66 | + message = error.status === 404 ? '404' : 'Error'; |
| 67 | + details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details; |
| 68 | + } else if (import.meta.env.DEV && error && error instanceof Error) { |
| 69 | + details = error.message; |
| 70 | + stack = error.stack; |
| 71 | + } |
| 72 | +
|
| 73 | + return ( |
| 74 | + <main> |
| 75 | + <h1>{message}</h1> |
| 76 | + <p>{details}</p> |
| 77 | + {stack && ( |
| 78 | + <pre> |
| 79 | + <code>{stack}</code> |
| 80 | + </pre> |
| 81 | + )} |
| 82 | + </main> |
| 83 | + ); |
| 84 | +} |
| 85 | +`, |
| 86 | + ) |
| 87 | + .commit(); |
| 88 | + |
| 89 | + await app.setup(); |
| 90 | + await app.withEnv(appConfigs.envs.withEmailCodes); |
| 91 | + await app.dev(); |
| 92 | + |
| 93 | + const u = createTestUtils({ app }); |
| 94 | + fakeUser = u.services.users.createFakeUser({ |
| 95 | + fictionalEmail: true, |
| 96 | + withPhoneNumber: true, |
| 97 | + withUsername: true, |
| 98 | + }); |
| 99 | + await u.services.users.createBapiUser(fakeUser); |
| 100 | + }); |
| 101 | + |
| 102 | + test.afterAll(async () => { |
| 103 | + await fakeUser.deleteIfExists(); |
| 104 | + await app.teardown(); |
| 105 | + }); |
| 106 | + |
| 107 | + test.afterEach(async ({ page, context }) => { |
| 108 | + const u = createTestUtils({ app, page, context }); |
| 109 | + await u.page.signOut(); |
| 110 | + await u.page.context().clearCookies(); |
| 111 | + }); |
| 112 | + |
| 113 | + test('can sign in and user button renders', async ({ page, context }) => { |
| 114 | + const u = createTestUtils({ app, page, context }); |
| 115 | + await u.po.signIn.goTo(); |
| 116 | + |
| 117 | + await u.po.signIn.setIdentifier(fakeUser.email); |
| 118 | + await u.po.signIn.setPassword(fakeUser.password); |
| 119 | + await u.po.signIn.continue(); |
| 120 | + await u.po.expect.toBeSignedIn(); |
| 121 | + |
| 122 | + await u.page.waitForAppUrl('/'); |
| 123 | + |
| 124 | + await u.po.userButton.waitForMounted(); |
| 125 | + await u.po.userButton.toggleTrigger(); |
| 126 | + await u.po.userButton.waitForPopover(); |
| 127 | + |
| 128 | + await u.po.userButton.toHaveVisibleMenuItems([/Manage account/i, /Sign out$/i]); |
| 129 | + }); |
| 130 | + |
| 131 | + test('redirects to sign-in when unauthenticated', async ({ page, context }) => { |
| 132 | + const u = createTestUtils({ app, page, context }); |
| 133 | + |
| 134 | + await u.page.goToRelative('/protected'); |
| 135 | + await u.page.waitForURL(`${app.serverUrl}/sign-in`); |
| 136 | + await u.po.signIn.waitForMounted(); |
| 137 | + }); |
| 138 | + |
| 139 | + test('renders control components contents', async ({ page, context }) => { |
| 140 | + const u = createTestUtils({ app, page, context }); |
| 141 | + |
| 142 | + await u.page.goToAppHome(); |
| 143 | + await expect(u.page.getByText('SignedOut')).toBeVisible(); |
| 144 | + |
| 145 | + await u.page.goToRelative('/sign-in'); |
| 146 | + await u.po.signIn.waitForMounted(); |
| 147 | + await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); |
| 148 | + await u.po.expect.toBeSignedIn(); |
| 149 | + await expect(u.page.getByText('SignedIn')).toBeVisible(); |
| 150 | + }); |
| 151 | + |
| 152 | + test('renders user profile with SSR data', async ({ page, context }) => { |
| 153 | + const u = createTestUtils({ app, page, context }); |
| 154 | + |
| 155 | + await u.page.goToRelative('/sign-in'); |
| 156 | + await u.po.signIn.waitForMounted(); |
| 157 | + await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); |
| 158 | + await u.po.expect.toBeSignedIn(); |
| 159 | + |
| 160 | + await u.po.userButton.waitForMounted(); |
| 161 | + await u.page.goToRelative('/protected'); |
| 162 | + await u.po.userProfile.waitForMounted(); |
| 163 | + |
| 164 | + // Fetched from an API endpoint (/api/me), which is server-rendered. |
| 165 | + // This also verifies that the server middleware is working. |
| 166 | + await expect(u.page.getByText(`First name: ${fakeUser.firstName}`)).toBeVisible(); |
| 167 | + await expect(u.page.getByText(`Email: ${fakeUser.email}`)).toBeVisible(); |
| 168 | + }); |
| 169 | +}); |
0 commit comments