From c34dc73a8993e48a94c8a23665c3544598eee3b7 Mon Sep 17 00:00:00 2001 From: Mitchell Lee Date: Tue, 13 Feb 2024 09:58:06 -0600 Subject: [PATCH] chore: move react-components playwright tests to docker --- .github/workflows/ui-test-for-commit.yml | 2 +- .github/workflows/ui-test-full-suite.yml | 2 +- packages/react-components/README.md | 27 +++++++++++++++++++ packages/react-components/docker-compose.yml | 13 +++++++++ packages/react-components/package.json | 11 ++++++-- .../react-components/playwright.config.ts | 9 ++++--- packages/scene-composer/README.md | 18 +++++++++---- packages/scene-composer/package.json | 1 - 8 files changed, 69 insertions(+), 14 deletions(-) create mode 100644 packages/react-components/README.md create mode 100644 packages/react-components/docker-compose.yml diff --git a/.github/workflows/ui-test-for-commit.yml b/.github/workflows/ui-test-for-commit.yml index 497ca5acc..289f08b67 100644 --- a/.github/workflows/ui-test-for-commit.yml +++ b/.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: diff --git a/.github/workflows/ui-test-full-suite.yml b/.github/workflows/ui-test-full-suite.yml index 273e55e41..ef791ed57 100644 --- a/.github/workflows/ui-test-full-suite.yml +++ b/.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: diff --git a/packages/react-components/README.md b/packages/react-components/README.md new file mode 100644 index 000000000..7f4080318 --- /dev/null +++ b/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 +``` \ No newline at end of file diff --git a/packages/react-components/docker-compose.yml b/packages/react-components/docker-compose.yml new file mode 100644 index 000000000..a2b0cf758 --- /dev/null +++ b/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" diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 2169fbb0c..3a2d35888 100644 --- a/packages/react-components/package.json +++ b/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", diff --git a/packages/react-components/playwright.config.ts b/packages/react-components/playwright.config.ts index e58e64c0d..eb2d8b23e 100644 --- a/packages/react-components/playwright.config.ts +++ b/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', diff --git a/packages/scene-composer/README.md b/packages/scene-composer/README.md index e7751f191..cd85495dd 100644 --- a/packages/scene-composer/README.md +++ b/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** diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json index 91775defb..1589f5adc 100644 --- a/packages/scene-composer/package.json +++ b/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",