WK
bb9c4b5582
* fix(tabs): clamp ListContainer chevron scrolling to the scrollable range (#6749) * chore(deps): bump react-aria dependencies (#6752) * chore(deps): bump tailwind-variants to v3.3.1 (#6760) * chore(docs): release note for 3.2.4 * test(react): behavioral testing infra (#6754) * fix(link): expose data-slot on link root * fix(react): put style export condition before default * test(react): behavioral testing infra and suites * chore(testing): own vitest-browser-react and clarify coverage gates * chore: remove pinned version * fix(autocomplete): prevent popover from clipping the last options (#6766) * chore(docs): update release note * fix(styles): prevent subpixel border overflow on badge (#6768) * chore(docs): update release note * fix(styles): allow backdrop click to dismiss modal with scroll outside (#6770) * chore(docs): update release note * fix(tooltip): restore exit animation when swapping between tooltips (#6772) * chore(docs): update release note --------- Co-authored-by: Tyler <56234978+runnerboy22@users.noreply.github.com> Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import {render, screen} from "@heroui/testing/helpers";
|
|
|
|
import {Fieldset} from "@/components/fieldset";
|
|
|
|
describe("Fieldset", () => {
|
|
it("renders composed legend and fields", () => {
|
|
render(
|
|
<Fieldset>
|
|
<Fieldset.Legend>Profile</Fieldset.Legend>
|
|
<Fieldset.Group>
|
|
<span>Name field</span>
|
|
</Fieldset.Group>
|
|
<Fieldset.Actions>
|
|
<button type="submit">Save</button>
|
|
</Fieldset.Actions>
|
|
</Fieldset>,
|
|
);
|
|
|
|
expect(screen.getByText("Profile")).toBeInTheDocument();
|
|
expect(screen.getByText("Name field")).toBeInTheDocument();
|
|
expect(screen.getByRole("button", {name: "Save"})).toBeInTheDocument();
|
|
});
|
|
|
|
it("exposes BEM block and data-slot", () => {
|
|
render(<Fieldset data-testid="fieldset">Content</Fieldset>);
|
|
const fieldset = screen.getByTestId("fieldset");
|
|
|
|
expect(fieldset).toHaveAttribute("data-slot", "fieldset");
|
|
expect(fieldset.className).toEqual(expect.stringContaining("fieldset"));
|
|
});
|
|
|
|
it("supports data attribute passthrough", () => {
|
|
render(
|
|
<Fieldset data-foo="bar" data-testid="fieldset">
|
|
Content
|
|
</Fieldset>,
|
|
);
|
|
|
|
expect(screen.getByTestId("fieldset")).toHaveAttribute("data-foo", "bar");
|
|
});
|
|
|
|
it("exposes data-disabled from native disabled state", () => {
|
|
render(
|
|
<Fieldset disabled data-testid="fieldset">
|
|
Content
|
|
</Fieldset>,
|
|
);
|
|
|
|
expect(screen.getByTestId("fieldset")).toHaveAttribute("data-disabled", "true");
|
|
});
|
|
|
|
describe("composition", () => {
|
|
it("exposes data-slot on each sub-part", () => {
|
|
render(
|
|
<Fieldset>
|
|
<Fieldset.Legend data-testid="legend">Profile</Fieldset.Legend>
|
|
<Fieldset.Group data-testid="group">Fields</Fieldset.Group>
|
|
<Fieldset.Actions data-testid="actions">Actions</Fieldset.Actions>
|
|
</Fieldset>,
|
|
);
|
|
|
|
expect(screen.getByTestId("legend")).toHaveAttribute("data-slot", "fieldset-legend");
|
|
expect(screen.getByTestId("group")).toHaveAttribute("data-slot", "fieldset-field-group");
|
|
expect(screen.getByTestId("actions")).toHaveAttribute("data-slot", "fieldset-actions");
|
|
});
|
|
});
|
|
});
|