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