d0546926a9
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { describe, expect, it, afterEach } from "vitest"
|
|
import { render, screen, cleanup } from "@testing-library/react"
|
|
import userEvent from "@testing-library/user-event"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { IntlProvider } from "react-intl"
|
|
import { PasswordInput } from "./PasswordInput"
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
function FormWrapper({
|
|
children,
|
|
defaultValues = { password: "" },
|
|
}: {
|
|
children: React.ReactNode
|
|
defaultValues?: Record<string, string>
|
|
}) {
|
|
const methods = useForm({ defaultValues })
|
|
return (
|
|
<IntlProvider locale="en" messages={{}}>
|
|
<FormProvider {...methods}>
|
|
<form>{children}</form>
|
|
</FormProvider>
|
|
</IntlProvider>
|
|
)
|
|
}
|
|
|
|
const renderPasswordInput = (
|
|
props: React.ComponentProps<typeof PasswordInput> = {},
|
|
defaultValues?: Record<string, string>
|
|
) => {
|
|
return render(
|
|
<FormWrapper defaultValues={defaultValues}>
|
|
<PasswordInput {...props} />
|
|
</FormWrapper>
|
|
)
|
|
}
|
|
|
|
describe("PasswordInput", () => {
|
|
describe("rendering", () => {
|
|
it("renders with default password label", () => {
|
|
renderPasswordInput()
|
|
expect(screen.getByLabelText("Password")).toBeTruthy()
|
|
})
|
|
|
|
it("renders with custom label", () => {
|
|
renderPasswordInput({ label: "Enter your password" })
|
|
expect(screen.getByLabelText("Enter your password")).toBeTruthy()
|
|
})
|
|
|
|
it("renders with new password label when isNewPassword is true", () => {
|
|
renderPasswordInput({ isNewPassword: true })
|
|
expect(screen.getByLabelText("New password")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("visibility toggle", () => {
|
|
it("shows visibility toggle button by default", () => {
|
|
renderPasswordInput()
|
|
expect(screen.getByLabelText("Show password")).toBeTruthy()
|
|
})
|
|
|
|
it("hides visibility toggle when visibilityToggleable is false", () => {
|
|
renderPasswordInput({ visibilityToggleable: false })
|
|
expect(screen.queryByLabelText("Show password")).toBeNull()
|
|
expect(screen.queryByLabelText("Hide password")).toBeNull()
|
|
})
|
|
})
|
|
|
|
describe("disabled state", () => {
|
|
it("disables the input when disabled prop is true", () => {
|
|
renderPasswordInput({ disabled: true })
|
|
expect(screen.getByLabelText("Password")).toHaveProperty("disabled", true)
|
|
})
|
|
})
|
|
|
|
describe("form integration", () => {
|
|
it("updates form value when typing", async () => {
|
|
const user = userEvent.setup()
|
|
renderPasswordInput()
|
|
|
|
const input = screen.getByLabelText("Password")
|
|
await user.type(input, "secret123")
|
|
|
|
expect(input).toHaveProperty("value", "secret123")
|
|
})
|
|
|
|
it("uses custom name prop", async () => {
|
|
const user = userEvent.setup()
|
|
renderPasswordInput({ name: "confirmPassword" }, { confirmPassword: "" })
|
|
|
|
const input = screen.getByLabelText("Password")
|
|
await user.type(input, "test")
|
|
|
|
expect(input).toHaveProperty("value", "test")
|
|
})
|
|
})
|
|
})
|