test: CI/CD workflow for e2e tests (#126)

* test: docker set up for e2e tests * test: added github workflow for e2e tests * fix: added secret_words to synpress container * refactor: moved docker-compose and nginx.conf * fixup! test: added github workflow for e2e tests chore: renamed e2e_docker to e2e_tests * fixup! test: added github workflow for e2e tests refactor: using version tags instead of shas * fixup! test: added github workflow for e2e tests refactor: used simpler tag versions * fixup! test: added github workflow for e2e tests refactor: simplified condition * fixup! refactor: moved docker-compose and nginx.conf fix: fix path for artifacts --------- Co-authored-by: Samuel Siegart <samsiegart@gmail.com>
Agoric · Mar 19, 2024 · fdc0ebb · fdc0ebb
1 parent 4234ef7
commit fdc0ebb
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 21 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules/
+docker
diff --git a/.github/workflows/e2e_tests.yml b/.github/workflows/e2e_tests.yml
@@ -0,0 +1,65 @@
+name: E2E tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label ||
+    github.head_ref || github.ref }}'
+  cancel-in-progress: true
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Run e2e tests
+        run: |
+          docker-compose -f tests/e2e/docker-compose.yml --profile synpress up --build --exit-code-from synpress
+        env:
+          COMPOSE_DOCKER_CLI_BUILD: 1
+          DOCKER_BUILDKIT: 1
+          DOCKER_DEFAULT_PLATFORM: linux/amd64
+          NGROK_AUTH: ${{ secrets.NGROK_AUTH }}
+          NGROK_BASIC_AUTH: ${{ secrets.NGROK_BASIC_AUTH }}
+          CYPRESS_PRIVATE_KEY_WITH_FUNDS: ${{ secrets.CYPRESS_PRIVATE_KEY_WITH_FUNDS }}
+          ANVIL_FORK_URL: ${{ secrets.ANVIL_FORK_URL }}
+          GH_PAT: ${{ secrets.GH_PAT }}
+          GH_USERNAME: ${{ secrets.GH_USERNAME }}
+          # cypress dashboard
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
+
+      - name: Archive e2e artifacts
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: e2e-artifacts
+          path: |
+            tests/e2e/docker/videos
+            tests/e2e/docker/videos-ci
+            tests/e2e/docker/screenshots
+        continue-on-error: true
diff --git a/.gitignore b/.gitignore
@@ -26,4 +26,5 @@ dist-ssr
 
 # E2E tests
 tests/e2e/screenshots
-tests/e2e/videos
+tests/e2e/videos
+docker
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,13 @@
+# syntax=docker/dockerfile:1
+FROM --platform=linux/amd64 synthetixio/docker-e2e:18.16-ubuntu as base
+
+RUN mkdir /app
+WORKDIR /app
+
+RUN apt update && apt install -y nginx
+
+COPY tests/e2e/nginx.conf /etc/nginx/sites-available/default
+
+COPY . .
+
+RUN yarn install --frozen-lockfile
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "format": "prettier --write . && yarn lint --fix",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "test:e2e": "EXTENSION=keplr synpress run --configFile=tests/e2e/synpress.config.cjs"
+    "test:e2e": "EXTENSION=keplr synpress run --configFile=tests/e2e/synpress.config.cjs",
+    "test:e2e:ci": "start-server-and-test 'yarn dev' http-get://localhost:5173 'yarn test:e2e'"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -53,6 +54,7 @@
     "react-icons": "^4.4.0",
     "react-loader-spinner": "~5.4.5",
     "react-toastify": "^9.0.8",
+    "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.6.4",
     "vite": "^3.2.7",

