@thepalaceproject/circulation-admin 1.10.0 → 1.11.0-post.1

package/package.json

@@ -73,10 +73,12 @@
     "@types/jest": "^29.2.6",
     "@types/mocha": "^10.0.1",
     "@types/node": "^18.11.14",
+    "@types/numeral": "^2.0.5",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.14.6",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.16",
+    "@types/recharts": "^1.8.28",
     "@types/redux-mock-store": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
@@ -105,7 +107,7 @@
     "mini-css-extract-plugin": "1.6.0",
     "mocha": "^10.2.0",
     "msw": "^1.2.1",
-    "nightwatch": "^1.0.19",
+    "nightwatch": "^3.2.0",
     "prettier": "2.1.2",
     "react-axe": "^3.3.0",
     "redux-mock-store": "^1.5.4",
@@ -124,7 +126,7 @@
     "typedoc": "0.23.21",
     "typescript": "4.9.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
@@ -139,5 +141,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.10.0"
+  "version": "1.11.0-post.1"
 }

package/requirements-ci.txt

@@ -0,0 +1 @@
+dunamai==1.19.0

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

@@ -0,0 +1,231 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { CustomTooltip } from "../../../src/components/LibraryStats";
+
+describe("Dashboard Statistics", () => {
+  // NB: This adds test to the already existing tests in:
+  // - `src/components/__tests__/Stats-test.tsx`.
+  // - `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.
+
+  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, getByRole } = 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,
+      });
+    });
+  });
+});