@crossed/ui/lib/commonjs/scroll/__tests__/FlatList.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_FlatList = require("../FlatList");
var import_Body = require("../utils/Body");
var import_styled = require("@crossed/styled");
var import_react = require("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 } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data,
          renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.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 } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data: [],
          renderItem: () => null,
          title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Titre du composant" })
        }
      )
    );
    expect(getByText("Titre du composant")).toBeInTheDocument();
  });
  test("rend le footer si footer est fourni dans props", () => {
    const { getByText } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data: [],
          renderItem: () => null,
          footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Footer du composant" })
        }
      )
    );
    expect(getByText("Footer du composant")).toBeInTheDocument();
  });
  test("rend un stickyFooter lorsque stickyFooter est vrai", () => {
    const { getByText } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: true,
          footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Footer Sticky" })
        }
      )
    );
    expect(getByText("Footer Sticky")).toBeInTheDocument();
  });
  test("n'affiche pas le footer sticky si stickyFooter est faux", async () => {
    const { queryByTestId } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "50px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: false,
          footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Footer Sticky" }),
          containerProps: { style: (0, import_styled.inlineStyle)(() => ({ base: { flex: 1 } })) }
        }
      ) })
    );
    await (0, import_react.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 } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data,
          renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.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 } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_FlatList.FlatList,
        {
          data: [],
          renderItem: () => null,
          stickyFooter: true,
          footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: footerContent })
        }
      )
    );
    expect(getByText(footerContent)).toBeInTheDocument();
  });
  test("comporte la logique de layout selon les propri\xE9t\xE9s pass\xE9es", async () => {
    const { getByText, getByTestId } = (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { height: "50px" }, children: [
        " ",
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_FlatList.FlatList,
          {
            data: Array.from(Array(100).keys()),
            renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { height: "50px" }, children: [
              "Item ",
              item
            ] }),
            stickyHeader: true,
            stickyFooter: true,
            title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Titre Sticky" }),
            footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Body.Body, { children: "Footer Sticky" }),
            containerProps: { style: (0, import_styled.inlineStyle)(() => ({ base: { flex: 1 } })) }
          }
        )
      ] })
    );
    await (0, import_react.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