[OUR415-314] Fixes eligibility and category lists in Browse Experience

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

@@ -3,30 +3,17 @@ 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";
+import { createRandomCategories } from "../../../../test/helpers/createRandomCategories";
 
 describe("BrowseRefinementList", () => {
-  test("renders the default limit of 10 refinements", async () => {
+  test("renders all categories returned by the search client", async () => {
+    const numCategories = 25;
     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,
-        },
+        categories: createRandomCategories(numCategories),
       },
     });
 
-    const expected = 10;
-
     render(
       <InstantSearch
         searchClient={searchClient}
@@ -38,7 +25,7 @@ describe("BrowseRefinementList", () => {
 
     await waitFor(() => {
       expect(screen.getAllByTestId("browserefinementlist-item")).toHaveLength(
-        expected
+        numCategories
       );
     });
   });

app/components/search/Refinements/BrowseRefinementList.tsx

@@ -7,6 +7,9 @@ interface Props extends UseRefinementListProps {
   attribute: string;
 }
 
+// Arbitrary upper limit to ensure all refinements are displayed
+const MAXIMUM_ITEMS = 9999;
+
 /**
  * Facet refinement list component for browse interfaces
  */
@@ -16,6 +19,7 @@ const BrowseRefinementList = ({ attribute, transform }: Props) => {
     attribute,
     sortBy: ["name:asc"],
     transformItems: transform,
+    limit: MAXIMUM_ITEMS,
   });
 
   useEffect(() => {

app/components/search/Refinements/SearchRefinementList.tsx

@@ -7,7 +7,8 @@ interface Props extends UseRefinementListProps {
 }
 
 const DEFAULT_CONFIG = {
-  limit: 100,
+  // Arbitrary upper limit to ensure all refinements are displayed
+  limit: 9999,
   operator: "or" as const,
 };
 

app/components/search/Sidebar/Sidebar.module.scss

@@ -38,6 +38,7 @@
     align-self: flex-start;
     border-right: 0;
     background-color: #fff;
+    z-index: $z-index-filters-menu;
   }
 
   @media screen and (max-width: $break-tablet-s) {
@@ -67,7 +68,7 @@
 
   @media screen and (max-width: $break-tablet-s) {
     width: 100%;
-    top: 65px;
+    top: 131px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
     animation-name: slideUp;

app/components/ui/Navigation/DropdownMenu.module.scss

@@ -1,16 +1,9 @@
 @import "../../../styles/utils/_helpers.scss";
 @import "../../../styles/utils/_colors.scss";
 
-.navigationMenuContainer {
-  // Important to override react-burger-menu lib styles
-  display: flex !important;
-  flex-direction: column;
-  align-items: center;
-
-  > * {
-    font-size: 18px;
-    font-family: Montserrat;
-  }
+.navigationMenuContainer > * {
+  font-size: 18px;
+  font-family: Montserrat;
 }
 
 .navigationSubMenu {
@@ -22,6 +15,11 @@
   border-radius: $rounded-md;
   overflow: hidden;
   font-weight: 400;
+  width: max-content;
+
+  @media screen and (max-width: $break-tablet-s) {
+    top: 46px;
+  }
 }
 
 .navigationMenuHeader {
@@ -92,11 +90,11 @@
 
 .categoryMenuContainer {
   position: relative;
-  min-width: 160px;
 
   .navigationSubMenu {
-    top: 50px;
-    left: 0;
+    @include r_max($break-tablet-s) {
+      width: calc(100vw - $general-spacing-xs);
+    }
   }
 
   .navigationMenuHeader {

package.json

@@ -59,6 +59,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.4.4",
     "@eslint/js": "^9.10.0",
+    "@faker-js/faker": "^9.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",

test/helpers/createRandomCategories.ts

@@ -0,0 +1,20 @@
+import { faker } from "@faker-js/faker";
+
+/**
+ * Generates an object of categories for use in search refinement components
+ *
+ * @param size Customize the number of categories
+ */
+export function createRandomCategories(size: number) {
+  const result: { [key: string]: number } = {};
+
+  for (let i = 0; i < size; i++) {
+    // Append incrementor because the current version of faker does not support
+    // uniqueness
+    const key = `${faker.company.name()}_${i}`;
+    const value = faker.number.int(100);
+    result[key] = value;
+  }
+
+  return result;
+}