@crossed/ui/lib/module/display/Card/__tests__/Card.spec.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { render, screen } from "@crossed/test";
import "@testing-library/jest-dom";
import { Text } from "../../../typography";
import { Divider } from "../../../layout";
import {
  Card,
  CardTitle,
  CardDescription,
  CardGroup,
  CardExtra
} from "../index";
expect(Card).toBeDefined();
expect(CardTitle).toBeDefined();
expect(CardDescription).toBeDefined();
expect(CardGroup).toBeDefined();
expect(CardExtra).toBeDefined();
describe("Card Group", () => {
  test("if child not valid it is not rendered", () => {
    render(
      /* @__PURE__ */ jsxs(Card.Group, { children: [
        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Card.Title, { children: "Toto" }) }),
        42
      ] })
    );
    expect(screen.getByText("Toto")).toBeInTheDocument();
    expect(screen.queryByText("42")).not.toBeInTheDocument();
  });
  test("Throw error with direct child different from Card or Divider", () => {
    const renderWithInvalidChild = () => render(
      /* @__PURE__ */ jsx(Card.Group, { children: /* @__PURE__ */ jsx(Text, { children: "Toto" }) })
    );
    expect(renderWithInvalidChild).toThrow(
      "Direct children of CardGroup should be Divider or Card"
    );
  });
  test("Divider is rendered ", () => {
    render(
      /* @__PURE__ */ jsx(Card.Group, { children: /* @__PURE__ */ jsx(Divider, { testID: "divider" }) })
    );
    expect(screen.getByTestId("divider")).toBeTruthy();
  });
  test("With only one Child CardGroup doesn't change style of child", () => {
    render(
      /* @__PURE__ */ jsx(Card.Group, { children: /* @__PURE__ */ jsx(Card, { testID: "firstCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toto" }) }) })
    );
    const element = screen.getByTestId("firstCardChild");
    expect(element).not.toHaveClass(
      "border-top-left-radius-[0px] border-bottom-left-radius-[0px] border-top-right-radius-[0px] border-bottom-right-radius-[0px]"
    );
  });
  describe("With 2 Card Children", () => {
    const customRender = () => {
      render(
        /* @__PURE__ */ jsxs(Card.Group, { children: [
          /* @__PURE__ */ jsx(Card, { testID: "firstCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toto" }) }),
          /* @__PURE__ */ jsx(Card, { testID: "lastCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toti" }) })
        ] })
      );
    };
    test("border bottom and border radius bottom of first child are modified", () => {
      customRender();
      const firstCardChild = screen.getByTestId("firstCardChild");
      expect(firstCardChild).not.toHaveClass(
        "border-top-left-radius-[0px] border-top-right-radius-[0px]"
      );
      expect(firstCardChild).toHaveClass(
        "border-bottom-left-radius-[0px] border-bottom-right-radius-[0px] border-bottom-width-[0px]"
      );
    });
    test("border top and border radius top of last child are modified", () => {
      customRender();
      const lastCardChild = screen.getByTestId("lastCardChild");
      expect(lastCardChild).toHaveClass(
        "border-top-left-radius-[0px] border-top-right-radius-[0px] border-top-width-[0px]"
      );
      expect(lastCardChild).not.toHaveClass(
        "border-bottom-left-radius-[0px] border-bottom-right-radius-[0px]"
      );
    });
  });
  describe("With 3 Card Children", () => {
    const customRender = () => {
      render(
        /* @__PURE__ */ jsxs(Card.Group, { children: [
          /* @__PURE__ */ jsx(Card, { testID: "firstCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toto" }) }),
          /* @__PURE__ */ jsx(Card, { testID: "middleCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Titi" }) }),
          /* @__PURE__ */ jsx(Card, { testID: "lastCardChild", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toti" }) })
        ] })
      );
    };
    test("border bottom and border radius bottom of first child are modified", () => {
      customRender();
      const firstCardChild = screen.getByTestId("firstCardChild");
      expect(firstCardChild).not.toHaveClass(
        "border-top-left-radius-[0px] border-top-right-radius-[0px]"
      );
      expect(firstCardChild).toHaveClass(
        "border-bottom-left-radius-[0px] border-bottom-right-radius-[0px] border-bottom-width-[0px]"
      );
    });
    test("border top and bottom and border radius top and bottom of middle child are modified", () => {
      customRender();
      const middleCardChild = screen.getByTestId("middleCardChild");
      expect(middleCardChild).toHaveClass(
        "border-radius-[0px] border-bottom-width-[0px] border-top-width-[0px]"
      );
    });
    test("border top and border radius top of last child are modified", () => {
      customRender();
      const lastCardChild = screen.getByTestId("lastCardChild");
      expect(lastCardChild).toHaveClass(
        "border-top-left-radius-[0px] border-top-right-radius-[0px] border-top-width-[0px]"
      );
      expect(lastCardChild).not.toHaveClass(
        "border-bottom-left-radius-[0px] border-bottom-right-radius-[0px]"
      );
    });
  });
});
describe("Card", () => {
  test("if pressable, link style is applied", () => {
    render(
      /* @__PURE__ */ jsx(Card, { pressable: true, testID: "card", children: /* @__PURE__ */ jsx(Card.Title, { children: "Toto" }) })
    );
    expect(screen.getByTestId("card")).toHaveClass(
      "active:background-color-[var(--components--card-active-background)]"
    );
  });
});
//# sourceMappingURL=Card.spec.js.map