This commit is contained in:
57
frontend/__tests__/components/ui/form/LabeledField.spec.tsx
Normal file
57
frontend/__tests__/components/ui/form/LabeledField.spec.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { render, screen } from "@solidjs/testing-library";
|
||||
import { describe, it, expect } from "vitest";
|
||||
|
||||
import { LabeledField } from "../../../../src/ts/components/ui/form/LabeledField";
|
||||
|
||||
describe("LabeledField", () => {
|
||||
it("renders label text correctly", () => {
|
||||
render(() => (
|
||||
<LabeledField label="test label">
|
||||
<input />
|
||||
</LabeledField>
|
||||
));
|
||||
|
||||
expect(screen.getByText("test label")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders children correctly", () => {
|
||||
render(() => (
|
||||
<LabeledField label="test">
|
||||
<div data-testid="child">child content</div>
|
||||
</LabeledField>
|
||||
));
|
||||
|
||||
expect(screen.getByTestId("child")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders subtext when provided", () => {
|
||||
render(() => (
|
||||
<LabeledField label="test" subLabel="helper text">
|
||||
<input />
|
||||
</LabeledField>
|
||||
));
|
||||
|
||||
expect(screen.getByText("helper text")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("links label to input when id is provided", () => {
|
||||
const { container } = render(() => (
|
||||
<LabeledField label="test" id="test-id">
|
||||
<input id="test-id" />
|
||||
</LabeledField>
|
||||
));
|
||||
|
||||
const label = container.querySelector("label");
|
||||
expect(label).toHaveAttribute("for", "test-id");
|
||||
});
|
||||
|
||||
it("applies custom class to wrapper", () => {
|
||||
const { container } = render(() => (
|
||||
<LabeledField label="test" class="custom-wrapper-class">
|
||||
<input />
|
||||
</LabeledField>
|
||||
));
|
||||
|
||||
expect(container.firstChild).toHaveClass("custom-wrapper-class");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user