56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { Field, FieldControl, FieldDescription, FieldError } from "./field";
|
|
import { Input } from "./input";
|
|
import { Label } from "./label";
|
|
|
|
describe("Input", () => {
|
|
it("renders the input slot and reflects explicit state props", () => {
|
|
render(
|
|
<Input
|
|
aria-label="Project slug"
|
|
disabled
|
|
invalid
|
|
readOnly
|
|
required
|
|
size="lg"
|
|
/>
|
|
);
|
|
|
|
const input = screen.getByRole("textbox", { name: "Project slug" });
|
|
|
|
expect(input).toHaveAttribute("data-slot", "input");
|
|
expect(input).toHaveAttribute("data-disabled", "");
|
|
expect(input).toHaveAttribute("data-invalid", "");
|
|
expect(input).toHaveAttribute("data-readonly", "");
|
|
expect(input).toHaveAttribute("data-required", "");
|
|
expect(input).toHaveAttribute("data-size", "lg");
|
|
expect(input).toBeDisabled();
|
|
expect(input).toHaveAttribute("aria-invalid", "true");
|
|
expect(input).toHaveAttribute("readonly");
|
|
expect(input).toBeRequired();
|
|
});
|
|
|
|
it("inherits ids and described-by wiring from the surrounding field", () => {
|
|
render(
|
|
<Field invalid required>
|
|
<Label requiredIndicator>Slug</Label>
|
|
<FieldControl>
|
|
<Input />
|
|
<FieldDescription>Use lowercase letters and hyphens.</FieldDescription>
|
|
<FieldError>Slug is required.</FieldError>
|
|
</FieldControl>
|
|
</Field>
|
|
);
|
|
|
|
const input = screen.getByRole("textbox", { name: "Slug" });
|
|
const description = screen.getByText("Use lowercase letters and hyphens.");
|
|
const error = screen.getByText("Slug is required.");
|
|
|
|
expect(input).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
|
|
expect(input).toHaveAttribute("aria-invalid", "true");
|
|
expect(input).toBeRequired();
|
|
});
|
|
});
|