test

frontend/src/components/search/SearchResults.tsx

@@ -48,8 +48,12 @@ const ResolvedSearchResults = async ({
   searchResultsPromise: Promise<SearchAPIResponse>;
 }) => {
   const searchResults = await searchResultsPromise;
+
+  // if there are no results because we've requested a page beyond the number of total pages
+  // update page to the last page to trigger a new search
   if (
     !searchResults.data.length &&
+    searchResults.pagination_info.total_pages > 0 &&
     searchResults.pagination_info.page_offset >
       searchResults.pagination_info.total_pages
   ) {

frontend/src/components/search/SearchResultsList.tsx

@@ -25,9 +25,10 @@ export default async function SearchResultsList({
       <div>
         <h2>{t("resultsListFetch.noResultsTitle")}</h2>
         <ul>
-          {t.rich("resultsListFetch.noResultsBody", {
-            li: (chunks) => <li>{chunks}</li>,
-          })}
+          <li>{t("resultsListFetch.noResultsBody.0")}</li>
+          <li>{t("resultsListFetch.noResultsBody.1")}</li>
+          <li>{t("resultsListFetch.noResultsBody.2")}</li>
+          <li>{t("resultsListFetch.noResultsBody.3")}</li>
         </ul>
       </div>
     );

frontend/src/i18n/messages/en/index.ts

@@ -574,8 +574,12 @@ export const messages = {
     },
     resultsListFetch: {
       noResultsTitle: "Your search did not return any results.",
-      noResultsBody:
-        "<li>Check any terms you've entered for typos</li><li>Try different keywords</li><li>Make sure you've selected the right statuses</li><li>Try resetting filters or selecting fewer options</li>",
+      noResultsBody: [
+        "Check any terms you've, entered for typos",
+        "Try different keywords",
+        "Make sure you've selected the right statuses",
+        "Try resetting filters or selecting fewer options",
+      ],
     },
     resultsListItem: {
       status: {

frontend/tests/components/search/SearchResultsList.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import { SearchAPIResponse } from "src/types/search/searchResponseTypes";
+import { useTranslationsMock } from "src/utils/testing/intlMocks";
+
+import SearchResultsList from "src/components/search/SearchResultsList";
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => useTranslationsMock(),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+}));
+
+const makeSearchResults = (overrides: Partial<SearchAPIResponse>) => ({
+  status_code: 200,
+  data: [],
+  pagination_info: {
+    order_by: "whatever",
+    page_offset: 1,
+    page_size: 1,
+    sort_direction: "up",
+    total_pages: 1,
+    total_records: 1,
+  },
+  message: "",
+  ...overrides,
+});
+
+const makeOpportunity = (overrides) => ({
+  agency: "DMFHDLSKD",
+  category: "good",
+  category_explanation: "how to explain good",
+  created_at: "today",
+  opportunity_assistance_listings: [],
+  opportunity_id: 1,
+  opportunity_number: "111111",
+  opportunity_status: "archived",
+  opportunity_title: "This Opportunity",
+  summary: {
+    summary_description: "<p>Summary Description</p>",
+    applicant_types: [
+      "state_governments",
+      "nonprofits_non_higher_education_with_501c3",
+      "unknown_type",
+    ],
+    applicant_eligibility_description: "<p>Eligibility Description</p>",
+    agency_contact_description: "<p>Contact Description</p>",
+    agency_email_address: "contact@example.com",
+    agency_email_address_description: "Contact Email Description",
+  },
+  updated_at: "today",
+  ...overrides,
+});
+
+describe("SearchResultsList", () => {
+  it("should not have accessibility violations", async () => {
+    const component = await SearchResultsList({
+      searchResults: makeSearchResults({}),
+    });
+    const { container } = render(component);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it("renders an error if search results have no data", async () => {
+    const component = await SearchResultsList({
+      searchResults: makeSearchResults({ status_code: 404 }),
+    });
+    render(component);
+    expect(screen.getByRole("heading")).toHaveTextContent("heading");
+  });
+  it('renders a "not found" page if no records are passed in', async () => {
+    const component = await SearchResultsList({
+      searchResults: makeSearchResults({}),
+    });
+    render(component);
+    expect(screen.getByRole("heading")).toHaveTextContent(
+      "resultsListFetch.noResultsTitle",
+    );
+  });
+  it("renders an list item for each search result", async () => {
+    const component = await SearchResultsList({
+      searchResults: makeSearchResults({
+        data: [makeOpportunity({}), makeOpportunity({ opportunity_id: 2 })],
+      }),
+    });
+    render(component);
+    const listItems = screen.getAllByRole("listitem");
+    expect(listItems).toHaveLength(2);
+  });
+});