@thepalaceproject/circulation-admin 1.24.0 → 1.25.0-post.2

package/jest.config.js

@@ -1,5 +1,10 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/tests/__mocks__/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js",
+  },
   preset: "ts-jest",
   testEnvironment: "jsdom",
   testEnvironmentOptions: {

package/package.json

@@ -135,7 +135,7 @@
     "typedoc": "0.23.21",
     "typescript": "4.9.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.76.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
@@ -150,5 +150,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.24.0"
+  "version": "1.25.0-post.2"
 }

package/tests/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

package/tests/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ProtocolFormField from "../../../src/components/ProtocolFormField";
+
+// NB: This file adds / duplicates existing tests from:
+// - `src/components/__tests__/ProtocolFormField-test.tsx`.
+//
+// Those tests should eventually be migrated here and
+// adapted to the Jest/React Testing Library paradigm.
+
+describe("ProtocolFormField", () => {
+  it("renders date-picker setting", async () => {
+    const user = userEvent.setup();
+    const emptyValue = "";
+    const testDate = "2022-01-01";
+    const datePickerLabel = "A date setting field";
+    const fieldDescription = "Description of the setting";
+    const setting = {
+      key: "setting",
+      label: datePickerLabel,
+      description: `<p>${fieldDescription}</p>`,
+      type: "date-picker",
+    };
+
+    render(<ProtocolFormField setting={setting} disabled={false} />);
+    const input = screen.getByLabelText(datePickerLabel) as HTMLInputElement;
+
+    expect(input.value).toBe(emptyValue);
+
+    // Enter a date.
+    await user.click(input);
+    await user.keyboard(`${testDate}{enter}`);
+
+    expect(input.value).toBe(testDate);
+    screen.debug();
+  });
+});

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

@@ -7,6 +7,8 @@ import buildStore from "../../../src/store";
 import { setupServer } from "msw/node";
 import { http, HttpResponse } from "msw";
 import renderWithContext from "../testUtils/renderWithContext";
+import { renderWithProviders } from "../testUtils/withProviders";
+import QuicksightDashboardPage from "../../../src/components/QuicksightDashboardPage";
 
 const libraries: LibrariesData = { libraries: [{ uuid: "my-uuid" }] };
 const dashboardId = "test";
@@ -35,15 +37,8 @@ describe("QuicksightDashboard", () => {
   });
 
   it("embed url is retrieved and set in iframe", async () => {
-    const contextProviderProps = {
-      csrfToken: "",
-      featureFlags: {},
-      roles: [{ role: "system" }],
-    };
-
-    renderWithContext(
-      <QuicksightDashboard dashboardId={dashboardId} store={buildStore()} />,
-      contextProviderProps
+    renderWithProviders(
+      <QuicksightDashboard dashboardId={dashboardId} store={buildStore()} />
     );
 
     await waitFor(() => {
@@ -53,4 +48,20 @@ describe("QuicksightDashboard", () => {
       );
     });
   });
+
+  it("header renders without navigation links ", () => {
+    renderWithProviders(<QuicksightDashboardPage params={{ library: null }} />);
+
+    // Make sure we see the QuicksSight iFrame.
+    expect(screen.getByTitle("Library Dashboard")).toBeInTheDocument();
+    // Make sure we have the branding image.
+    expect(
+      screen.getByAltText("Palace Collection Manager")
+    ).toBeInTheDocument();
+
+    // Make sure we do not see other navigation links.
+    ["Dashboard", "System Configuration"].forEach((name) => {
+      expect(screen.queryByText(name)).not.toBeInTheDocument();
+    });
+  });
 });

package/tests/jest/testUtils/withProviders.tsx

@@ -7,10 +7,15 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 import { store } from "../../../src/store";
+import {
+  TOSContextProvider,
+  TOSContextProviderProps,
+} from "../../../src/components/TOSContext";
 
 export type TestProviderWrapperOptions = {
   reduxProviderProps?: ProviderProps;
   contextProviderProps?: Partial<ContextProviderProps>;
+  tosContextProviderProps?: TOSContextProviderProps;
   queryClient?: QueryClient;
 };
 export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
@@ -21,6 +26,13 @@ export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
 // be the same for both the Redux Provider and the ContextProvider.
 const defaultReduxStore = store;
 
+// Setup default TOSContext provider props.
+const tosText = "Sample terms of service.";
+const tosHref = "http://example.com/terms-of-service";
+const requiredTOSContextProviderProps: TOSContextProviderProps = {
+  ...[tosText, tosHref],
+};
+
 // The `csrfToken` context provider prop is required, so we provide
 // a default value here, so it can be easily merged with other props.
 const requiredContextProviderProps: ContextProviderProps = {
@@ -35,6 +47,7 @@ const requiredContextProviderProps: ContextProviderProps = {
  * @param {TestProviderWrapperOptions} options
  * @param options.reduxProviderProps Props to pass to the Redux `Provider` wrapper
  * @param {ContextProviderProps} options.contextProviderProps Props to pass to the ContextProvider wrapper
+ * @param {TOSContextProviderProps} options.tosContextProviderProps Props to pass to the TOSContextProvider wrapper
  * @param {QueryClient} options.queryClient A `tanstack/react-query` QueryClient
  * @returns {React.FunctionComponent} A React component that wraps children with our providers
  */
@@ -46,6 +59,7 @@ export const componentWithProviders = ({
     csrfToken: "",
     featureFlags: defaultFeatureFlags,
   },
+  tosContextProviderProps = requiredTOSContextProviderProps,
   queryClient = new QueryClient(),
 }: TestProviderWrapperOptions = {}): React.FunctionComponent => {
   const effectiveContextProviderProps = {
@@ -56,9 +70,11 @@ export const componentWithProviders = ({
   const wrapper = ({ children }) => (
     <Provider {...reduxProviderProps}>
       <ContextProvider {...effectiveContextProviderProps}>
-        <QueryClientProvider client={queryClient}>
-          {children}
-        </QueryClientProvider>
+        <TOSContextProvider value={tosContextProviderProps}>
+          <QueryClientProvider client={queryClient}>
+            {children}
+          </QueryClientProvider>
+        </TOSContextProvider>
       </ContextProvider>
     </Provider>
   );

package/webpack.dev-server.config.js

@@ -192,11 +192,11 @@ module.exports = (env) => {
         return responseBuffer;
       }
     ),
-    proxyTimeout: 5000,
+    proxyTimeout: 120000,
     secure: false,
     selfHandleResponse: true,
     target: backend,
-    timeout: 5000,
+    timeout: 120000,
   });
 
   const config = merge(dev, {