feat: introducing playwright tests (#424)

* scatter plot * scatter plot playwright and test storybook * playwright tests for scatter plot * scatter plot test stories * scatter plot test stories * scatter plot test stories * scatter plot test stories * scatter plot test stories * change scatter plot stories * violin plot playwright * violin plot playwright * scatter plot test stories * scatter plot test stories * scatter plot test stories * violin plot playwright * violin plot playwright * download plot fix * update screenshot fix * violin plot stories * violin plot y-axis fix * scatter plot git copilot * box plot playwright * box plot stories * heatmap playwright * heatmap playwright * heatmap stories * chromatic playwright * comment out a test * change scatter plot playwright imports * timeout for test * add delay to scatterPlot/04_color/no color selected * delay * delay * delay screenshot * delay screenshot * delay screenshot * delay screenshot * change import + delete delay + change scattergl to scatter * change name of snapshot * scatter plot chromatic * change imports to chromatic/playwright * violin plot: change import to chromatic/playwright * change only * change imports to chromatic/playwright * hexbin plot general and num columns * add YAxis merged option to violin vis * add null value edge cases to breast cancer data * update fetchBreastCancerData * allow using numerical columns as sub category on yaxis merged * breast cancer data and hexplot * change name of test in 04_size-opacity.spec.ts * correlation plot * adjust to breast cancer data change * change back to scattergl * add tooltip labels test * add waitForTimeout * auth playwright * add Playwright and Chromatic to README * change waitForTimeout * insert timeout * final changes * exclude xy pairs with null value from stats calculation * fix invalid scatter vis config * commit * delete cypress * update build.yml * make all * build_nightly.yml * update gitignore * Update to visyn_scripts 11 * Update compile scripts * Add @storybook/react * Use @storybook/react 7 * Fix linting * Downgrade to storybook 7 * fix test fails * Update playwright.config.ts * Update playwright.config.ts * hexbin rectangle brush * remove only * comment out test * package.json chromatic * Update build.yml * Update .yarnrc.yml * Update .gitignore * Delete chromatic-diagnostics.json * Update visyn_server.py * Update model.py * update package.json and repair tests * add waitForTimeout * waitforTimeout * hexbin no opacity timeout * Update build.yml * wait for timeout --------- Co-authored-by: dvmartinweigl <[email protected]> Co-authored-by: Michael Pühringer <[email protected]> Co-authored-by: Michael Puehringer <[email protected]>
datavisyn · Sep 5, 2024 · 70d2d98 · 70d2d98
1 parent 75a5766
commit 70d2d98
Show file tree

Hide file tree

Showing 85 changed files with 2,385 additions and 331 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -13,18 +13,22 @@ on:
         required: false
         type: boolean
         default: true
-      cypress:
-        description: 'Run cypress'
+      playwright:
+        description: 'Run playwright'
         required: false
         type: boolean
         default: false
+      playwright_spec_param:
+        type: string
+        description: 'Run specific playwright test(s) (optional). Example: landing-page.spec.ts'
+        required: false
       chromatic:
         description: 'Run chromatic'
         required: false
         type: boolean
         default: false
   push:
-  pull_request: 
+  pull_request:
     types: [opened, ready_for_review]
   pull_request_review:
     types: [submitted]
@@ -38,9 +42,10 @@ jobs:
     # To get on push true, use !contains(inputs.myInput, 'false')
     # To get on push false, use contains(inputs.myInput, 'true')
     with:
-      run_parallel: ${{ !contains(inputs.run_parallel, 'false') }}  # true except if box is not checked
-      runs_on: ${{ (!contains(inputs.self_hosted, 'false') && 'self-hosted') || null }}  # self-hosted except if box is not checked
+      run_parallel: ${{ !contains(inputs.run_parallel, 'false') }} # true except if box is not checked
+      runs_on: ${{ (!contains(inputs.self_hosted, 'false') && 'self-hosted') || null }} # self-hosted except if box is not checked
       chromatic_enable: ${{ inputs.chromatic == true || github.event_name == 'pull_request' || github.event.review.state == 'approved' }}
-      cypress_enable: true
-      cypress_run_because_flag: ${{ inputs.cypress == true || github.event_name == 'pull_request' || github.event.review.state == 'approved' }}
-      cypress_runs_on: ${{ (!contains(inputs.self_hosted, 'false') && 'self-hosted') || null }}  # self-hosted except if box is not checked
+      playwright_enable: true
+      playwright_run_because_flag: ${{ inputs.playwright == true || github.event_name == 'pull_request' || github.event.review.state == 'approved' }}
+      playwright_spec_param: ${{ inputs.playwright_spec_param }}
+      playwright_runs_on: ${{ (!contains(inputs.self_hosted, 'false') && 'self-hosted') || null }} # self-hosted except if box is not checked
diff --git a/.github/workflows/build_nightly.yml b/.github/workflows/build_nightly.yml
@@ -10,13 +10,17 @@ jobs:
     uses: datavisyn/github-workflows/.github/workflows/build-node-python.yml@main
     secrets: inherit
     with:
-      cypress_enable: true
-      cypress_run_because_flag: true
+      playwright_enable: true
+      playwright_run_because_flag: true
+      playwright_runs_on: self-hosted
+      deduplication_id: main
       branch: main
   build-develop:
     uses: datavisyn/github-workflows/.github/workflows/build-node-python.yml@main
     secrets: inherit
     with:
-      cypress_enable: true
-      cypress_run_because_flag: true
+      playwright_enable: true
+      playwright_run_because_flag: true
+      playwright_runs_on: self-hosted
+      deduplication_id: develop
       branch: develop
diff --git a/.gitignore b/.gitignore
@@ -43,4 +43,15 @@ node_modules/
 !.yarn/versions
 
 # env
-/.venv*/
+/.venv*/
+/blob-report/
+
+# playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/playwright/.auth/
+/playwright/download-test-results/
+
+# chromatic
+chromatic-diagnostics.json
diff --git a/README.md b/README.md
@@ -42,6 +42,27 @@ yarn run test
 make test
 ```
 
+### Playwright and Chromatic
+
+To run all tests and create snapshots, execute Playwright first. With this command all snapshots are already taken and captured in an archive. Make sure to commit all your changes before taking any snapshots.
+Before executing this command, make sure backend and frontend are running smoothly.
+
+```bash
+yarn pw:run
+```
+
+To upload these snapshots to Chromatic’s cloud and review them, execute:
+
+```bash
+yarn chromatic --playwright -t=<TOKEN>
+```
+
+Chromatic creates for every test a story in storybook, although these are not responsive. When clicking on the link in the terminal, all changes can be reviewed and storybook can be opened.
+
+Playwright documentation: [https://playwright.dev/docs/intro](https://playwright.dev/docs/intro)
+
+Chromatic with Playwright: [https://www.chromatic.com/docs/playwright/](https://www.chromatic.com/docs/playwright/)
+
 ## Building
 
 ```

diff --git a/cypress.config.ts b/cypress.config.ts
diff --git a/cypress/.gitignore b/cypress/.gitignore
diff --git a/cypress/component/component-health-check.cy.tsx b/cypress/component/component-health-check.cy.tsx
diff --git a/cypress/e2e/health-check.cy.ts b/cypress/e2e/health-check.cy.ts
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
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