feat(SearchResultsByProperty): Message when no results found for prop…

…erties
mbta · Jul 28, 2023 · ec2201f · ec2201f
1 parent 66ecc13
commit ec2201f
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 113 deletions.
diff --git a/assets/src/components/mapPage/searchResultsByProperty.tsx b/assets/src/components/mapPage/searchResultsByProperty.tsx
@@ -8,7 +8,7 @@ import {
 } from "../../models/searchQuery"
 import { Vehicle, Ghost } from "../../realtime"
 import { setPropertyMatchLimit } from "../../state/searchPageState"
-import SearchResults from "../searchResults"
+import SearchResults, { NoResults } from "../searchResults"
 import React from "react"
 import { useLocationSearchResults } from "../../hooks/useLocationSearchResults"
 import { Card, CardBody } from "../card"
@@ -165,38 +165,49 @@ const SearchResultsByProperty = ({
     searchPageState.query.properties
   )
 
+  const searchHasNoResults = Object.values(resultsByProperty)
+    .filter(
+      (result): result is LoadingResult | Ok<LimitedSearchResults> =>
+        result !== null
+    )
+    .every((result) => isOk(result) && result.ok.matchingVehicles.length === 0)
+
   return (
     <div aria-label="Grouped Search Results">
-      {Object.entries(searchPageState.query.properties)
-        .filter(([, limit]) => limit != null)
-        .map(([property, limit]) => ({
-          property: property as SearchProperty,
-          limit: limit as number,
-        }))
-        .sort(
-          ({ property: first_property }, { property: second_property }) =>
-            searchPropertyDisplayConfig[first_property].order -
-            searchPropertyDisplayConfig[second_property].order
-        )
-        .map(({ property, limit }) =>
-          property === "location" ? (
-            <LocationSearchResultSection
-              key={property}
-              text={searchPageState.query.text}
-              limit={limit}
-              onSelectLocation={onSelectLocationResult}
-              onShowMore={() => onShowMore(property, limit)}
-            />
-          ) : (
-            <VehicleSearchResultSection
-              key={property}
-              property={property}
-              results={resultsByProperty[property]}
-              onSelectVehicle={onSelectVehicleResult}
-              onShowMore={() => onShowMore(property, limit)}
-            />
+      {searchHasNoResults ? (
+        <NoResults />
+      ) : (
+        Object.entries(searchPageState.query.properties)
+          .filter(([, limit]) => limit != null)
+          .map(([property, limit]) => ({
+            property: property as SearchProperty,
+            limit: limit as number,
+          }))
+          .sort(
+            ({ property: first_property }, { property: second_property }) =>
+              searchPropertyDisplayConfig[first_property].order -
+              searchPropertyDisplayConfig[second_property].order
           )
-        )}
+          .map(({ property, limit }) =>
+            property === "location" ? (
+              <LocationSearchResultSection
+                key={property}
+                text={searchPageState.query.text}
+                limit={limit}
+                onSelectLocation={onSelectLocationResult}
+                onShowMore={() => onShowMore(property, limit)}
+              />
+            ) : (
+              <VehicleSearchResultSection
+                key={property}
+                property={property}
+                results={resultsByProperty[property]}
+                onSelectVehicle={onSelectVehicleResult}
+                onShowMore={() => onShowMore(property, limit)}
+              />
+            )
+          )
+      )}
     </div>
   )
 }

diff --git a/assets/src/components/searchResults.tsx b/assets/src/components/searchResults.tsx
@@ -125,7 +125,7 @@ const ResultsList = ({
   </ul>
 )
 
-const NoResults = () => {
+export const NoResults = () => {
   const [
     {
       searchPageState: { query },

diff --git a/assets/tests/components/mapPage/searchResultsByProperty.test.tsx b/assets/tests/components/mapPage/searchResultsByProperty.test.tsx
@@ -11,6 +11,7 @@ import locationSearchResultFactory from "../../factories/locationSearchResult"
 import { LocationSearchResult } from "../../../src/models/locationSearchResult"
 import useSearchResultsByProperty from "../../../src/hooks/useSearchResultsByProperty"
 import { searchQueryLocationFactory } from "../../factories/searchQuery"
+import { searchQueryVehicleFactory } from "../../factories/searchQuery"
 
 jest.mock("../../../src/hooks/useSearchResultsByProperty", () => ({
   __esModule: true,
@@ -22,14 +23,43 @@ jest.mock("../../../src/hooks/useLocationSearchResults", () => ({
   useLocationSearchResults: jest.fn(() => null),
 }))
 
-afterEach(() => {
-  jest.resetAllMocks()
-})
-
 const runMatch = vehicleFactory.build()
 const operatorMatch = vehicleFactory.build()
 const vehicleMatch = vehicleFactory.build()
 
+beforeEach(() => {
+  ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
+    run: {
+      ok: {
+        matchingVehicles: [runMatch],
+        hasMoreMatches: false,
+      },
+    },
+    vehicle: {
+      ok: {
+        matchingVehicles: [vehicleMatch],
+        hasMoreMatches: true,
+      },
+    },
+    operator: {
+      ok: {
+        matchingVehicles: [operatorMatch],
+        hasMoreMatches: false,
+      },
+    },
+    location: {
+      ok: {
+        matchingVehicles: [],
+        hasMoreMatches: false,
+      },
+    },
+  })
+})
+
+afterEach(() => {
+  jest.resetAllMocks()
+})
+
 describe("searchResultsByProperty", () => {
   test("Includes only sections that have results", () => {
     ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
@@ -79,32 +109,6 @@ describe("searchResultsByProperty", () => {
   })
 
   test("only includes results for the properties included in the query", () => {
-    ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
-      run: {
-        ok: {
-          matchingVehicles: [runMatch],
-          hasMoreMatches: false,
-        },
-      },
-      vehicle: {
-        ok: {
-          matchingVehicles: [vehicleMatch],
-          hasMoreMatches: false,
-        },
-      },
-      operator: {
-        ok: {
-          matchingVehicles: [operatorMatch],
-          hasMoreMatches: false,
-        },
-      },
-      location: {
-        ok: {
-          matchingVehicles: [],
-          hasMoreMatches: false,
-        },
-      },
-    })
     ;(useLocationSearchResults as jest.Mock).mockImplementation(() => [])
 
     render(
@@ -138,32 +142,6 @@ describe("searchResultsByProperty", () => {
   })
 
   test("Includes the sections in the expected order", () => {
-    ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
-      run: {
-        ok: {
-          matchingVehicles: [runMatch],
-          hasMoreMatches: false,
-        },
-      },
-      vehicle: {
-        ok: {
-          matchingVehicles: [vehicleMatch],
-          hasMoreMatches: false,
-        },
-      },
-      operator: {
-        ok: {
-          matchingVehicles: [operatorMatch],
-          hasMoreMatches: false,
-        },
-      },
-      location: {
-        ok: {
-          matchingVehicles: [],
-          hasMoreMatches: false,
-        },
-      },
-    })
     ;(useLocationSearchResults as jest.Mock).mockImplementation(() => [])
 
     render(
@@ -191,32 +169,6 @@ describe("searchResultsByProperty", () => {
   })
 
   test("Lists the matching vehicles under the appropriate header", () => {
-    ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
-      run: {
-        ok: {
-          matchingVehicles: [runMatch],
-          hasMoreMatches: false,
-        },
-      },
-      vehicle: {
-        ok: {
-          matchingVehicles: [vehicleMatch],
-          hasMoreMatches: false,
-        },
-      },
-      operator: {
-        ok: {
-          matchingVehicles: [operatorMatch],
-          hasMoreMatches: false,
-        },
-      },
-      location: {
-        ok: {
-          matchingVehicles: [],
-          hasMoreMatches: false,
-        },
-      },
-    })
     ;(useLocationSearchResults as jest.Mock).mockImplementation(() => [])
 
     render(
@@ -417,4 +369,46 @@ describe("searchResultsByProperty", () => {
       })
     ).not.toBeInTheDocument()
   })
+
+  test("when there are no results for the given properties, display no results message", () => {
+    ;(useSearchResultsByProperty as jest.Mock).mockReturnValue({
+      run: {
+        ok: {
+          matchingVehicles: [],
+          hasMoreMatches: false,
+        },
+      },
+      vehicle: {
+        ok: {
+          matchingVehicles: [],
+          hasMoreMatches: true,
+        },
+      },
+      operator: null,
+      location: {
+        ok: {
+          matchingVehicles: [],
+          hasMoreMatches: false,
+        },
+      },
+    })
+
+    render(
+      <StateDispatchProvider
+        state={stateFactory.build({
+          searchPageState: searchPageStateFactory.build({
+            query: searchQueryVehicleFactory.build({ text: "123" }),
+            isActive: true,
+          }),
+        })}
+        dispatch={jest.fn()}
+      >
+        <SearchResultsByProperty
+          onSelectVehicleResult={jest.fn()}
+          onSelectLocationResult={jest.fn()}
+        />
+      </StateDispatchProvider>
+    )
+    expect(screen.getByText("No Search Results")).toBeInTheDocument()
+  })
 })