@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
87 lines (86 loc) • 5.33 kB
JavaScript
var import_jsx_runtime = require("react/jsx-runtime");
var import_test = require("@crossed/test");
var import_ScrollView = require("../ScrollView");
var import_react_native = require("react-native");
var import_styled = require("@crossed/styled");
test("comporte la logique de layout selon les propri\xE9t\xE9s pass\xE9es", async () => {
const { getByText, getByTestId, container } = (0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "50px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_ScrollView.ScrollView,
{
stickyHeader: true,
stickyFooter: true,
containerProps: { style: (0, import_styled.inlineStyle)(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
(0, import_test.act)(() => {
scrollableContainer.scrollTop = 100;
import_test.fireEvent.scroll(scrollableContainer);
});
await (0, import_test.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 } = (0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "50px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_ScrollView.ScrollView,
{
stickyHeader: true,
stickyFooter: false,
containerProps: { style: (0, import_styled.inlineStyle)(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
(0, import_test.act)(() => {
scrollableContainer.scrollTop = 100;
import_test.fireEvent.scroll(scrollableContainer);
});
await (0, import_test.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 } = (0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "50px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_ScrollView.ScrollView,
{
stickyHeader: false,
stickyFooter: true,
containerProps: { style: (0, import_styled.inlineStyle)(() => ({ base: { flex: 1 } })) },
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Titre Sticky" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Contenu du body" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: "Footer Sticky" }) })
]
}
) })
);
const scrollableContainer = container.querySelector("div").childNodes[0].childNodes[0];
(0, import_test.act)(() => {
scrollableContainer.scrollTop = 200;
import_test.fireEvent.scroll(scrollableContainer);
});
await (0, import_test.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