Include zero count active facets in facet options

package.json

@@ -38,6 +38,8 @@
   "homepage": "https://github.com/mitodl/course-search-utils#readme",
   "dependencies": {
     "@mitodl/open-api-axios": "^2024.3.22",
+    "@testing-library/react": "12",
+    "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.7",
     "fuse.js": "^7.0.0",
     "query-string": "^6.13.1",

src/facet_display/FacetDisplay.test.tsx

@@ -1,118 +1,200 @@
 import React from "react"
-import { shallow } from "enzyme"
+import { render, screen, within } from "@testing-library/react"
+import user from "@testing-library/user-event"
 
-import {
-  default as FacetDisplay,
-  AvailableFacets,
-  getDepartmentName,
-  getLevelName
-} from "./FacetDisplay"
-import { FacetManifest, Facets } from "./types"
+import FacetDisplay, { getDepartmentName } from "./FacetDisplay"
+import type { FacetDisplayProps } from "./FacetDisplay"
+import { Bucket, FacetManifest, Facets } from "./types"
 
 describe("FacetDisplay component", () => {
-  const facetMap: FacetManifest = [
+  const defaultFacetMap: FacetManifest = [
     {
       name:               "topic",
       title:              "Topics",
       useFilterableFacet: false,
-      expandedOnLoad:     false
-    },
-    {
-      name:               "resource_type",
-      title:              "Types",
-      useFilterableFacet: false,
-      expandedOnLoad:     false
+      expandedOnLoad:     true
     },
     {
       name:               "department",
       title:              "Departments",
       useFilterableFacet: false,
-      expandedOnLoad:     true,
-      labelFunction:      getDepartmentName
-    },
-    {
-      name:               "level",
-      title:              "Level",
-      useFilterableFacet: false,
-      expandedOnLoad:     true,
-      labelFunction:      getLevelName
+      expandedOnLoad:     true
     }
   ]
 
-  function setup() {
+  const defaultAggregations = {
+    topic: [
+      { key: "Cats", doc_count: 10 },
+      { key: "Dogs", doc_count: 20 },
+      { key: "Monkeys", doc_count: 30 }
+    ],
+    department: [
+      { key: "1", doc_count: 100 },
+      { key: "2", doc_count: 200 }
+    ]
+  }
+
+  const setup = ({
+    props,
+    aggregations = defaultAggregations
+  }: {
+    props?: Partial<FacetDisplayProps>
+    aggregations?: Record<string, Bucket[]>
+  } = {}) => {
     const activeFacets = {}
-    const facetOptions = jest.fn()
+    const facetOptions = (group: string) => aggregations[group] ?? []
     const clearAllFilters = jest.fn()
     const onFacetChange = jest.fn()
 
-    const render = (props = {}) =>
-      shallow(
+    const view = render(
+      <FacetDisplay
+        facetMap={defaultFacetMap}
+        facetOptions={facetOptions}
+        activeFacets={activeFacets}
+        clearAllFilters={clearAllFilters}
+        onFacetChange={onFacetChange}
+        {...props}
+      />
+    )
+    const spies = {
+      onFacetChange,
+      clearAllFilters
+    }
+    const rerender = (newProps: Partial<FacetDisplayProps>) => {
+      view.rerender(
         <FacetDisplay
-          facetMap={facetMap}
+          facetMap={defaultFacetMap}
           facetOptions={facetOptions}
           activeFacets={activeFacets}
           clearAllFilters={clearAllFilters}
           onFacetChange={onFacetChange}
           {...props}
+          {...newProps}
         />
       )
-    return { render, clearAllFilters }
+    }
+    return { view, spies, rerender }
   }
 
-  test("renders a FacetDisplay with expected FilterableFacets", async () => {
-    const { render } = setup()
-    const wrapper = render()
-    const facets = wrapper.find(AvailableFacets).dive().children()
-    expect(facets).toHaveLength(4)
-    facets.map((facet, key) => {
-      expect(facet.prop("name")).toBe(facetMap[key].name)
-      expect(facet.prop("title")).toBe(facetMap[key].title)
-      expect(facet.prop("expandedOnLoad")).toBe(facetMap[key].expandedOnLoad)
+  test("Renders facets with expected titles", async () => {
+    setup()
+    screen.getByRole("button", { name: defaultFacetMap[0].title })
+    screen.getByRole("button", { name: defaultFacetMap[1].title })
+  })
+
+  test.each([{ expandedOnLoad: false }, { expandedOnLoad: true }])(
+    "Initially expanded based on expandedOnLoad ($expandedOnLoad)",
+    ({ expandedOnLoad }) => {
+      const facetMap = [{ ...defaultFacetMap[0], expandedOnLoad }]
+      setup({
+        props: { facetMap }
+      })
+      screen.getByRole("button", {
+        name:     facetMap[0].title,
+        expanded: expandedOnLoad
+      })
+      const checkboxes = screen.queryAllByRole("checkbox")
+      expect(checkboxes).toHaveLength(expandedOnLoad ? 3 : 0)
+    }
+  )
+
+  test("Clicking facet title toggles expanded state", async () => {
+    setup({
+      props: { facetMap: [defaultFacetMap[0]] }
+    })
+    const button = screen.getByRole("button", {
+      name: defaultFacetMap[0].title
     })
+    const checkboxCount = () => screen.queryAllByRole("checkbox").length
+    await user.click(button)
+    expect(button.getAttribute("aria-expanded")).toBe("false")
+    expect(checkboxCount()).toBe(0)
+    await user.click(button)
+    expect(button.getAttribute("aria-expanded")).toBe("true")
+    expect(checkboxCount()).toBe(3)
   })
 
-  test("shows filters which are active", () => {
+  test("Shows filters which are active", async () => {
     const activeFacets: Facets = {
-      topic:         ["Academic Writing", "Accounting", "Aerodynamics"],
-      resource_type: [],
-      department:    ["1", "2"]
+      topic:      ["Cats", "Dogs"],
+      department: ["1"]
+    }
+    const { spies } = setup({ props: { activeFacets } })
+    const activeDisplay = document.querySelector(".active-search-filters")
+    if (!(activeDisplay instanceof HTMLElement)) {
+      throw new Error("Expected activeDisplay to exist")
     }
+    within(activeDisplay).getByText("Cats")
+    within(activeDisplay).getByText("Dogs")
+    within(activeDisplay).getByText("1")
 
-    const { render, clearAllFilters } = setup()
-    const wrapper = render({
-      activeFacets
+    await user.click(screen.getByRole("button", { name: "Clear All" }))
+    expect(spies.clearAllFilters).toHaveBeenCalled()
+    await user.click(screen.getAllByRole("button", { name: "clear filter" })[0])
+    expect(spies.onFacetChange).toHaveBeenCalledWith("topic", "Cats", false)
+  })
+
+  test("Clicking a facet checkbox calls onFacetChange", async () => {
+    const { spies } = setup({
+      props: {
+        facetMap: [
+          {
+            ...defaultFacetMap[0],
+            expandedOnLoad: true
+          }
+        ]
+      }
     })
-    expect(
-      wrapper
-        .find(".active-search-filters")
-        .find("SearchFilter")
-        .map(el => el.prop("value"))
-    ).toEqual(["Academic Writing", "Accounting", "Aerodynamics", "1", "2"])
-    wrapper.find(".clear-all-filters-button").simulate("click")
-    expect(clearAllFilters).toHaveBeenCalled()
+    await user.click(screen.getByRole("checkbox", { name: "Cats" }))
+    expect(spies.onFacetChange).toHaveBeenCalledWith("topic", "Cats", true)
   })
 
   test("it accepts a label function to convert codes to names", () => {
+    setup({
+      props: {
+        facetMap: [
+          {
+            ...defaultFacetMap[1],
+            labelFunction:  getDepartmentName,
+            expandedOnLoad: true
+          }
+        ]
+      }
+    })
+    screen.getByRole("checkbox", {
+      name: "Civil and Environmental Engineering"
+    })
+    screen.getByRole("checkbox", {
+      name: "Mechanical Engineering"
+    })
+  })
+
+  test("Automically includes a zero-count option for active facets with no matches", () => {
     const activeFacets: Facets = {
-      topic:         [],
-      resource_type: [],
-      department:    ["1"],
-      level:         ["graduate"]
+      topic: ["Cats"]
     }
-
-    const { render, clearAllFilters } = setup()
-    const wrapper = render({
-      activeFacets
+    const { rerender } = setup({
+      props: {
+        activeFacets,
+        facetMap: [
+          {
+            ...defaultFacetMap[0],
+            expandedOnLoad: true
+          }
+        ]
+      }
+    })
+    const checkboxCount = () => screen.getAllByRole("checkbox").length
+    expect(checkboxCount()).toBe(3)
+    screen.getByRole("checkbox", { name: "Cats" })
+    screen.getByRole("checkbox", { name: "Dogs" })
+    screen.getByRole("checkbox", { name: "Monkeys" })
+    rerender({
+      activeFacets: {
+        topic: ["Cats", "Dragons"]
+      }
     })
-    expect(
-      wrapper
-        .find(".active-search-filters")
-        .find("SearchFilter")
-        .map(el =>
-          el.render().find(".active-search-filter-label").first().html()
-        )
-    ).toEqual(["Civil and Environmental Engineering", "Graduate"])
-    wrapper.find(".clear-all-filters-button").simulate("click")
-    expect(clearAllFilters).toHaveBeenCalled()
+    expect(checkboxCount()).toBe(4)
+    screen.getByRole("checkbox", { name: "Dragons" })
   })
 })

src/facet_display/FacetDisplay.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback } from "react"
 import FilterableFacet from "./FilterableFacet"
 import Facet from "./Facet"
 import SearchFilter from "./SearchFilter"
@@ -9,6 +9,12 @@ export type BucketWithLabel = Bucket & { label: string }
 
 interface FacetDisplayProps {
   facetMap: FacetManifest
+  /**
+   * Returns the aggregation options for a given group.
+   *
+   * If `activeFacets` includes a facet with no results, that facet will
+   * automatically be included in the facet options.
+   */
   facetOptions: (group: string) => Aggregation | null
   activeFacets: Facets
   clearAllFilters: () => void
@@ -47,20 +53,50 @@ const resultsWithLabels = (
   return newResults
 }
 
+/**
+ * Augment the facet buckets for `groupKey` with active values that have no
+ * results.
+ */
+const includeActiveZerosInBuckets = (
+  groupKey: string,
+  buckets: Bucket[],
+  params: Facets
+) => {
+  const opts = [...buckets]
+  const active = params[groupKey as keyof Facets] ?? []
+  const actives = Array.isArray(active) ? active : [active]
+  actives.forEach(key => {
+    if (!opts.find(o => o.key === key)) {
+      opts.push({ key: String(key), doc_count: 0 })
+    }
+  })
+  return opts
+}
+
 const AvailableFacets: React.FC<Omit<FacetDisplayProps, "clearAllFilters">> = ({
   facetMap,
   facetOptions,
   activeFacets,
   onFacetChange
 }) => {
+  const allFacetOptions: FacetDisplayProps["facetOptions"] = useCallback(
+    name => {
+      return includeActiveZerosInBuckets(
+        name,
+        facetOptions(name) ?? [],
+        activeFacets
+      )
+    },
+    [facetOptions, activeFacets]
+  )
   return (
     <>
       {facetMap.map(facetSetting =>
         facetSetting.useFilterableFacet ? (
           <FilterableFacet
             key={facetSetting.name}
             results={resultsWithLabels(
-              facetOptions(facetSetting.name) || [],
+              allFacetOptions(facetSetting.name) || [],
               facetSetting.labelFunction
             )}
             name={facetSetting.name}
@@ -77,7 +113,7 @@ const AvailableFacets: React.FC<Omit<FacetDisplayProps, "clearAllFilters">> = ({
             title={facetSetting.title}
             name={facetSetting.name}
             results={resultsWithLabels(
-              facetOptions(facetSetting.name) || [],
+              allFacetOptions(facetSetting.name) || [],
               facetSetting.labelFunction
             )}
             onUpdate={e =>
@@ -149,3 +185,4 @@ const FacetDisplay = React.memo(
 
 export default FacetDisplay
 export { AvailableFacets }
+export type { FacetDisplayProps }