@crossed/ui/lib/module/scroll/__tests__/FlatList.spec.js

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

import { jsx, jsxs } from "react/jsx-runtime";
import { render } from "@crossed/test";
import { FlatList } from "../FlatList";
import { Body } from "../utils/Body";
import { inlineStyle } from "@crossed/styled";
import { act } from "react";
describe("FlatList", () => {
  test("rend les items pass\xE9s en prop dans data", () => {
    const data = [
      { id: "1", content: "Item 1" },
      { id: "2", content: "Item 2" }
    ];
    const { getByText } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data,
          renderItem: ({ item }) => /* @__PURE__ */ jsx(Body, { children: item.content })
        }
      )
    );
    expect(getByText("Item 1")).toBeInTheDocument();
    expect(getByText("Item 2")).toBeInTheDocument();
  });
  test("rend le titre si title est fourni dans props", () => {
    const { getByText } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data: [],
          renderItem: () => null,
          title: /* @__PURE__ */ jsx(Body, { children: "Titre du composant" })
        }
      )
    );
    expect(getByText("Titre du composant")).toBeInTheDocument();
  });
  test("rend le footer si footer est fourni dans props", () => {
    const { getByText } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data: [],
          renderItem: () => null,
          footer: /* @__PURE__ */ jsx(Body, { children: "Footer du composant" })
        }
      )
    );
    expect(getByText("Footer du composant")).toBeInTheDocument();
  });
  test("rend un stickyFooter lorsque stickyFooter est vrai", () => {
    const { getByText } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: true,
          footer: /* @__PURE__ */ jsx(Body, { children: "Footer Sticky" })
        }
      )
    );
    expect(getByText("Footer Sticky")).toBeInTheDocument();
  });
  test("n'affiche pas le footer sticky si stickyFooter est faux", async () => {
    const { queryByTestId } = render(
      /* @__PURE__ */ jsx("div", { style: { height: "50px" }, children: /* @__PURE__ */ jsx(
        FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: false,
          footer: /* @__PURE__ */ jsx(Body, { children: "Footer Sticky" }),
          containerProps: { style: inlineStyle(() => ({ base: { flex: 1 } })) }
        }
      ) })
    );
    await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
    expect(queryByTestId("stickyFooter")).not.toBeInTheDocument();
  });
  test("met \xE0 jour le paddingRight en fonction du layout", () => {
    const data = [{ id: "1", content: "Item 1" }];
    const { container } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data,
          renderItem: ({ item }) => /* @__PURE__ */ jsx(Body, { children: item.content })
        }
      )
    );
    expect(container.firstChild).toHaveStyle("padding-right: 0px");
  });
  test("affiche le footer avec un d\xE9lai de rendu pour stickyFooter", () => {
    const footerContent = "Footer avec d\xE9lai";
    const { getByText } = render(
      /* @__PURE__ */ jsx(
        FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: true,
          footer: /* @__PURE__ */ jsx(Body, { children: footerContent })
        }
      )
    );
    expect(getByText(footerContent)).toBeInTheDocument();
  });
  test("comporte la logique de layout selon les propri\xE9t\xE9s pass\xE9es", async () => {
    const { getByText, getByTestId } = render(
      /* @__PURE__ */ jsxs("div", { style: { height: "50px" }, children: [
        " ",
        /* @__PURE__ */ jsx(
          FlatList,
          {
            data: Array.from(Array(100).keys()),
            renderItem: ({ item }) => /* @__PURE__ */ jsxs("div", { style: { height: "50px" }, children: [
              "Item ",
              item
            ] }),
            stickyHeader: true,
            stickyFooter: true,
            title: /* @__PURE__ */ jsx(Body, { children: "Titre Sticky" }),
            footer: /* @__PURE__ */ jsx(Body, { children: "Footer Sticky" }),
            containerProps: { style: inlineStyle(() => ({ base: { flex: 1 } })) }
          }
        )
      ] })
    );
    await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
    const titleElement = getByText("Titre Sticky");
    expect(titleElement.parentNode).toHaveStyle("position: sticky");
    const footerElement = getByTestId("stickyFooter");
    expect(footerElement).toBeInTheDocument();
  });
});
//# sourceMappingURL=FlatList.spec.js.map