Run only Search tests

.github/workflows/playwright.yml

@@ -1,12 +1,12 @@
 name: Playwright Tests
 on:
   push:
-    branches: [main, deploy-staging, 4284-playwright-setup]
+    branches: [main, deploy-staging, 4284-playwright-setup-alt]
   pull_request:
     branches: [main, deploy-staging]
 jobs:
   test:
-    timeout-minutes: 10
+    timeout-minutes: 20
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -16,22 +16,22 @@ jobs:
       - name: Install dependencies
         run: npm ci --force
 
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-
       - name: Build app
         run: npm run build
         env:
           NEXT_PUBLIC_DCAPI_ENDPOINT: ${{ secrets.NEXT_PUBLIC_DCAPI_ENDPOINT }}
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Start app
         run: npm run start &
 
       - name: Wait for server
         run: npx wait-on http://localhost:3000
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: npx playwright test search.spec.ts
         env:
           BASE_URL: ${{ secrets.BASE_URL }}
 

playwright.config.ts

@@ -11,7 +11,7 @@ const BASE_URL =
 
 export default defineConfig({
   testDir: "./tests",
-  fullyParallel: false,
+  fullyParallel: true,
 
   /* Increase locator timeout past default 5s */
   expect: {

tests/search.spec.ts

@@ -184,4 +184,328 @@ test.describe("Search page component", () => {
     await publicWorksToggle.click();
     await expect(facetUserComponent).toContainText("2");
   });
+
+  test("renders the Filter modal and a general run through of interactions within", async ({
+    page,
+  }) => {
+    const filterBtn = page.getByRole("button", { name: "Filter Filter" });
+    const filterModalHeading = page.getByRole("heading", { name: "Filter" });
+    const filterModalBody = page.getByTestId("facets-group-list");
+
+    await filterBtn.click();
+
+    // Test Filter Modal UI, default layout and interactions
+    await expect(filterModalHeading).toBeInViewport();
+    await page.getByRole("banner").getByTestId("facets-filter-close").click();
+    await page.getByRole("button", { name: "Filter Filter" }).click();
+    await page.getByRole("button", { name: "Clear All" }).click();
+    await page.getByText("Cancel").click();
+    await page.getByRole("button", { name: "Filter Filter" }).click();
+    await page
+      .getByTestId("facets-submit")
+      .getByTestId("submit-button")
+      .click();
+
+    expect(filterModalHeading).not.toBeVisible();
+
+    // Test facets; Subject and Descriptive defaults open on load
+    await filterBtn.click();
+    await expect(
+      filterModalBody.getByRole("button", { name: "Subject and Descriptive" }),
+    ).toBeVisible();
+
+    // Test Genre facet
+    await page.getByRole("tab", { name: "Genre" }).click();
+    await page.getByRole("heading", { name: "Genre" }).click();
+
+    // Test Language facet
+    await page.getByRole("tab", { name: "Language" }).click();
+    await page.getByRole("heading", { name: "Language" }).click();
+    await page.locator("li").filter({ hasText: "English(84)" }).click();
+    await page.locator("li").filter({ hasText: "French(11)" }).click();
+
+    // Test Style Period facet
+    await page.getByRole("tab", { name: "Style Period" }).click();
+    await page.getByRole("heading", { name: "Style Period" }).click();
+    await page.getByPlaceholder("Find Style Period").click();
+    await page.getByText("Qing (dynastic styles and").click();
+    await page
+      .getByTestId("facet-options")
+      .getByLabel("Qing (dynastic styles and")
+      .click();
+
+    // Test Subject facet
+    await page.getByRole("tab", { name: "Subject" }).click();
+    await page
+      .getByTestId("facet-multi-component")
+      .getByRole("heading", { name: "Subject" })
+      .click();
+    await page.getByPlaceholder("Find Subject").click();
+    await page
+      .getByText("Northwestern University (Evanston, Ill.)(21)")
+      .click();
+    await page
+      .getByLabel("Northwestern University (Evanston, Ill.)(22)")
+      .click();
+
+    // Test Technique facet
+    await page.getByRole("tab", { name: "Technique" }).click();
+    await page.getByRole("heading", { name: "Technique" }).click();
+    await page.getByPlaceholder("Find Technique").click();
+    await page
+      .locator("li")
+      .filter({ hasText: "photomechanical processes(6)" })
+      .click();
+    await page.getByLabel("photomechanical processes(6)").click();
+
+    // Test Work Type facet
+    await page.getByRole("tab", { name: "Work Type" }).click();
+    await page.getByRole("heading", { name: "Work Type" }).click();
+    await page.getByPlaceholder("Find Work Type").click();
+    await page.getByTestId("facet-options").click();
+
+    // Close modal
+    await page.getByRole("banner").getByTestId("facets-filter-close").click();
+
+    // Reopen modal
+    await filterBtn.click();
+
+    // Check Collection and Location Group facets
+    await page.getByRole("button", { name: "Collection and Location" }).click();
+    await page.getByRole("tab", { name: "Collection" }).click();
+    await page
+      .getByTestId("facet-multi-component")
+      .getByRole("heading", { name: "Collection" })
+      .click();
+    await page.getByPlaceholder("Find Collection").click();
+    await page
+      .locator("li")
+      .filter({ hasText: "Collection of Carl Smith(14)" })
+      .click();
+    await page
+      .locator("li")
+      .filter({ hasText: "Chicago Chamber Musicians" })
+      .click();
+    await page
+      .getByTestId("facet-options")
+      .getByLabel("Chicago Chamber Musicians")
+      .click();
+    await page.getByRole("tab", { name: "Series" }).click();
+    await page.getByRole("heading", { name: "Series" }).click();
+    await page.getByPlaceholder("Find Series").click();
+    await page.getByRole("tab", { name: "Box Number" }).click();
+    await page.getByRole("heading", { name: "Box Number" }).click();
+    await page.getByPlaceholder("Find Box Number").click();
+
+    // Activate a facet
+    await page.getByLabel("(16)").click();
+    await page.getByRole("heading", { name: "Preview Results" }).click();
+
+    // Currently selected (uncommitted) facets display in modal header
+    const userFacet = page.getByTestId("facet-user-value-component");
+    await expect(userFacet).toContainText("1");
+    await expect(userFacet).toContainText("Box Number");
+
+    // Remove facet
+    await userFacet.click();
+
+    // Verify currently selected user facet is removed from the modal header
+    expect(userFacet).not.toBeVisible();
+
+    // Toggle the facet again
+    await page.getByLabel("(16)").click();
+
+    // Submit button shows number of results
+    const modalSubmitBtn = page
+      .getByTestId("facets-submit")
+      .getByTestId("submit-button");
+    await expect(modalSubmitBtn).toHaveText("View Results (16)");
+    await modalSubmitBtn.click();
+
+    // Main search page matches result count
+    await expect(page.getByTestId("results-count")).toHaveText("16 results");
+  });
+
+  test("Filter modal facets will update Preview Results when facets are turned on/off", async ({
+    page,
+  }) => {
+    const filterBtn = page.getByRole("button", { name: "Filter Filter" });
+    const previewItems = page.getByTestId("facets-filter-preview-item");
+    const facetOptions = page.getByTestId("facet-options");
+    const userFacetsRow = page.getByTestId("facet-user-component");
+    const userFacetButtons = userFacetsRow.getByTestId(
+      "facet-user-value-component",
+    );
+
+    await filterBtn.click();
+
+    // Default Preview Results display
+    await expect(previewItems).toHaveCount(5);
+    expect(previewItems.nth(0)).toContainText("Dracula");
+    expect(previewItems.nth(1)).toContainText("Portrait of Justine Cordwell.");
+    expect(userFacetsRow).toHaveCount(0);
+
+    // Activate a facet
+    await page.getByLabel("African American college students").click();
+
+    // Preview Items update
+    await expect(previewItems.nth(0)).toContainText(
+      "Protest photographs, c. 1969-1970",
+    );
+    await expect(previewItems.nth(1)).toContainText(
+      "Ronald E. Pitts. Cleveland",
+    );
+
+    // User selected facets update
+    await expect(userFacetButtons).toHaveCount(1);
+    await expect(
+      userFacetsRow.getByLabel("Remove African American"),
+    ).toBeVisible();
+
+    // Test the facet count (12) is included in the facet label and its checked
+    await expect(
+      facetOptions.getByText("African American college students(12)"),
+    ).toBeVisible();
+    await expect(
+      facetOptions.getByLabel("African American college students"),
+    ).toBeChecked();
+
+    // Activating a second facet
+    await facetOptions.getByLabel("Choirs (Music)").click();
+
+    // Preview Items update
+    await expect(previewItems).toHaveCount(2);
+    await expect(previewItems.nth(0)).toContainText(
+      "Ronald E. Pitts. Cleveland",
+    );
+    await expect(previewItems.nth(1)).toContainText(
+      "Audition for the Northwestern Community Ensemble",
+    );
+
+    // User facets update
+    await expect(userFacetButtons).toHaveCount(2);
+    await expect(
+      userFacetsRow.getByLabel("Remove Choirs (Music)"),
+    ).toBeVisible();
+    await expect(
+      userFacetsRow.getByLabel("Remove African American"),
+    ).toBeVisible();
+
+    // Test the facet count (2) is included in the facet label and its checked
+    await expect(
+      facetOptions.getByText("African American college students(2)"),
+    ).toBeVisible();
+    await expect(facetOptions.getByLabel("Choirs (Music)")).toBeChecked();
+  });
+
+  test("Filter modal cancel buttons do not make changes to the search results", async ({
+    page,
+  }) => {
+    const filterBtn = page.getByRole("button", { name: "Filter Filter" });
+    const facetOptions = page.getByTestId("facet-options");
+    const submitBtn = page
+      .getByTestId("facets-submit")
+      .getByTestId("submit-button");
+    const resultsCount = page.getByTestId("results-count");
+
+    await filterBtn.click();
+
+    // Activating a facet updates uncommitted count within modal
+    await page.getByRole("tab", { name: "Language" }).click();
+    await facetOptions.getByLabel("French(11)").check();
+    await expect(submitBtn).toHaveText("View Results (11)");
+
+    // Canceling returns the default number of total results
+    await page.getByText("Cancel").click();
+    await expect(resultsCount).toHaveText(`${TOTAL_RESULTS} results`);
+
+    await filterBtn.click();
+
+    // Try another facet from a different group
+    await page.getByRole("button", { name: "Collection and Location" }).click();
+    await page.getByRole("tab", { name: "Collection" }).click();
+    await facetOptions.getByLabel("Map and Atlas Collection").check();
+    await expect(submitBtn).toHaveText("View Results (6)");
+
+    await page.getByRole("banner").getByTestId("facets-filter-close").click();
+    await expect(resultsCount).toHaveText(`${TOTAL_RESULTS} results`);
+  });
+
+  test("renders correct pagination", async ({ page, searchPage }) => {
+    function buildResultsString({ page }: { page: number }) {
+      const start = paginationResultsCount * (page - 1) + 1;
+      const end = start + paginationResultsCount - 1;
+      const refinedEnd = end > TOTAL_RESULTS ? TOTAL_RESULTS : end;
+      return `Showing ${start} to ${refinedEnd} of ${TOTAL_RESULTS} results`;
+    }
+
+    const nextBtn = page.getByRole("button", { name: "Next" });
+    const prevBtn = page.getByRole("button", { name: "Previous" });
+    const startBtn = page.getByRole("button", { name: "Start" });
+    const paginationResultsCount =
+      searchPage.getPaginationResults(TOTAL_RESULTS);
+
+    await searchPage.verifyGridItemCount(TOTAL_RESULTS);
+    await searchPage.verifyTopResultsCount(TOTAL_RESULTS);
+
+    await expect(prevBtn).not.toBeVisible();
+    await expect(startBtn).not.toBeVisible();
+
+    // Click to page 2
+    await nextBtn.click();
+    await searchPage.verifyGridItemCount(
+      TOTAL_RESULTS - paginationResultsCount,
+    );
+    await expect(page.getByTestId("results")).toHaveText(
+      buildResultsString({ page: 2 }),
+    );
+    await expect(prevBtn).toBeVisible();
+    await expect(startBtn).not.toBeVisible();
+
+    // URL updates
+    await expect(page).toHaveURL(new RegExp(`/search\\?page=2`));
+
+    // Click to page 3
+    await nextBtn.click();
+    await searchPage.verifyGridItemCount(
+      TOTAL_RESULTS - paginationResultsCount * 2,
+    );
+    await expect(page.getByTestId("results")).toHaveText(
+      buildResultsString({ page: 3 }),
+    );
+    expect(prevBtn).toBeVisible();
+    expect(startBtn).toBeVisible();
+
+    await expect(page).toHaveURL(`/search?page=3`);
+
+    // Click previous going back to page 2
+    await prevBtn.click();
+    await searchPage.verifyGridItemCount(
+      TOTAL_RESULTS - paginationResultsCount,
+    );
+    await expect(page.getByTestId("results")).toHaveText(
+      buildResultsString({ page: 2 }),
+    );
+    await expect(page).toHaveURL(`/search?page=2`);
+
+    // Go to end of results
+    await page.goto("/search?page=6");
+    await searchPage.verifyGridItemCount(5);
+    await expect(page.getByTestId("results")).toHaveText(
+      buildResultsString({ page: 6 }),
+    );
+    await expect(nextBtn).not.toBeVisible();
+  });
+
+  test("renders Work results which link to the Work page", async ({ page }) => {
+    await page.getByLabel("Public works only").click();
+    await page.getByRole("link", { name: "Ajal-e Moallaq Image" }).click();
+    await expect(page).toHaveURL("items/5a2dcade-0071-48c3-b29b-755293e862c4");
+
+    await page.goto("/search");
+    await page.getByLabel("Public works only").click();
+
+    await page.getByRole("link", { name: "Cadbury Eggs Cars Image" }).click();
+    await expect(page).toHaveURL("items/944cc66c-dcf9-4ac5-8d0d-ec48a699a0fe");
+  });
 });