diff --git a/app/components/search/Refinements/BrowseRefinementList.test.tsx b/app/components/search/Refinements/BrowseRefinementList.test.tsx index 76666dc14..d81aa966d 100644 --- a/app/components/search/Refinements/BrowseRefinementList.test.tsx +++ b/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( { await waitFor(() => { expect(screen.getAllByTestId("browserefinementlist-item")).toHaveLength( - expected + numCategories ); }); }); diff --git a/app/components/search/Refinements/BrowseRefinementList.tsx b/app/components/search/Refinements/BrowseRefinementList.tsx index 861455f68..6e77cb75e 100644 --- a/app/components/search/Refinements/BrowseRefinementList.tsx +++ b/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(() => { diff --git a/app/components/search/Refinements/SearchRefinementList.tsx b/app/components/search/Refinements/SearchRefinementList.tsx index 9e03fbb57..f6e2f133e 100644 --- a/app/components/search/Refinements/SearchRefinementList.tsx +++ b/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, }; diff --git a/app/components/search/Sidebar/Sidebar.module.scss b/app/components/search/Sidebar/Sidebar.module.scss index e03c60a17..fbd0ed55c 100644 --- a/app/components/search/Sidebar/Sidebar.module.scss +++ b/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; diff --git a/app/components/ui/Navigation/DropdownMenu.module.scss b/app/components/ui/Navigation/DropdownMenu.module.scss index a1dd9b8dc..1cb858773 100644 --- a/app/components/ui/Navigation/DropdownMenu.module.scss +++ b/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 { diff --git a/package-lock.json b/package-lock.json index 827f9ddff..5567dc384 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,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", @@ -2583,6 +2584,22 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@faker-js/faker": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-9.2.0.tgz", + "integrity": "sha512-ulqQu4KMr1/sTFIYvqSdegHT8NIkt66tFAkugGnHA+1WAfEn6hMzNR+svjXGFRVLnapxvej67Z/LwchFrnLBUg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/fakerjs" + } + ], + "engines": { + "node": ">=18.0.0", + "npm": ">=9.0.0" + } + }, "node_modules/@googlemaps/js-api-loader": { "version": "1.16.8", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz", diff --git a/package.json b/package.json index 62863f2d6..754631134 100644 --- a/package.json +++ b/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", diff --git a/test/helpers/createRandomCategories.ts b/test/helpers/createRandomCategories.ts new file mode 100644 index 000000000..200caa364 --- /dev/null +++ b/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; +}