adilallo
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import { screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
|
|
import { componentTestSuite } from "../utils/componentTestSuite";
|
|
import { renderWithProviders } from "../utils/test-utils";
|
|
|
|
type ModalTextAreaFieldProps = React.ComponentProps<typeof ModalTextAreaField>;
|
|
|
|
componentTestSuite<ModalTextAreaFieldProps>({
|
|
component: ModalTextAreaField,
|
|
name: "ModalTextAreaField",
|
|
props: {
|
|
label: "Description",
|
|
value: "",
|
|
onChange: () => {},
|
|
} as ModalTextAreaFieldProps,
|
|
requiredProps: ["label"],
|
|
optionalProps: {
|
|
placeholder: "What does this cover?",
|
|
},
|
|
primaryRole: "textbox",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: false,
|
|
disabledState: true,
|
|
errorState: false,
|
|
},
|
|
states: {
|
|
disabledProps: { disabled: true },
|
|
},
|
|
});
|
|
|
|
describe("ModalTextAreaField behavior", () => {
|
|
it("renders the label and a textbox wired together", () => {
|
|
renderWithProviders(
|
|
<ModalTextAreaField
|
|
label="Core principle"
|
|
value=""
|
|
onChange={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText("Core principle")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("textbox", { name: /Core principle/i }),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("calls onChange with the new value string (not the event)", async () => {
|
|
const user = userEvent.setup();
|
|
const onChange = vi.fn();
|
|
renderWithProviders(
|
|
<ModalTextAreaField label="Notes" value="" onChange={onChange} />,
|
|
);
|
|
|
|
const textbox = screen.getByRole("textbox", { name: /Notes/i });
|
|
await user.type(textbox, "A");
|
|
|
|
expect(onChange).toHaveBeenCalledWith("A");
|
|
});
|
|
|
|
it("forwards placeholder and current value", () => {
|
|
renderWithProviders(
|
|
<ModalTextAreaField
|
|
label="Notes"
|
|
value="hello"
|
|
onChange={() => {}}
|
|
placeholder="Type here"
|
|
/>,
|
|
);
|
|
|
|
const textbox = screen.getByRole("textbox", { name: /Notes/i });
|
|
expect(textbox).toHaveValue("hello");
|
|
expect(textbox).toHaveAttribute("placeholder", "Type here");
|
|
});
|
|
|
|
it("disables the textarea when disabled is true", () => {
|
|
renderWithProviders(
|
|
<ModalTextAreaField label="Notes" value="" onChange={() => {}} disabled />,
|
|
);
|
|
|
|
expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled();
|
|
});
|
|
});
|