diff --git a/tests/e2e/docker-compose.yml b/tests/e2e/docker-compose.yml
@@ -0,0 +1,117 @@
+version: '3.9'
+
+services:
+  synpress:
+    profiles:
+      - synpress
+    container_name: synpress
+    build: ../..
+    environment:
+      - DISPLAY=display:0.0
+      - CYPRESS_PRIVATE_KEY_WITH_FUNDS=${CYPRESS_PRIVATE_KEY_WITH_FUNDS}
+      - DEBUG=${DEBUG}
+      - CYPRESS_DOCKER_RUN=true
+      - GH_PAT=${GH_PAT}
+      - GH_USERNAME=${GH_USERNAME}
+      - CI=${CI}
+      # cypress dashboard
+      - CYPRESS_GROUP=${CYPRESS_GROUP}
+      - GITHUB_TOKEN=${GITHUB_TOKEN}
+      - CYPRESS_PROJECT_ID=${CYPRESS_PROJECT_ID}
+      - CYPRESS_RECORD_KEY=${CYPRESS_RECORD_KEY}
+      - COMMIT_INFO_MESSAGE=${COMMIT_INFO_MESSAGE}
+      - COMMIT_INFO_SHA=${COMMIT_INFO_SHA}
+      # passing required CI variables
+      - GITHUB_ACTIONS=${GITHUB_ACTIONS}
+      - GITHUB_WORKFLOW=${GITHUB_WORKFLOW}
+      - GITHUB_ACTION=${GITHUB_ACTION}
+      - GITHUB_EVENT_NAME=${GITHUB_EVENT_NAME}
+      - GITHUB_RUN_ID=${GITHUB_RUN_ID}
+      - GITHUB_RUN_ATTEMPT=${GITHUB_RUN_ATTEMPT}
+      - GITHUB_REPOSITORY=${GITHUB_REPOSITORY}
+      - GH_BRANCH=${GH_BRANCH}
+      - GITHUB_SHA=${GITHUB_SHA}
+      - GITHUB_REF=${GITHUB_REF}
+      - GITHUB_BASE_REF=${GITHUB_BASE_REF}
+      - GITHUB_HEAD_REF=${GITHUB_HEAD_REF}
+      - SECRET_WORDS="orbit bench unit task food shock brand bracket domain regular warfare company announce wheel grape trust sphere boy doctor half guard ritual three ecology"
+    depends_on:
+      - display
+      - video
+      - agd
+    entrypoint: []
+    working_dir: /app
+    volumes:
+      - ./docker/videos:/app/tests/e2e/videos
+      - ./docker/screenshots:/app/tests/e2e/screenshots
+    command: >
+      bash -c 'echo -n "======> local noVNC URL: http://localhost:8080/vnc.html?autoconnect=true " && pnpm wait-on http://display:8080 && echo -n "======> remote noVNC URL: " && curl -s ngrok:4040/api/tunnels | jq -r .tunnels[0].public_url && nginx && yarn test:e2e:ci'
+    networks:
+      - x11
+
+  display:
+    profiles:
+      - synpress
+    container_name: display
+    image: synthetixio/display:016121eafdfff448414894d0ca5a50b1d72b62eb-base
+    environment:
+      - RUN_XTERM=no
+      - DISPLAY_WIDTH=1920
+      - DISPLAY_HEIGHT=1080
+    ports:
+      - '8080:8080'
+    networks:
+      - x11
+
+  ngrok:
+    profiles:
+      - ngrok
+    container_name: ngrok
+    image: synthetixio/ngrok:016121eafdfff448414894d0ca5a50b1d72b62eb-base
+    ports:
+      - '4040:4040'
+    command: ['ngrok', 'http', 'display:8080', '--authtoken', '${NGROK_AUTH}']
+    environment:
+      - NGROK_AUTH=${NGROK_AUTH}
+      - NGROK_BASIC_AUTH=${NGROK_BASIC_AUTH}
+    depends_on:
+      - display
+    networks:
+      - x11
+
+  video:
+    profiles:
+      - synpress
+    container_name: video
+    image: synthetixio/video:457bb48776c3b14de232d9dda620ba9188dc40ac-base
+    volumes:
+      - ./docker/videos-ci:/videos
+    environment:
+      - FILE_NAME=CI-full-video.mp4
+      - SE_SCREEN_WIDTH=1920
+      - SE_SCREEN_HEIGHT=1080
+    depends_on:
+      - display
+    networks:
+      - x11
+
+  agd:
+    profiles:
+      - synpress
+    container_name: agoric_chain
+    image: ghcr.io/agoric/agoric-3-proposals:main
+    logging:
+      driver: none
+    platform: linux/amd64
+    ports:
+      - 26656:26656
+      - 26657:26657
+      - 1317:1317
+    environment:
+      DEST: 1
+      DEBUG: 'SwingSet:ls,SwingSet:vat'
+    networks:
+      - x11
+
+networks:
+  x11:
diff --git a/tests/e2e/nginx.conf b/tests/e2e/nginx.conf
@@ -0,0 +1,39 @@
+server {
+    listen 26656;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://agoric_chain:26656;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+
+server {
+    listen 26657;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://agoric_chain:26657;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+
+
+server {
+    listen 1317;
+    server_name localhost;
+
+    location / {
+        proxy_pass http://agoric_chain:1317;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}