@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
87 lines (86 loc) • 4.09 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { render, act, fireEvent } from "@crossed/test";
import { ScrollView } from "../ScrollView";
import { Text } from "react-native";
import { inlineStyle } from "@crossed/styled";
test("comporte la logique de layout selon les propri\xE9t\xE9s pass\xE9es", async () => {
const { getByText, getByTestId, container } = render(
/* @__PURE__ */ jsx("div", { style: { height: "50px" }, children: /* @__PURE__ */ jsxs(
ScrollView,
{
stickyHeader: true,
stickyFooter: true,
containerProps: { style: inlineStyle(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ jsx(ScrollView.Title, { children: /* @__PURE__ */ jsx(Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ jsx(ScrollView.Body, { children: /* @__PURE__ */ jsx(Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ jsx(ScrollView.Footer, { children: /* @__PURE__ */ jsx(Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
act(() => {
scrollableContainer.scrollTop = 100;
fireEvent.scroll(scrollableContainer);
});
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();
expect(getByText("Contenu du body")).toBeInTheDocument();
});
test("n'affiche pas le footer sticky si stickyFooter est faux", async () => {
const { queryByTestId, container } = render(
/* @__PURE__ */ jsx("div", { style: { height: "50px" }, children: /* @__PURE__ */ jsxs(
ScrollView,
{
stickyHeader: true,
stickyFooter: false,
containerProps: { style: inlineStyle(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ jsx(ScrollView.Title, { children: /* @__PURE__ */ jsx(Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ jsx(ScrollView.Body, { children: /* @__PURE__ */ jsx(Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ jsx(ScrollView.Footer, { children: /* @__PURE__ */ jsx(Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
act(() => {
scrollableContainer.scrollTop = 100;
fireEvent.scroll(scrollableContainer);
});
await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
const footerElement = queryByTestId("stickyFooter");
expect(footerElement).toBeNull();
});
test("n'affiche pas le titre sticky si stickyHeader est faux", async () => {
const { getByText, container } = render(
/* @__PURE__ */ jsx("div", { style: { height: "50px" }, children: /* @__PURE__ */ jsxs(
ScrollView,
{
stickyHeader: false,
stickyFooter: true,
containerProps: { style: inlineStyle(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ jsx(ScrollView.Title, { children: /* @__PURE__ */ jsx(Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ jsx(ScrollView.Body, { children: /* @__PURE__ */ jsx(Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ jsx(ScrollView.Footer, { children: /* @__PURE__ */ jsx(Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
act(() => {
scrollableContainer.scrollTop = 200;
fireEvent.scroll(scrollableContainer);
});
await act(() => new Promise((resolve) => setTimeout(resolve, 300)));
const titleElement = getByText("Titre Sticky");
expect(titleElement.parentNode).not.toHaveStyle("position: sticky");
const footerElement = container.querySelector('[data-testid="stickyFooter"]');
expect(footerElement).toBeInTheDocument();
});
//# sourceMappingURL=ScrollView.spec.js.map