Merged in feature/add-login-test-2 (pull request #3261)
e2e tests for my pages * feature/add-e2e-tests-for-mypages * remove unneccesary awaits Approved-by: Linus Flood
This commit is contained in:
Joakim Jäderberg
@@ -1,144 +0,0 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
|
||||
import { User } from "@react-aria/test-utils"
|
||||
import { userEvent } from "@testing-library/user-event"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { afterEach, describe, expect, test } from "vitest"
|
||||
|
||||
import { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import { getLocalizedMonthName } from "@scandic-hotels/common/utils/dateFormatting"
|
||||
import Date from "@scandic-hotels/design-system/Form/Date"
|
||||
|
||||
import { cleanup, render, screen } from "@/tests/utils"
|
||||
|
||||
const testUtilUser = new User({ interactionType: "touch" })
|
||||
|
||||
interface FormWrapperProps {
|
||||
defaultValues: Record<string, unknown>
|
||||
children: React.ReactNode
|
||||
onSubmit: (event: unknown) => void
|
||||
}
|
||||
|
||||
function FormWrapper({ defaultValues, children, onSubmit }: FormWrapperProps) {
|
||||
const methods = useForm({
|
||||
defaultValues,
|
||||
})
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={methods.handleSubmit(onSubmit)}>
|
||||
{children}
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function selectOption(name: string, value: string) {
|
||||
const selectTester = testUtilUser.createTester("Select", {
|
||||
root: screen.getByTestId(name),
|
||||
interactionType: "touch",
|
||||
})
|
||||
|
||||
selectTester.selectOption({ option: value })
|
||||
}
|
||||
|
||||
const testCases = [
|
||||
{
|
||||
description: "date is set and submitted successfully",
|
||||
defaultValue: "",
|
||||
dateOfBirth: "1987-12-05",
|
||||
expectedOutput: {
|
||||
dateOfBirth: "1987-12-05",
|
||||
year: 1987,
|
||||
month: 12,
|
||||
day: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "sets default value and submits successfully",
|
||||
defaultValue: "2000-01-01",
|
||||
dateOfBirth: "",
|
||||
expectedOutput: {
|
||||
dateOfBirth: "2000-01-01",
|
||||
year: 2000,
|
||||
month: 1,
|
||||
day: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "accepts date exactly 18 years old",
|
||||
defaultValue: "",
|
||||
dateOfBirth: dt().subtract(18, "year").format("YYYY-MM-DD"),
|
||||
expectedOutput: {
|
||||
dateOfBirth: dt().subtract(18, "year").format("YYYY-MM-DD"),
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "rejects date below 18 years old - by year",
|
||||
defaultValue: "",
|
||||
dateOfBirth: dt().subtract(17, "year").format("YYYY-MM-DD"),
|
||||
expectedOutput: {
|
||||
dateOfBirth: "",
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "rejects date below 18 years old - by month",
|
||||
defaultValue: "",
|
||||
dateOfBirth: dt().subtract(18, "year").add(1, "month").format("YYYY-MM-DD"),
|
||||
expectedOutput: {
|
||||
dateOfBirth: "",
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "rejects date below 18 years old - by day",
|
||||
defaultValue: "",
|
||||
dateOfBirth: dt().subtract(18, "year").add(1, "day").format("YYYY-MM-DD"),
|
||||
expectedOutput: {
|
||||
dateOfBirth: "",
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
describe.skip("Date input", () => {
|
||||
afterEach(cleanup)
|
||||
|
||||
test.each(testCases)(
|
||||
"$description",
|
||||
async ({ defaultValue, dateOfBirth, expectedOutput }) => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<FormWrapper
|
||||
defaultValues={{ dateOfBirth: defaultValue }}
|
||||
onSubmit={(data) => {
|
||||
expect(data).toEqual(expectedOutput)
|
||||
}}
|
||||
>
|
||||
<Date
|
||||
labels={{
|
||||
day: "day",
|
||||
month: "Month",
|
||||
year: "Year",
|
||||
errorMessage: "Date is required",
|
||||
}}
|
||||
lang={Lang.en}
|
||||
name="dateOfBirth"
|
||||
/>
|
||||
</FormWrapper>
|
||||
)
|
||||
|
||||
const date = dt(dateOfBirth).toDate()
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
selectOption("year", year.toString())
|
||||
selectOption("month", getLocalizedMonthName(month, Lang.en))
|
||||
selectOption("day", day.toString())
|
||||
|
||||
const submitButton = screen.getByRole("button", { name: /submit/i })
|
||||
await user.click(submitButton)
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,44 @@
|
||||
import { expect, type Page } from "@playwright/test"
|
||||
|
||||
const AUTH_URL_REGEX =
|
||||
/https:\/\/.*\.scandichotels\.com\/authn\/authenticate\/scandic/i
|
||||
|
||||
export async function performLogin({
|
||||
page,
|
||||
username,
|
||||
password,
|
||||
}: {
|
||||
page: Page
|
||||
username: string
|
||||
password: string
|
||||
}) {
|
||||
await page.goto("/en")
|
||||
const loginLink = page.getByRole("link", { name: /log in\/join/i })
|
||||
await expect(loginLink).not.toBeDisabled()
|
||||
|
||||
await loginLink.click()
|
||||
|
||||
await expect(page).toHaveURL(AUTH_URL_REGEX)
|
||||
|
||||
// Fill in the login form
|
||||
|
||||
const usernameTextBox = page.getByRole("textbox", {
|
||||
name: /email \/ membership number/i,
|
||||
})
|
||||
await usernameTextBox.fill(username)
|
||||
|
||||
const passwordTextBox = page.getByRole("textbox", { name: /password/i })
|
||||
await passwordTextBox.fill(password)
|
||||
|
||||
const signInButton = page.getByRole("button", { name: /log in/i })
|
||||
await signInButton.click()
|
||||
|
||||
const profileButton = await getProfileButton(page)
|
||||
await expect(profileButton).toBeVisible()
|
||||
}
|
||||
|
||||
export async function getProfileButton(page: Page) {
|
||||
return page.getByRole("button", {
|
||||
name: /^\p{L}{2} hi \p{L}+!/iu,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
import { getProfileButton, performLogin } from "../loginUtil"
|
||||
import { testData } from "../testdata"
|
||||
|
||||
test("can navigate to my benefits page", async ({ page }) => {
|
||||
await performLogin({
|
||||
page,
|
||||
username: testData.basicUser.membershipId,
|
||||
password: testData.basicUser.password,
|
||||
})
|
||||
|
||||
const profileButton = await getProfileButton(page)
|
||||
profileButton.click()
|
||||
const myStaysLink = page.getByRole("link", { name: /my benefits/i })
|
||||
await myStaysLink.click()
|
||||
|
||||
const currentPerksAndBenefits = page.getByRole("heading", {
|
||||
name: /current perks and benefits/i,
|
||||
})
|
||||
await expect(currentPerksAndBenefits).toBeVisible()
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
import { getProfileButton, performLogin } from "../loginUtil"
|
||||
import { testData } from "../testdata"
|
||||
|
||||
test("can navigate to my points page", async ({ page }) => {
|
||||
await performLogin({
|
||||
page,
|
||||
username: testData.basicUser.membershipId,
|
||||
password: testData.basicUser.password,
|
||||
})
|
||||
|
||||
const profileButton = await getProfileButton(page)
|
||||
profileButton.click()
|
||||
const myPointsLink = page.getByRole("link", { name: /my points/i })
|
||||
await myPointsLink.click()
|
||||
|
||||
const pointsToSpend = page.getByRole("heading", { name: /points to spend/i })
|
||||
await expect(pointsToSpend).toBeVisible()
|
||||
})
|
||||
@@ -0,0 +1,22 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
import { getProfileButton, performLogin } from "../loginUtil"
|
||||
import { testData } from "../testdata"
|
||||
|
||||
test("can navigate to my stays page", async ({ page }) => {
|
||||
await performLogin({
|
||||
page,
|
||||
username: testData.basicUser.membershipId,
|
||||
password: testData.basicUser.password,
|
||||
})
|
||||
|
||||
const profileButton = await getProfileButton(page)
|
||||
profileButton.click()
|
||||
const myStaysLink = page.getByRole("link", { name: /my stays/i })
|
||||
await myStaysLink.click()
|
||||
|
||||
const upcomingStays = page.getByRole("heading", {
|
||||
name: /^upcoming stays$/i,
|
||||
})
|
||||
await expect(upcomingStays).toBeVisible()
|
||||
})
|
||||
@@ -0,0 +1,23 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
import { getProfileButton, performLogin } from "../loginUtil"
|
||||
import { testData } from "../testdata"
|
||||
|
||||
test("can navigate to overview page", async ({ page }) => {
|
||||
await performLogin({
|
||||
page,
|
||||
username: testData.basicUser.membershipId,
|
||||
password: testData.basicUser.password,
|
||||
})
|
||||
|
||||
const profileButton = await getProfileButton(page)
|
||||
profileButton.click()
|
||||
const overviewLink = page.getByRole("link", { name: /overview/i })
|
||||
await overviewLink.click()
|
||||
|
||||
const scandicLevel = page.getByText(/level \d+/i)
|
||||
await expect(scandicLevel).toBeVisible()
|
||||
|
||||
const membershipId = page.getByText(testData.basicUser.membershipId)
|
||||
await expect(membershipId).toBeVisible()
|
||||
})
|
||||
@@ -0,0 +1,8 @@
|
||||
export const testData = {
|
||||
basicUser: {
|
||||
membershipId: "30812500328010",
|
||||
password: "Test@12345",
|
||||
firstName: "Test",
|
||||
lastName: "Testsson",
|
||||
},
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { render, type RenderOptions } from "@testing-library/react"
|
||||
import React, { type ReactElement } from "react"
|
||||
|
||||
import { Lang } from "@scandic-hotels/common/constants/language"
|
||||
|
||||
import messages from "@/i18n/dictionaries/en.json"
|
||||
import ClientIntlProvider from "@/i18n/Provider"
|
||||
|
||||
function AllTheProviders({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<ClientIntlProvider
|
||||
defaultLocale={Lang.en}
|
||||
locale={Lang.en}
|
||||
messages={messages}
|
||||
>
|
||||
{children}
|
||||
</ClientIntlProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const customRender = (
|
||||
ui: ReactElement,
|
||||
options?: Omit<RenderOptions, "wrapper">
|
||||
) => render(ui, { wrapper: AllTheProviders, ...options })
|
||||
|
||||
export * from "@testing-library/react"
|
||||
export { customRender as render }
|
||||
Reference in New Issue
Block a user