Skip to content

Commit d51c180

Browse files
nikospapcomnikospapcom
authored
chore(e2e): Add tests for waitlist sign-up mode (#4557)
1 parent e5b9b85 commit d51c180

File tree

5 files changed

+221
-0
lines changed

5 files changed

+221
-0
lines changed

‎.changeset/good-buckets-cross.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎integration/presets/envs.ts

+7
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,12 @@ const withLegalConsent = base
107107
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-legal-consent').sk)
108108
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-legal-consent').pk);
109109

110+
const withWaitlistdMode = withEmailCodes
111+
.clone()
112+
.setId('withWaitlistdMode')
113+
.setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-waitlist-mode').sk)
114+
.setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-waitlist-mode').pk);
115+
110116
export const envs = {
111117
base,
112118
withEmailCodes,
@@ -122,4 +128,5 @@ export const envs = {
122128
withDynamicKeys,
123129
withRestrictedMode,
124130
withLegalConsent,
131+
withWaitlistdMode,
125132
} as const;

‎integration/testUtils/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { createUserProfileComponentPageObject } from './userProfilePageObject';
1515
import type { FakeOrganization, FakeUser } from './usersService';
1616
import { createUserService } from './usersService';
1717
import { createUserVerificationComponentPageObject } from './userVerificationPageObject';
18+
import { createWaitlistComponentPageObject } from './waitlistPageObject';
1819

1920
export type { FakeUser, FakeOrganization };
2021
const createClerkClient = (app: Application) => {
@@ -93,6 +94,7 @@ export const createTestUtils = <
9394
organizationSwitcher: createOrganizationSwitcherComponentPageObject(testArgs),
9495
userButton: createUserButtonPageObject(testArgs),
9596
userVerification: createUserVerificationComponentPageObject(testArgs),
97+
waitlist: createWaitlistComponentPageObject(testArgs),
9698
expect: createExpectPageObject(testArgs),
9799
clerk: createClerkUtils(testArgs),
98100
};

‎integration/testUtils/waitlistPageObject.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { common } from './commonPageObject';
2+
import type { TestArgs } from './signInPageObject';
3+
4+
type WaitlistFormInputs = {
5+
email: string;
6+
};
7+
8+
export const createWaitlistComponentPageObject = (testArgs: TestArgs) => {
9+
const { page } = testArgs;
10+
11+
const self = {
12+
...common(testArgs),
13+
goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => {
14+
await page.goToRelative('/waitlist', { searchParams: opts?.searchParams });
15+
16+
if (typeof opts?.headlessSelector !== 'undefined') {
17+
return self.waitForMounted(opts.headlessSelector);
18+
}
19+
return self.waitForMounted();
20+
},
21+
waitForMounted: (selector = '.cl-waitlist-root') => {
22+
return page.waitForSelector(selector, { state: 'attached' });
23+
},
24+
joinWaitlist: async (opts: WaitlistFormInputs) => {
25+
await self.getEmailAddressInput().fill(opts.email);
26+
27+
await self.joinWaitlistContinue();
28+
},
29+
joinWaitlistContinue: () => {
30+
return page.getByRole('button', { name: 'Join the waitlist', exact: true }).click();
31+
},
32+
};
33+
34+
return self;
35+
};

‎integration/tests/waitlist-mode.test.ts

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
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('Waitlist mode', () => {
9+
test.describe.configure({ mode: 'parallel' });
10+
let app: Application;
11+
let fakeUser: FakeUser;
12+
13+
test.beforeAll(async () => {
14+
app = await appConfigs.next.appRouter
15+
.clone()
16+
.addFile(
17+
'src/app/provider.tsx',
18+
() => `'use client'
19+
import { ClerkProvider } from "@clerk/nextjs";
20+
21+
export function Provider({ children }: { children: any }) {
22+
return (
23+
<ClerkProvider waitlistUrl='/waitlist'>
24+
{children}
25+
</ClerkProvider>
26+
)
27+
}`,
28+
)
29+
.addFile(
30+
'src/app/layout.tsx',
31+
() => `import './globals.css';
32+
import { Inter } from 'next/font/google';
33+
import { Provider } from './provider';
34+
35+
const inter = Inter({ subsets: ['latin'] });
36+
37+
export const metadata = {
38+
title: 'Create Next App',
39+
description: 'Generated by create next app',
40+
};
41+
42+
export default function RootLayout({ children }: { children: React.ReactNode }) {
43+
return (
44+
<Provider>
45+
<html lang='en'>
46+
<body className={inter.className}>{children}</body>
47+
</html>
48+
</Provider>
49+
);
50+
}`,
51+
)
52+
.addFile(
53+
'src/app/hash/user/page.tsx',
54+
() => `
55+
import { UserProfile, UserButton } from '@clerk/nextjs';
56+
57+
export default function Page() {
58+
return (
59+
<div>
60+
<UserButton />
61+
<UserProfile routing="hash" />
62+
</div>
63+
);
64+
}`,
65+
)
66+
.addFile(
67+
'src/app/waitlist/page.tsx',
68+
() => `
69+
import { Waitlist } from '@clerk/nextjs';
70+
71+
export default function Page() {
72+
return (
73+
<div>
74+
<Waitlist />
75+
</div>
76+
);
77+
}`,
78+
)
79+
.commit();
80+
await app.setup();
81+
await app.withEnv(appConfigs.envs.withWaitlistdMode);
82+
await app.dev();
83+
84+
const m = createTestUtils({ app });
85+
fakeUser = m.services.users.createFakeUser({
86+
withUsername: true,
87+
fictionalEmail: true,
88+
withPhoneNumber: true,
89+
});
90+
await m.services.users.createBapiUser({
91+
...fakeUser,
92+
username: undefined,
93+
phoneNumber: undefined,
94+
});
95+
});
96+
97+
test.afterAll(async () => {
98+
await fakeUser.deleteIfExists();
99+
await app.teardown();
100+
});
101+
102+
test('Existing user signs in succesfull', async ({ page, context }) => {
103+
const u = createTestUtils({ app, page, context });
104+
await u.po.signIn.goTo();
105+
await u.po.signIn.waitForMounted();
106+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
107+
await u.po.expect.toBeSignedIn();
108+
109+
await u.po.userProfile.goTo();
110+
await u.po.userProfile.waitForMounted();
111+
});
112+
113+
test('Sign up page return restricted and click Back to sign in', async ({ page, context }) => {
114+
const u = createTestUtils({ app, page, context });
115+
await u.po.signUp.goTo();
116+
await u.po.signUp.waitForMounted();
117+
118+
await expect(u.page.getByText(/Access restricted/i).first()).toBeVisible();
119+
const backToSignIn = u.page.getByRole('link', { name: /Sign in/i });
120+
await backToSignIn.click();
121+
122+
await u.po.signIn.waitForMounted();
123+
await u.page.waitForAppUrl('/sign-in');
124+
});
125+
126+
test('Sign up page with invitation render correctly and sign up', async ({ page, context }) => {
127+
const u = createTestUtils({ app, page, context });
128+
const invitedUser = u.services.users.createFakeUser();
129+
130+
const invitation = await u.services.invitations.createBapiInvitation(invitedUser.email);
131+
132+
await u.page.goto(invitation.url);
133+
await u.po.signUp.waitForMounted();
134+
await expect(u.page.getByText(/Create your account/i).first()).toBeVisible();
135+
136+
await u.po.signUp.signUp({
137+
password: invitedUser.password,
138+
});
139+
140+
await u.po.expect.toBeSignedIn();
141+
142+
await invitedUser.deleteIfExists();
143+
});
144+
145+
test('Navigate to waitlist page and join the waitlist', async ({ page, context }) => {
146+
const u = createTestUtils({ app, page, context });
147+
await u.po.waitlist.goTo();
148+
await u.po.waitlist.waitForMounted();
149+
150+
await expect(u.page.getByText(/Join the waitlist/i).first()).toBeVisible();
151+
152+
await u.po.waitlist.joinWaitlist({ email: fakeUser.email });
153+
await expect(u.page.getByText(/Thanks for joining the waitlist!/i).first()).toBeVisible();
154+
});
155+
156+
test('Navigate between sign-in and waitlist', async ({ page, context }) => {
157+
const u = createTestUtils({ app, page, context });
158+
await u.po.signIn.goTo();
159+
await u.po.signIn.waitForMounted();
160+
161+
const waitlistLink = u.page.getByRole('link', { name: /Join waitlist/i });
162+
await expect(waitlistLink).toBeVisible();
163+
await waitlistLink.click();
164+
165+
await u.po.waitlist.waitForMounted();
166+
await u.page.waitForAppUrl('/waitlist');
167+
168+
const signInList = u.page.getByRole('link', { name: /Sign in/i });
169+
await expect(signInList).toBeVisible();
170+
await signInList.click();
171+
172+
await u.po.signIn.waitForMounted();
173+
await u.page.waitForAppUrl('/sign-in');
174+
});
175+
});

0 commit comments

Comments
 (0)