Skip to content

Commit edd0fbc

Browse files
panteliselefpanteliselef
authored
test(clerk-js): Remove skipped integration tests related to navigation (clerk#2723)
* test(clerk-js): Remove skipped integration tests related to navigation * chore(repo): Create user-profile tests
1 parent b4284f9 commit edd0fbc

4 files changed

Lines changed: 223 additions & 140 deletions

File tree

‎.changeset/early-dryers-lay.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎integration/testUtils/userProfilePageObject.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@ export const createUserProfileComponentPageObject = (testArgs: TestArgs) => {
1515
waitForMounted: () => {
1616
return page.waitForSelector('.cl-userProfile-root', { state: 'attached' });
1717
},
18+
clickSetUsername: () => {
19+
return page.getByText(/Set username/i).click();
20+
},
21+
typeUsername: (value: string) => {
22+
return page.getByLabel(/username/i).fill(value);
23+
},
24+
clickAddEmailAddress: () => {
25+
return page.getByText(/Add email address/i).click();
26+
},
27+
typeEmailAddress: (value: string) => {
28+
return page.getByLabel(/Email address/i).fill(value);
29+
},
1830
};
1931
return self;
2032
};

‎integration/tests/navigation.test.ts‎

Lines changed: 44 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -50,21 +50,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
5050
}`,
5151
)
5252
.addFile(
53-
'src/app/hash/user/[[...catchall]]/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/hash/sign-in/[[...catchall]]/page.tsx',
53+
'src/app/hash/sign-in/page.tsx',
6854
() => `
6955
import { SignIn } from '@clerk/nextjs';
7056
@@ -91,129 +77,47 @@ export default function Page() {
9177
await app.teardown();
9278
});
9379

