Skip to content

Commit 06c3611

Browse files
alexcarpenteralexcarpenter
committed
revert
1 parent 31b7ffd commit 06c3611

File tree

11 files changed

+76
-93
lines changed

11 files changed

+76
-93
lines changed

‎integration/tests/elements/next-sign-in.test.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -166,8 +166,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
166166
await u.page.waitForAppUrl('/sign-in/continue');
167167
await u.po.signIn.setPassword('wrong-password');
168168
await u.po.signIn.continue();
169-
await expect(u.page.locator('#error-password')).toBeVisible();
170-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
169+
await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible();
171170

172171
await u.po.expect.toBeSignedOut();
173172
});
@@ -182,8 +181,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
182181
await u.po.signIn.setPassword('wrong-password');
183182
await u.po.signIn.continue();
184183

185-
await expect(u.page.locator('#error-password')).toBeVisible();
186-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
184+
await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible();
187185

188186
await u.page.getByRole('button', { name: /use another method/i }).click();
189187
await u.po.signIn.getAltMethodsEmailCodeButton().click();

‎integration/tests/elements/next-sign-up.test.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S
7979
});
8080

8181
// Check if password error is visible
82-
await expect(u.page.locator('#error-password')).toBeVisible();
83-
await expect(u.page.locator('#error-password')).toContainText(/Passwords must be \d+ characters or more/i);
82+
await expect(u.page.getByText(/Passwords must be \d+ characters or more/i)).toBeVisible();
8483

8584
await u.po.expect.toBeSignedOut();
8685

‎integration/tests/sign-in-flow.test.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f
128128
await u.po.signIn.continue();
129129
await u.po.signIn.setPassword('wrong-password');
130130
await u.po.signIn.continue();
131-
await expect(u.page.locator('#error-password')).toBeVisible();
132-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
131+
await expect(u.page.getByText(/password is incorrect/i)).toBeVisible();
133132

134133
await u.po.expect.toBeSignedOut();
135134
});
@@ -143,8 +142,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f
143142
await u.po.signIn.setPassword('wrong-password');
144143
await u.po.signIn.continue();
145144

146-
await expect(u.page.locator('#error-password')).toBeVisible();
147-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
145+
await expect(u.page.getByText(/password is incorrect/i)).toBeVisible();
148146

149147
await u.po.signIn.getUseAnotherMethodLink().click();
150148
await u.po.signIn.getAltMethodsEmailCodeButton().click();

‎integration/tests/sign-in-or-up-flow.test.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSignInOrUpFlow] })('sign-
142142
await u.po.signIn.continue();
143143
await u.po.signIn.setPassword('wrong-password');
144144
await u.po.signIn.continue();
145-
await expect(u.page.locator('#error-password')).toBeVisible();
146-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
145+
await expect(u.page.getByText(/password is incorrect/i)).toBeVisible();
147146

148147
await u.po.expect.toBeSignedOut();
149148
});
@@ -157,8 +156,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSignInOrUpFlow] })('sign-
157156
await u.po.signIn.setPassword('wrong-password');
158157
await u.po.signIn.continue();
159158

160-
await expect(u.page.locator('#error-password')).toBeVisible();
161-
await expect(u.page.locator('#error-password')).toContainText(/password is incorrect/i);
159+
await expect(u.page.getByText(/password is incorrect/i)).toBeVisible();
162160

163161
await u.po.signIn.getUseAnotherMethodLink().click();
164162
await u.po.signIn.getAltMethodsEmailCodeButton().click();

‎integration/tests/sign-up-flow.test.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign up f
5454
});
5555

5656
// Check if password error is visible
57-
await expect(u.page.locator('#error-password')).toBeVisible();
58-
await expect(u.page.locator('#error-password')).toContainText(/your password must contain \d+ or more characters/i);
57+
await expect(u.page.getByText(/your password must contain \d+ or more characters/i).first()).toBeVisible();
5958

