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

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

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_typography = require("../../../typography");
var import_layout = require("../../../layout");
var import__ = require("../index");
expect(import__.Card).toBeDefined();
expect(import__.CardTitle).toBeDefined();
expect(import__.CardDescription).toBeDefined();
expect(import__.CardGroup).toBeDefined();
expect(import__.CardExtra).toBeDefined();
describe("Card Group", () => {
  test("if child not valid it is not rendered", () => {
    (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Card.Group, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toto" }) }),
        42
      ] })
    );
    expect(import_test.screen.getByText("Toto")).toBeInTheDocument();
    expect(import_test.screen.queryByText("42")).not.toBeInTheDocument();
  });
  test("Throw error with direct child different from Card or Divider", () => {
    const renderWithInvalidChild = () => (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Toto" }) })
    );
    expect(renderWithInvalidChild).toThrow(
      "Direct children of CardGroup should be Divider or Card"
    );
  });
  test("Divider is rendered ", () => {
    (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.Divider, { testID: "divider" }) })
    );
    expect(import_test.screen.getByTestId("divider")).toBeTruthy();
  });
  test("With only one Child CardGroup doesn't change style of child", () => {
    (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "firstCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toto" }) }) })
    );
    const element = import_test.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 = () => {
      (0, import_test.render)(
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Card.Group, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "firstCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toto" }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "lastCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toti" }) })
        ] })
      );
    };
    test("border bottom and border radius bottom of first child are modified", () => {
      customRender();
      const firstCardChild = import_test.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 = import_test.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 = () => {
      (0, import_test.render)(
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Card.Group, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "firstCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toto" }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "middleCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Titi" }) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { testID: "lastCardChild", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toti" }) })
        ] })
      );
    };
    test("border bottom and border radius bottom of first child are modified", () => {
      customRender();
      const firstCardChild = import_test.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 = import_test.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 = import_test.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", () => {
    (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card, { pressable: true, testID: "card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Card.Title, { children: "Toto" }) })
    );
    expect(import_test.screen.getByTestId("card")).toHaveClass(
      "active:background-color-[var(--components--card-active-background)]"
    );
  });
});
//# sourceMappingURL=Card.spec.js.map