Merge pull request #268 from nulib/3540-cypress-search

Integrate Cypress End to End Test starter

README.md

@@ -1,8 +1,9 @@
 # Digital Collections v2
 
-Digital Collections v2 (DCv2) is a UI application for discovering and interacting with Collections and Works in NUL's repository. 
+Digital Collections v2 (DCv2) is a UI application for discovering and interacting with Collections and Works in NUL's repository.
 
 ## Tech Stack
+
 - [NextJS](https://nextjs.org/) React JS fullstack framework
 - [TypeScript](https://www.typescriptlang.org/) for type safety
 - [Radix UI](https://www.radix-ui.com/) A library of React primitives for accessibility and modular development
@@ -11,9 +12,10 @@ Digital Collections v2 (DCv2) is a UI application for discovering and interactin
 - [AWS Amplify](https://aws.amazon.com/amplify/) Hosting environment
 - [OpenSearch](https://opensearch.org/) Search index
 
-
 ## Development Environments
+
 ### Local
+
 Install dependencies and run a NextJS development server:
 
 ```bash
@@ -24,22 +26,24 @@ npm run dev
 Open [http://devbox.library.northwestern.edu:3000](http://devbox.library.northwestern.edu:3000) in your browser.
 
 ### AWS Developer Environment (Northwestern dev team only)
+
 Open a remote SSH dev environment connection in VSCode.
 
 `cd` into the `dc-nextjs` repository
 
-1. Open a new terminal.  
+1. Open a new terminal.
 
-2. Make sure port 3000 is open by running `sg show`.   If you don't see port 3000, run `sg open all 3000`.  View more in [AWS convenience scripts](https://github.com/nulib/aws-developer-environment#convenience-scripts).
+2. Make sure port 3000 is open by running `sg show`. If you don't see port 3000, run `sg open all 3000`. View more in [AWS convenience scripts](https://github.com/nulib/aws-developer-environment#convenience-scripts).
 
 3. Temporarily change the following line in (`dc-nextjs/server.js`):
-```js
 
-// Change 
+```js
+// Change
 const hostname = "devbox.library.northwestern.edu";
 // ...to
 const hostname = "localhost";
 ```
+
 Install dependencies
 
 ```bash
@@ -49,15 +53,15 @@ npm run dev
 
 And now open your AWS dev environment URL (Northwestern developers only).
 
-
 ## Deploy Environments
+
 ### Staging
 
 Commits (via merges) into the `deploy/staging` branch will trigger a build in AWS Amplify to the **staging** environment.
 
 https://dc.rdc-staging.library.northwestern.edu/
 
-Commits prefaced with `preview/branch-name-here` will deploy to a preview branch.  The URL will be available within AWS Amplify.  This is useful for sharing the feature with staff/users as a preview before committing to staging.
+Commits prefaced with `preview/branch-name-here` will deploy to a preview branch. The URL will be available within AWS Amplify. This is useful for sharing the feature with staff/users as a preview before committing to staging.
 
 ### Production
 
@@ -67,11 +71,12 @@ https://dc.library.northwestern.edu/
 
 ## Data fetching / APIs
 
-The application makes network requests against the [DC API v2](https://github.com/nulib/dc-api-v2) to access repository data.  By default, all metadata is returned in the application.  Authenticated content's media (image/audio/video) will be protected and obscured from public access.
+The application makes network requests against the [DC API v2](https://github.com/nulib/dc-api-v2) to access repository data. By default, all metadata is returned in the application. Authenticated content's media (image/audio/video) will be protected and obscured from public access.
 
-Behind the scenes, DC API v2 is using OpenSearch `v 1.2` or Elasticsearch `v 7.17`. (For documentation references).  Network request urls with `?as=iiif` will return data in the shape of a [IIIF](https://iiif.io/) manifest.
+Behind the scenes, DC API v2 is using OpenSearch `v 1.2` or Elasticsearch `v 7.17`. (For documentation references). Network request urls with `?as=iiif` will return data in the shape of a [IIIF](https://iiif.io/) manifest.
 
 ### Viewing the Index (OpenSearch) directly
+
 OpenSearch's data can be accessed directly via [Kibana](https://www.elastic.co/kibana/) by executing the following commands:
 
 ```bash
@@ -83,15 +88,18 @@ es-proxy
 The API supports both POST for searching and GET for Work and Collection items.
 
 ### Environment variables
-The API endpoint is an environment variable which is accessed in a local dev environment via the `miscellany` Git repo. 
+
+The API endpoint is an environment variable which is accessed in a local dev environment via the `miscellany` Git repo.
 
 ## Code Quality
 
 The app uses ESLint with a plugin for TypeScript support.
 
 ```bash
 npm run lint
-````
+```
+
+### Typechecking
 
 Run Typescript's `tsc` compiler for type-checking directly.
 
@@ -105,24 +113,24 @@ A pre-commit hook will ensure code is linted before committed.
 
 ### End to end tests
 
-#### Setup
-
-We can run E2E tests against the test environment (...more coming soon)
+Test fixtures can be accessed by pointing the app to a [Test Environment API](https://github.com/nulib/dc-test-environment). Setting the `NEXT_PUBLIC_DCAPI_ENDPOINT` `env` variable value to https://dc-test-api.rdc-staging.library.northwestern.edu/api/v2 will run DC v2 against test data. The following commands start your server and the test suite.
 
-E2E tests use [Cypress](https://docs.cypress.io/), and are linted with [Cypress ESLint Plugin](https://github.com/cypress-io/eslint-plugin-cypress)
-
-To run the text suite:
+```bash
+# Start local server
+npm run dev:test-env
 
-```
+# Start Cypress test runner
 npm run cypress:open
 ```
 
+E2E tests use [Cypress](https://docs.cypress.io/), and are linted with [Cypress ESLint Plugin](https://github.com/cypress-io/eslint-plugin-cypress).
+
 ### Unit tests
 
 Unit tests use Jest and Testing Library React. Convention is to write tests alongside their respective components:
 
 ```
-// Sample directory
+# Sample directory
 /components/search/Search.tsx
 /components/search/Search.test.tsx
 ...

components/Facets/Facet/Option.tsx

@@ -1,5 +1,7 @@
 import * as Checkbox from "@radix-ui/react-checkbox";
+
 import { Indicator, OptionCount, OptionText } from "./GenericFacet.styled";
+
 import { FacetOption } from "@/types/components/facets";
 import { IconCheck } from "@/components/Shared/SVG/Icons";
 import React from "react";
@@ -16,8 +18,9 @@ const Option: React.FC<FacetOption> = ({ bucket, facet, index }) => {
     filterState: { userFacetsUnsubmitted },
   } = useFilterState();
 
-  const isChecked =
-    userFacetsUnsubmitted[facet] && userFacetsUnsubmitted[facet].includes(key);
+  const isChecked = !!(
+    userFacetsUnsubmitted[facet] && userFacetsUnsubmitted[facet].includes(key)
+  );
 
   const handleCheckedChange = (checkedStatus: boolean) => {
     const newObj: UserFacets = { ...userFacetsUnsubmitted };

components/Facets/Filter/Clear.tsx

@@ -20,6 +20,7 @@ const FilterClear: React.FC<FilterClearProps> = ({ isModal = false }) => {
   } = router;
 
   const handleClear = () => {
+    console.log("Clear click");
     isModal
       ? filterDispatch({
           type: "updateUserFacets",

components/Facets/Filter/GroupList.tsx

@@ -1,4 +1,5 @@
 import * as Accordion from "@radix-ui/react-accordion";
+
 import { ALL_FACETS, FACETS } from "@/lib/constants/facets-model";
 import {
   Group,
@@ -11,6 +12,7 @@ import {
   ItemToggle,
   TabsRoot,
 } from "@/components/Facets/Filter/GroupList.styled";
+
 import Facet from "@/components/Facets/Facet/Facet";
 import { IconChevronDown } from "@/components/Shared/SVG/Icons";
 import { getFacetGroup } from "@/lib/utils/facet-helpers";
@@ -51,7 +53,11 @@ const FacetsGroupList: React.FC = () => {
                 <ItemList>
                   {group.facets.map((facet) => {
                     return (
-                      <ItemToggle value={facet.id} key={facet.id}>
+                      <ItemToggle
+                        value={facet.id}
+                        key={facet.id}
+                        data-testid="facet-value-button"
+                      >
                         {facet.label}
                       </ItemToggle>
                     );

components/Grid/Grid.tsx

@@ -26,6 +26,7 @@ const Grid: React.FC<GridProps> = ({ data = [] }) => {
       breakpointCols={breakpointColumns}
       className="grid"
       columnClassName="grid-column"
+      data-testid="search-results-grid"
     >
       {data.map((item: SearchShape) => (
         <GridItem item={item} key={item.id} />

cypress.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
+    baseUrl: "https://devbox.library.northwestern.edu:3000",
+    defaultCommandTimeout: 6000,
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/homepage/homepage.cy.ts

@@ -1,24 +1,28 @@
 describe("Homepage component", () => {
   it("renders the hero slider", () => {
-    cy.visit("https://devbox.library.northwestern.edu:3000/");
+    cy.visit("/");
     cy.get(".swiper").within(() => {
       cy.get(".swiper-button-prev");
-      cy.get(".swiper-button-next");
-    });
-  });
+      cy.get(".swiper-button-next").as("nextBtn");
+
+      cy.get("figure")
+        .first()
+        .contains("Edward S. Curtis's The North American Indian")
+        .should(
+          "have.attr",
+          "href",
+          "https://dc-next.rdc-staging.library.northwestern.edu/collections/55ff2504-dd53-4943-b2cb-aeea46e77bc3"
+        );
+      cy.contains("Crossing the Pend d'Oreille - Kalispel");
 
-  it("renders the global search bar and fires off a successful search", () => {
-    cy.visit("https://devbox.library.northwestern.edu:3000/");
+      cy.get("@nextBtn").click();
 
-    cy.fixture("/search/response1.js").then((json) => {
-      cy.intercept(
-        "POST",
-        "https://dcapi.rdc-staging.library.northwestern.edu/api/v2/search*",
-        json
+      cy.contains("Berkeley Folk Music Festival").should(
+        "have.attr",
+        "href",
+        "https://dc-next.rdc-staging.library.northwestern.edu/collections/18ec4c6b-192a-4ab8-9903-ea0f393c35f7"
       );
-      cy.get("form[data-testid='search-ui-component'] input").type("foo");
-      cy.contains("Search").click();
-      cy.url().should("include", "/search?q=foo");
+      cy.contains("Joan Baez");
     });
   });