6059
// Check if user is signed out
6160
await u.po.expect.toBeSignedOut();

‎packages/clerk-js/src/ui/components/SignIn/__tests__/ResetPassword.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('ResetPassword', () => {
3737

3838
const passwordField = screen.getByLabelText(/New password/i);
3939
fireEvent.focus(passwordField);
40-
await screen.findByText(/Your password must contain 8 or more characters/i, { selector: '[id$="-info-feedback"]' });
40+
await screen.findByText(/Your password must contain 8 or more characters/i);
4141
});
4242

4343
it('renders a hidden identifier field', async () => {
@@ -115,10 +115,10 @@ describe('ResetPassword', () => {
115115
await userEvent.type(screen.getByLabelText(/new password/i), 'testewrewr');
116116
const confirmField = screen.getByLabelText(/confirm password/i);
117117
await userEvent.type(confirmField, 'testrwerrwqrwe');
118-
await screen.findByText(/Passwords don't match/i, { selector: '[id^="error-"]' });
118+
await screen.findByText(`Passwords don't match.`);
119119

120120
await userEvent.clear(confirmField);
121-
await screen.findByText(/Passwords don't match/i, { selector: '[id^="error-"]' });
121+
await screen.findByText(`Passwords don't match.`);
122122
});
123123

124124
it('navigates to the root page upon pressing the back link', async () => {

‎packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ describe('SignInFactorOne', () => {
186186
const { userEvent } = render(<SignInFactorOne />, { wrapper });
187187
await userEvent.type(screen.getByLabelText('Password'), '123456');
188188
await userEvent.click(screen.getByText('Continue'));
189-
await screen.findByText(/Incorrect Password/i, { selector: '[id^="error-"]' });
189+
await screen.findByText('Incorrect Password');
190190
});
191191

192192
it('redirects back to sign-in if the user is locked', async () => {
@@ -249,8 +249,6 @@ describe('SignInFactorOne', () => {
249249
await userEvent.type(screen.getByLabelText('Password'), '123456');
250250
await userEvent.click(screen.getByText('Continue'));
251251

252-
// Password pwned errors navigate to a different screen, so we verify the screen transition instead
253-
// The error element may not contain "Password compromised" text
254252
await screen.findByText('Password compromised');
255253
await screen.findByText(
256254
'This password has been found as part of a breach and can not be used, please reset your password.',
@@ -293,8 +291,6 @@ describe('SignInFactorOne', () => {
293291
await userEvent.type(screen.getByLabelText('Password'), '123456');
294292
await userEvent.click(screen.getByText('Continue'));
295293

296-
// Password pwned errors navigate to a different screen, so we verify the screen transition instead
297-
// The error element may not contain "Password compromised" text
298294
await screen.findByText('Password compromised');
299295
await screen.findByText(
300296
'This password has been found as part of a breach and can not be used, please reset your password.',
@@ -337,8 +333,6 @@ describe('SignInFactorOne', () => {
337333
await userEvent.type(screen.getByLabelText('Password'), '123456');
338334
await userEvent.click(screen.getByText('Continue'));
339335

340-
// Password pwned errors navigate to a different screen, so we verify the screen transition instead
341-
// The error element may not contain "Password compromised" text
342336
await screen.findByText('Password compromised');
343337
await screen.findByText(
344338
'This password has been found as part of a breach and can not be used, please reset your password.',
@@ -562,16 +556,9 @@ describe('SignInFactorOne', () => {
562556
status: 422,
563557
}),
564558
);
565-
const { userEvent, container } = render(<SignInFactorOne />, { wrapper });
559+
const { userEvent } = render(<SignInFactorOne />, { wrapper });
566560
await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
567-
try {
568-
await screen.findByText(/Incorrect code|Incorrect phone code/i, { selector: '[id^="error-"]' });
569-
} catch {
570-
// Fallback: check for error state attribute if text element doesn't exist
571-
await waitFor(() => {
572-
expect(container.querySelector('[data-error="true"].cl-otpCodeField')).toBeInTheDocument();
573-
});
574-
}
561+
await screen.findByText('Incorrect code');
575562
});
576563

577564
it('redirects back to sign-in if the user is locked', async () => {
@@ -674,16 +661,9 @@ describe('SignInFactorOne', () => {
674661
status: 422,
675662
}),
676663
);
677-
const { userEvent, container } = render(<SignInFactorOne />, { wrapper });
664+
const { userEvent } = render(<SignInFactorOne />, { wrapper });
678665
await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
679-
try {
680-
await screen.findByText(/Incorrect code|Incorrect phone code/i, { selector: '[id^="error-"]' });
681-
} catch {
682-
// Fallback: check for error state attribute if text element doesn't exist
683-
await waitFor(() => {
684-
expect(container.querySelector('[data-error="true"].cl-otpCodeField')).toBeInTheDocument();
685-
});
686-
}
666+
await screen.findByText('Incorrect code');
687667
});
688668

689669
it('redirects back to sign-in if the user is locked', async () => {

‎packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -183,16 +183,9 @@ describe('SignInFactorTwo', () => {
183183
status: 422,
184184
}),
185185
);
186-
const { userEvent, container } = render(<SignInFactorTwo />, { wrapper });
186+
const { userEvent } = render(<SignInFactorTwo />, { wrapper });
187187
await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
188-
try {
189-
await screen.findByText(/Incorrect authenticator code/i, { selector: '[id^="error-"]' });
190-
} catch {
191-
// Fallback: check for error state attribute if text element doesn't exist
192-
await waitFor(() => {
193-
expect(container.querySelector('[data-error="true"].cl-otpCodeField')).toBeInTheDocument();
194-
});
195-
}
188+
expect(await screen.findByText('Incorrect authenticator code')).toBeDefined();
196189
});
197190

198191
it('redirects back to sign-in if the user is locked', async () => {
@@ -279,16 +272,9 @@ describe('SignInFactorTwo', () => {
279272
status: 422,
280273
}),
281274
);
282-
const { userEvent, container } = render(<SignInFactorTwo />, { wrapper });
275+
const { userEvent } = render(<SignInFactorTwo />, { wrapper });
283276
await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
284-
try {
285-
await screen.findByText(/Incorrect phone code/i, { selector: '[id^="error-"]' });
286-
} catch {
287-
// Fallback: check for error state attribute if text element doesn't exist
288-
await waitFor(() => {
289-
expect(container.querySelector('[data-error="true"].cl-otpCodeField')).toBeInTheDocument();
290-
});
291-
}
277+
expect(await screen.findByText('Incorrect phone code')).toBeDefined();
292278
});
293279
});
294280

@@ -378,17 +364,10 @@ describe('SignInFactorTwo', () => {
378364
status: 422,
379365
}),
380366
);
381-
const { userEvent, getByLabelText, getByText, container } = render(<SignInFactorTwo />, { wrapper });
367+
const { userEvent, getByLabelText, getByText } = render(<SignInFactorTwo />, { wrapper });
382368
await userEvent.type(getByLabelText('Backup code'), '123456');
383369
await userEvent.click(getByText('Continue'));
384-
try {
385-
await screen.findByText(/Incorrect backup code/i, { selector: '[id^="error-"]' });
386-
} catch {
387-
// Fallback: check for error state attribute if text element doesn't exist
388-
await waitFor(() => {
389-
expect(container.querySelector('[data-error="true"].cl-otpCodeField')).toBeInTheDocument();
390-
});
391-
}
370+
expect(await screen.findByText('Incorrect backup code')).toBeDefined();
392371
});
393372

394373
it('redirects back to sign-in if the user is locked', async () => {

‎packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordSection.test.tsx‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -537,24 +537,30 @@ describe('PasswordSection', () => {
537537
const confirmField = screen.getByLabelText(/confirm password/i);
538538
await userEvent.type(confirmField, 'test');
539539
fireEvent.blur(confirmField);
540-
await screen.findByText(/or more/i, { selector: '[id^="error-"]' });
540+
await waitFor(() => {
541+
screen.getByText(/or more/i);
542+
});
541543
});
542544

543545
it('verifies absence of success feedback when passwords do not match and persists after clearing confirm field', async () => {
544546
const { wrapper } = await createFixtures(initConfig);
545547

546-
const { userEvent, getByRole } = render(<PasswordSection />, { wrapper });
548+
const { userEvent, getByRole, queryByText } = render(<PasswordSection />, { wrapper });
547549
await userEvent.click(getByRole('button', { name: /set password/i }));
548550
await waitFor(() => getByRole('heading', { name: /set password/i }));
549551

550552
await userEvent.type(screen.getByLabelText(/new password/i), 'testewrewr');
551553
const confirmField = screen.getByLabelText(/confirm password/i);
552554
await userEvent.type(confirmField, 'testrwerrwqrwe');
553555
fireEvent.blur(confirmField);
554-
expect(screen.queryByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' })).not.toBeInTheDocument();
556+
await waitFor(() => {
557+
expect(queryByText(`Passwords match.`)).not.toBeInTheDocument();
558+
});
555559

556560
await userEvent.clear(confirmField);
557-
expect(screen.queryByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' })).not.toBeInTheDocument();
561+
await waitFor(() => {
562+
expect(queryByText(`Passwords match.`)).not.toBeInTheDocument();
563+
});
558564
});
559565

560566
it.skip(`Displays "Password match" when password match and removes it if they stop`, async () => {
@@ -566,24 +572,32 @@ describe('PasswordSection', () => {
566572
// user experience and implementation.
567573
const { wrapper } = await createFixtures(initConfig);
568574

569-
const { userEvent, getByRole, getByLabelText } = render(<PasswordSection />, { wrapper });
575+
const { userEvent, getByRole, getByLabelText, queryByText } = render(<PasswordSection />, { wrapper });
570576
await userEvent.click(getByRole('button', { name: /set password/i }));
571577
await waitFor(() => getByRole('heading', { name: /set password/i }));
572578
const passwordField = getByLabelText(/new password/i);
573579

574580
await userEvent.type(passwordField, 'testewrewr');
575581
const confirmField = getByLabelText(/confirm password/i);
576-
expect(screen.queryByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' })).not.toBeInTheDocument();
582+
await waitFor(() => {
583+
expect(queryByText(`Passwords match.`)).not.toBeInTheDocument();
584+
});
577585

578586
await userEvent.type(confirmField, 'testewrewr');
579-
await screen.findByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' });
587+
await waitFor(() => {
588+
expect(queryByText(`Passwords match.`)).toBeInTheDocument();
589+
});
580590

581591
await userEvent.type(confirmField, 'testrwerrwqrwe');
582-
expect(screen.queryByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' })).not.toBeInTheDocument();
592+
await waitFor(() => {
593+
expect(queryByText(`Passwords match.`)).not.toBeInTheDocument();
594+
});
583595

584596
await userEvent.type(passwordField, 'testrwerrwqrwe');
585597
fireEvent.blur(confirmField);
586-
await screen.findByText(/Passwords match/i, { selector: '[id$="-success-feedback"]' });
598+
await waitFor(() => {
599+
screen.getByText(`Passwords match.`);
600+
});
587601
});
588602
});
589603
});

‎packages/clerk-js/src/ui/elements/__tests__/PlainInput.test.tsx‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fireEvent, render, screen } from '@testing-library/react';
1+
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33
import { describe, expect, it } from 'vitest';
44

@@ -139,7 +139,9 @@ describe('PlainInput', () => {
139139

140140
await userEvent.click(getByRole('button', { name: /set error/i }));
141141

142-
await screen.findByText(/Some Error/i, { selector: '[id^="error-"]' });
142+
await waitFor(() => {
143+
expect(container.querySelector('#error-firstname')).toBeInTheDocument();
144+
});
143145

144146
const input = getByLabelText(/some label/i);
145147
expect(input).toHaveAttribute('aria-invalid', 'true');
@@ -160,10 +162,12 @@ describe('PlainInput', () => {
160162
infoText: 'some info',
161163
});
162164

163-
const { findByLabelText } = render(<Field actionLabel={'take action'} />, { wrapper });
165+
const { findByLabelText, container } = render(<Field actionLabel={'take action'} />, { wrapper });
164166

165167
fireEvent.focus(await findByLabelText(/some label/i));
166-
await screen.findByText(/some info/i, { selector: '[id$="-info-feedback"]' });
168+
await waitFor(() => {
169+
expect(container.querySelector('#firstname-info-feedback')).toBeInTheDocument();
170+
});
167171
});
168172

169173
it('with success feedback and aria-describedby', async () => {
@@ -178,7 +182,9 @@ describe('PlainInput', () => {
178182

179183
await userEvent.click(getByRole('button', { name: /set success/i }));
180184

181-
await screen.findByText(/Some Success/i, { selector: '[id$="-success-feedback"]' });
185+
await waitFor(() => {
186+
expect(container.querySelector('#firstname-success-feedback')).toBeInTheDocument();
187+
});
182188

183189
const input = getByLabelText(/some label/i);
184190
expect(input).toHaveAttribute('aria-invalid', 'false');
@@ -202,15 +208,19 @@ describe('PlainInput', () => {
202208

203209
// Start with error
204210
await userEvent.click(getByRole('button', { name: /set error/i }));
205-
await screen.findByText(/Some Error/i, { selector: '[id^="error-"]' });
211+
await waitFor(() => {
212+
expect(container.querySelector('#error-firstname')).toBeInTheDocument();
213+
});
206214

207215
let input = getByLabelText(/some label/i);
208216
expect(input).toHaveAttribute('aria-invalid', 'true');
209217
expect(input).toHaveAttribute('aria-describedby', 'error-firstname');
210218

211219
// Transition to success
212220
await userEvent.click(getByRole('button', { name: /set success/i }));
213-
await screen.findByText(/Some Success/i, { selector: '[id$="-success-feedback"]' });
221+
await waitFor(() => {
222+
expect(container.querySelector('#firstname-success-feedback')).toBeInTheDocument();
223+
});
214224

215225
input = getByLabelText(/some label/i);
216226
expect(input).toHaveAttribute('aria-invalid', 'false');
@@ -249,7 +259,9 @@ describe('PlainInput', () => {
249259

250260
// Set error feedback
251261
await userEvent.click(getByRole('button', { name: /set error/i }));
252-
await screen.findByText(/Some Error/i, { selector: '[id^="error-"]' });
262+
await waitFor(() => {
263+
expect(container.querySelector('#error-firstname')).toBeInTheDocument();
264+
});
253265

254266
// Verify there's a screen-reader-only aria-live region with the error content
255267
const ariaLiveRegions = container.querySelectorAll('[aria-live="polite"]');
@@ -265,7 +277,9 @@ describe('PlainInput', () => {
265277

266278
// Transition to success
267279
await userEvent.click(getByRole('button', { name: /set success/i }));
268-
await screen.findByText(/Some Success/i, { selector: '[id$="-success-feedback"]' });
280+
await waitFor(() => {
281+
expect(container.querySelector('#firstname-success-feedback')).toBeInTheDocument();
282+
});
269283

270284
// Verify the screen reader only region updated its content
271285
expect(srOnlyRegion).toHaveTextContent(/Some Success/i);

0 commit comments

Comments
 (0)