chore: move react-components playwright tests to docker

.github/workflows/ui-test-for-commit.yml

@@ -32,7 +32,7 @@ jobs:
 
       - name: test UI
         run:
-          npm run test:ui -w @iot-app-kit/dashboard --filter=[HEAD~1] && npm run test:ui -w @iot-app-kit/react-components --filter=[HEAD~1] && npm run test:ui -w @iot-app-kit/scene-composer --filter=[HEAD~1] --production
+          npm run test:ui -w @iot-app-kit/dashboard --filter=[HEAD~1] && npm run test:ui -w @iot-app-kit/react-components --filter=[HEAD~1] --production && npm run test:ui -w @iot-app-kit/scene-composer --filter=[HEAD~1] --production
       - uses: actions/upload-artifact@v4
         if: failure()
         with:

.github/workflows/ui-test-full-suite.yml

@@ -32,7 +32,7 @@ jobs:
 
       - name: test UI
         run:
-          npm run test:ui -w @iot-app-kit/dashboard && npm run test:ui -w @iot-app-kit/react-components && npm run test:ui -w @iot-app-kit/scene-composer --production
+          npm run test:ui -w @iot-app-kit/dashboard && npm run test:ui -w @iot-app-kit/react-components --production && npm run test:ui -w @iot-app-kit/scene-composer --production
       - uses: actions/upload-artifact@v4
         if: failure()
         with:

packages/react-components/README.md

@@ -0,0 +1,27 @@
+**UI Tests**
+
+Pre-requisites: You need to have [Docker](https://docs.docker.com/get-docker/) installed locally to run UI Tests, we rely on it to provide the necessary browsers to generate consistent screenshots.
+
+Commands:
+
+```bash
+# Run all tests once
+npm run test:ui
+
+# Check for flaky tests
+npm run test:ui:reliability
+
+# Update snapshots
+npm run test:ui:update
+```
+
+If you want to run the tests locally for whatever reason, as opposed to the docker image, you can run
+the same commands with the `--production` flag, which will run them without docker:
+
+```bash
+# Run all tests once
+npm run test:ui --production
+
+# Check for flaky tests
+npm run test:ui:reliability --production
+```

packages/react-components/docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.0'
+
+services:
+  playwright:
+    image: mcr.microsoft.com/playwright:v1.39.0-focal
+    build: .
+    volumes:
+      - ../../:/iot-app-kit
+    ports:
+      - 9323:9323/tcp
+      - 6007:6007/tcp
+    working_dir: '/iot-app-kit/packages/react-components'
+    command: sh -c "npx playwright install chromium"

packages/react-components/package.json

@@ -29,8 +29,15 @@
     "test:jest": "TZ=utc jest",
     "test:types": "tsc -p ./tsconfig.json --noEmit",
     "test:watch": "TZ=utc jest --watch",
-    "test:ui": "npx playwright test",
-    "test:ui-update": "npx playwright test --update-snapshots",
+    "playwright": "docker compose run playwright",
+    "test:ui": "if test \"$NODE_ENV\" = \"production\"; then npm run _test:ui:ci ; else npm run _test:ui:local ; fi",
+    "test:ui:reliability": "if test \"$NODE_ENV\" = \"production\"; then npm run _test:ui:reliability:ci ; else npm run _test:ui:reliability:local ; fi",
+    "_test:ui:ci": "npx playwright test",
+    "_test:ui:local": "npm run playwright -- npx playwright test",
+    "_test:ui:reliability:ci": "npx playwright test --repeat-each 5 --workers=1",
+    "_test:ui:reliability:local": "npm run playwright -- npx playwright test --repeat-each 5 --workers=1",
+    "test:ui:update": "npm run playwright -- npx playwright test --update-snapshots",
+    "test:ui:dev": "npx playwright test --ui",
     "lint": "eslint . --max-warnings=0",
     "fix": "eslint --fix .",
     "copy:license": "cp ../../LICENSE LICENSE",

packages/react-components/playwright.config.ts

@@ -30,8 +30,9 @@ export default defineConfig({
   /* 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. */
+  reporter: [
+    ['html', { host: '0.0.0.0' }],
+  ] /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */,
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
@@ -40,7 +41,7 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    baseURL: 'http://localhost:6007/',
+    baseURL: 'http://0.0.0.0:6007/',
   },
 
   /* Configure projects for major browsers */
@@ -58,7 +59,7 @@ export default defineConfig({
   webServer: {
     command: 'npm run start',
     reuseExistingServer: true,
-    url: 'http://localhost:6007',
+    url: 'http://0.0.0.0:6007',
     timeout: 300 * 1000, // 5 minutes
     stdout: 'pipe',
     stderr: 'pipe',

packages/scene-composer/README.md

@@ -17,20 +17,28 @@ npm run build
 
 Pre-requisites: You need to have [Docker](https://docs.docker.com/get-docker/) installed locally to run UI Tests, we rely on it to provide the necessary browsers to generate consistent screenshots.
 
-To setup the docker image, there's a post install script, so you may need to trigger it with:
+Commands:
 
 ```bash
-npm install
+# Run all tests once
+npm run test:ui
 
-# Or if you don't want to re-install everything
-docker compose up
+# Check for flaky tests
+npm run test:ui:reliability
+
+# Update snapshots
+npm run test:ui:update
 ```
 
-Commands:
+If you want to run the tests locally for whatever reason, as opposed to the docker image, you can run
+the same commands with the `--production` flag, which will run them without docker:
 
 ```bash
 # Run all tests once
+npm run test:ui --production
 
+# Check for flaky tests
+npm run test:ui:reliability --production
 ```
 
 **Analyze command**

packages/scene-composer/package.json

@@ -36,7 +36,6 @@
     }
   },
   "scripts": {
-    "postinstall": "docker compose up",
     "build": "run-s compile",
     "build:watch": "node ./tools/watch-build.js",
     "dev": "npm-watch build",