From 1bdd84c3ab0847f992845946c5f0b75782dd4ed3 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 2 Jan 2024 19:47:58 +0200 Subject: [PATCH 1/2] test(clerk-js): Cleanup act errors --- .../__tests__/SignUpVerifyEmail.test.tsx | 28 +++++++++---------- .../__tests__/SignUpVerifyPhone.test.tsx | 18 ++++++------ 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx index 3a17f562c60..eeb19a5bbc9 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyEmail.test.tsx @@ -1,3 +1,4 @@ +import { waitFor } from '@testing-library/dom'; import React from 'react'; import { render, screen } from '../../../../testUtils'; @@ -19,8 +20,8 @@ describe('SignUpVerifyEmail', () => { f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' }); }); fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null); - render(, { wrapper }); - screen.getByText('test@clerk.com'); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect(await findByText('test@clerk.com')).toBeInTheDocument()); }); it('shows the verify with link message', async () => { @@ -36,8 +37,8 @@ describe('SignUpVerifyEmail', () => { } as any), ); - render(, { wrapper }); - screen.getAllByText(/Verification Link/i); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect(await findByText(/Verification Link/i)).toBeInTheDocument()); }); it('shows the verify with code message', async () => { @@ -48,9 +49,11 @@ describe('SignUpVerifyEmail', () => { fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null); - render(, { wrapper }); - screen.getByText(/Verify your email/i); - screen.getByText(/Enter the verification code sent to your email/i); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect(await findByText(/Verify your email/i)).toBeInTheDocument()); + await waitFor(async () => + expect(await findByText(/Enter the verification code sent to your email/i)).toBeInTheDocument(), + ); }); it('clicking on the edit icon navigates to the previous route', async () => { @@ -81,10 +84,8 @@ describe('SignUpVerifyEmail', () => { cancelEmailLinkFlow: jest.fn(() => new Promise(() => ({}))), } as any), ); - - render(, { wrapper }); - const resendButton = screen.getByText(/Resend/i); - expect(resendButton.tagName.toUpperCase()).toBe('BUTTON'); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON')); }); it('Resend code button exists', async () => { @@ -95,9 +96,8 @@ describe('SignUpVerifyEmail', () => { fixtures.signUp.prepareEmailAddressVerification.mockRejectedValue(null); - render(, { wrapper }); - const resendButton = screen.getByText(/Resend/i); - expect(resendButton.tagName.toUpperCase()).toBe('BUTTON'); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON')); }); it.todo('Resend link button is pressable after 60 seconds'); diff --git a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx index 2d6b440dfa9..67a4db12410 100644 --- a/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpVerifyPhone.test.tsx @@ -1,3 +1,4 @@ +import { waitFor } from '@testing-library/dom'; import React from 'react'; import { render, screen } from '../../../../testUtils'; @@ -19,8 +20,8 @@ describe('SignUpVerifyPhone', () => { f.startSignUpWithPhoneNumber({ phoneNumber: '+306911111111' }); }); fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null); - render(, { wrapper }); - screen.getByText('+30 691 1111111'); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect(await findByText('+30 691 1111111')).toBeInTheDocument()); }); it('shows the verify with code message', async () => { @@ -29,9 +30,11 @@ describe('SignUpVerifyPhone', () => { f.startSignUpWithPhoneNumber(); }); fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null); - render(, { wrapper }); - screen.getByText(/Verify your phone/i); - screen.getByText(/Enter the verification code sent to your phone/i); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect(await findByText(/Verify your phone/i)).toBeInTheDocument()); + await waitFor(async () => + expect(await findByText(/Enter the verification code sent to your phone/i)).toBeInTheDocument(), + ); }); it('clicking on the edit icon navigates to the previous route', async () => { @@ -55,9 +58,8 @@ describe('SignUpVerifyPhone', () => { f.startSignUpWithEmailAddress({ emailAddress: 'test@clerk.com' }); }); fixtures.signUp.preparePhoneNumberVerification.mockRejectedValue(null); - render(, { wrapper }); - const resendButton = screen.getByText(/Resend/i); - expect(resendButton.tagName.toUpperCase()).toBe('BUTTON'); + const { findByText } = render(, { wrapper }); + await waitFor(async () => expect((await findByText(/Resend/i)).tagName.toUpperCase()).toBe('BUTTON')); }); it.todo('Resend code button is pressable after 30 seconds'); From cb431d71630ad7b4ca3d3e89d3158533adfcebfa Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 2 Jan 2024 19:48:26 +0200 Subject: [PATCH 2/2] test(clerk-js): Cleanup act errors --- .changeset/rich-sloths-count.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/rich-sloths-count.md diff --git a/.changeset/rich-sloths-count.md b/.changeset/rich-sloths-count.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/rich-sloths-count.md @@ -0,0 +1,2 @@ +--- +---