@thepalaceproject/circulation-admin 0.0.0-post.1

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

@@ -0,0 +1,699 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { ALL_LIBRARIES_HEADING } from "../../../src/components/LibraryStats";
+import { CustomTooltip } from "../../../src/components/StatsCollectionsBarChart";
+import {
+  componentWithProviders,
+  renderWithProviders,
+} from "../testUtils/withProviders";
+import {
+  statisticsApiResponseData,
+  testLibraryKey as sampleLibraryKey,
+  testLibraryName as sampleLibraryName,
+} from "../../__data__/statisticsApiResponseData";
+
+import { normalizeStatistics } from "../../../src/features/stats/normalizeStatistics";
+import { useGetStatsQuery } from "../../../src/features/stats/statsSlice";
+import * as fetchMock from "fetch-mock-jest";
+import { STATS_API_ENDPOINT } from "../../../src/features/stats/statsSlice";
+import Stats from "../../../src/components/Stats";
+import { renderHook } from "@testing-library/react-hooks";
+import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { store } from "../../../src/store";
+import { api } from "../../../src/features/api/apiSlice";
+import {
+  AdminRoleData,
+  ConfigurationSettings,
+  RolesData,
+} from "../../../src/interfaces";
+
+const normalizedData = normalizeStatistics(statisticsApiResponseData);
+
+global.ResizeObserver = require("resize-observer-polyfill");
+
+describe("Dashboard Statistics", () => {
+  // NB: This adds test to the already existing tests in:
+  // - `src/components/__tests__/LibraryStats-test.tsx`.
+  // - `src/components/__tests__/SingleStatListItem-test.tsx`.
+  //
+  // Those tests should eventually be migrated here and
+  // adapted to the Jest/React Testing Library paradigm.
+
+  // Configure standard constructors so that RTK Query works in tests with FetchMockJest
+  Object.assign(fetchMock.config, {
+    fetch,
+    Headers,
+    Request,
+    Response,
+  });
+
+  const statGroupToHeading = {
+    patrons: "Current Circulation Activity",
+    circulations: "Circulation Totals",
+    inventory: "Inventory",
+    usageReports: "Usage and Reports",
+    collections: "Configured Collections",
+  };
+
+  describe("query hook correctly handles fetch responses", () => {
+    const wrapper = componentWithProviders();
+
+    beforeEach(() => {
+      store.dispatch(api.util.resetApiState());
+      fetchMock.restore();
+    });
+    afterAll(() => {
+      store.dispatch(api.util.resetApiState());
+      fetchMock.restore();
+    });
+
+    it("returns data when fetch successful", async () => {
+      fetchMock.get(
+        `path:${STATS_API_ENDPOINT}`,
+        {
+          body: JSON.stringify(statisticsApiResponseData),
+          status: 200,
+        },
+        { overwriteRoutes: true }
+      );
+
+      const { result, waitFor } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+
+      // Expect loading status immediately after first use of the hook.
+      let { isSuccess, isError, error, data } = result.current;
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(undefined);
+
+      // Once loaded, we should have our data.
+      await waitFor(() => !result.current.isLoading);
+      ({ isSuccess, isError, error, data } = result.current);
+
+      expect(isSuccess).toBe(true);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(normalizedData);
+
+      // But if we use the hook again, we should get the data back from
+      // the cache immediately, without loading state.
+      const { result: result2 } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+      ({ isSuccess, isError, error, data } = result2.current);
+
+      expect(isSuccess).toBe(true);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(normalizedData);
+    });
+
+    it("returns error and no data when request fails", async () => {
+      fetchMock.get(
+        `path:${STATS_API_ENDPOINT}`,
+        {
+          status: 500,
+        },
+        {
+          overwriteRoutes: true,
+        }
+      );
+
+      const { result, waitFor } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+
+      // Expect loading status immediately after first use of the hook.
+      let { isSuccess, isError, error, data } = result.current;
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(false);
+      expect(error).toBe(undefined);
+      expect(data).toEqual(undefined);
+
+      await waitFor(() => !result.current.isLoading);
+      ({ isSuccess, isError, error, data } = result.current);
+
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(true);
+      expect(data).toBe(undefined);
+      expect((error as FetchErrorData).status).toBe(500);
+
+      // But if we use the hook again, we should get our error back from
+      // the cache immediately, without loading state.
+      const { result: result2 } = renderHook(() => useGetStatsQuery(), {
+        wrapper,
+      });
+      ({ isSuccess, isError, error, data } = result2.current);
+
+      expect(isSuccess).toBe(false);
+      expect(isError).toBe(true);
+      expect(data).toBe(undefined);
+      expect((error as FetchErrorData).status).toBe(500);
+    });
+  });
+
+  describe("rendering", () => {
+    beforeAll(() => {
+      fetchMock.get(`path:${STATS_API_ENDPOINT}`, {
+        body: JSON.stringify(statisticsApiResponseData),
+        status: 200,
+      });
+    });
+    afterAll(() => {
+      fetchMock.restore();
+    });
+
+    describe("correctly handles fetching and caching", () => {
+      afterEach(() => {
+        fetchMock.resetHistory();
+      });
+
+      const assertLoadingState = ({ getByRole }) => {
+        getByRole("dialog", { name: "Loading" });
+        getByRole("heading", { level: 1, name: "Loading" });
+      };
+      const assertNotLoadingState = ({ queryByRole }) => {
+        const missingLoadingDialog = queryByRole("dialog", { name: "Loading" });
+        const missingLoadingHeading = queryByRole("heading", {
+          level: 1,
+          name: "Loading",
+        });
+        expect(missingLoadingDialog).not.toBeInTheDocument();
+        expect(missingLoadingHeading).not.toBeInTheDocument();
+      };
+
+      it("shows/hides the loading indicator", async () => {
+        // We haven't tried to fetch anything yet.
+        expect(fetchMock.calls()).toHaveLength(0);
+
+        const { rerender, getByRole, queryByRole } = renderWithProviders(
+          <Stats />
+        );
+
+        // We should start in the loading state.
+        assertLoadingState({ getByRole });
+
+        // Wait a tick for the statistics to render.
+        await new Promise(process.nextTick);
+        // Now we've fetched something.
+        expect(fetchMock.calls()).toHaveLength(1);
+
+        rerender(<Stats />);
+
+        // We should show our content without the loading state.
+        assertNotLoadingState({ queryByRole });
+        getByRole("heading", { level: 2, name: ALL_LIBRARIES_HEADING });
+
+        // We haven't made another call, since the response is cached.
+        expect(fetchMock.calls()).toHaveLength(1);
+      });
+
+      it("doesn't fetch again, because response is cached", async () => {
+        const { getByRole, queryByRole } = renderWithProviders(<Stats />);
+
+        // We should show our content immediately, without entering the loading state.
+        assertNotLoadingState({ queryByRole });
+        getByRole("heading", { level: 2, name: ALL_LIBRARIES_HEADING });
+
+        // We never tried to fetch anything because the result is cached.
+        expect(fetchMock.calls()).toHaveLength(0);
+      });
+
+      it("show stats for a library, if a library is specified", async () => {
+        const { getByRole, queryByRole, getByText } = renderWithProviders(
+          <Stats library={sampleLibraryKey} />
+        );
+
+        // We should show our content immediately, without entering the loading state.
+        assertNotLoadingState({ queryByRole });
+        getByRole("heading", {
+          level: 2,
+          name: `${sampleLibraryName} Dashboard`,
+        });
+        getByRole("heading", { level: 3, name: statGroupToHeading.patrons });
+        getByText("21");
+
+        // We never tried to fetch anything because the result is cached.
+        expect(fetchMock.calls()).toHaveLength(0);
+      });
+
+      it("shows site-wide stats when no library specified", async () => {
+        const { getByRole, getByText, queryByRole } = renderWithProviders(
+          <Stats />
+        );
+
+        // We should show our content immediately, without entering the loading state.
+        assertNotLoadingState({ queryByRole });
+
+        getByRole("heading", { level: 2, name: ALL_LIBRARIES_HEADING });
+        getByRole("heading", {
+          level: 3,
+          name: "Current Circulation Activity",
+        });
+        getByText("1.6k");
+
+        // We never tried to fetch anything because the result is cached.
+        expect(fetchMock.calls()).toHaveLength(0);
+      });
+    });
+
+    describe("has correct statistics groups", () => {
+      it("shows the right groups with a library", () => {
+        const { getAllByRole } = renderWithProviders(
+          <Stats library={sampleLibraryKey} />
+        );
+
+        const groupHeadings = getAllByRole("heading", { level: 3 });
+        const expectedHeadings = [
+          statGroupToHeading.patrons,
+          statGroupToHeading.usageReports,
+          statGroupToHeading.collections,
+        ];
+        expect(groupHeadings).toHaveLength(3);
+        groupHeadings.forEach((heading, index) => {
+          expect(heading).toHaveTextContent(expectedHeadings[index]);
+        });
+      });
+
+      it("shows the right groups with/out a library", () => {
+        const { getAllByRole } = renderWithProviders(<Stats />);
+
+        const groupHeadings = getAllByRole("heading", { level: 3 });
+        const expectedHeadings = [
+          statGroupToHeading.patrons,
+          statGroupToHeading.circulations,
+          statGroupToHeading.inventory,
+          statGroupToHeading.collections,
+        ];
+        expect(groupHeadings).toHaveLength(4);
+        groupHeadings.forEach((heading, index) => {
+          expect(heading).toHaveTextContent(expectedHeadings[index]);
+        });
+      });
+    });
+
+    describe("shows the correct UI with/out sysadmin role", () => {
+      const systemAdmin: AdminRoleData[] = [{ role: "system" }];
+      const managerAll: AdminRoleData[] = [{ role: "manager-all" }];
+      const librarianAll: AdminRoleData[] = [{ role: "librarian-all" }];
+
+      const collectionNames = [
+        "New BiblioBoard Test",
+        "New Bibliotheca Test Collection",
+        "Palace Bookshelf",
+        "TEST Baker & Taylor",
+        "TEST Palace Marketplace",
+      ];
+
+      it("tests BarChart component", () => {
+        const appConfigSettings: Partial<ConfigurationSettings> = {
+          roles: systemAdmin,
+          dashboardCollectionsBarChart: { width: 800 },
+        };
+        const { container, getByRole } = renderWithProviders(
+          <Stats library={sampleLibraryKey} />,
+          { appConfigSettings }
+        );
+
+        const collectionsHeading = getByRole("heading", {
+          level: 3,
+          name: statGroupToHeading.collections,
+        });
+        const collectionsGroup = collectionsHeading.closest(".stat-group");
+        const barChartAxisTick = collectionsGroup.querySelectorAll(
+          ".recharts-cartesian-axis-tick"
+        );
+
+        // We expect the first ticks to be along the y-axis, which
+        // should have our collection names.
+        collectionNames.forEach((name, index) => {
+          expect(barChartAxisTick[index]).toHaveTextContent(name);
+        });
+
+        // Clean up the container after each render.
+        document.body.removeChild(container);
+      });
+
+      it("shows collection bar chart for sysadmins, but list for others", () => {
+        // We'll use this function to test multiple scenarios.
+        const testFor = (expectBarChart: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = { roles };
+          const { container, getByRole } = renderWithProviders(
+            <Stats library={sampleLibraryKey} />,
+            { appConfigSettings }
+          );
+
+          const collectionsHeading = getByRole("heading", {
+            level: 3,
+            name: statGroupToHeading.collections,
+          });
+          const collectionsGroup = collectionsHeading.closest(".stat-group");
+
+          if (expectBarChart) {
+            collectionsGroup.querySelector(".recharts-responsive-container");
+          } else {
+            const list = collectionsGroup.querySelector("ul");
+            const items = list.querySelectorAll("li");
+            expect(items.length).toBe(collectionNames.length);
+
+            collectionNames.forEach((name: string) => {
+              expect(list).toHaveTextContent(name);
+            });
+            items.forEach((item, index) => {
+              expect(item).toHaveTextContent(collectionNames[index]);
+            });
+          }
+
+          // Clean up the container after each render.
+          document.body.removeChild(container);
+        };
+
+        // If the feature flag is set, the button should be visible only to sysadmins.
+        testFor(true, systemAdmin);
+        testFor(false, managerAll);
+        testFor(false, librarianAll);
+      });
+
+      it("shows inventory reports only for sysadmins, if sysadmin-only flag set", () => {
+        const fakeQuickSightHref = "https://example.com/fakeQS";
+
+        // We'll use this function to test multiple scenarios.
+        const renderFor = (onlySysadmins: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = {
+            featureFlags: { reportsOnlyForSysadmins: onlySysadmins },
+            roles,
+            quicksightPagePath: fakeQuickSightHref,
+          };
+          const {
+            container,
+            getByRole,
+            queryByRole,
+            queryByText,
+          } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
+            appConfigSettings,
+          });
+
+          // We should always render a Usage reports group when a library is specified.
+          getByRole("heading", {
+            level: 3,
+            name: statGroupToHeading.usageReports,
+          });
+          const usageReportLink = getByRole("link", { name: /View Usage/i });
+          expect(usageReportLink).toHaveAttribute("href", fakeQuickSightHref);
+
+          const requestButton = queryByRole("button", {
+            name: /Request Report/i,
+          });
+          const blurb = queryByText(
+            /These reports provide up-to-date data on both inventory and holds/i
+          );
+
+          // The inventory report blurb should be visible only when the button is.
+          if (requestButton) {
+            expect(blurb).not.toBeNull();
+          } else {
+            expect(blurb).toBeNull();
+          }
+
+          // Clean up the container after each render.
+          document.body.removeChild(container);
+          return requestButton;
+        };
+
+        // 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();
+      });
+
+      it("shows quicksight link only for sysadmins, if sysadmin-only flag set", () => {
+        const fakeQuickSightHref = "https://example.com/fakeQS";
+
+        // We'll use this function to test multiple scenarios.
+        const renderFor = (onlySysadmins: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = {
+            featureFlags: { quicksightOnlyForSysadmins: onlySysadmins },
+            roles,
+            quicksightPagePath: fakeQuickSightHref,
+          };
+          const {
+            container,
+            getByRole,
+            queryByRole,
+            queryByText,
+          } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
+            appConfigSettings,
+          });
+
+          // We should always render a Usage reports group when a library is specified.
+          getByRole("heading", {
+            level: 3,
+            name: statGroupToHeading.usageReports,
+          });
+          const usageReportLink = queryByRole("link", { name: /View Usage/i });
+          if (usageReportLink) {
+            expect(usageReportLink).toHaveAttribute("href", fakeQuickSightHref);
+          }
+
+          // Clean up the container after each render.
+          document.body.removeChild(container);
+          return usageReportLink;
+        };
+
+        // If the feature flag is set, the link 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 = {
+        availableTitles: 7953,
+        licensedTitles: 7974,
+        meteredLicenseTitles: 7974,
+        meteredLicensesAvailable: 75446,
+        meteredLicensesOwned: 301541,
+        openAccessTitles: 0,
+        titles: 7974,
+        unlimitedLicenseTitles: 0,
+      };
+      const perMediumInventory = {
+        Audio: {
+          availableTitles: 148,
+          licensedTitles: 165,
+          meteredLicenseTitles: 165,
+          meteredLicensesAvailable: 221,
+          meteredLicensesOwned: 392,
+          openAccessTitles: 0,
+          titles: 165,
+          unlimitedLicenseTitles: 0,
+        },
+        Book: {
+          availableTitles: 7805,
+          licensedTitles: 7809,
+          meteredLicenseTitles: 7809,
+          meteredLicensesAvailable: 75225,
+          meteredLicensesOwned: 301149,
+          openAccessTitles: 0,
+          titles: 7809,
+          unlimitedLicenseTitles: 0,
+        },
+      };
+      const defaultChartItemWithoutPerMediumInventory = {
+        name: defaultLabel,
+        ...summaryInventory,
+      };
+      const defaultChartItemWithPerMediumInventory = {
+        ...defaultChartItemWithoutPerMediumInventory,
+        _by_medium: perMediumInventory,
+      };
+      const defaultPayload = [
+        {
+          fill: "#606060",
+          dataKey: "meteredLicenseTitles",
+          name: "Metered License Titles",
+          color: "#606060",
+          value: 7974,
+        },
+        {
+          fill: "#404040",
+          dataKey: "unlimitedLicenseTitles",
+          name: "Unlimited License Titles",
+          color: "#404040",
+          value: 0,
+        },
+        {
+          fill: "#202020",
+          dataKey: "openAccessTitles",
+          name: "Open Access Titles",
+          color: "#202020",
+          value: 0,
+        },
+      ];
+
+      const populateTooltipProps = ({
+        active = true,
+        label = defaultLabel,
+        payload = [],
+        chartItem = undefined,
+      }) => {
+        const constructedChartItem = !chartItem
+          ? chartItem
+          : {
+              ...chartItem,
+              name: label,
+            };
+        const constructedPayload = payload.map((entry) => ({
+          ...entry,
+          payload: constructedChartItem,
+        }));
+        return {
+          active,
+          label,
+          payload: constructedPayload,
+        };
+      };
+
+      /**
+       * Helper function to test passing tests for a tooltip
+       *
+       * @param tooltipProps - passed to the <CustomTooltip /> component
+       * @param expectedInventoryItemText - the expected inventory item text content
+       */
+      const expectPassingTestsForActiveTooltip = ({
+        tooltipProps,
+        expectedInventoryItemText,
+      }) => {
+        const { container, getByRole } = render(
+          <CustomTooltip {...tooltipProps} />
+        );
+        const tooltipContent = container.querySelector(".customTooltip");
+
+        const detail = tooltipContent.querySelector(".customTooltipDetail");
+        const detailChildren = detail.children;
+        const heading = getByRole("heading", {
+          level: 1,
+          name: "Collection X",
+        });
+        const items = tooltipContent.querySelectorAll("p.customTooltipItem");
+        const divider = detail.querySelector("hr");
+
+        expect(heading).toHaveTextContent("Collection X");
+
+        // Eight (8) metrics in the following order.
+        expect(items).toHaveLength(8);
+        // The expected inventory item labels array should be the same length.
+        expect(expectedInventoryItemText).toHaveLength(items.length);
+        // And the items should contain at least the expected text.
+        Array.from(items).forEach((item, index) => {
+          expect(item).toHaveTextContent(expectedInventoryItemText[index]);
+        });
+
+        // The heading should be at the top and the divider (`hr`)
+        // should be between the third and fourth statistics.
+        expect(detailChildren).toHaveLength(10);
+        expect(heading).toEqual(detailChildren[0]);
+        expect(items[0]).toEqual(detailChildren[1]);
+        expect(items[2]).toEqual(detailChildren[3]);
+        expect(divider).toEqual(detailChildren[4]);
+        expect(items[3]).toEqual(detailChildren[5]);
+        expect(items[7]).toEqual(detailChildren[9]);
+      };
+
+      it("should not render when active is false", () => {
+        // Recharts sticks some extra props
+        const tooltipProps = populateTooltipProps({
+          active: false,
+          chartItem: defaultChartItemWithPerMediumInventory,
+          payload: defaultPayload,
+        });
+
+        const { container } = render(<CustomTooltip {...tooltipProps} />);
+        const tooltipContent = container.querySelectorAll(".customTooltip");
+
+        expect(tooltipContent).toHaveLength(0);
+      });
+      it("should render when active is true", () => {
+        const tooltipProps = populateTooltipProps({
+          active: true,
+          chartItem: defaultChartItemWithoutPerMediumInventory,
+          payload: defaultPayload,
+        });
+
+        const expectedInventoryItemText = [
+          "Titles:",
+          "Available Titles:",
+          "Metered License Titles:",
+          "Licensed Titles:",
+          "Metered Licenses Available:",
+          "Metered Licenses Owned:",
+          "Open Access Titles:",
+          "Unlimited License Titles:",
+        ];
+
+        expectPassingTestsForActiveTooltip({
+          tooltipProps,
+          expectedInventoryItemText,
+        });
+      });
+      it("should render without per-medium inventory", () => {
+        const tooltipProps = populateTooltipProps({
+          active: true,
+          chartItem: defaultChartItemWithoutPerMediumInventory,
+          payload: defaultPayload,
+        });
+
+        const expectedInventoryItemText = [
+          "Titles: 7,974",
+          "Available Titles: 7,953",
+          "Metered License Titles: 7,974",
+          "Licensed Titles: 7,974",
+          "Metered Licenses Available: 75,446",
+          "Metered Licenses Owned: 301,541",
+          "Open Access Titles: 0",
+          "Unlimited License Titles: 0",
+        ];
+
+        expectPassingTestsForActiveTooltip({
+          tooltipProps,
+          expectedInventoryItemText,
+        });
+      });
+      it("should render additional detail with per-medium inventory", () => {
+        const tooltipProps = populateTooltipProps({
+          active: true,
+          chartItem: defaultChartItemWithPerMediumInventory,
+          payload: defaultPayload,
+        });
+
+        const expectedInventoryItemText = [
+          "Titles: 7,974 (Audio: 165, Book: 7,809)",
+          "Available Titles: 7,953 (Audio: 148, Book: 7,805)",
+          "Metered License Titles: 7,974 (Audio: 165, Book: 7,809)",
+          "Licensed Titles: 7,974 (Audio: 165, Book: 7,809)",
+          "Metered Licenses Available: 75,446 (Audio: 221, Book: 75,225)",
+          "Metered Licenses Owned: 301,541 (Audio: 392, Book: 301,149)",
+          "Open Access Titles: 0",
+          "Unlimited License Titles: 0",
+        ];
+
+        expectPassingTestsForActiveTooltip({
+          tooltipProps,
+          expectedInventoryItemText,
+        });
+      });
+    });
+  });
+});