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

package/package.json

@@ -61,8 +61,8 @@
     "react-redux": "^7.2.9",
     "react-router": "^3.2.0",
     "recharts": "^1.8.6",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "request": "^2.85.0",
     "stream-browserify": "^3.0.0",
     "timers-browserify": "^2.0.12",
@@ -100,7 +100,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "fetch-mock": "^7.3.1",
+    "fetch-mock": "^10.0.7",
     "fetch-mock-jest": "^1.5.1",
     "fetch-ponyfill": "^7.1.0",
     "file-loader": "^6.2.0",
@@ -149,5 +149,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.20.0"
+  "version": "1.21.0-post.2"
 }

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

@@ -31,6 +31,7 @@ describe("CustomLists", () => {
 
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [{ role: "system" }],
     };
 
@@ -70,6 +71,7 @@ describe("CustomLists", () => {
 
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [{ role: "system" }],
     };
 
@@ -121,6 +123,7 @@ describe("CustomLists", () => {
 
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [{ role: "system" }],
     };
 
@@ -164,6 +167,7 @@ describe("CustomLists", () => {
 
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [{ role: "system" }],
     };
 

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

@@ -10,6 +10,7 @@ describe("IndividualAdminEditForm", () => {
 
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [
         {
           role: "system",

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

@@ -37,6 +37,7 @@ describe("QuicksightDashboard", () => {
   it("embed url is retrieved and set in iframe", async () => {
     const contextProviderProps = {
       csrfToken: "",
+      featureFlags: {},
       roles: [{ role: "system" }],
     };
 

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/features/book.test.ts

@@ -0,0 +1,396 @@
+import reducer, {
+  initialState,
+  getBookData,
+  GetBookDataArgs,
+  submitBookData,
+} from "../../../src/features/book/bookEditorSlice";
+import { expect } from "chai";
+import * as fetchMock from "fetch-mock-jest";
+import { store } from "../../../src/store";
+import { BookData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { RequestError } from "@thepalaceproject/web-opds-client/lib/DataFetcher";
+import { AsyncThunkAction, Dispatch } from "@reduxjs/toolkit";
+import ActionCreator from "@thepalaceproject/web-opds-client/lib/actions";
+
+const SAMPLE_BOOK_ADMIN_DETAIL = `
+<entry xmlns="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:opds="http://opds-spec.org/2010/catalog" xmlns:opf="http://www.idpf.org/2007/opf" xmlns:drm="http://librarysimplified.org/terms/drm" xmlns:schema="http://schema.org/" xmlns:simplified="http://librarysimplified.org/terms/" xmlns:bibframe="http://bibframe.org/vocab/" xmlns:bib="http://bib.schema.org/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/" xmlns:lcp="http://readium.org/lcp-specs/ns" schema:additionalType="http://schema.org/EBook">
+    <title>Tea-Cup Reading and Fortune-Telling by Tea Leaves</title>
+    <schema:alternativeHeadline>by a Highland Seer</schema:alternativeHeadline>
+    <summary>First written in the year 1881 by A Highland Seer, it contains a list of omens, both good and bad, many of which are very familiar. Folklore, mystic paths, and enlightenment of the divine are laid out in simple terms to help the everyday person interpret patterns found in tea leaves. (Google Books)</summary>
+    <simplified:pwid>60c23c76-f789-a51d-cd0b-31d2decf1271</simplified:pwid>
+    <dcterms:language>en</dcterms:language>
+    <dcterms:publisher>GEORGE SULLY AND COMPANY</dcterms:publisher>
+    <dcterms:issued>1921-01-01</dcterms:issued>
+    <id>urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1</id>
+    <bibframe:distribution bibframe:ProviderName="Palace Bookshelf"/>
+    <published>2022-12-17T00:00:00Z</published>
+    <updated>2023-05-03T16:31:10+00:00</updated>
+    <category scheme="http://schema.org/audience" term="Adult" label="Adult"/>
+    <author>
+        <name>Homer</name>
+        <link href="http://localhost:8080/minotaur-test-library/works/contributor/Homer/eng/Adult,Adults+Only,All+Ages,Children,Young+Adult" rel="contributor" type="application/atom+xml;profile=opds-catalog;kind=acquisition" title="Homer"/>
+    </author>
+    <link href="https://palace-bookshelf-downloads.dp.la/assets/0d970df7-275e-45ee-a90e-884f1a93beef?fit=inside&amp;width=10000&amp;height=560" rel="http://opds-spec.org/image" type="image/png"/>
+    <link href="https://palace-bookshelf-downloads.dp.la/0d970df7-275e-45ee-a90e-884f1a93beef.jpeg" rel="http://opds-spec.org/image/thumbnail" type="image/jpeg"/>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/borrow" rel="http://opds-spec.org/acquisition/borrow" type="application/atom+xml;type=entry;profile=opds-catalog">
+        <opds:indirectAcquisition type="application/epub+zip"/>
+        <opds:availability status="available"/>
+    </link>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1" rel="alternate" type="application/atom+xml;type=entry;profile=opds-catalog"/>
+    <link href="http://localhost:8080/minotaur-test-library/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/related_books" rel="related" type="application/atom+xml;profile=opds-catalog;kind=acquisition" title="Recommended Works"/>
+    <link href="http://localhost:8080/minotaur-test-library/annotations/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1" rel="http://www.w3.org/ns/oa#annotationService" type="application/ld+json; profile=&quot;http://www.w3.org/ns/anno.jsonld&quot;"/>
+    <link href="http://localhost:8080/minotaur-test-library/analytics/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/open_book" rel="http://librarysimplified.org/terms/rel/analytics/open-book"/>
+    <link href="http://localhost:8080/minotaur-test-library/admin/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/suppression" rel="http://palaceproject.io/terms/rel/suppress-for-library"/>
+    <link href="http://localhost:8080/admin/works/URI/urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1/edit" rel="edit"/>
+</entry>
+`;
+const SAMPLE_BOOK_DATA_BROKEN_XML = `BROKEN ${SAMPLE_BOOK_ADMIN_DETAIL}`;
+const FETCH_OPDS_PARSE_ERROR_MESSAGE = "Failed to parse OPDS data";
+
+describe("Redux bookEditorSlice...", () => {
+  const bookData = { id: "urn:something:something", title: "test title" };
+
+  const fetchedState = {
+    url: "test url",
+    data: { ...bookData },
+    isFetching: false,
+    fetchError: null,
+    editError: null,
+  };
+
+  describe("reducers...", () => {
+    it("should return the initial state from undefined, if no action is passed", () => {
+      expect(reducer(undefined, { type: "unknown" })).to.deep.equal(
+        initialState
+      );
+    });
+    it("should return the initial state from initialState, if no action is passed", () => {
+      expect(reducer(initialState, { type: "unknown" })).to.deep.equal(
+        initialState
+      );
+    });
+    it("should handle BOOK_CLEAR", () => {
+      // This is dispatched by `web-opds`client`, but we need to handle it, too.
+      const action = { type: ActionCreator.BOOK_CLEAR };
+
+      expect(reducer(fetchedState, action)).to.deep.equal(initialState);
+    });
+
+    it("should handle getBookData.pending", () => {
+      const action = {
+        type: getBookData.pending.type,
+        meta: { arg: { url: "https://example.com/book" } },
+      };
+      const previousState = { ...initialState, url: null, isFetching: false };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.be.null;
+      expect(state.isFetching).to.equal(true);
+      expect(state.fetchError).to.be.null;
+      expect(state.editError).to.be.null;
+    });
+    it("should handle getBookData.fulfilled", () => {
+      const action = {
+        type: getBookData.fulfilled.type,
+        meta: { arg: { url: "https://example.com/book" } },
+        payload: bookData,
+      };
+      const previousState = {
+        ...initialState,
+        url: null,
+        data: null,
+        isFetching: true,
+      };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.deep.equal(bookData);
+      expect(state.isFetching).to.equal(false);
+      expect(state.fetchError).to.be.null;
+      expect(state.editError).to.be.null;
+    });
+    it("should handle getBookData.rejected", () => {
+      const errorObject = { error: "some error object" };
+      const action = {
+        type: getBookData.rejected.type,
+        meta: { arg: { url: "https://example.com/book" } },
+        payload: errorObject,
+      };
+      const previousState = {
+        ...initialState,
+        url: null,
+        data: null,
+        isFetching: true,
+      };
+      const state = reducer(previousState, action);
+
+      expect(state.url).to.equal("https://example.com/book");
+      expect(state.data).to.be.null;
+      expect(state.isFetching).to.equal(false);
+      expect(state.fetchError).to.deep.equal(errorObject);
+      expect(state.editError).to.be.null;
+    });
+
+    it("should handle submitBookData.pending", () => {
+      const action = { type: submitBookData.pending.type };
+      const previousState = { ...fetchedState, isFetching: false };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({ ...fetchedState, isFetching: true });
+    });
+    it("should handle submitBookData.fulfilled", () => {
+      const action = {
+        type: submitBookData.fulfilled.type,
+        payload: "some value",
+      };
+      const previousState = { ...fetchedState, isFetching: true };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({
+        ...fetchedState,
+        isFetching: false,
+        editError: null,
+      });
+    });
+    it("should handle submitBookData.rejected", () => {
+      const action = {
+        type: submitBookData.rejected.type,
+        payload: "some value",
+      };
+      const previousState = { ...fetchedState, isFetching: true };
+      const state = reducer(previousState, action);
+
+      expect(state).to.deep.equal({
+        ...fetchedState,
+        isFetching: false,
+        editError: "some value",
+      });
+    });
+  });
+
+  describe("thunks...", () => {
+    describe("getBookData...", () => {
+      const goodBookUrl = "https://example.com/book";
+      const brokenBookUrl = "https://example.com/broken-book";
+      const errorBookUrl = "https://example.com/error-book";
+
+      const dispatch = jest.fn();
+      const getState = jest.fn().mockReturnValue({
+        bookEditor: initialState,
+      });
+
+      beforeAll(() => {
+        fetchMock
+          .get(goodBookUrl, { body: SAMPLE_BOOK_ADMIN_DETAIL, status: 200 })
+          .get(brokenBookUrl, {
+            body: SAMPLE_BOOK_DATA_BROKEN_XML,
+            status: 200,
+          })
+          .get(errorBookUrl, { body: "Internal server error", status: 400 });
+      });
+
+      afterEach(() => {
+        fetchMock.resetHistory();
+        dispatch.mockClear();
+      });
+      afterAll(() => fetchMock.restore());
+
+      it("should return the book data on the happy path", async () => {
+        const action = getBookData({ url: goodBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as BookData;
+        expect(payload.id).to.equal(
+          "urn:uuid:1cca9468-c447-4303-bc5a-c57470b85cb1"
+        );
+        expect(payload.title).to.equal(
+          "Tea-Cup Reading and Fortune-Telling by Tea Leaves"
+        );
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: goodBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.fulfilled.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: goodBookUrl,
+        });
+      });
+      it("should return an error, if the data is malformed", async () => {
+        const action = getBookData({ url: brokenBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as RequestError;
+        expect(payload.response).to.equal(FETCH_OPDS_PARSE_ERROR_MESSAGE);
+        expect(payload.url).to.equal(brokenBookUrl);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: brokenBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: brokenBookUrl,
+        });
+      });
+      it("should return an error, if the HTTP request fails", async () => {
+        const action = getBookData({ url: errorBookUrl });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+
+        const payload = result.payload as RequestError;
+
+        expect(result.type).to.equal(getBookData.rejected.type);
+        expect(result.meta.arg).to.deep.equal({ url: errorBookUrl });
+        expect(payload.response).to.equal("Internal server error");
+        expect(payload.url).to.equal(errorBookUrl);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(getBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        expect(dispatchCalls[0][0].meta.arg).to.deep.equal({
+          url: errorBookUrl,
+        });
+        expect(dispatchCalls[1][0].type).to.equal(getBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload).to.deep.equal(payload);
+        expect(dispatchCalls[1][0].meta.arg).to.deep.equal({
+          url: errorBookUrl,
+        });
+      });
+    });
+
+    describe("submitBookData...", () => {
+      const goodBookUrl = "https://example.com/book";
+      const editBookUrl = `${goodBookUrl}/edit`;
+      const brokenBookUrl = "https://example.com/broken-book";
+      const errorBookUrl = "https://example.com/error-book";
+      const csrfTokenHeader = "X-CSRF-Token";
+      const validCsrfToken = "valid-csrf-token";
+
+      const badCsrfTokenResponseBody = {
+        type: "http://librarysimplified.org/terms/problem/invalid-csrf-token",
+        title: "Invalid CSRF token",
+        status: 400,
+        detail: "There was an error saving your changes.",
+      };
+
+      const dispatch = jest.fn();
+      const getState = jest.fn().mockReturnValue({
+        bookEditor: initialState,
+      });
+
+      beforeAll(() => {
+        fetchMock
+          .post(
+            {
+              name: "valid-csrf-token-post",
+              url: editBookUrl,
+              headers: { [csrfTokenHeader]: validCsrfToken },
+            },
+            { body: "Success!", status: 201 }
+          )
+          .post(
+            { name: "invalid-csrf-token-post", url: editBookUrl },
+            { body: badCsrfTokenResponseBody, status: 400 }
+          )
+          .get(goodBookUrl, { body: SAMPLE_BOOK_ADMIN_DETAIL, status: 200 });
+      });
+
+      afterEach(() => {
+        fetchMock.resetHistory();
+        dispatch.mockClear();
+      });
+
+      afterEach(fetchMock.resetHistory);
+      afterAll(() => fetchMock.restore());
+
+      it("should post the book data on the happy path", async () => {
+        const csrfToken = validCsrfToken;
+        const formData = new FormData();
+        formData.append("id", "urn:something:something");
+        formData.append("title", "title");
+
+        const action = submitBookData({
+          url: editBookUrl,
+          data: formData,
+          csrfToken,
+        });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+        const fetchCalls = fetchMock.calls();
+
+        expect(fetchCalls.length).to.equal(1);
+        expect(fetchCalls[0].identifier).to.equal("valid-csrf-token-post");
+        expect(
+          (fetchCalls[0][1].headers as Headers).get(csrfTokenHeader)
+        ).to.equal(validCsrfToken);
+
+        expect(fetchCalls[0][0]).to.equal(editBookUrl);
+        expect(fetchCalls[0][1].method).to.equal("POST");
+        expect(fetchCalls[0][1].body).to.equal(formData);
+
+        expect(dispatchCalls.length).to.equal(3);
+        expect(dispatchCalls[0][0].type).to.equal(submitBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        // On a successful update, the second dispatch is to re-fetch the updated book data.
+        // The third dispatch is for the fulfilled action.
+        expect(dispatchCalls[2][0].type).to.equal(
+          submitBookData.fulfilled.type
+        );
+        expect(dispatchCalls[2][0].payload.body.toString()).to.equal(
+          "Success!"
+        );
+      });
+      it("should fail, if the user is unauthorized", async () => {
+        const csrfToken = "invalid-token";
+        const formData = new FormData();
+        formData.append("id", "urn:something:something");
+        formData.append("title", "title");
+
+        const action = submitBookData({
+          url: editBookUrl,
+          data: formData,
+          csrfToken,
+        });
+
+        const result = await action(dispatch, getState, undefined);
+        const dispatchCalls = dispatch.mock.calls;
+        const fetchCalls = fetchMock.calls();
+
+        expect(fetchCalls.length).to.equal(1);
+        expect(fetchCalls[0].identifier).to.equal("invalid-csrf-token-post");
+        expect(
+          (fetchCalls[0][1].headers as Headers).get(csrfTokenHeader)
+        ).not.to.equal(validCsrfToken);
+
+        expect(fetchCalls[0][0]).to.equal(editBookUrl);
+        expect(fetchCalls[0][1].method).to.equal("POST");
+        expect(fetchCalls[0][1].body).to.equal(formData);
+
+        expect(dispatchCalls.length).to.equal(2);
+        expect(dispatchCalls[0][0].type).to.equal(submitBookData.pending.type);
+        expect(dispatchCalls[0][0].payload).to.equal(undefined);
+        // There is no re-fetch on a failed request, ...
+        // ...so the second dispatch is for the rejected action.
+        expect(dispatchCalls[1][0].type).to.equal(submitBookData.rejected.type);
+        expect(dispatchCalls[1][0].payload.status).to.equal(400);
+        expect(dispatchCalls[1][0].payload.response).to.equal(
+          "There was an error saving your changes."
+        );
+      });
+    });
+  });
+});

package/tests/jest/testUtils/withProviders.tsx

@@ -4,6 +4,7 @@ import ContextProvider, {
 } 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>;
@@ -15,7 +16,10 @@ export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
 
 // 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 = { csrfToken: "" };
+const defaultContextProviderProps: ContextProviderProps = {
+  csrfToken: "",
+  featureFlags: defaultFeatureFlags,
+};
 
 /**
  * Returns a component, composed with our providers, that can be used to wrap
@@ -27,7 +31,10 @@ const defaultContextProviderProps = { csrfToken: "" };
  * @returns {React.FunctionComponent} A React component that wraps children with our providers
  */
 export const componentWithProviders = ({
-  contextProviderProps = { csrfToken: "" },
+  contextProviderProps = {
+    csrfToken: "",
+    featureFlags: defaultFeatureFlags,
+  },
   queryClient = new QueryClient(),
 }: TestProviderWrapperOptions): React.FunctionComponent => {
   const effectiveContextProviderProps = {

package/webpack.dev-server.config.js

@@ -67,7 +67,7 @@ module.exports = (env) => {
       return;
     }
 
-    const locationUrl = new URL(location);
+    const locationUrl = new URL(location, backendUrl);
 
     if (locationUrl.host !== backendUrl.host) {
       return;