replaces Cypress with Playwright

.github/workflows/e2e-client.yml

@@ -0,0 +1,58 @@
+name: e2e client x
+on:
+  push:
+    paths:
+      - 'app/**'
+      - ".github/workflows/e2e-client.yml"
+      - '!app/README.md'
+
+jobs:
+  e2e_client:
+    timeout-minutes: 15
+    runs-on: ubuntu-22.04
+    strategy:
+      fail-fast: false
+    defaults:
+      run:
+        working-directory: app
+    steps:
+    - name: checkout pull
+      uses: actions/checkout@v3
+    - name: Node setup
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: 'app/.nvmrc'
+        cache: yarn
+        cache-dependency-path: 'app/yarn.lock'
+
+    # - name: Get yarn cache directory path
+    #   id: yarn-cache-dir-path
+    #   run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+    # - name: Yarn cache
+    #   uses: actions/cache@v3
+    #   id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+    #   with:
+    #     path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+    #     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+    #     restore-keys: |
+    #       ${{ runner.os }}-yarn-
+    - name: Install dependencies
+      run: yarn install --immutable
+
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+      env:
+        NEXT_PUBLIC_MAPBOX_API_TOKEN: ${{ secrets.NEXT_PUBLIC_MAPBOX_API_TOKEN }}
+        # Recommended: pass the GitHub token lets this action correctly
+        # determine the unique run id necessary to re-run the checks
+        # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

app/.env.test

@@ -0,0 +1,3 @@
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=cats
+NEXT_PUBLIC_API_URL=https://marxan23.northeurope.cloudapp.azure.com

app/.eslintignore

@@ -1,3 +1,2 @@
 node_modules
 .next
-# **/*__test__.js

app/.gitignore

@@ -26,10 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*
+!.env.test
 
 # vercel
 .vercel
@@ -43,9 +41,6 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 
-# cypress
-/cypress/screenshots
-/cypress/videos
 
 # storybook
 storybook-static
@@ -54,3 +49,9 @@ storybook-static
 tsconfig.tsbuildinfo
 
 report.*
+
+# e2e testing
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/e2e/.auth

app/docs/tests.stories.mdx

@@ -4,4 +4,4 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # Tests
 
-- Cypress
+- Playwright

app/e2e/example.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('About page', async ({ page }) => {
+  await page.goto('/about');
+
+  await expect(page).toHaveTitle(/About/);
+});

app/layout/sign-in/component.tsx

@@ -40,6 +40,7 @@ export const SignIn: React.FC<SignInProps> = () => {
           url: '/sign-in',
           data: omit(data, 'checkbox'),
         });
+
         if (signUpResponse.status === 201) {
           await signIn('credentials', { ...data, callbackUrl });
         }

app/package.json

@@ -8,8 +8,8 @@
     "start": "next start",
     "check-types": "tsc",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
+    "e2e:ui": "playwright test --ui",
+    "e2e": "playwright test",
     "storybook:styles:dev": "NODE_ENV=development tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
     "storybook:styles:prod": "NODE_ENV=production tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
     "storybook:dev": "yarn storybook:styles:dev && start-storybook -p 6006 -s ./public -c .storybook",
@@ -60,6 +60,7 @@
     "d3-ease": "^2.0.0",
     "date-fns": "^2.19.0",
     "deck.gl": "7.3.6",
+    "dotenv": "16.3.1",
     "downshift": "^6.0.15",
     "fast-password-entropy": "^1.1.1",
     "final-form": "4.20.9",
@@ -103,6 +104,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@playwright/test": "1.35.1",
     "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
@@ -115,7 +117,6 @@
     "@typescript-eslint/parser": "5.57.0",
     "autoprefixer": "^10.0.2",
     "babel-loader": "^8.2.2",
-    "cypress": "12.9.0",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "eslint-config-prettier": "8.8.0",

app/pages/api/auth/[...nextauth].ts

@@ -88,6 +88,18 @@ const options = {
   ],
 
   callbacks: {
+    async signIn({ user, account, profile, email, credentials }) {
+      console.log({ user, account, profile, email, credentials });
+      const isAllowedToSignIn = true;
+      if (isAllowedToSignIn) {
+        return true;
+      } else {
+        // Return false to display a default error message
+        return false;
+        // Or you can return a URL to redirect to:
+        // return '/unauthorized'
+      }
+    },
     // Assigning encoded token from API to token created in the session
     async jwt({ token, user }) {
       if (user) {

app/playwright.config.ts

@@ -0,0 +1,97 @@
+import path from 'path';
+
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+
+const PORT = process.env.PORT || 3000;
+
+export default defineConfig({
+  testDir: './e2e',
+  outputDir: './e2e/test-results',
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI ? 'yarn build && yarn start' : 'yarn dev',
+    url: `http://localhost:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+    env: {
+      // NEXTAUTH_URL: `http://localhost:${PORT}`,
+      // NEXTAUTH_SECRET:
+      //   'eyJhbGciOiJIUzUxMiJ9.ew0KICAic3ViIjogIjEyMzQ1Njc4OTAiLA0KICAibmFtZSI6ICJBbmlzaCBOYXRoIiwNCiAgImlhdCI6IDE1MTYyMzkwMjINCn0.iAHjJSyVz3a9cd6AfCHz05hEYeueUBmNHaSjBlKm8i5ygAIsRa9u5_yDV3HH2G599Sc2ueycdKP32BzTGRDeuA',
+      // NEXT_PUBLIC_API_URL: 'https://test.marxanapi.com',
+    },
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${PORT}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'auth-setup',
+      testMatch: 'e2e/setups/auth.ts',
+    },
+    {
+      name: 'Google Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+      },
+      // dependencies: ['auth-setup'],
+    },
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     ...devices['Desktop Edge'],
+    //     channel: 'msedge',
+    //   },
+    //   dependencies: ['auth-setup'],
+    // },
+    // {
+    //   name: 'Mozilla Firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    //   dependencies: ['auth-setup'],
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+});