test(e2e): enable running e2e tests with docker

fix: update rekor endpoint string

fix(ci): error about deprecated husky install command

ci(e2e): add headless configuration in docker compose

test(e2e): include volumes for test artifacts

ci(e2e): add e2e github workflow

fix: use v4 for github actions

.github/workflows/e2e-tests.yaml

@@ -0,0 +1,36 @@
+name: Cross Browser End-to-End Testing (Cypress)  🚀
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+    types: [opened, reopened]
+  schedule:
+    - cron: '0 2 * * FRI'
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@v4
+
+      - name: Run docker-compose 🐳
+        run: docker-compose up -d cypress
+
+      - name: Wait for services to start ⏱️
+        run: docker-compose logs -f
+
+      - name: Upload Electron artifacts 📸
+        uses: actions/upload-artifact@v4
+        with:
+          name: electron-artifacts
+          path: |
+            ./artifacts/electron/videos
+            ./artifacts/electron/screenshots
+          if-no-files-found: ignore
+          retention-days: 5
+

.github/workflows/format.yaml

@@ -1,7 +1,7 @@
 # Copyright 2022 Chainguard, Inc.
 # SPDX-License-Identifier: Apache-2.0
 
-name: Format
+name: Format  💅
 
 on:
   pull_request:

.github/workflows/unit-tests.yaml

@@ -1,4 +1,4 @@
-name: 🧪 Unit Tests (Jest)
+name: Unit Tests (Jest)  🧪
 
 on:
   push:

cypress.Dockerfile

@@ -0,0 +1,16 @@
+FROM cypress/browsers:node-20.13.0-chrome-124.0.6367.155-1-ff-125.0.3-edge-124.0.2478.80-1
+ARG NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
+ENV NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN=${NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN}
+
+WORKDIR /e2e
+
+COPY ./package.json .
+COPY ./package-lock.json .
+COPY ./cypress.config.ts .
+COPY ./cypress ./cypress
+
+RUN npm install
+
+RUN npx cypress install
+
+ENTRYPOINT ["npx", "cypress", "run"]

cypress.config.ts

@@ -2,10 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
 	e2e: {
-		baseUrl: "http://localhost:3000",
+		baseUrl: "http://nextjs:3000",
 		experimentalStudio: true,
-		setupNodeEvents(_on, _config) {
-			// implement node event listeners here
-		},
 	},
 });

cypress/tsconfig.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"baseUrl": "./",
 		"target": "es5",
 		"lib": ["es5", "dom"],
 		"types": ["cypress", "node"]

docker-compose.yaml

@@ -0,0 +1,29 @@
+services:
+  nextjs:
+    build: .
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: npm start
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN=https://rekor.sigstore.dev
+
+  cypress:
+    build:
+      context: .
+      dockerfile: cypress.Dockerfile
+      args:
+        NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: https://rekor.sigstore.dev
+    depends_on:
+      - nextjs
+    volumes:
+      # set mappings to access artifacts outside of containers
+      - ./artifacts/electron/videos:/e2e/cypress/videos
+      - ./artifacts/electron/screenshots:/e2e/cypress/screenshots
+    environment:
+      - CYPRESS_BASE_URL=http://nextjs:3000
+    # run electron in headless mode
+    command: npx cypress run