Merged in chore/SW-3145-move-date-to-design-system (pull request #2556)

feat: SW-3145 Moved date component to design system

* chore: SW-3145 Moved date component to design system


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

apps/scandic-web/tests/date.test.tsx

@@ -0,0 +1,144 @@
+/* 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("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)
+    }
+  )
+})