[Issue #37]: finish e2e tests

frontend/README.md

@@ -144,7 +144,9 @@ To run E2E tests using VS Code:
 1. Download the VS Code extension described in these [Playwright docs](https://playwright.dev/docs/running-tests#run-tests-in-vs-code)
 2. Follow the [instructions](https://playwright.dev/docs/getting-started-vscode#running-tests) Playwright provides
 
-In CI, the "Front-end Checks" workflow (`.github/workflows/ci-frontend.yml`) summary will include an "Artifacts" section where there is an attached "playwright-report". [Playwright docs](https://playwright.dev/docs/ci-intro#html-report) describe how to view HTML Report in more detail.
+Playwright E2E tests run "local-to-local", requiring both the frontend and the API to be running for the tests to pass - and for the database to be seeded with data.
+
+In CI, the "Front-end Checks" workflow (`.github/workflows/ci-frontend-e2e.yml`) summary will include an "Artifacts" section where there is an attached "playwright-report". [Playwright docs](https://playwright.dev/docs/ci-intro#html-report) describe how to view HTML Report in more detail.
 
 ## 🤖 Type checking, linting, and formatting
 

frontend/tests/e2e/search/search.spec.ts

@@ -1,19 +1,25 @@
 import {
   clickAccordionWithTitle,
+  clickLastPaginationPage,
   clickMobileNavMenu,
+  clickPaginationPageNumber,
   clickSearchNavLink,
   expectCheckboxIDIsChecked,
   expectSortBy,
   expectURLContainsQueryParam,
   fillSearchInputAndSubmit,
+  getFirstSearchResultTitle,
+  getLastSearchResultTitle,
   getMobileMenuButton,
+  getNumberOfOpportunitySearchResults,
   getSearchInput,
   hasMobileMenu,
   refreshPageWithCurrentURL,
+  selectOppositeSortOption,
   selectSortBy,
   toggleCheckboxes,
-  waitForSearchResultsLoaded,
-} from "./searchUtil";
+  waitForSearchResultsInitialLoad,
+} from "./searchSpecUtil";
 import { expect, test } from "@playwright/test";
 
 test("should navigate from index to search page", async ({ page }) => {
@@ -63,6 +69,7 @@ test.describe("Search page tests", () => {
 
     expectURLContainsQueryParam(page, "query", searchTerm);
 
+    // eslint-disable-next-line testing-library/prefer-screen-queries
     const resultsHeading = page.getByRole("heading", {
       name: /0 Opportunities/i,
     });
@@ -91,7 +98,7 @@ test.describe("Search page tests", () => {
     await expect(loadingIndicator).toBeVisible();
     await expect(loadingIndicator).toBeHidden();
   });
-  test("should retain filters in a new tab", async ({ page }) => {
+  test("should refresh and retain filters in a new tab", async ({ page }) => {
     // Set all inputs, then refresh the page. Those same inputs should be
     // set from query params.
     const searchTerm = "education";
@@ -119,7 +126,7 @@ test.describe("Search page tests", () => {
 
     await selectSortBy(page, "agencyDesc");
 
-    await waitForSearchResultsLoaded(page);
+    await waitForSearchResultsInitialLoad(page);
     await fillSearchInputAndSubmit(searchTerm, page);
     await toggleCheckboxes(page, statusCheckboxes, "status");
 
@@ -167,4 +174,68 @@ test.describe("Search page tests", () => {
       await expectCheckboxIDIsChecked(page, `#${checkboxID}`);
     }
   });
+
+  test("resets page back to 1 when choosing a filter", async ({ page }) => {
+    await clickPaginationPageNumber(page, 2);
+
+    // Verify that page 1 is highlighted
+    let currentPageButton = page.locator(".usa-pagination__button.usa-current");
+    await expect(currentPageButton).toHaveAttribute("aria-label", "Page 2");
+
+    // Select the 'Closed' checkbox under 'Opportunity status'
+    const statusCheckboxes = {
+      "status-closed": "closed",
+    };
+    await toggleCheckboxes(page, statusCheckboxes, "status");
+
+    // Wait for the page to reload
+    await waitForSearchResultsInitialLoad(page);
+
+    // Verify that page 1 is highlighted
+    currentPageButton = page.locator(".usa-pagination__button.usa-current");
+    await expect(currentPageButton).toHaveAttribute("aria-label", "Page 1");
+
+    // It should not have a page query param set
+    expectURLContainsQueryParam(page, "page", "1", false);
+  });
+
+  test("last result becomes first result when flipping sort order", async ({
+    page,
+  }) => {
+    await clickLastPaginationPage(page);
+
+    await waitForSearchResultsInitialLoad(page);
+
+    const lastSearchResultTitle = await getLastSearchResultTitle(page);
+
+    await selectOppositeSortOption(page);
+
+    const firstSearchResultTitle = await getFirstSearchResultTitle(page);
+
+    expect(firstSearchResultTitle).toBe(lastSearchResultTitle);
+  });
+
+  test("number of results is the same with none or all opportunity status checked", async ({
+    page,
+  }) => {
+    const initialNumberOfOpportunityResults =
+      await getNumberOfOpportunitySearchResults(page);
+
+    // check all 4 boxes
+    const statusCheckboxes = {
+      "status-forecasted": "forecasted",
+      "status-posted": "posted",
+      "status-closed": "closed",
+      "status-archived": "archived",
+    };
+
+    await toggleCheckboxes(page, statusCheckboxes, "status");
+
+    const updatedNumberOfOpportunityResults =
+      await getNumberOfOpportunitySearchResults(page);
+
+    expect(initialNumberOfOpportunityResults).toBe(
+      updatedNumberOfOpportunityResults,
+    );
+  });
 });

frontend/tests/e2e/search/searchUtil.ts → frontend/tests/e2e/search/searchSpecUtil.ts

@@ -19,9 +19,16 @@ export function expectURLContainsQueryParam(
   page: Page,
   queryParamName: string,
   queryParamValue: string,
+  shouldContain = true,
 ) {
   const currentURL = page.url();
-  expect(currentURL).toContain(`${queryParamName}=${queryParamValue}`);
+  const queryParam = `${queryParamName}=${queryParamValue}`;
+
+  if (shouldContain) {
+    expect(currentURL).toContain(queryParam);
+  } else {
+    expect(currentURL).not.toContain(queryParam);
+  }
 }
 
 export async function waitForURLContainsQueryParam(
@@ -116,7 +123,7 @@ export async function expectSortBy(page: Page, value: string) {
   expect(selectedValue).toBe(value);
 }
 
-export async function waitForSearchResultsLoaded(page: Page) {
+export async function waitForSearchResultsInitialLoad(page: Page) {
   // Wait for number of opportunities to show
   const resultsHeading = page.locator('h2:has-text("Opportunities")');
   await resultsHeading.waitFor({ state: "visible", timeout: 60000 });
@@ -130,3 +137,71 @@ export async function clickAccordionWithTitle(
     .locator(`button.usa-accordion__button:has-text("${accordionTitle}")`)
     .click();
 }
+
+export async function clickPaginationPageNumber(
+  page: Page,
+  pageNumber: number,
+) {
+  const paginationButton = page.locator(
+    `button[data-testid="pagination-page-number"][aria-label="Page ${pageNumber}"]`,
+  );
+  await paginationButton.first().click();
+}
+
+export async function clickLastPaginationPage(page: Page) {
+  const paginationButtons = page.locator("li > button");
+  const count = await paginationButtons.count();
+
+  // must be more than 1 page
+  if (count > 2) {
+    await paginationButtons.nth(count - 2).click();
+  }
+}
+
+export async function getFirstSearchResultTitle(page: Page) {
+  const firstResultSelector = page.locator(
+    ".usa-list--unstyled > li:first-child h2 a",
+  );
+  return await firstResultSelector.textContent();
+}
+
+export async function getLastSearchResultTitle(page: Page) {
+  const lastResultSelector = page.locator(
+    ".usa-list--unstyled > li:last-child h2 a",
+  );
+  return await lastResultSelector.textContent();
+}
+
+// If descending, select the ascending variant
+export async function selectOppositeSortOption(page: Page) {
+  const sortByDropdown = page.locator("#search-sort-by-select");
+  const currentValue = await sortByDropdown.inputValue();
+  let oppositeValue;
+
+  if (currentValue.includes("Asc")) {
+    oppositeValue = currentValue.replace("Asc", "Desc");
+  } else if (currentValue.includes("Desc")) {
+    oppositeValue = currentValue.replace("Desc", "Asc");
+  } else {
+    throw new Error(`Unexpected sort value: ${currentValue}`);
+  }
+
+  await sortByDropdown.selectOption(oppositeValue);
+}
+
+export async function waitForLoaderToBeHidden(page: Page) {
+  await page.waitForSelector(
+    ".display-flex.flex-align-center.flex-justify-center.margin-bottom-15.margin-top-15",
+    { state: "hidden" },
+  );
+}
+
+export async function getNumberOfOpportunitySearchResults(page: Page) {
+  await waitForLoaderToBeHidden(page);
+  const opportunitiesText = await page
+    .locator("h2.tablet-lg\\:grid-col-fill")
+    .textContent();
+  return opportunitiesText
+    ? parseInt(opportunitiesText.replace(/\D/g, ""), 10)
+    : 0;
+}