@thepalaceproject/circulation-admin 1.19.0 → 1.20.0-post.2

package/tests/jest/components/Stats.test.tsx

@@ -1,6 +1,16 @@
 import * as React from "react";
 import { render } from "@testing-library/react";
-import { CustomTooltip } from "../../../src/components/LibraryStats";
+import LibraryStats, {
+  CustomTooltip,
+} from "../../../src/components/LibraryStats";
+import { renderWithProviders } from "../testUtils/withProviders";
+import { ContextProviderProps } from "../../../src/components/ContextProvider";
+
+import {
+  statisticsApiResponseData,
+  testLibraryKey as sampleLibraryKey,
+} from "../../__data__/statisticsApiResponseData";
+import { normalizeStatistics } from "../../../src/components/Stats";
 
 describe("Dashboard Statistics", () => {
   // NB: This adds test to the already existing tests in:
@@ -11,6 +21,57 @@ describe("Dashboard Statistics", () => {
   // Those tests should eventually be migrated here and
   // adapted to the Jest/React Testing Library paradigm.
 
+  describe("requesting inventory reports", () => {
+    // Convert from the API format to our in-app format.
+    const statisticsData = normalizeStatistics(statisticsApiResponseData);
+    const librariesStatsTestDataByKey = statisticsData.libraries.reduce(
+      (map, library) => ({ ...map, [library.key]: library }),
+      {}
+    );
+    const sampleStatsData = librariesStatsTestDataByKey[sampleLibraryKey];
+
+    const systemAdmin = [{ role: "system" }];
+    const managerAll = [{ role: "manager-all" }];
+    const librarianAll = [{ role: "librarian-all" }];
+
+    const baseContextProviderProps = {
+      csrfToken: "",
+      featureFlags: { reportsOnlyForSysadmins: false },
+    };
+
+    const renderFor = (
+      onlySysadmins: boolean,
+      roles: { role: string; library?: string }[]
+    ) => {
+      const contextProviderProps: ContextProviderProps = {
+        ...baseContextProviderProps,
+        featureFlags: { reportsOnlyForSysadmins: onlySysadmins },
+        roles,
+      };
+
+      const { container, queryByRole } = renderWithProviders(
+        <LibraryStats stats={sampleStatsData} library={sampleLibraryKey} />,
+        { contextProviderProps }
+      );
+
+      const result = queryByRole("button", { name: "⬇︎" });
+      // Clean up the container after each render.
+      document.body.removeChild(container);
+      return result;
+    };
+
+    it("shows inventory reports only for sysadmins, if feature flag set", async () => {
+      // If the feature flag is set, the button should be visible only to sysadmins.
+      expect(renderFor(true, systemAdmin)).not.toBeNull();
+      expect(renderFor(true, managerAll)).toBeNull();
+      expect(renderFor(true, librarianAll)).toBeNull();
+      // If the feature flag is false, the button should be visible to all users.
+      expect(renderFor(false, systemAdmin)).not.toBeNull();
+      expect(renderFor(false, managerAll)).not.toBeNull();
+      expect(renderFor(false, librarianAll)).not.toBeNull();
+    });
+  });
+
   describe("charting - custom tooltip", () => {
     const defaultLabel = "Collection X";
     const summaryInventory = {

package/tests/jest/testUtils/withProviders.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import ContextProvider, {
+  ContextProviderProps,
+} from "../../../src/components/ContextProvider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
+import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
+
+export type TestProviderWrapperOptions = {
+  contextProviderProps?: Partial<ContextProviderProps>;
+  queryClient?: QueryClient;
+};
+export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
+  renderOptions?: Omit<RenderOptions, "queries">;
+};
+
+// The `csrfToken` context provider prop is required, so we provide
+// a default value here, so it can be easily merged with other props.
+const defaultContextProviderProps: ContextProviderProps = {
+  csrfToken: "",
+  featureFlags: defaultFeatureFlags,
+};
+
+/**
+ * Returns a component, composed with our providers, that can be used to wrap
+ * a React element for testing.
+ *
+ * @param {TestProviderWrapperOptions} options
+ * @param {ContextProviderProps} options.contextProviderProps Props to pass to the ContextProvider wrapper
+ * @param {QueryClient} options.queryClient A `tanstack/react-query` QueryClient
+ * @returns {React.FunctionComponent} A React component that wraps children with our providers
+ */
+export const componentWithProviders = ({
+  contextProviderProps = {
+    csrfToken: "",
+    featureFlags: defaultFeatureFlags,
+  },
+  queryClient = new QueryClient(),
+}: TestProviderWrapperOptions): React.FunctionComponent => {
+  const effectiveContextProviderProps = {
+    ...defaultContextProviderProps,
+    ...contextProviderProps,
+  };
+  const wrapper = ({ children }) => (
+    <ContextProvider {...effectiveContextProviderProps}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ContextProvider>
+  );
+  wrapper.displayName = "TestWrapperComponent";
+  return wrapper;
+};
+
+/**
+ * Renders a React element with specified providers and provides a function for re-rendering with the same context.
+ *
+ * @param {React.ReactElement} renderChildren The element to render
+ * @param {TestRenderWrapperOptions} testRenderOptions Options for rendering with providers
+ * @returns {RenderResult} The result of rendering, including re-rendering functionality
+ */
+export const renderWithProviders = (
+  renderChildren: React.ReactElement,
+  testRenderOptions: TestRenderWrapperOptions = {}
+): RenderResult => {
+  const wrapper = componentWithProviders(testRenderOptions);
+  const renderResult = render(
+    wrapper({ children: renderChildren }),
+    testRenderOptions.renderOptions
+  );
+
+  const rerenderWithProviders = (reRenderChildren: React.ReactElement) => {
+    return renderResult.rerender(wrapper({ children: reRenderChildren }));
+  };
+
+  return {
+    ...renderResult,
+    rerender: rerenderWithProviders,
+  };
+};