137 lines
3.5 KiB
TypeScript
137 lines
3.5 KiB
TypeScript
/* 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 { cleanup, render, screen } from "@/tests/utils"
|
|
import { getLocalizedMonthName } from "@/utils/dateFormatting"
|
|
|
|
import Date from "./index"
|
|
|
|
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("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 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)
|
|
}
|
|
)
|
|
})
|