feat: add playwright tests (#64)

* feat(test): add Playwright * feat(test): test the wall insulation * feat(test): test the window control dialog * feat(test): use PageModelObject to simplify the tests * feat(test): remove cypress * fix: update the HouseComponentContext to not override the material's composition
graasp · Dec 4, 2024 · f86b37e · f86b37e
1 parent a42b66b
commit f86b37e
Show file tree

Hide file tree

Showing 35 changed files with 624 additions and 1,317 deletions.
diff --git a/.github/workflows/cypress.yml → .github/workflows/tests.yml b/.github/workflows/cypress.yml → .github/workflows/tests.yml
@@ -1,4 +1,4 @@
-name: Cypress UI tests
+name: Tests
 
 on:
   push:
@@ -7,55 +7,59 @@ on:
   merge_group:
   pull_request:
 
+env:
+  VITE_PORT: 3000
+  VITE_API_HOST: http://localhost:3636
+  VITE_GRAASP_APP_KEY: id-1234567890
+  VITE_ENABLE_MOCK_API: true
+  VITE_VERSION: ci-tests
+  CI: true
+
 jobs:
-  cypress-run:
-    concurrency: cypress-${{ github.head_ref || github.ref }}
+  run-tests:
+    concurrency: tests-${{ github.head_ref || github.ref }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
-        with:
-          cypress: true
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
 
       - name: Build App
         run: yarn build:test
         shell: bash
         env:
-          VITE_PORT: 3000
-          VITE_API_HOST: http://localhost:3636
-          VITE_GRAASP_APP_KEY: id-1234567890
-          VITE_ENABLE_MOCK_API: true
-          VITE_VERSION: cypress-tests
+          VITE_PORT: ${{ env.VITE_PORT }}
+          VITE_API_HOST: ${{ env.VITE_API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ env.VITE_GRAASP_APP_KEY }}
+          VITE_ENABLE_MOCK_API: ${{ env.VITE_ENABLE_MOCK_API }}
+          VITE_VERSION: ${{ env.VITE_VERSION }}
+          CI: ${{ env.CI }}
 
       - name: Vitest Run
-        run: yarn vitest
+        run: yarn unittest
         shell: bash
 
-      - name: Cypress Run
-        uses: cypress-io/github-action@v5
+      - name: Playwright Run
+        run: yarn playwright
+        shell: bash
         env:
-          VITE_PORT: 3000
-          VITE_API_HOST: http://localhost:3636
-          VITE_GRAASP_APP_KEY: id-1234567890
-          VITE_ENABLE_MOCK_API: true
-          VITE_VERSION: cypress-tests
-        with:
-          install: false
-          config: baseUrl=http://localhost:3000
-          start: yarn preview:test
-          browser: chrome
-          quiet: true
-          # point to new cypress@10 config file
-          config-file: cypress.config.ts
+          VITE_PORT: ${{ env.VITE_PORT }}
+          VITE_API_HOST: ${{ env.VITE_API_HOST }}
+          VITE_GRAASP_APP_KEY: ${{ env.VITE_GRAASP_APP_KEY }}
+          VITE_ENABLE_MOCK_API: ${{ env.VITE_ENABLE_MOCK_API }}
+          VITE_VERSION: ${{ env.VITE_VERSION }}
+          CI: ${{ env.CI }}
 
       - uses: actions/upload-artifact@v4
         if: failure()
         with:
-          name: cypress-screenshots
-          path: cypress/screenshots
+          name: playwright-report
+          path: playwright-report
 
       - name: coverage report
         run: npx nyc report --reporter=text-summary

diff --git a/.gitignore b/.gitignore
@@ -37,7 +37,8 @@ yarn-debug.log*
 .vscode/*
 !.vscode/settings.json
 
-# cypress
-cypress/screenshots/
-cypress/videos/
-cypress/downloads/
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/cypress.config.ts b/cypress.config.ts
diff --git a/cypress/e2e/analytics/main.cy.ts b/cypress/e2e/analytics/main.cy.ts
diff --git a/cypress/e2e/builder/main.cy.ts b/cypress/e2e/builder/main.cy.ts
diff --git a/cypress/e2e/player/main.cy.ts b/cypress/e2e/player/main.cy.ts
diff --git a/cypress/fixtures/members.ts b/cypress/fixtures/members.ts
diff --git a/cypress/fixtures/mockItem.ts b/cypress/fixtures/mockItem.ts
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -31,6 +31,7 @@ export default [
       '**/.nyc_output',
       '**/.yarn',
       '**/commitlint.config.cjs',
+      'playwright-report/**/*',
     ],
   },
   ...fixupConfigRules(
@@ -39,7 +40,6 @@ export default [
       'airbnb-typescript',
       'plugin:import/typescript',
       'prettier',
-      'plugin:cypress/recommended',
       'plugin:react/recommended',
       'plugin:react-hooks/recommended',
       'plugin:@typescript-eslint/recommended',