diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx index 28d10a4f6..0a39c8ec2 100644 --- a/components/Forms/Register/index.tsx +++ b/components/Forms/Register/index.tsx @@ -48,7 +48,6 @@ export default function Form() { const zipCode = intl.formatMessage({ id: "Zip code" }) async function handleSubmit(data: RegisterSchema) { - console.log("submit", data) const isSuccessResponse = await registerUser(data) if (!isSuccessResponse) { toast.error("Something went wrong!") @@ -66,11 +65,6 @@ export default function Form() {
({ + registerUser: jest.fn().mockResolvedValue(true), +})) + +describe("Register user form", () => { + test("Should submit form with correct data", async () => { + render() + + const values = { + firstName: "John", + lastName: "Doe", + dateOfBirth: "1990-01-08", + address: { + zipCode: "11111", + countryCode: "SE", + }, + email: "john.doe@example.com", + phoneNumber: "+46123456789", + password: "securePassword123!", + termsAccepted: true, + } + + await userEvent.type(screen.getByTestId("firstName"), values.firstName) + await userEvent.type(screen.getByTestId("lastName"), values.lastName) + + const dateOfBirthInput = screen.getByTestId("dateOfBirth") + const daySelect = dateOfBirthInput.querySelector("select[name='date']")! + const monthSelect = dateOfBirthInput.querySelector("select[name='month']")! + const yearSelect = dateOfBirthInput.querySelector("select[name='year']")! + + await userEvent.selectOptions(daySelect, "1") + await userEvent.selectOptions(monthSelect, "1") + await userEvent.selectOptions(yearSelect, "1990") + + await userEvent.type( + screen.getByTestId("address.zipCode"), + values.address.zipCode + ) + + const countryInput = screen.getByLabelText("Select a country") + await userEvent.click(countryInput) + await userEvent.type(countryInput, "Sweden") + await userEvent.keyboard("{ArrowDown}{Enter}") + + await userEvent.type(screen.getByTestId("email"), values.email) + await userEvent.type( + screen.getByTestId("phoneNumber"), + values.phoneNumber.slice(3) + ) + await userEvent.type(screen.getByTestId("password"), values.password) + await userEvent.click(screen.getAllByTestId("termsAccepted")[0]) + + await userEvent.click(screen.getByTestId("submit")) + + await waitFor(() => { + expect(registerUser).toHaveBeenCalledWith(values) + }) + }) +}) diff --git a/jest.config.ts b/jest.config.ts index 28055b8c6..137b2d260 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -154,7 +154,7 @@ const config: Config = { // snapshotSerializers: [], // The test environment that will be used for testing - // testEnvironment: "jest-environment-node", + testEnvironment: "jsdom", // Options that will be passed to the testEnvironment // testEnvironmentOptions: {}, diff --git a/jest.setup.ts b/jest.setup.ts index df6631eeb..d175d7187 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -1 +1,12 @@ import "@testing-library/jest-dom" + +jest.mock("react-intl", () => ({ + useIntl: () => ({ + formatMessage: (message: { id: string }) => message.id, + }), +})) + +jest.mock("next/navigation", () => ({ + useRouter: jest.fn(), + usePathname: jest.fn().mockReturnValue("/"), +})) diff --git a/package-lock.json b/package-lock.json index c12152ff6..db6a1ca42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,6 +60,7 @@ "@svgr/webpack": "^8.1.0", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.12", "@types/node": "^20", "@types/react": "^18", @@ -6167,6 +6168,19 @@ } } }, + "node_modules/@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true, + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", diff --git a/package.json b/package.json index ab79709d3..669ab58da 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@svgr/webpack": "^8.1.0", "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.12", "@types/node": "^20", "@types/react": "^18",