feat: setup e2e tests (#924)

Co-authored-by: pradel <pradel@users.noreply.github.com>

.changeset/smooth-planes-tease.md

@@ -0,0 +1,5 @@
+---
+'@sigle/app': minor
+---
+
+Setup E2E tests to catch visual regressions.

.github/workflows/nodejs.yml

@@ -44,6 +44,56 @@ jobs:
       - name: Run sigle tests
         run: pnpm run test
 
+  test-sigle-e2e:
+    runs-on: ubuntu-20.04
+    container:
+      image: mcr.microsoft.com/playwright:v1.36.0-jammy
+    defaults:
+      run:
+        working-directory: sigle
+    strategy:
+      matrix:
+        node-version: [18]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Get next.js sigle cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/sigle/.next/cache
+          key: ${{ runner.os }}-nextjs-sigle-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install Dependencies
+        run: pnpm install --filter={.}...
+
+      - name: Install Playwright Browsers
+        run: pnpm playwright install --with-deps chromium
+
+      - name: Build sigle
+        run: pnpm run build
+
+      # TODO ideally this should be tested on the vercel link
+      - name: Run sigle e2e tests
+        run: pnpm run test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: sigle/playwright-report
+          path: sigle/playwright-report/
+          retention-days: 10
+
   test-api:
     runs-on: ubuntu-20.04
     defaults:
@@ -184,5 +234,5 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --filter={.}...
 
-      - name: Build sigle
+      - name: Build custom-domain
         run: pnpm run build

CONTRIBUTING.md

@@ -90,6 +90,13 @@ You can now open your browser and go to http://localhost:3000 to see the app.
 
 If needed, you can use your own environment variables in development. For this create a `.env.development.local` file in the application directory (which will be ignored by Git) and setup your variables.
 
+### Update the e2e tests snapshots
+
+```sh
+docker build -t local-playwright-docker --file Dockerfile.e2e ../
+docker run -v "./e2e:/app/sigle/e2e" -it local-playwright-docker:latest
+```
+
 ## License
 
 Sigle is licensed under the [MIT license](https://github.com/sigle/sigle/blob/main/LICENSE).

apps/sigle-next/next.config.js

@@ -1,16 +1,5 @@
 const { withSentryConfig } = require('@sentry/nextjs');
 
-const corsHeaders = [
-  {
-    key: 'Access-Control-Allow-Origin',
-    value: '*',
-  },
-  {
-    key: 'Access-Control-Allow-Headers',
-    value: '*',
-  },
-];
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,