@thepalaceproject/circulation-admin 0.4.2 → 0.5.0

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import EditableInput from "../../../src/components/EditableInput";
+
+describe("EditableInput", () => {
+  it("renders an accessible description if a description prop is supplied and a label prop is supplied", () => {
+    const label = "input1";
+    const description = "this is a field";
+
+    render(
+      <EditableInput
+        label={label}
+        optionalText={false}
+        description={description}
+      />
+    );
+
+    const textbox = screen.getByRole("textbox", { name: label });
+
+    expect(textbox).toHaveAccessibleDescription(description);
+  });
+
+  it("renders an accessible description if a description prop is supplied and a label prop is not supplied", () => {
+    const description = "this is a field";
+
+    render(<EditableInput optionalText={false} description={description} />);
+
+    const textbox = screen.getByRole("textbox");
+
+    expect(textbox).toHaveAccessibleDescription(description);
+  });
+
+  it("renders an accessible description if optionalText is true", () => {
+    render(<EditableInput optionalText={true} />);
+
+    const textbox = screen.getByRole("textbox");
+
+    expect(textbox).toHaveAccessibleDescription(/optional/i);
+  });
+
+  it("associates accessible descriptions with the correct inputs when multiple instances are present", () => {
+    const descriptions = ["desc 1", "desc 2", "desc 3"];
+
+    render(
+      <div>
+        <EditableInput optionalText={false} description={descriptions[0]} />
+        <EditableInput optionalText={false} />
+        <EditableInput optionalText={false} />
+        <EditableInput optionalText={false} description={descriptions[1]} />
+        <EditableInput optionalText={false} description={descriptions[2]} />
+        <EditableInput optionalText={false} />
+      </div>
+    );
+
+    const textboxes = screen.getAllByRole("textbox");
+
+    expect(textboxes[0]).toHaveAccessibleDescription(descriptions[0]);
+    expect(textboxes[1]).toHaveAccessibleDescription("");
+    expect(textboxes[2]).toHaveAccessibleDescription("");
+    expect(textboxes[3]).toHaveAccessibleDescription(descriptions[1]);
+    expect(textboxes[4]).toHaveAccessibleDescription(descriptions[2]);
+    expect(textboxes[5]).toHaveAccessibleDescription("");
+  });
+});

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

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import IndividualAdminEditForm from "../../../src/components/IndividualAdminEditForm";
+import renderWithContext from "../testUtils/renderWithContext";
+
+describe("IndividualAdminEditForm", () => {
+  it("clears the role checkboxes after save", async () => {
+    const user = userEvent.setup();
+
+    const contextProviderProps = {
+      csrfToken: "",
+      roles: [
+        {
+          role: "system",
+        },
+      ],
+    };
+
+    const props = {
+      data: {
+        allLibraries: [
+          {
+            name: "Alpha",
+            short_name: "alpha",
+            uuid: "a3247ce9-9639-426b-bb09-82e9cb4cf44b",
+          },
+          {
+            name: "Beta",
+            short_name: "beta",
+            uuid: "da80cd40-7a87-41db-a789-5f1e87732aeb",
+          },
+          {
+            name: "Gamma",
+            short_name: "gamma",
+            uuid: "15f32675-73f5-46f3-91f4-837b933bc7b1",
+          },
+        ],
+      },
+      disabled: false,
+      listDataKey: "",
+      urlBase: "",
+    };
+
+    const { rerender } = renderWithContext(
+      <IndividualAdminEditForm {...props} />,
+      contextProviderProps
+    );
+
+    const systemAdminCheckbox = screen.getByRole("checkbox", {
+      name: /^system admin$/i,
+    });
+
+    const allAdminCheckbox = screen.getByRole("checkbox", {
+      name: /^administrator$/i,
+    });
+
+    const allUserCheckbox = screen.getByRole("checkbox", {
+      name: /^user$/i,
+    });
+
+    const alphaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of alpha/i,
+    });
+
+    const alphaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of alpha/i,
+    });
+
+    const betaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of beta/i,
+    });
+
+    const betaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of beta/i,
+    });
+
+    const gammaAdminCheckbox = screen.getByRole("checkbox", {
+      name: /administrator of gamma/i,
+    });
+
+    const gammaUserCheckbox = screen.getByRole("checkbox", {
+      name: /user of gamma/i,
+    });
+
+    expect(systemAdminCheckbox).not.toBeChecked();
+
+    await user.click(systemAdminCheckbox);
+
+    expect(systemAdminCheckbox).toBeChecked();
+
+    expect(allAdminCheckbox).toBeChecked();
+    expect(allUserCheckbox).toBeChecked();
+
+    expect(alphaAdminCheckbox).toBeChecked();
+    expect(alphaUserCheckbox).toBeChecked();
+
+    expect(betaAdminCheckbox).toBeChecked();
+    expect(betaUserCheckbox).toBeChecked();
+
+    expect(gammaAdminCheckbox).toBeChecked();
+    expect(gammaUserCheckbox).toBeChecked();
+
+    const nextProps = {
+      ...props,
+      // Existence of the responseBody prop indicates that the form was just saved.
+      responseBody: "some response",
+    };
+
+    rerender(<IndividualAdminEditForm {...nextProps} />);
+
+    expect(systemAdminCheckbox).not.toBeChecked();
+
+    expect(allAdminCheckbox).not.toBeChecked();
+    expect(allUserCheckbox).not.toBeChecked();
+
+    expect(alphaAdminCheckbox).not.toBeChecked();
+    expect(alphaUserCheckbox).not.toBeChecked();
+
+    expect(betaAdminCheckbox).not.toBeChecked();
+    expect(betaUserCheckbox).not.toBeChecked();
+
+    expect(gammaAdminCheckbox).not.toBeChecked();
+    expect(gammaUserCheckbox).not.toBeChecked();
+  });
+});

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { stub } from "sinon";
+import { LaneData } from "../../../src/interfaces";
+import Lane from "../../../src/components/Lane";
+
+// Mock the Link component from React Router, so we can verify that it gets rendered with the
+// expected props. This serves as an example of how to do something analogous to Enzyme's shallow
+// rendering, when we don't want/need to render the whole component tree down to HTML elements to
+// test something. This technique is useful for testing components in isolation (unit testing),
+// instead of the integration testing that RTL focuses on.
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Link: (props) => (
+    <div data-testid="Link" data-to={props.to}>
+      {props.children}
+    </div>
+  ),
+}));
+
+const renderLanes = stub();
+const toggleLaneVisibility = stub();
+
+function createLaneData(displayName: string, isAutomated: boolean): LaneData {
+  return {
+    id: 1,
+    display_name: displayName,
+    visible: true,
+    count: 5,
+    sublanes: [],
+    // The absence/presence of custom list ids determines if a lane is automated or custom.
+    custom_list_ids: isAutomated ? [] : [1],
+    inherit_parent_restrictions: true,
+  };
+}
+
+describe("Lane", () => {
+  it("renders an edit link on a custom lane", () => {
+    const laneData = createLaneData("Custom Lane", false);
+
+    render(
+      <Lane
+        lane={laneData}
+        active={false}
+        library="test_library"
+        orderChanged={false}
+        renderLanes={renderLanes}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    const editLink = screen.getAllByTestId("Link")[0];
+
+    expect(editLink).toHaveAttribute("data-to", expect.stringMatching(/edit/i));
+    expect(editLink).toHaveTextContent(/edit/i);
+  });
+
+  it("renders an edit link on an automated lane", async () => {
+    const laneData = createLaneData("Automated Lane", true);
+
+    render(
+      <Lane
+        lane={laneData}
+        active={false}
+        library="test_library"
+        orderChanged={false}
+        renderLanes={renderLanes}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    const editLink = screen.getAllByTestId("Link")[0];
+
+    expect(editLink).toHaveAttribute("data-to", expect.stringMatching(/edit/i));
+    expect(editLink).toHaveTextContent(/edit/i);
+  });
+});

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

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { stub } from "sinon";
+import { LaneData } from "../../../src/interfaces";
+import LaneEditor from "../../../src/components/LaneEditor";
+
+// Mock the LaneCustomListsEditor so we can verify that it is or isn't rendered. This serves as an
+// example of how to do something analogous to Enzyme's shallow rendering, when we don't want/need
+// to render the whole component tree down to HTML elements to test something. This technique is
+// useful for testing components in isolation (unit testing), instead of the integration testing
+// that RTL focuses on.
+
+jest.mock("../../../src/components/LaneCustomListsEditor", () => ({
+  __esModule: true,
+  default: (props) => <div data-testid="LaneCustomListsEditor" />,
+}));
+
+const customListsData = [
+  { id: 1, name: "list 1", entries: [], is_owner: true, is_shared: false },
+];
+
+const editLane = stub().returns(
+  new Promise<void>((resolve) => resolve())
+);
+
+const deleteLane = stub().returns(
+  new Promise<void>((resolve) => resolve())
+);
+
+const toggleLaneVisibility = stub();
+
+function createLaneData(displayName: string, isAutomated: boolean): LaneData {
+  return {
+    id: 1,
+    display_name: displayName,
+    visible: true,
+    count: 5,
+    sublanes: [
+      {
+        id: 2,
+        display_name: `Sublane of ${displayName}`,
+        visible: true,
+        count: 3,
+        sublanes: [],
+        custom_list_ids: [1],
+        inherit_parent_restrictions: false,
+      },
+    ],
+    // The absence/presence of custom list ids determines if a lane is automated or custom.
+    custom_list_ids: isAutomated ? [] : [1],
+    inherit_parent_restrictions: true,
+  };
+}
+
+describe("LaneEditor", () => {
+  describe("for a custom lane", () => {
+    const laneData = createLaneData("Custom Lane", false);
+
+    beforeEach(() => {
+      render(
+        <LaneEditor
+          library="library"
+          lane={laneData}
+          customLists={customListsData}
+          editOrCreate="edit"
+          editLane={editLane}
+          deleteLane={deleteLane}
+          findParentOfLane={stub().returns(laneData)}
+          toggleLaneVisibility={toggleLaneVisibility}
+        />
+      );
+    });
+
+    it("renders a delete button", () => {
+      expect(screen.getByRole("button", { name: /delete/i })).not.toBeNull();
+    });
+
+    it("renders an inherit parent restrictions checkbox", () => {
+      expect(
+        screen.getByRole("checkbox", {
+          name: /inherit restrictions from parent/i,
+        })
+      ).not.toBeNull();
+    });
+
+    it("renders a custom lists editor", () => {
+      expect(screen.getByTestId("LaneCustomListsEditor")).not.toBeNull();
+    });
+  });
+
+  describe("for an automated lane", () => {
+    const laneData = createLaneData("Automated Lane", true);
+
+    beforeEach(() => {
+      render(
+        <LaneEditor
+          library="library"
+          lane={laneData}
+          customLists={customListsData}
+          editOrCreate="edit"
+          editLane={editLane}
+          deleteLane={deleteLane}
+          findParentOfLane={stub().returns(laneData)}
+          toggleLaneVisibility={toggleLaneVisibility}
+        />
+      );
+    });
+
+    it("does not render a delete button", () => {
+      expect(screen.queryByRole("button", { name: /delete/i })).toBeNull();
+    });
+
+    it("does not render an inherit parent restrictions checkbox", () => {
+      expect(
+        screen.queryByRole("checkbox", {
+          name: /inherit restrictions from parent/i,
+        })
+      ).toBeNull();
+    });
+
+    it("does not render a custom lists editor", () => {
+      expect(screen.queryByTestId("LaneCustomListsEditor")).toBeNull();
+    });
+
+    it("renders an explanation that the lane contents can't be edited", () => {
+      expect(screen.getByText(/contents cannot be edited/i)).not.toBeNull();
+    });
+  });
+
+  it("doesn't render a custom lists editor while a lane is being loaded for editing", () => {
+    const laneData = null;
+
+    render(
+      <LaneEditor
+        library="library"
+        lane={laneData}
+        customLists={customListsData}
+        editOrCreate="edit"
+        editLane={editLane}
+        deleteLane={deleteLane}
+        findParentOfLane={stub().returns(laneData)}
+        toggleLaneVisibility={toggleLaneVisibility}
+      />
+    );
+
+    expect(screen.queryByTestId("LaneCustomListsEditor")).toBeNull();
+  });
+});

package/tests/jest/jest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/tests/jest/sample/sample.test.js

@@ -0,0 +1,3 @@
+test("adds 1 + 2 to equal 3", () => {
+  expect(1 + 2).toBe(3);
+});

package/tests/jest/testUtils/renderWithContext.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
+import ContextProvider, {
+  ContextProviderProps,
+} from "../../../src/components/ContextProvider";
+
+/**
+ * Renders a given React element, wrapped in a ContextProvider. The resulting rerender function is
+ * also wrapped, so that rerenders will have the identical context.
+ *
+ * @param ui                   The element to render
+ * @param contextProviderProps Props to pass to the ContextProvider wrapper
+ * @param renderOptions        Options to pass through to the RTL render function
+ * @returns
+ */
+export default function renderWithContext(
+  ui: React.ReactElement,
+  contextProviderProps: ContextProviderProps,
+  renderOptions?: Omit<RenderOptions, "queries">
+): RenderResult {
+  const renderResult = render(
+    <ContextProvider {...contextProviderProps}>{ui}</ContextProvider>,
+    renderOptions
+  );
+
+  const rerenderWithContext = (ui) => {
+    return renderResult.rerender(
+      <ContextProvider {...contextProviderProps}>{ui}</ContextProvider>
+    );
+  };
+
+  return {
+    ...renderResult,
+    rerender: rerenderWithContext,
+  };
+}

package/tsconfig.json

@@ -5,17 +5,21 @@
     "target": "es5",
     "outDir": "lib",
     "lib": ["es2019", "dom"],
-    "rootDir": "src",
-    "types": ["mocha", "node"],
+    "rootDir": ".",
+    // Mocha and jest are both used in this project. Certain globals are declared by both,
+    // such as describe, it, and test. Setting skipLibCheck to true prevents typescript from
+    // erroring when it sees duplicate variable declarations with different types.
+    "skipLibCheck": true,
+    "types": ["mocha", "node", "jest", "@testing-library/jest-dom"],
     "jsx": "react"
   },
   "exclude": [
     "lib",
     "node_modules",
-    "tests"
+    "tests/browser"
   ],
   "typedocOptions": {
-    "mode": "file",
+    "entryPointStrategy": "expand",
     "out": "docs"
   }
 }