94-
//TODO-RETHEME: Refactor this, because this path doesn't exist anymore
95-
// test('user profile with path routing', async ({ page, context }) => {
96-
// const u = createTestUtils({ app, page, context });
97-
// await u.po.signIn.goTo();
98-
// await u.po.signIn.waitForMounted();
99-
// await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
100-
// await u.po.expect.toBeSignedIn();
101-
//
102-
// await u.po.userProfile.goTo();
103-
// await u.po.userProfile.waitForMounted();
104-
//
105-
// await u.page.getByText(/Set username/i).click();
106-
//
107-
// await u.page.waitForURL(`${app.serverUrl}/user/username`);
108-
//
109-
// await u.page.getByText(/Cancel/i).click();
110-
//
111-
// await u.page.waitForURL(`${app.serverUrl}/user`);
112-
//
113-
// await u.page.getByText(/Add email address/i).click();
114-
//
115-
// await u.page.waitForURL(`${app.serverUrl}/user/email-address`);
116-
//
117-
// await u.page.getByText(/Cancel/i).click();
118-
//
119-
// await u.page.waitForURL(`${app.serverUrl}/user`);
120-
// });
121-
122-
//TODO-RETHEME: Refactor this, because this path doesn't exist anymore
123-
// test('user profile with hash routing', async ({ page, context }) => {
124-
// const u = createTestUtils({ app, page, context });
125-
// await u.po.signIn.goTo();
126-
// await u.po.signIn.waitForMounted();
127-
// await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
128-
// await u.po.expect.toBeSignedIn();
129-
//
130-
// await u.page.goToRelative('/hash/user');
131-
// await u.po.userProfile.waitForMounted();
132-
//
133-
// await u.page.getByText(/Set username/i).click();
134-
//
135-
// expect(u.page.url()).toBe(`${app.serverUrl}/hash/user#/username`);
136-
//
137-
// await u.page.getByText(/Cancel/i).click();
138-
//
139-
// expect(u.page.url()).toBe(`${app.serverUrl}/hash/user#`);
140-
//
141-
// await u.page.getByText(/Add email address/i).click();
142-
//
143-
// expect(u.page.url()).toBe(`${app.serverUrl}/hash/user#/email-address`);
144-
//
145-
// await u.page.getByText(/Cancel/i).click();
146-
//
147-
// expect(u.page.url()).toBe(`${app.serverUrl}/hash/user#`);
148-
// });
149-
150-
// TODO-RETHEME: fix this test
151-
// test('sign in with path routing', async ({ page, context }) => {
152-
// const u = createTestUtils({ app, page, context });
153-
// await u.po.signIn.goTo();
154-
// await u.po.signIn.waitForMounted();
155-
//
156-
// await u.po.signIn.setIdentifier(fakeUser.email);
157-
// await u.po.signIn.continue();
158-
// await u.page.waitForURL(`${app.serverUrl}/sign-in/factor-one`);
159-
//
160-
// await u.po.signIn.setPassword(fakeUser.password);
161-
// await u.po.signIn.continue();
162-
//
163-
// await u.po.expect.toBeSignedIn();
164-
// });
165-
166-
// TODO-RETHEME: fix this test
167-
// test('sign in with hash routing', async ({ page, context }) => {
168-
// const u = createTestUtils({ app, page, context });
169-
// await u.page.goToRelative('/hash/sign-in');
170-
// await u.po.signIn.waitForMounted();
171-
//
172-
// await u.po.signIn.setIdentifier(fakeUser.email);
173-
// await u.po.signIn.continue();
174-
// await u.page.waitForURL(`${app.serverUrl}/hash/sign-in#/factor-one`);
175-
//
176-
// await u.po.signIn.setPassword(fakeUser.password);
177-
// await u.po.signIn.continue();
178-
//
179-
// await u.po.expect.toBeSignedIn();
180-
// });
181-
182-
// TODO-RETHEME: fix this test
183-
// test('user profile from user button navigates correctly', async ({ page, context }) => {
184-
// const u = createTestUtils({ app, page, context });
185-
// await u.po.signIn.goTo();
186-
// await u.po.signIn.waitForMounted();
187-
// await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
188-
// await u.po.expect.toBeSignedIn();
189-
//
190-
// await u.page.goToRelative('/');
191-
// await u.page.waitForClerkComponentMounted();
192-
//
193-
// await u.page.getByRole('button', { name: 'Open user button' }).click();
194-
//
195-
// await u.page.getByText(/Manage account/).click();
196-
//
197-
// await u.page.waitForSelector('.cl-modalContent > .cl-userProfile-root', { state: 'attached' });
198-
//
199-
// await u.page.getByText(/Set username/i).click();
200-
// await u.page.getByText(/Cancel/i).click();
201-
//
202-
// await u.page.getByText(/Add email address/i).click();
203-
// await u.page.getByText(/Cancel/i).click();
204-
// });
205-
//
206-
// test('sign in with path routing navigates to previous page', async ({ page, context }) => {
207-
// const u = createTestUtils({ app, page, context });
208-
// await u.po.signIn.goTo();
209-
// await u.po.signIn.waitForMounted();
210-
//
211-
// await u.po.signIn.getGoToSignUp().click();
212-
// await u.po.signUp.waitForMounted();
213-
// await u.page.waitForURL(`${app.serverUrl}/sign-up?redirect_url=${encodeURIComponent(app.serverUrl + '/')}`);
214-
//
215-
// await page.goBack();
216-
// await u.po.signIn.waitForMounted();
217-
// await u.page.waitForURL(`${app.serverUrl}/sign-in`);
218-
// });
80+
test('sign in with path routing', async ({ page, context }) => {
81+
const u = createTestUtils({ app, page, context });
82+
await u.po.signIn.goTo();
83+
await u.po.signIn.waitForMounted();
84+
85+
await u.po.signIn.setIdentifier(fakeUser.email);
86+
await u.po.signIn.continue();
87+
await u.page.waitForURL(`${app.serverUrl}/sign-in/factor-one`);
88+
89+
await u.po.signIn.setPassword(fakeUser.password);
90+
await u.po.signIn.continue();
91+
92+
await u.po.expect.toBeSignedIn();
93+
});
94+
95+
test('sign in with hash routing', async ({ page, context }) => {
96+
const u = createTestUtils({ app, page, context });
97+
await u.page.goToRelative('/hash/sign-in');
98+
await u.po.signIn.waitForMounted();
99+
100+
await u.po.signIn.setIdentifier(fakeUser.email);
101+
await u.po.signIn.continue();
102+
await u.page.waitForURL(`${app.serverUrl}/hash/sign-in#/factor-one`);
103+
104+
await u.po.signIn.setPassword(fakeUser.password);
105+
await u.po.signIn.continue();
106+
107+
await u.po.expect.toBeSignedIn();
108+
});
109+
110+
test('sign in with path routing navigates to previous page', async ({ page, context }) => {
111+
const u = createTestUtils({ app, page, context });
112+
await u.po.signIn.goTo();
113+
await u.po.signIn.waitForMounted();
114+
115+
await u.po.signIn.getGoToSignUp().click();
116+
await u.po.signUp.waitForMounted();
117+
await u.page.waitForURL(`${app.serverUrl}/sign-up?redirect_url=${encodeURIComponent(app.serverUrl + '/')}`);
118+
119+
await page.goBack();
120+
await u.po.signIn.waitForMounted();
121+
await u.page.waitForURL(`${app.serverUrl}/sign-in`);
122+
});
219123
});

