Add CI and visual testing (#2)

.github/workflows/main.yaml

@@ -0,0 +1,37 @@
+name: Cypress Tests
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization
+    # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
+    # Also see warning here https://github.com/cypress-io/github-action#parallel
+    strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+      matrix:
+        containers: [1, 2] # Uses 2 parallel instances
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Cypress run
+        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+        uses: cypress-io/github-action@v5
+        with:
+          build: npm run build
+          # Starts web server for E2E tests - replace with your own server invocation
+          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
+          start: npm start
+          wait-on: "http://localhost:3000" # Waits for above
+          command-prefix: "percy exec -- npx"
+          # Records to Cypress Cloud
+          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
+          record: true
+          parallel: true # Runs test in parallel using settings above
+        env:
+          # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
+          # in GitHub repo → Settings → Secrets → Actions
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

cypress.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  projectId: "s8kmno",
   e2e: {
     baseUrl: "http://localhost:3000",
     defaultCommandTimeout: 10000,

cypress/e2e/GenerationPage.cy.ts

@@ -1,17 +1,18 @@
 describe("Use cases of the Generation Page", () => {
   it("when initiated the generation page should display the page info", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
-    cy.contains("Region");
-    cy.contains("Pokemons: 151");
+    cy.percySnapshot();
   });
 
-  it("when clicked in a pokemon in the listing should redirec to pokemon page", () => {
+  it("when clicked in a pokemon in the listing should redirect to pokemon page", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1`);
+    cy.get("[data-testid=pokemon-details-section]").should("not.exist");
+
     cy.get("[data-testid=pokemon-listing]").within(() => {
       cy.get("a").contains("bulbasaur").click();
     });
 
-    cy.get("[data-testid=pokemon-details-section]").should("not.exist");
+    cy.get("[data-testid=pokemon-details-section]").should("exist");
 
     cy.url().should("be.equal", `${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
   });

cypress/e2e/GenerationsPage.cy.ts

@@ -1,8 +1,7 @@
 describe("Use cases of the initial page (Generations Page)", () => {
   it("when initiated should render the generations page", () => {
     cy.visit(Cypress.config().baseUrl);
-
-    cy.get("a").contains("Generation I");
+    cy.percySnapshot();
   });
 
   it("when tried to access an invalid route should display an error message", () => {

cypress/e2e/PokemonPage.cy.ts

@@ -1,16 +1,7 @@
 describe("Use cases of the Pokemon Page", () => {
   it("when initiated the Pokemon Page should display the pokemon info", () => {
     cy.visit(`${Cypress.config().baseUrl}/generation/1/pokemon/bulbasaur`);
-
-    cy.get("[data-testid=pokemon-header]").within(() => {
-      cy.get("[alt=bulbasaur]").should("exist");
-    });
-
-    cy.get("[data-testid=pokemon-details-section]").within(() => {
-      cy.get("[data-testid=pokemon-evolution-stages]").should("exist");
-      cy.get("[data-testid=pokemon-stats]").should("exist");
-      cy.get("[data-testid=pokemon-header]").should("exist");
-    });
+    cy.percySnapshot();
   });
 
   it("when initiated the Pokemon Page with error should display the error message", () => {

cypress/support/e2e.ts

@@ -15,6 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
-
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+import "@percy/cypress";

cypress/tsconfig.json

@@ -1 +1,5 @@
-{}
+{
+  "compilerOptions": {
+    "types": ["cypress", "@percy/cypress"]
+  }
+}

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "percy:cypress": "percy exec -- npm run e2e:headless",
     "cypress": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
     "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
@@ -21,23 +22,25 @@
     "@material-ui/icons": "^4.11.3",
     "autoprefixer": "10.4.14",
     "chart.js": "^4.3.0",
-    "eslint": "8.41.0",
-    "eslint-config-next": "13.4.4",
     "next": "13.4.4",
     "next-intl": "2.15.0-beta.5",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "tailwindcss": "3.3.2"
   },
   "devDependencies": {
+    "@percy/cli": "^1.26.3",
+    "@percy/cypress": "^3.1.2",
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "cypress": "^12.17.2",
+    "eslint": "8.41.0",
+    "eslint-config-next": "13.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "start-server-and-test": "^2.0.0"
+    "start-server-and-test": "^2.0.0",
+    "typescript": "5.0.4"
   }
 }

src/components/ErrorPage.tsx

@@ -3,7 +3,6 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import React from "react";
 
 export default function ErrorPage({ message }: { message: string }) {
   const router = useRouter();
@@ -26,13 +25,13 @@ export default function ErrorPage({ message }: { message: string }) {
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
-                stroke-width="1.5"
+                strokeWidth="1.5"
                 stroke="currentColor"
                 className="w-5 h-5 rtl:rotate-180"
               >
                 <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
                 />
               </svg>