From 9227afcb4867ad81c8a87fa7afe778fe969de97a Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Tue, 15 Feb 2022 10:56:23 -0500
Subject: [PATCH 1/6] Cleans up

---
 src/components/CatalogLink.tsx                |  35 ++++
 src/components/CustomListBookCard.tsx         |  12 +-
 src/components/CustomListEntries.tsx          |   6 +-
 src/components/CustomListInfo.tsx             |   1 +
 src/components/CustomListSearchResults.tsx    |   6 +-
 src/components/CustomListsSidebar.tsx         |   1 +
 .../CustomListEditorBody.test.js              | 184 ++++++++++++++++++
 .../CustomListEditorHeader.test.js            |  87 +++++++++
 .../__tests_jest__/CustomListEntries.test.js  |   8 +-
 .../__tests_jest__/CustomListPage.test.js     |  19 +-
 .../__tests_jest__/CustomLists.test.js        | 114 +++++++++++
 src/testUtils/testUtils.jsx                   |   7 +-
 12 files changed, 455 insertions(+), 25 deletions(-)
 create mode 100644 src/components/CatalogLink.tsx
 create mode 100644 src/components/__tests_jest__/CustomListEditorBody.test.js
 create mode 100644 src/components/__tests_jest__/CustomListEditorHeader.test.js
 create mode 100644 src/components/__tests_jest__/CustomLists.test.js

diff --git a/src/components/CatalogLink.tsx b/src/components/CatalogLink.tsx
new file mode 100644
index 000000000..5b71afe3f
--- /dev/null
+++ b/src/components/CatalogLink.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Link } from "react-router";
+
+export default function CatalogLink({ url, title, label }) {
+  const prepareBookUrl = (url: string): string => {
+    const regexp = new RegExp(document.location.origin + "/(.*)/works/(.*)");
+    const match = regexp.exec(url);
+    if (match) {
+      const library = match[1];
+      const work = match[2];
+      return encodeURIComponent(library + "/" + work);
+    } else {
+      return url;
+    }
+  };
+
+  const pathFor = (bookUrl: string) => {
+    let path = "/admin/web";
+    path += bookUrl ? `/book/${prepareBookUrl(bookUrl)}` : "";
+    return path;
+  };
+
+  const finalBookUrl = pathFor(url);
+
+  return (
+    <Link
+      to={finalBookUrl}
+      title={title}
+      target="_blank"
+      className="btn inverted left-align small top-align"
+    >
+      {label}
+    </Link>
+  );
+}
diff --git a/src/components/CustomListBookCard.tsx b/src/components/CustomListBookCard.tsx
index 2dc7bb9dc..9385de66a 100644
--- a/src/components/CustomListBookCard.tsx
+++ b/src/components/CustomListBookCard.tsx
@@ -4,8 +4,8 @@ import { BookData } from "opds-web-client/lib/interfaces";
 import GrabIcon from "./icons/GrabIcon";
 import TrashIcon from "./icons/TrashIcon";
 import AddIcon from "./icons/AddIcon";
+import CatalogLink from "./CatalogLink";
 import { Button } from "library-simplified-reusable-components";
