[OUR415-314] Improves our test story with test templates and helpers …

…for search; adds `BrowserRefinementList` component test (#259)

app/components/search/Refinements/BrowseRefinementList.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { InstantSearch } from "react-instantsearch-core";
+import { render, screen, waitFor } from "@testing-library/react";
+import BrowseRefinementList from "components/search/Refinements/BrowseRefinementList";
+import { createSearchClient } from "../../../../test/helpers/createSearchClient";
+
+describe("BrowseRefinementList", () => {
+  test("renders the default limit of 10 refinements", async () => {
+    const searchClient = createSearchClient({
+      facets: {
+        categories: {
+          A: 54,
+          B: 35,
+          C: 28,
+          D: 24,
+          E: 18,
+          F: 14,
+          G: 14,
+          H: 12,
+          I: 45,
+          J: 79,
+          K: 1,
+          L: 31,
+        },
+      },
+    });
+
+    const expected = 10;
+
+    render(
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="fake_test_search_index"
+      >
+        <BrowseRefinementList attribute="categories" />
+      </InstantSearch>
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("browserefinementlist-item")).toHaveLength(
+        expected
+      );
+    });
+  });
+});

app/components/search/Refinements/BrowseRefinementList.tsx

@@ -42,7 +42,7 @@ const BrowseRefinementList = ({ attribute, transform }: Props) => {
   return (
     <ul>
       {items.map((item) => (
-        <li key={item.label}>
+        <li key={item.label} data-testid={"browserefinementlist-item"}>
           <label className={styles.checkBox}>
             {item.label}
             <input

jest.config.ts

@@ -160,9 +160,7 @@ const config: Config = {
   // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  testPathIgnorePatterns: ["/templates"],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],

test/helpers/createSearchClient.ts

@@ -0,0 +1,50 @@
+interface Options {
+  [key: string]: any;
+}
+
+/**
+ * Generates search client fixture for testing components that rely on hooks
+ * from the Algolia instantsearch library.
+ *
+ * Example usage:
+ * ```
+ * const searchClient = createSearchClient({
+ *   facets: {
+ *     categories: {
+ *       "Arts, Culture & Identity": 54,
+ *       Education: 28,
+ *     },
+ *   },
+ * });
+ *
+ * render(
+ *   <InstantSearch
+ *     searchClient={searchClient}
+ *     indexName="fake_test_search_index"
+ *   >
+ *     <BrowseRefinementList attribute="categories" />
+ *   </InstantSearch>
+ * );
+ * ```
+ *
+ * @param options Additional customizations of the search response
+ * @returns
+ */
+export function createSearchClient(options: Options) {
+  return {
+    search: (requests: any) =>
+      Promise.resolve({
+        results: requests.map(() => ({
+          hits: [],
+          page: 0,
+          nbHits: 0,
+          nbPages: 0,
+          hitsPerPage: 0,
+          processingTimeMS: 1,
+          params: "",
+          query: "",
+          ...options,
+        })),
+      }),
+  };
+}

test/templates/Template.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * Template for a simple component test
+ *
+ * Usage: Duplicate this file and rename it using your component name. Happy
+ * coding from there!
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+// Normally imported from components directory
+const MyFakeComponent = ({ text }: { text: string }) => <>{text}</>;
+
+describe("<MyFakeComponent />", () => {
+  const parameters = {
+    text: "expected content",
+  };
+
+  it("renders", () => {
+    render(<MyFakeComponent {...parameters} />, { wrapper: BrowserRouter });
+    expect(screen.getByTestId("my-component-test-id")).toHaveTextContent(
+      parameters.text
+    );
+  });
+});