@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
42 lines (41 loc) • 1.92 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { render, screen } from "@crossed/test";
import "@testing-library/jest-dom";
import { Anchor } from "../Anchor";
import { inlineStyle } from "@crossed/styled";
describe("Anchor component", () => {
it("renders correctly with default props", () => {
render(/* @__PURE__ */ jsx(Anchor, { href: "https://example.com", children: "Click me" }));
const anchorElement = screen.getByRole("link", { name: /click me/i });
expect(anchorElement).toBeInTheDocument();
expect(anchorElement).toHaveAttribute("href", "https://example.com");
});
it("applies primary styles by default", () => {
render(/* @__PURE__ */ jsx(Anchor, { children: "Primary Link" }));
const anchorElement = screen.getByRole("link", { name: /primary link/i });
expect(anchorElement).toHaveClass("color-[var(--colors-text-brand)]");
});
it("applies default styles when primary is false", () => {
render(/* @__PURE__ */ jsx(Anchor, { primary: false, children: "Default Link" }));
const anchorElement = screen.getByRole("link", { name: /default link/i });
expect(anchorElement).toHaveClass("color-[var(--colors-text-primary)]");
});
it("applies custom styles", () => {
const customStyle = inlineStyle(() => ({
base: { textDecorationColor: "red" }
}));
render(/* @__PURE__ */ jsx(Anchor, { style: customStyle, children: "Custom Styled Link" }));
const anchorElement = screen.getByRole("link", {
name: /custom styled link/i
});
expect(anchorElement).toHaveClass("text-decoration-color-[red]");
});
it('sets role="link" for accessibility', () => {
render(/* @__PURE__ */ jsx(Anchor, { children: "Accessible Link" }));
const anchorElement = screen.getByRole("link", {
name: /accessible link/i
});
expect(anchorElement).toHaveAttribute("role", "link");
});
});
//# sourceMappingURL=Anchor.spec.js.map