-import CatalogLink from "opds-web-client/lib/components/CatalogLink";
 import { getMedium, getMediumSVG } from "opds-web-client/lib/utils/book";
 
 export interface Entry extends BookData {
@@ -24,7 +24,6 @@ export interface CustomListBookCardProps {
 export default function CustomListBookCard({
   index,
   typeOfCard,
-  opdsFeedUrl,
   book,
   handleAddEntry,
   handleDeleteEntry,
@@ -53,13 +52,10 @@ export default function CustomListBookCard({
               <div className="links">
                 {book.url && (
                   <CatalogLink
-                    bookUrl={book.url}
+                    url={book.url}
                     title={book.title}
-                    target="_blank"
-                    className="btn inverted left-align small top-align"
-                  >
-                    View details
-                  </CatalogLink>
+                    label="View Details"
+                  />
                 )}
                 {isSearchResult ? (
                   <Button
diff --git a/src/components/CustomListEntries.tsx b/src/components/CustomListEntries.tsx
index dbcca2230..3bc2fd85f 100644
--- a/src/components/CustomListEntries.tsx
+++ b/src/components/CustomListEntries.tsx
@@ -75,7 +75,11 @@ export default function CustomListEntries({
     }
   };
   return (
-    <div className="custom-list-entries">
+    <div
+      role="region"
+      aria-label="List Entries"
+      className="custom-list-entries"
+    >
       <div className="droppable-header">
         {showSaveError && (
           <p className="save-list-error">
diff --git a/src/components/CustomListInfo.tsx b/src/components/CustomListInfo.tsx
index 2cd6b44a0..7a4b11921 100644
--- a/src/components/CustomListInfo.tsx
+++ b/src/components/CustomListInfo.tsx
@@ -73,6 +73,7 @@ export default function CustomListInfo({
           <Link
             to={"/admin/web/lists/" + library + "/edit/" + list.id}
             className="btn left-align small"
+            role="button"
           >
             <span>
               Edit
diff --git a/src/components/CustomListSearchResults.tsx b/src/components/CustomListSearchResults.tsx
index 634dba32a..b5afc9e7e 100644
--- a/src/components/CustomListSearchResults.tsx
+++ b/src/components/CustomListSearchResults.tsx
@@ -63,7 +63,11 @@ export default function CustomListSearchResults({
   };
 
   return (
-    <div className="custom-list-search-results">
+    <div
+      role="region"
+      aria-label="Search Results"
+      className="custom-list-search-results"
+    >
       <div className="droppable-header">
         <h4>Search Results</h4>
         {searchResults && resultsToDisplay.length > 0 && (
diff --git a/src/components/CustomListsSidebar.tsx b/src/components/CustomListsSidebar.tsx
index 26ed08bef..9a142a52a 100644
--- a/src/components/CustomListsSidebar.tsx
+++ b/src/components/CustomListsSidebar.tsx
@@ -38,6 +38,7 @@ export default function CustomListsSidebar({
       <h2>List Manager</h2>
       <Link
         className="btn create-button"
+        role="button"
         to={"/admin/web/lists/" + library + "/create"}
         onClick={startNewList}
       >
diff --git a/src/components/__tests_jest__/CustomListEditorBody.test.js b/src/components/__tests_jest__/CustomListEditorBody.test.js
new file mode 100644
index 000000000..b32923864
--- /dev/null
+++ b/src/components/__tests_jest__/CustomListEditorBody.test.js
@@ -0,0 +1,184 @@
+import React from "react";
+import { within } from "@testing-library/react";
+import { render } from "../../testUtils/testUtils";
+import CustomListEditorBody from "../CustomListEditorBody";
+import { DragDropContext } from "react-beautiful-dnd";
+
+const languages = {
+  eng: ["English"],
+};
+
+const library = {
+  uuid: "uuid",
+  name: "name",
+  short_name: "library",
+  settings: {
+    large_collections: ["eng", "fre", "spa"],
+  },
+};
+
+const listData = {
+  id: "1",
+  url: "some url",
+  title: "original list title",
+  lanes: [],
+  books: [
+    {
+      id: "A",
+      title: "entry A",
+      authors: ["author 1"],
+      raw: {
+        $: {
+          "schema:additionalType": { value: "http://schema.org/EBook" },
+        },
+      },
+    },
+    {
+      id: "B",
+      title: "entry B",
+      authors: ["author 2a", "author 2b"],
+      raw: {
+        $: {
+          "schema:additionalType": { value: "http://schema.org/EBook" },
+        },
+      },
+    },
+  ],
+  navigationLinks: [],
+};
+
+const searchResultsData = {
+  id: "id",
+  url: "url",
+  title: "title - search",
+  lanes: [],
+  navigationLinks: [],
+  books: [
+    {
+      id: "1",
+      title: "result 1",
+      authors: ["author 1"],
+      url: "/some/url1",
+      language: "eng",
+      raw: {
+        $: { "schema:additionalType": { value: "http://schema.org/EBook" } },
+      },
+    },
+    {
+      id: "2",
+      title: "result 2",
+      authors: ["author 2a", "author 2b"],
+      url: "/some/url2",
+      language: "eng",
+      raw: {
+        $: {
+          "schema:additionalType": {
+            value: "http://bib.schema.org/Audiobook",
+          },
+        },
+      },
+    },
+    {
+      id: "3",
+      title: "result 3",
+      authors: ["author 3"],
+      url: "/some/url3",
+      language: "eng",
+      raw: {
+        $: { "schema:additionalType": { value: "http://schema.org/EBook" } },
+      },
+    },
+  ],
+};
+
+const search = jest.fn();
+const loadMoreSearchResults = jest.fn();
+const loadMoreEntries = jest.fn();
+const saveFormData = jest.fn();
+const setDraftCollections = jest.fn();
+const onDragEnd = jest.fn();
+let utils;
+
+beforeEach(() => {
+  utils = render(
+    <DragDropContext onDragEnd={onDragEnd}>
+      <CustomListEditorBody
+        entries={listData.books}
+        draftTitle={listData.title}
+        isFetchingMoreCustomListEntries={false}
+        isFetchingMoreSearchResults={false}
+        languages={languages}
+        library={library}
+        listId={listData.id}
+        search={search}
+        setDraftCollections={setDraftCollections}
+        saveFormData={saveFormData}
+        loadMoreEntries={loadMoreEntries}
+        loadMoreSearchResults={loadMoreSearchResults}
+        totalListEntries={2}
+      />
+    </DragDropContext>
+  );
+});
+
+test("if there are entries passed, they render on the page", () => {
+  const entriesHeader = utils.getByRole("heading", {
+    level: 4,
+    name: "Displaying 1 - 2 of 2 Books",
+  });
+  expect(entriesHeader).toBeInTheDocument();
+
+  const entries = utils.getAllByRole("list")[1];
+
+  const entryA = within(entries).getByText("entry A");
+  const entryB = within(entries).getByText("entry B");
+
+  expect(entryA).toBeInTheDocument();
+  expect(entryB).toBeInTheDocument();
+});
+
+test("if there are no entries, then none render", () => {
+  utils = render(
+    <DragDropContext onDragEnd={onDragEnd}>
+      <CustomListEditorBody
+        entries={[]}
+        draftTitle={""}
+        isFetchingMoreCustomListEntries={false}
+        isFetchingMoreSearchResults={false}
+        languages={languages}
+        library={library}
+        search={search}
+        setDraftCollections={setDraftCollections}
+        saveFormData={saveFormData}
+        loadMoreEntries={loadMoreEntries}
+        loadMoreSearchResults={loadMoreSearchResults}
+      />
+    </DragDropContext>
+  );
+
+  const entriesHeader = utils.getByRole("heading", {
+    level: 4,
+    name: "No books in this list",
+  });
+  expect(entriesHeader).toBeInTheDocument();
+});
+
+test("there is a container to display search results", () => {
+  const searchResultsContainer = utils.getByRole("region", {
+    name: "Search Results",
+  });
+
+  const searchResultsHeader = within(
+    searchResultsContainer
+  ).getByRole("heading", { level: 4 });
+
+  expect(searchResultsHeader).toHaveTextContent("Search Results");
+
+  const searchResultsDragInstructions = within(
+    searchResultsContainer
+  ).getByText("remove them from", {
+    exact: false,
+  });
+
+  expect(searchResultsDragInstructions).toBeInTheDocument();
+});
diff --git a/src/components/__tests_jest__/CustomListEditorHeader.test.js b/src/components/__tests_jest__/CustomListEditorHeader.test.js
new file mode 100644
index 000000000..646d5cb13
--- /dev/null
+++ b/src/components/__tests_jest__/CustomListEditorHeader.test.js
@@ -0,0 +1,87 @@
+import React from "react";
+import { render } from "../../testUtils/testUtils";
+import CustomListEditorHeader from "../CustomListEditorHeader";
+import { fireEvent } from "@testing-library/react";
+
+const setDraftTitle = jest.fn();
+const editCustomList = jest.fn();
+
+let utils;
+
+beforeAll(() => {
+  utils = render(
+    <CustomListEditorHeader
+      draftTitle="title"
+      listId={1}
+      setDraftTitle={setDraftTitle}
+      editCustomList={editCustomList}
+    />
+  );
+});
+
+test("if there is a list passed, its title and id renders on the page", () => {
+  const title = utils.getByRole("heading", { level: 3 });
+  expect(title).toHaveTextContent("title");
+
+  const id = utils.getByRole("heading", { level: 4 });
+  expect(id).toHaveTextContent("ID-1");
+
+  const titleButton = utils.getByRole("button", {
+    name: "Edit list title",
+  });
+
+  expect(titleButton).toBeInTheDocument();
+});
+
+test("if there is no list passed, the create form is rendered", () => {
+  utils = render(
+    <CustomListEditorHeader
+      draftTitle=""
+      setDraftTitle={setDraftTitle}
+      editCustomList={editCustomList}
+    />
+  );
+
+  const titleInput = utils.getByRole("textbox", {
+    name: "Enter a title for this list",
+  });
+
+  expect(titleInput).toHaveValue("");
+
+  const titleButton = utils.getByRole("button", {
+    name: "Save list title",
+  });
+
+  expect(titleButton).toBeInTheDocument();
+});
+
+test("a user can update the title", () => {
+  utils = render(
+    <CustomListEditorHeader
+      draftTitle=""
+      setDraftTitle={setDraftTitle}
+      editCustomList={editCustomList}
+    />
+  );
+
+  const titleInput = utils.getByRole("textbox", {
+    name: "Enter a title for this list",
+  });
+
+  expect(titleInput).toHaveValue("");
+
+  let titleButton = utils.getByRole("button", {
+    name: "Save list title",
+  });
+
+  fireEvent.change(titleInput, { target: { value: "new list" } });
+  fireEvent.click(titleButton);
+
+  expect(titleInput).toHaveValue("new list");
+
+  titleButton = utils.getByRole("button", {
+    name: "Edit list title",
+  });
+
+  expect(titleButton).toBeInTheDocument();
+});
diff --git a/src/components/__tests_jest__/CustomListEntries.test.js b/src/components/__tests_jest__/CustomListEntries.test.js
index d0e049a57..6fd4c3af7 100644
--- a/src/components/__tests_jest__/CustomListEntries.test.js
+++ b/src/components/__tests_jest__/CustomListEntries.test.js
@@ -56,7 +56,7 @@ const saveFormData = stub();
 const loadMoreEntries = stub();
 const onDragEnd = stub();
 
-test("renders header", () => {
+beforeAll(() => {
   render(
     <DragDropContext onDragEnd={onDragEnd}>
       <CustomListEntries
@@ -73,6 +73,10 @@ test("renders header", () => {
       />
     </DragDropContext>
   );
+});
 
-  waitFor(() => screen.getByText(/displaying/i));
+test("renders list entries", () => {
+  () => screen.getByText(/displaying/i);
+  () => screen.getByText(/entry a/i);
+  () => screen.getByText(/entry b/i);
 });
diff --git a/src/components/__tests_jest__/CustomListPage.test.js b/src/components/__tests_jest__/CustomListPage.test.js
index 494ab363f..e520540cb 100644
--- a/src/components/__tests_jest__/CustomListPage.test.js
+++ b/src/components/__tests_jest__/CustomListPage.test.js
@@ -2,8 +2,8 @@
  * The following is an example test meant to check that testUtils.jsx is working as expected.
  * */
 
+import { fireEvent } from "@testing-library/react";
 import React from "react";
-import { screen, waitFor } from "@testing-library/react";
 import { render } from "../../testUtils/testUtils";
 import CustomListPage from "../CustomListPage";
 
@@ -13,13 +13,18 @@ const params = {
   identifier: "identifier",
 };
 
-test("renders header", () => {
-  render(<CustomListPage params={params} />);
-  waitFor(() => screen.getByText(/hidden books/i));
+let utils;
+
+beforeEach(() => {
+  utils = render(<CustomListPage params={params} />);
 });
 
-test("renders footer", () => {
-  render(<CustomListPage params={params} />);
+test("renders header and footer", () => {
+  const header = utils.getByText(/hidden books/i);
+
+  expect(header).toBeInTheDocument();
+
+  const footer = utils.getByText(/terms of service/i);
 
-  waitFor(() => screen.getByText(/terms of service/i));
+  expect(footer).toBeInTheDocument();
 });
diff --git a/src/components/__tests_jest__/CustomLists.test.js b/src/components/__tests_jest__/CustomLists.test.js
new file mode 100644
index 000000000..f4ef1f588
--- /dev/null
+++ b/src/components/__tests_jest__/CustomLists.test.js
@@ -0,0 +1,114 @@
+// import { fireEvent, getAllByRole } from "@testing-library/react";
+// import React from "react";
+// import { render } from "../../testUtils/testUtils";
+// import CustomLists from "../CustomLists";
+
+// const listsData = [
+//   { id: 1, name: "a list", title: "a list", entry_count: 0, collections: [] },
+//   {
+//     id: 2,
+//     name: "z list",
+//     title: "z list",
+//     entry_count: 1,
+//     collections: [{ id: 3, name: "collection 3", protocol: "protocol" }],
+//   },
+// ];
+
+// const searchResults = {
+//   id: "id",
+//   url: "url",
+//   title: "title",
+//   lanes: [],
+//   books: [],
+//   navigationLinks: [],
+// };
+
+// const collections = [
+//   {
+//     id: 1,
+//     name: "collection 1",
+//     protocol: "protocol",
+//     libraries: [{ short_name: "other library" }],
+//   },
+//   {
+//     id: 2,
+//     name: "collection 2",
+//     protocol: "protocol",
+//     libraries: [{ short_name: "library" }],
+//   },
+//   {
+//     id: 3,
+//     name: "collection 3",
+//     protocol: "protocol",
+//     libraries: [{ short_name: "library" }],
+//   },
+// ];
+
+// const libraries = [
+//   {
+//     short_name: "library",
+//     settings: {
+//       enabled_entry_points: ["Book", "Audio"],
+//     },
+//   },
+//   {
+//     short_name: "another library",
+//     settings: {
+//       enabled_entry_points: ["Audio"],
+//     },
+//   },
+// ];
+
+// const languages = {
+//   eng: ["English"],
+//   spa: ["Spanish", "Castilian"],
+//   fre: ["French"],
+// };
+
+// const fetchCustomLists = jest.fn();
+// const fetchCustomListDetails = jest.fn();
+// const editCustomList = jest.fn();
+// const deleteCustomList = jest.fn();
+// const search = jest.fn();
+// const loadMoreSearchResults = jest.fn();
+// const loadMoreEntries = jest.fn();
+// const fetchCollections = jest.fn();
+// const fetchLibraries = jest.fn();
+// const fetchLanes = jest.fn();
+// const fetchLanguages = jest.fn();
+
+// const customListsProps = {
+//   csrfToken: "token",
+//   library: "library",
+//   lists: listsData,
+//   searchResults: searchResults,
+//   collections: collections,
+//   isFetching: false,
+//   isFetchingMoreSearchResults: false,
+//   isFetchingMoreCustomListEntries: false,
+//   fetchLanguages: fetchLanguages,
+//   fetchCustomLists: fetchCustomLists,
+//   fetchCustomListDetails: fetchCustomListDetails,
+//   editCustomList: editCustomList,
+//   deleteCustomList: deleteCustomList,
+//   search: search,
+//   loadMoreSearchResults: loadMoreSearchResults,
+//   loadMoreEntries: loadMoreEntries,
+//   fetchCollections: fetchCollections,
+//   fetchLibraries: fetchLibraries,
+//   fetchLanes: fetchLanes,
+//   libraries: libraries,
+//   languages: languages,
+// };
+
+// let utils;
+
+// beforeEach(() => {
+//   utils = render(<CustomLists {...customListsProps} />);
+// });
+
+// test("calls fetchCustomLists and fetchCustomListDetails when a list's edit button is clicked", () => {
+//   const editButtonListA = getAllByRole("button", { name: "Edit" })[0];
+
+//   expect(editButtonListA).toBeInTheDocument();
+// });
diff --git a/src/testUtils/testUtils.jsx b/src/testUtils/testUtils.jsx
index 95ca99f7c..0c2878ff7 100644
--- a/src/testUtils/testUtils.jsx
+++ b/src/testUtils/testUtils.jsx
@@ -2,8 +2,6 @@ import React from "react";
 import { render } from "@testing-library/react";
 import ContextProvider from "../components/ContextProvider";
 import { TOSContextProvider } from "../components/TOSContext";
-import { Router, Route } from "react-router";
-import { createMemoryHistory } from "history";
 
 const mockConfig = {
   csrfToken: "token",
@@ -16,15 +14,12 @@ const mockConfig = {
 };
 
 const AllTheProviders = ({ children }) => {
-  const history = createMemoryHistory();
   return (
     <ContextProvider {...mockConfig}>
       <TOSContextProvider
         value={[mockConfig.tos_link_text, mockConfig.tos_link_href]}
       >
-        <Router history={history}>
-          <Route path={"/"}>{children}</Route>
-        </Router>
+        {children}
       </TOSContextProvider>
     </ContextProvider>
   );

From cd28e79ba31c0fd239bbe43209b11d6d7d9354c3 Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Tue, 15 Feb 2022 11:13:17 -0500
Subject: [PATCH 2/6] Updates CHANGELOG

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acbbec646..08336f05f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 ## Changelog
 
+### 02/14/22
+
+#### Updated
+
+- Removed the router from the testUtils render function, which was causing testing issues.
+- Created a new CatalogLink component that doesn't rely on the ContextProvider (related to the issue above).
+- Wrote tests using RTL for two main components in the List Manager, CustomListEditorHeader and CustomListEditorBody.
 
 ### v0.5.15
 

From 387b1b2b240da62f2ef6c15f5c216fd8b271e555 Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Tue, 15 Feb 2022 11:16:57 -0500
Subject: [PATCH 3/6] Updates version number

---
 CHANGELOG.md      | 2 +-
 package-lock.json | 2 +-
 package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08336f05f..658ce5069 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## Changelog
 
-### 02/14/22
+### v0.5.16
 
 #### Updated
 
diff --git a/package-lock.json b/package-lock.json
index 88ef295cf..95624a30a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "simplified-circulation-web",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 0bd6f0642..9b93b7942 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simplified-circulation-web",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "Web Front-end for Library Simplified Circulation Manager Admin Interface",
   "repository": {
     "type": "git",

From 28e52864fe26e588d46285026df73f5c16827ebb Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Tue, 15 Feb 2022 11:33:05 -0500
Subject: [PATCH 4/6] Skips test that is not working

---
 .../__tests_jest__/CustomLists.test.js        | 208 +++++++++---------
 1 file changed, 105 insertions(+), 103 deletions(-)

diff --git a/src/components/__tests_jest__/CustomLists.test.js b/src/components/__tests_jest__/CustomLists.test.js
index f4ef1f588..a7ee838c4 100644
--- a/src/components/__tests_jest__/CustomLists.test.js
+++ b/src/components/__tests_jest__/CustomLists.test.js
@@ -1,114 +1,116 @@
-// import { fireEvent, getAllByRole } from "@testing-library/react";
-// import React from "react";
-// import { render } from "../../testUtils/testUtils";
-// import CustomLists from "../CustomLists";
+import { getAllByRole, waitFor } from "@testing-library/react";
+import React from "react";
+import { render } from "../../testUtils/testUtils";
+import CustomLists from "../CustomLists";
 
-// const listsData = [
-//   { id: 1, name: "a list", title: "a list", entry_count: 0, collections: [] },
-//   {
-//     id: 2,
-//     name: "z list",
-//     title: "z list",
-//     entry_count: 1,
-//     collections: [{ id: 3, name: "collection 3", protocol: "protocol" }],
-//   },
-// ];
+const listsData = [
+  { id: 1, name: "a list", title: "a list", entry_count: 0, collections: [] },
+  {
+    id: 2,
+    name: "z list",
+    title: "z list",
+    entry_count: 1,
+    collections: [{ id: 3, name: "collection 3", protocol: "protocol" }],
+  },
+];
 
-// const searchResults = {
-//   id: "id",
-//   url: "url",
-//   title: "title",
-//   lanes: [],
-//   books: [],
-//   navigationLinks: [],
-// };
+const searchResults = {
+  id: "id",
+  url: "url",
+  title: "title",
+  lanes: [],
+  books: [],
+  navigationLinks: [],
+};
 
-// const collections = [
-//   {
-//     id: 1,
-//     name: "collection 1",
-//     protocol: "protocol",
-//     libraries: [{ short_name: "other library" }],
-//   },
-//   {
-//     id: 2,
-//     name: "collection 2",
-//     protocol: "protocol",
-//     libraries: [{ short_name: "library" }],
-//   },
-//   {
-//     id: 3,
-//     name: "collection 3",
-//     protocol: "protocol",
-//     libraries: [{ short_name: "library" }],
-//   },
-// ];
+const collections = [
+  {
+    id: 1,
+    name: "collection 1",
+    protocol: "protocol",
+    libraries: [{ short_name: "other library" }],
+  },
+  {
+    id: 2,
+    name: "collection 2",
+    protocol: "protocol",
+    libraries: [{ short_name: "library" }],
+  },
+  {
+    id: 3,
+    name: "collection 3",
+    protocol: "protocol",
+    libraries: [{ short_name: "library" }],
+  },
+];
 
-// const libraries = [
-//   {
-//     short_name: "library",
-//     settings: {
-//       enabled_entry_points: ["Book", "Audio"],
-//     },
-//   },
-//   {
-//     short_name: "another library",
-//     settings: {
-//       enabled_entry_points: ["Audio"],
-//     },
-//   },
-// ];
+const libraries = [
+  {
+    short_name: "library",
+    settings: {
+      enabled_entry_points: ["Book", "Audio"],
+    },
+  },
+  {
+    short_name: "another library",
+    settings: {
+      enabled_entry_points: ["Audio"],
+    },
+  },
+];
 
-// const languages = {
-//   eng: ["English"],
-//   spa: ["Spanish", "Castilian"],
-//   fre: ["French"],
-// };
+const languages = {
+  eng: ["English"],
+  spa: ["Spanish", "Castilian"],
+  fre: ["French"],
+};
 
-// const fetchCustomLists = jest.fn();
-// const fetchCustomListDetails = jest.fn();
-// const editCustomList = jest.fn();
-// const deleteCustomList = jest.fn();
-// const search = jest.fn();
-// const loadMoreSearchResults = jest.fn();
-// const loadMoreEntries = jest.fn();
-// const fetchCollections = jest.fn();
-// const fetchLibraries = jest.fn();
-// const fetchLanes = jest.fn();
-// const fetchLanguages = jest.fn();
+const fetchCustomLists = jest.fn();
+const fetchCustomListDetails = jest.fn();
+const editCustomList = jest.fn();
+const deleteCustomList = jest.fn();
+const search = jest.fn();
+const loadMoreSearchResults = jest.fn();
+const loadMoreEntries = jest.fn();
+const fetchCollections = jest.fn();
+const fetchLibraries = jest.fn();
+const fetchLanes = jest.fn();
+const fetchLanguages = jest.fn();
 
-// const customListsProps = {
-//   csrfToken: "token",
-//   library: "library",
-//   lists: listsData,
-//   searchResults: searchResults,
-//   collections: collections,
-//   isFetching: false,
-//   isFetchingMoreSearchResults: false,
-//   isFetchingMoreCustomListEntries: false,
-//   fetchLanguages: fetchLanguages,
-//   fetchCustomLists: fetchCustomLists,
-//   fetchCustomListDetails: fetchCustomListDetails,
-//   editCustomList: editCustomList,
-//   deleteCustomList: deleteCustomList,
-//   search: search,
-//   loadMoreSearchResults: loadMoreSearchResults,
-//   loadMoreEntries: loadMoreEntries,
-//   fetchCollections: fetchCollections,
-//   fetchLibraries: fetchLibraries,
-//   fetchLanes: fetchLanes,
-//   libraries: libraries,
-//   languages: languages,
-// };
+const customListsProps = {
+  csrfToken: "token",
+  library: "library",
+  lists: listsData,
+  searchResults: searchResults,
+  collections: collections,
+  isFetching: false,
+  isFetchingMoreSearchResults: false,
+  isFetchingMoreCustomListEntries: false,
+  fetchLanguages: fetchLanguages,
+  fetchCustomLists: fetchCustomLists,
+  fetchCustomListDetails: fetchCustomListDetails,
+  editCustomList: editCustomList,
+  deleteCustomList: deleteCustomList,
+  search: search,
+  loadMoreSearchResults: loadMoreSearchResults,
+  loadMoreEntries: loadMoreEntries,
+  fetchCollections: fetchCollections,
+  fetchLibraries: fetchLibraries,
+  fetchLanes: fetchLanes,
+  libraries: libraries,
+  languages: languages,
+};
 
-// let utils;
+let utils;
 
-// beforeEach(() => {
-//   utils = render(<CustomLists {...customListsProps} />);
-// });
+beforeEach(() => {
+  utils = render(<CustomLists {...customListsProps} />);
+});
 
-// test("calls fetchCustomLists and fetchCustomListDetails when a list's edit button is clicked", () => {
-//   const editButtonListA = getAllByRole("button", { name: "Edit" })[0];
+test.skip("calls fetchCustomLists and fetchCustomListDetails when a list's edit button is clicked", () => {
+  const editButtonListA = waitFor(
+    () => getAllByRole("button", { name: "Edit" })[0]
+  );
 
-//   expect(editButtonListA).toBeInTheDocument();
-// });
+  waitFor(() => expect(editButtonListA).toBeInTheDocument());
+});

From 01ea9bdf4c2064772ce25f200dea97f3b2f3f7b4 Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Tue, 15 Feb 2022 13:29:49 -0500
Subject: [PATCH 5/6] Adds interface for CatalogLink, updates CHANGELOG

---
 CHANGELOG.md                   |  2 +-
 src/components/CatalogLink.tsx | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 658ce5069..4c8efe742 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 #### Updated
 
-- Removed the router from the testUtils render function, which was causing testing issues.
+- Removed the router from the testUtils render function, which was causing testing issues with the RTL/Jest tests.
 - Created a new CatalogLink component that doesn't rely on the ContextProvider (related to the issue above).
 - Wrote tests using RTL for two main components in the List Manager, CustomListEditorHeader and CustomListEditorBody.
 
diff --git a/src/components/CatalogLink.tsx b/src/components/CatalogLink.tsx
index 5b71afe3f..e44dfeee0 100644
--- a/src/components/CatalogLink.tsx
+++ b/src/components/CatalogLink.tsx
@@ -1,8 +1,14 @@
 import * as React from "react";
 import { Link } from "react-router";
 
-export default function CatalogLink({ url, title, label }) {
-  const prepareBookUrl = (url: string): string => {
+interface CatalogLinkProps {
+  url: string;
+  title: string;
+  label: string;
+}
+
+export default function CatalogLink({ url, title, label }: CatalogLinkProps) {
+  const prepareBookUrl = (url): string => {
     const regexp = new RegExp(document.location.origin + "/(.*)/works/(.*)");
     const match = regexp.exec(url);
     if (match) {
@@ -14,7 +20,7 @@ export default function CatalogLink({ url, title, label }) {
     }
   };
 
-  const pathFor = (bookUrl: string) => {
+  const pathFor = (bookUrl) => {
     let path = "/admin/web";
     path += bookUrl ? `/book/${prepareBookUrl(bookUrl)}` : "";
     return path;

From e0171593c897232e2ded937d4c88dcc7c682d853 Mon Sep 17 00:00:00 2001
From: Olivia Wong <oliviawong@nypl.org>
Date: Wed, 16 Feb 2022 12:37:12 -0500
Subject: [PATCH 6/6] Responds to feedback on PR

---
 CHANGELOG.md                                  |   2 +-
 src/components/CustomListEntries.tsx          |   8 +-
 src/components/CustomListInfo.tsx             |   1 -
 .../CustomListEditorBody.test.js              | 161 ++++++++++--------
 .../CustomListEditorHeader.test.js            | 123 ++++++-------
 .../__tests_jest__/CustomListEntries.test.js  |   2 +-
 .../__tests_jest__/CustomLists.test.js        |   3 +
 7 files changed, 161 insertions(+), 139 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c8efe742..d946f3220 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 #### Updated
 
 - Removed the router from the testUtils render function, which was causing testing issues with the RTL/Jest tests.
-- Created a new CatalogLink component that doesn't rely on the ContextProvider (related to the issue above).
+- Created a new CatalogLink component that doesn't rely on the ContextProvider (related to the issue above). This component is currently only used in the List Manager.
 - Wrote tests using RTL for two main components in the List Manager, CustomListEditorHeader and CustomListEditorBody.
 
 ### v0.5.15
diff --git a/src/components/CustomListEntries.tsx b/src/components/CustomListEntries.tsx
index 3bc2fd85f..41a35ed9d 100644
--- a/src/components/CustomListEntries.tsx
+++ b/src/components/CustomListEntries.tsx
@@ -75,11 +75,7 @@ export default function CustomListEntries({
     }
   };
   return (
-    <div
-      role="region"
-      aria-label="List Entries"
-      className="custom-list-entries"
-    >
+    <section aria-label="List Entries" className="custom-list-entries">
       <div className="droppable-header">
         {showSaveError && (
           <p className="save-list-error">
@@ -136,6 +132,6 @@ export default function CustomListEntries({
           loadMore={onLoadMore}
         />
       )}
-    </div>
+    </section>
   );
 }
diff --git a/src/components/CustomListInfo.tsx b/src/components/CustomListInfo.tsx
index 7a4b11921..2cd6b44a0 100644
--- a/src/components/CustomListInfo.tsx
+++ b/src/components/CustomListInfo.tsx
@@ -73,7 +73,6 @@ export default function CustomListInfo({
           <Link
             to={"/admin/web/lists/" + library + "/edit/" + list.id}
             className="btn left-align small"
-            role="button"
           >
             <span>
               Edit
diff --git a/src/components/__tests_jest__/CustomListEditorBody.test.js b/src/components/__tests_jest__/CustomListEditorBody.test.js
index b32923864..b57c20179 100644
--- a/src/components/__tests_jest__/CustomListEditorBody.test.js
+++ b/src/components/__tests_jest__/CustomListEditorBody.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { within } from "@testing-library/react";
+import { within, waitFor } from "@testing-library/react";
 import { render } from "../../testUtils/testUtils";
 import CustomListEditorBody from "../CustomListEditorBody";
 import { DragDropContext } from "react-beautiful-dnd";
@@ -99,86 +99,105 @@ const setDraftCollections = jest.fn();
 const onDragEnd = jest.fn();
 let utils;
 
-beforeEach(() => {
-  utils = render(
-    <DragDropContext onDragEnd={onDragEnd}>
-      <CustomListEditorBody
-        entries={listData.books}
-        draftTitle={listData.title}
-        isFetchingMoreCustomListEntries={false}
-        isFetchingMoreSearchResults={false}
-        languages={languages}
-        library={library}
-        listId={listData.id}
-        search={search}
-        setDraftCollections={setDraftCollections}
-        saveFormData={saveFormData}
-        loadMoreEntries={loadMoreEntries}
-        loadMoreSearchResults={loadMoreSearchResults}
-        totalListEntries={2}
-      />
-    </DragDropContext>
-  );
-});
-
-test("if there are entries passed, they render on the page", () => {
-  const entriesHeader = utils.getByRole("heading", {
-    level: 4,
-    name: "Displaying 1 - 2 of 2 Books",
+describe("CustomListBodyEditor", () => {
+  beforeEach(() => {
+    utils = render(
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CustomListEditorBody
+          entries={listData.books}
+          draftTitle={listData.title}
+          isFetchingMoreCustomListEntries={false}
+          isFetchingMoreSearchResults={false}
+          languages={languages}
+          library={library}
+          listId={listData.id}
+          search={search}
+          setDraftCollections={setDraftCollections}
+          saveFormData={saveFormData}
+          loadMoreEntries={loadMoreEntries}
+          loadMoreSearchResults={loadMoreSearchResults}
+          totalListEntries={2}
+        />
+      </DragDropContext>
+    );
   });
-  expect(entriesHeader).toBeInTheDocument();
 
-  const entries = utils.getAllByRole("list")[1];
+  test("if there are entries passed, they render on the page", () => {
+    const entriesHeader = utils.getByRole("heading", {
+      level: 4,
+      name: "Displaying 1 - 2 of 2 Books",
+    });
+    expect(entriesHeader).toBeInTheDocument();
 
-  const entryA = within(entries).getByText("entry A");
-  const entryB = within(entries).getByText("entry B");
+    const lists = utils.queryAllByRole("list");
 
-  expect(entryA).toBeInTheDocument();
-  expect(entryB).toBeInTheDocument();
-});
+    expect(lists).toHaveLength(2);
+
+    const entries = utils.getAllByRole("list")[1];
+
+    const entryA = within(entries).queryAllByText("entry A");
+    const entryB = within(entries).queryAllByText("entry B");
 
-test("if there are no entries, then none render", () => {
-  utils = render(
-    <DragDropContext onDragEnd={onDragEnd}>
-      <CustomListEditorBody
-        entries={[]}
-        draftTitle={""}
-        isFetchingMoreCustomListEntries={false}
-        isFetchingMoreSearchResults={false}
-        languages={languages}
-        library={library}
-        search={search}
-        setDraftCollections={setDraftCollections}
-        saveFormData={saveFormData}
-        loadMoreEntries={loadMoreEntries}
-        loadMoreSearchResults={loadMoreSearchResults}
-      />
-    </DragDropContext>
-  );
-
-  const entriesHeader = utils.getByRole("heading", {
-    level: 4,
-    name: "No books in this list",
+    expect(entryA).toHaveLength(1);
+    expect(entryB).toHaveLength(1);
   });
-  expect(entriesHeader).toBeInTheDocument();
-});
 
-test("there is a container to display search results", () => {
-  const searchResultsContainer = utils.getByRole("region", {
-    name: "Search Results",
+  test("if there are no entries, then none render", () => {
+    const { rerender } = utils;
+    rerender(
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CustomListEditorBody
+          entries={[]}
+          draftTitle={""}
+          isFetchingMoreCustomListEntries={false}
+          isFetchingMoreSearchResults={false}
+          languages={languages}
+          library={library}
+          search={search}
+          setDraftCollections={setDraftCollections}
+          saveFormData={saveFormData}
+          loadMoreEntries={loadMoreEntries}
+          loadMoreSearchResults={loadMoreSearchResults}
+        />
+      </DragDropContext>
+    );
+
+    const lists = utils.queryAllByRole("list");
+
+    expect(lists).toHaveLength(2);
+
+    const entries = utils.getAllByRole("list")[1];
+
+    const entryA = within(entries).queryAllByText("entry A");
+    const entryB = within(entries).queryAllByText("entry B");
+
+    expect(entryA).toHaveLength(0);
+    expect(entryB).toHaveLength(0);
+
+    const entriesHeader = utils.getByRole("heading", {
+      level: 4,
+      name: "No books in this list",
+    });
+    expect(entriesHeader).toBeInTheDocument();
   });
 
-  const searchResultsHeader = within(
-    searchResultsContainer
-  ).getByRole("heading", { level: 4 });
+  test("there is a container to display search results", () => {
+    const searchResultsContainer = utils.getByRole("region", {
+      name: "Search Results",
+    });
 
-  expect(searchResultsHeader).toHaveTextContent("Search Results");
+    const searchResultsHeader = within(
+      searchResultsContainer
+    ).getByRole("heading", { level: 4 });
 
-  const searchResultsDragInstructions = within(
-    searchResultsContainer
-  ).getByText("remove them from", {
-    exact: false,
-  });
+    expect(searchResultsHeader).toHaveTextContent("Search Results");
 
-  expect(searchResultsDragInstructions).toBeInTheDocument();
+    const searchResultsDragInstructions = within(
+      searchResultsContainer
+    ).getByText("remove them from", {
+      exact: false,
+    });
+
+    expect(searchResultsDragInstructions).toBeInTheDocument();
+  });
 });
diff --git a/src/components/__tests_jest__/CustomListEditorHeader.test.js b/src/components/__tests_jest__/CustomListEditorHeader.test.js
index 646d5cb13..ae0891675 100644
--- a/src/components/__tests_jest__/CustomListEditorHeader.test.js
+++ b/src/components/__tests_jest__/CustomListEditorHeader.test.js
@@ -8,80 +8,85 @@ const editCustomList = jest.fn();
 
 let utils;
 
-beforeAll(() => {
-  utils = render(
-    <CustomListEditorHeader
-      draftTitle="title"
-      listId={1}
-      setDraftTitle={setDraftTitle}
-      editCustomList={editCustomList}
-    />
-  );
-});
+describe("CustomListEditorHeader", () => {
+  beforeAll(() => {
+    utils = render(
+      <CustomListEditorHeader
+        draftTitle="title"
+        listId={1}
+        setDraftTitle={setDraftTitle}
+        editCustomList={editCustomList}
+      />
+    );
+  });
 
-test("if there is a list passed, its title and id renders on the page", () => {
-  const title = utils.getByRole("heading", { level: 3 });
-  expect(title).toHaveTextContent("title");
+  test("if there is a list passed, its title and id renders on the page", () => {
+    const title = utils.getByRole("heading", { level: 3 });
 
-  const id = utils.getByRole("heading", { level: 4 });
-  expect(id).toHaveTextContent("ID-1");
+    expect(title).toHaveTextContent("title");
 
-  const titleButton = utils.getByRole("button", {
-    name: "Edit list title",
-  });
+    const id = utils.getByRole("heading", { level: 4 });
 
-  expect(titleButton).toBeInTheDocument();
-});
+    // The UI prefixes the id with "ID-".
+    expect(id).toHaveTextContent("ID-1");
 
-test("if there is no list passed, the create form is rendered", () => {
-  utils = render(
-    <CustomListEditorHeader
-      draftTitle=""
-      setDraftTitle={setDraftTitle}
-      editCustomList={editCustomList}
-    />
-  );
-
-  const titleInput = utils.getByRole("textbox", {
-    name: "Enter a title for this list",
+    const titleButton = utils.getByRole("button", {
+      name: "Edit list title",
+    });
+
+    expect(titleButton).toBeInTheDocument();
   });
 
-  expect(titleInput).toHaveValue("");
+  test("if there is no list passed, the create form is rendered", () => {
+    utils = render(
+      <CustomListEditorHeader
+        draftTitle=""
+        setDraftTitle={setDraftTitle}
+        editCustomList={editCustomList}
+      />
+    );
 
-  const titleButton = utils.getByRole("button", {
-    name: "Save list title",
-  });
+    const titleInput = utils.getByRole("textbox", {
+      name: "Enter a title for this list",
+    });
 
-  expect(titleButton).toBeInTheDocument();
-});
+    expect(titleInput).toHaveValue("");
 
-test("a user can update the title", () => {
-  utils = render(
-    <CustomListEditorHeader
-      draftTitle=""
-      setDraftTitle={setDraftTitle}
-      editCustomList={editCustomList}
-    />
-  );
-
-  const titleInput = utils.getByRole("textbox", {
-    name: "Enter a title for this list",
+    const titleButton = utils.getByRole("button", {
+      name: "Save list title",
+    });
+
+    expect(titleButton).toBeInTheDocument();
   });
 
-  expect(titleInput).toHaveValue("");
+  test("a user can update the title", () => {
+    utils = render(
+      <CustomListEditorHeader
+        draftTitle=""
+        setDraftTitle={setDraftTitle}
+        editCustomList={editCustomList}
+      />
+    );
 
-  let titleButton = utils.getByRole("button", {
-    name: "Save list title",
-  });
+    const titleInput = utils.getByRole("textbox", {
+      name: "Enter a title for this list",
+    });
 
-  fireEvent.change(titleInput, { target: { value: "new list" } });
-  fireEvent.click(titleButton);
+    expect(titleInput).toHaveValue("");
 
-  expect(titleInput).toHaveValue("new list");
+    let titleButton = utils.getByRole("button", {
+      name: "Save list title",
+    });
 
-  titleButton = utils.getByRole("button", {
-    name: "Edit list title",
-  });
+    fireEvent.change(titleInput, { target: { value: "new list" } });
+    fireEvent.click(titleButton);
 
-  expect(titleButton).toBeInTheDocument();
+    expect(titleInput).toHaveValue("new list");
+
+    titleButton = utils.getByRole("button", {
+      name: "Edit list title",
+    });
+
+    expect(titleButton).toBeInTheDocument();
+  });
 });
diff --git a/src/components/__tests_jest__/CustomListEntries.test.js b/src/components/__tests_jest__/CustomListEntries.test.js
index 6fd4c3af7..ba945a7d9 100644
--- a/src/components/__tests_jest__/CustomListEntries.test.js
+++ b/src/components/__tests_jest__/CustomListEntries.test.js
@@ -3,7 +3,7 @@
  * */
 
 import React from "react";
-import { screen, waitFor } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { render } from "../../testUtils/testUtils";
 import { stub } from "sinon";
 import CustomListEntries from "../CustomListEntries";
diff --git a/src/components/__tests_jest__/CustomLists.test.js b/src/components/__tests_jest__/CustomLists.test.js
index a7ee838c4..0608ba773 100644
--- a/src/components/__tests_jest__/CustomLists.test.js
+++ b/src/components/__tests_jest__/CustomLists.test.js
@@ -107,6 +107,9 @@ beforeEach(() => {
   utils = render(<CustomLists {...customListsProps} />);
 });
 
+// Skipping this test for now. Tests for this component fail because the store cannot be found.
+// However, the store should be created in the context, which I wrapped around all test components
+// in testUtils. This will need further investigation to resolve.
 test.skip("calls fetchCustomLists and fetchCustomListDetails when a list's edit button is clicked", () => {
   const editButtonListA = waitFor(
     () => getAllByRole("button", { name: "Edit" })[0]