package/webpack.common.js

@@ -3,7 +3,6 @@ const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 /* eslint-enable @typescript-eslint/no-var-requires */
@@ -22,7 +21,7 @@ module.exports = {
     new CleanWebpackPlugin(),
     // jsdom is needed for server rendering, but causes errors
     // in the browser even if it is never used, so we ignore it:
-    new webpack.IgnorePlugin(/jsdom$/),
+    new webpack.IgnorePlugin({ resourceRegExp: /jsdom$/ }),
     // Extract separate css file.
     new MiniCssExtractPlugin({ filename: "circulation-admin.css" }),
     // Set a local global variable in the app that will be used only
@@ -47,18 +46,23 @@ module.exports = {
       {
         test: /\.tsx?$/,
         exclude: [/node_modules/],
-        loaders: ["ts-loader"],
+        use: ["ts-loader"],
       },
       {
         test: /\.(ttf|woff|eot|svg|png|woff2|gif|jpg)(\?[\s\S]+)?$/,
-        loader: "url-loader?limit=100000",
+        use: ["url-loader?limit=100000"],
       },
     ],
   },
   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".scss"],
     alias: {
       react: path.resolve("./node_modules/react"),
     },
+    extensions: [".ts", ".tsx", ".js", ".scss"],
+    fallback: {
+      "stream": require.resolve("stream-browserify"),
+      "timers": require.resolve("timers-browserify"),
+      "url": require.resolve("url")
+    }
   },
 };

package/webpack.dev-server.config.js

@@ -18,7 +18,7 @@ const {
   responseInterceptor,
 } = require("http-proxy-middleware");
 
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const { URL } = require("url");
 const dev = require("./webpack.dev.config.js");
 

package/webpack.dev.config.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 var config = merge(common, {

package/webpack.prod.config.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 var config = merge(common, {