‎integration/tests/user-profile.test.ts‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import { 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('user profile @generic', () => {
9+
test.describe.configure({ mode: 'serial' });
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>
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+
.commit();
67+
await app.setup();
68+
await app.withEnv(appConfigs.envs.withEmailCodes);
69+
await app.build();
70+
71+
const m = createTestUtils({ app });
72+
fakeUser = m.services.users.createFakeUser();
73+
await m.services.users.createBapiUser(fakeUser);
74+
75+
await app.serve();
76+
});
77+
78+
test.afterAll(async () => {
79+
await fakeUser.deleteIfExists();
80+
await app.teardown();
81+
});
82+
83+
test('user profile with path routing', async ({ page, context }) => {
84+
const u = createTestUtils({ app, page, context });
85+
await u.po.signIn.goTo();
86+
await u.po.signIn.waitForMounted();
87+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
88+
await u.po.expect.toBeSignedIn();
89+
90+
await u.po.userProfile.goTo();
91+
await u.po.userProfile.waitForMounted();
92+
93+
await u.po.userProfile.clickSetUsername();
94+
95+
u.page.getByText(/Update username/i);
96+
97+
await u.po.userProfile.typeUsername('some_username');
98+
99+
await u.page.getByText(/Cancel/i).click();
100+
101+
await u.page.waitForSelector('.cl-profileSectionContent__username .cl-headerTitle', { state: 'detached' });
102+
103+
await u.po.userProfile.clickAddEmailAddress();
104+
105+
u.page.getByText(/an email containing/i);
106+
107+
await u.po.userProfile.typeEmailAddress('some@email.com');
108+
109+
await u.page.getByText(/Cancel/i).click();
110+
});
111+
112+
test('user profile with hash routing', async ({ page, context }) => {
113+
const u = createTestUtils({ app, page, context });
114+
await u.po.signIn.goTo();
115+
await u.po.signIn.waitForMounted();
116+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
117+
await u.po.expect.toBeSignedIn();
118+
119+
await u.page.goToRelative('/hash/user');
120+
await u.po.userProfile.waitForMounted();
121+
122+
await u.po.userProfile.clickSetUsername();
123+
124+
u.page.getByText(/Update username/i);
125+
126+
await u.po.userProfile.typeUsername('some_username');
127+
128+
await u.page.getByText(/Cancel/i).click();
129+
130+
await u.page.waitForSelector('.cl-profileSectionContent__username .cl-headerTitle', { state: 'detached' });
131+
132+
await u.po.userProfile.clickAddEmailAddress();
133+
134+
u.page.getByText(/an email containing/i);
135+
136+
await u.po.userProfile.typeEmailAddress('some@email.com');
137+
138+
await u.page.getByText(/Cancel/i).click();
139+
});
140+
141+
test('user profile from user button opens actions correctly', async ({ page, context }) => {
142+
const u = createTestUtils({ app, page, context });
143+
await u.po.signIn.goTo();
144+
await u.po.signIn.waitForMounted();
145+
await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
146+
await u.po.expect.toBeSignedIn();
147+
148+
await u.page.goToRelative('/');
149+
await u.page.waitForClerkComponentMounted();
150+
151+
await u.page.getByRole('button', { name: 'Open user button' }).click();
152+
153+
await u.page.getByText(/Manage account/).click();
154+
155+
await u.page.waitForSelector('.cl-modalContent > .cl-userProfile-root', { state: 'attached' });
156+
157+
await u.po.userProfile.clickSetUsername();
158+
await u.page.getByText(/Cancel/i).click();
159+
160+
await u.page.waitForSelector('.cl-profileSectionContent__username .cl-headerTitle', { state: 'detached' });
161+
162+
await u.po.userProfile.clickAddEmailAddress();
163+
await u.page.getByText(/Cancel/i).click();
164+
});
165+
});

0 commit comments

Comments
 (0)