@crossed/primitive
Version:
A universal & performant styling library for React Native, Next.js & React
78 lines (77 loc) • 3.86 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import "@testing-library/jest-dom";
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
createAccordion
} from "../index";
import { render, screen, userEvent } from "@crossed/test";
import { Text } from "react-native";
describe("Accordion", () => {
test("createAccordion", async () => {
const components = createAccordion();
expect(Object.keys(components)).toEqual([
"Accordion",
"AccordionItem",
"AccordionTrigger",
"AccordionPanel",
"rootContext",
"itemContext"
]);
});
test("Show component, single", async () => {
render(
/* @__PURE__ */ jsxs(Accordion, { defaultValues: ["1"], children: [
/* @__PURE__ */ jsxs(AccordionItem, { value: "1", testID: "item-1", children: [
/* @__PURE__ */ jsx(AccordionTrigger, { testID: "trigger-1", children: /* @__PURE__ */ jsx(Text, { children: "title 1" }) }),
/* @__PURE__ */ jsx(AccordionPanel, { testID: "panel-1", children: /* @__PURE__ */ jsx(Text, { children: "content 1" }) })
] }),
/* @__PURE__ */ jsxs(AccordionItem, { value: "2", testID: "item-2", children: [
/* @__PURE__ */ jsx(AccordionTrigger, { testID: "trigger-2", children: /* @__PURE__ */ jsx(Text, { children: "title 1" }) }),
/* @__PURE__ */ jsx(AccordionPanel, { testID: "panel-2", children: /* @__PURE__ */ jsx(Text, { children: "content 2" }) })
] })
] })
);
expect(screen.getByTestId("item-1")).toBeVisible();
expect(screen.getByTestId("item-2")).toBeVisible();
expect(screen.getByTestId("trigger-1")).toBeVisible();
expect(screen.getByTestId("trigger-2")).toBeVisible();
expect(screen.getByTestId("panel-1")).toBeVisible();
expect(() => screen.getByTestId("panel-2")).toThrow();
await userEvent.click(screen.getByTestId("trigger-2"));
expect(screen.getByTestId("panel-2")).toBeVisible();
expect(() => screen.getByTestId("panel-1")).toThrow();
await userEvent.click(screen.getByTestId("trigger-2"));
expect(screen.getByTestId("panel-2")).toBeVisible();
expect(() => screen.getByTestId("panel-1")).toThrow();
});
test("Show component, multiple", async () => {
render(
/* @__PURE__ */ jsxs(Accordion, { defaultValues: ["1"], allowMultiple: true, children: [
/* @__PURE__ */ jsxs(AccordionItem, { value: "1", testID: "item-1", children: [
/* @__PURE__ */ jsx(AccordionTrigger, { testID: "trigger-1", children: /* @__PURE__ */ jsx(Text, { children: "title 1" }) }),
/* @__PURE__ */ jsx(AccordionPanel, { testID: "panel-1", children: /* @__PURE__ */ jsx(Text, { children: "content 1" }) })
] }),
/* @__PURE__ */ jsxs(AccordionItem, { value: "2", testID: "item-2", children: [
/* @__PURE__ */ jsx(AccordionTrigger, { testID: "trigger-2", children: /* @__PURE__ */ jsx(Text, { children: "title 1" }) }),
/* @__PURE__ */ jsx(AccordionPanel, { testID: "panel-2", children: /* @__PURE__ */ jsx(Text, { children: "content 2" }) })
] })
] })
);
expect(screen.getByTestId("item-1")).toBeVisible();
expect(screen.getByTestId("item-2")).toBeVisible();
expect(screen.getByTestId("trigger-1")).toBeVisible();
expect(screen.getByTestId("trigger-2")).toBeVisible();
expect(screen.getByTestId("panel-1")).toBeVisible();
expect(() => screen.getByTestId("panel-2")).toThrow();
await userEvent.click(screen.getByTestId("trigger-2"));
expect(screen.getByTestId("panel-1")).toBeVisible();
expect(screen.getByTestId("panel-2")).toBeVisible();
await userEvent.click(screen.getByTestId("trigger-1"));
expect(screen.getByTestId("panel-2")).toBeVisible();
expect(() => screen.getByTestId("panel-1")).toThrow();
});
});
//# sourceMappingURL=Accordion.spec.js.map