d4a574c30f
Generated types for the react package were broken because they were still using absolute imports which cannot work in standalone .d.ts files because they cannot rely on the local baseUrl compiler option. Thus, we introduced an alias that we are able to reliably replace during type generation.
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import { act, render, screen, waitFor } from "@testing-library/react";
|
|
import React from "react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { buildTheme, loadTokens } from ":/tests/Theme";
|
|
import { Button } from ":/components/Button";
|
|
|
|
describe("<Button/>", () => {
|
|
it("renders", () => {
|
|
render(<Button>Test button</Button>);
|
|
const button = screen.getByRole("button", { name: "Test button" });
|
|
expect(Array.from(button.classList)).toContain("c__button");
|
|
});
|
|
|
|
it("renders with custom class when using left icon", () => {
|
|
render(<Button icon={<div>Icon</div>}>Test button</Button>);
|
|
const button = screen.getByText("Test button");
|
|
const classes = Array.from(button.classList);
|
|
expect(classes).toContain("c__button");
|
|
expect(classes).toContain("c__button--with-icon--left");
|
|
});
|
|
|
|
it("renders with modifier class --icon-only when only icon is defined", () => {
|
|
render(<Button icon={<div>Icon</div>} />);
|
|
const button = screen.getByRole("button");
|
|
const classes = Array.from(button.classList);
|
|
expect(classes).toContain("c__button");
|
|
expect(classes).toContain("c__button--icon-only");
|
|
expect(classes).not.toContain("c__button--with-icon--left");
|
|
expect(classes).not.toContain("c__button--with-icon--right");
|
|
});
|
|
|
|
it("renders with custom class when using right icon", () => {
|
|
render(
|
|
<Button icon={<div>Icon</div>} iconPosition="right">
|
|
Test button
|
|
</Button>
|
|
);
|
|
const button = screen.getByText("Test button");
|
|
const classes = Array.from(button.classList);
|
|
expect(classes).toContain("c__button");
|
|
expect(classes).toContain("c__button--with-icon--right");
|
|
});
|
|
|
|
it("call onClick when click occurs", async () => {
|
|
const user = userEvent.setup();
|
|
const handleClick = vi.fn();
|
|
render(<Button onClick={handleClick}>Test button</Button>);
|
|
const button = screen.getByRole("button", { name: "Test button" });
|
|
expect(handleClick).not.toBeCalled();
|
|
user.click(button);
|
|
await waitFor(() => expect(handleClick).toHaveBeenCalled());
|
|
});
|
|
|
|
it("does not call onClick when click occurs on a disabled button", async () => {
|
|
const user = userEvent.setup();
|
|
const handleClick = vi.fn();
|
|
render(
|
|
<Button onClick={handleClick} disabled={true}>
|
|
Test button
|
|
</Button>
|
|
);
|
|
const button = screen.getByRole("button", { name: "Test button" });
|
|
expect(handleClick).not.toBeCalled();
|
|
await act(async () => user.click(button));
|
|
expect(handleClick).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("uses custom token", async () => {
|
|
await buildTheme();
|
|
const tokens = await loadTokens();
|
|
expect(tokens.components.button["border-radius"]).toBeDefined();
|
|
});
|
|
});
|