Merge branch 'main' into rohan/layered-dropdown-menu

iTwin · Oct 7, 2024 · 71d4c44 · 71d4c44
2 parents 72b19c5 + 7179d7b
commit 71d4c44
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -25,6 +25,18 @@
       "command": "pnpm run test",
       "detail": "Run all tests"
     },
+    {
+      "label": "Approve",
+      "type": "shell",
+      "command": "pnpm run approve",
+      "detail": "Approve test images in all workspaces"
+    },
+    {
+      "label": "Approve specific",
+      "type": "shell",
+      "command": "pnpm run approve:${input:imageTestingTypes}",
+      "detail": "Approve only specific type of test images"
+    },
     {
       "label": "Component test",
       "type": "shell",
@@ -59,6 +71,15 @@
         "e2e"
       ]
     },
+    {
+      "type": "pickString",
+      "id": "imageTestingTypes",
+      "description": "Choose a type of test image",
+      "options": [
+        "css",
+        "react",
+      ]
+    },
     {
       "type": "pickString",
       "id": "componentName",
@@ -136,11 +157,26 @@
       "id": "testFilter",
       "description": "Choose a workspace to run tests for",
       "options": [
-        { "label": "visual tests", "value": "css-workshop" },
-        { "label": "visual tests", "value": "react-workshop" },
-        { "label": "unit tests", "value": "@itwin/itwinui-react" },
-        { "label": "end-to-end tests", "value": "e2e" },
-        { "label": "accessibility tests", "value": "a11y" }
+        {
+          "label": "visual tests",
+          "value": "css-workshop"
+        },
+        {
+          "label": "visual tests",
+          "value": "react-workshop"
+        },
+        {
+          "label": "unit tests",
+          "value": "@itwin/itwinui-react"
+        },
+        {
+          "label": "end-to-end tests",
+          "value": "e2e"
+        },
+        {
+          "label": "accessibility tests",
+          "value": "a11y"
+        }
       ]
     }
   ]

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -48,6 +48,10 @@ To clone and build iTwinUI, you'll need [Git](https://git-scm.com), [Node 18+](h
 
 _Before running this command, make sure Docker is running. See [Visual testing](#visual-testing-css) (CSS and React) sections below for more details._
 
+### To approve all test image changes
+
+`pnpm approve` ([more info](#visual-testing-approval))
+
 ### To run all tests for a specific component
 
 `pnpm test [component-name]` e.g. `pnpm test Alert`
@@ -383,6 +387,14 @@ Notice how we do all of these things manually:
 
 We have full access to the [Cypress API](https://docs.cypress.io/api) so any additional interactions or custom logic can be easily added.
 
+### Visual testing (approval)
+
+After making any desired visual changes, the following commands can be used to update the test image snapshots:
+
+* `pnpm approve` (approve in all workspaces)
+* `pnpm approve:css` (approve in css-workshop only) ([more info](#how-to-run-tests))
+* `pnpm approve:react` (approve in react-workshop only) ([more info](#running-visual-tests))
+
 ### Accessibility testing
 
 We use an automated script to evaluate each component example for accessibility violations using [`cypress-axe`](https://github.com/component-driven/cypress-axe). The setup for this can be found in the `a11y` workspace, and the component examples can be found in the `examples` workspace.

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "prepare": "husky install && playwright install",
     "lint:copyright": "node scripts/copyrightLinter.js",
     "createComponent": "node scripts/createComponent.js",
+    "approve": "pnpm run approve:css && pnpm run approve:react",
     "approve:css": "pnpm --filter css-workshop approve",
     "approve:react": "pnpm --filter react-workshop approve",
     "clean": "turbo run clean && rimraf node_modules",