Add Playwright component testing infrastructure #3049
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: "Test UI" | |
| on: | |
| workflow_dispatch: | |
| pull_request: | |
| jobs: | |
| lint-and-typecheck: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v3 | |
| - name: Install Node & dependencies | |
| uses: ./.github/actions/setup-vuu-ui | |
| - run: cd ./vuu-ui && npm run build:worker | |
| - run: cd ./vuu-ui && npm run lint | |
| - run: cd ./vuu-ui && npm run typecheck | |
| vitest: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v3 | |
| - name: Install Node & dependencies | |
| uses: ./.github/actions/setup-vuu-ui | |
| - run: cd ./vuu-ui && npm run test:vite | |
| # playwright: | |
| # timeout-minutes: 10 | |
| # runs-on: ubuntu-latest | |
| # steps: | |
| # - name: Checkout | |
| # uses: actions/checkout@v3 | |
| # - name: Install Node & dependencies | |
| # uses: ./.github/actions/setup-vuu-ui | |
| # - name: Install Playwright Chromium Browser | |
| # run: cd ./vuu-ui && npx playwright install --with-deps chromium | |
| # - name: Build Showcase | |
| # run: cd ./vuu-ui && npm run showcase:build | |
| # - name: Run tests | |
| # run: | | |
| # cd ./vuu-ui && | |
| # npm run test:playwright | |
| # - uses: actions/upload-artifact@v4 | |
| # if: ${{ !cancelled() }} | |
| # with: | |
| # name: playwright-report | |
| # path: ./vuu-ui/playwright/reports/ | |
| # retention-days: 10 | |
| cypress-component: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v3 | |
| - name: Install Node & dependencies | |
| uses: ./.github/actions/setup-vuu-ui | |
| - name: Build Worker | |
| run: cd ./vuu-ui && npm run build:worker | |
| - name: Run component tests in Chrome | |
| uses: cypress-io/github-action@bd9dda317ed2d4fbffc808ba6cdcd27823b2a13b | |
| with: | |
| component: true | |
| install: false | |
| working-directory: ./vuu-ui | |
| browser: chrome | |
| - name: Run component tests in Edge | |
| uses: cypress-io/github-action@bd9dda317ed2d4fbffc808ba6cdcd27823b2a13b | |
| with: | |
| component: true | |
| install: false | |
| working-directory: ./vuu-ui | |
| browser: edge | |
| playwright-component: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v3 | |
| - name: Install Node & dependencies | |
| uses: ./.github/actions/setup-vuu-ui | |
| - name: Install Playwright Browsers | |
| run: cd ./vuu-ui && npx playwright install --with-deps chromium firefox webkit | |
| - name: Run Playwright component tests | |
| run: cd ./vuu-ui && npm run test:playwright:ct | |
| - name: Upload Playwright Report | |
| uses: actions/upload-artifact@v4 | |
| if: always() | |
| with: | |
| name: playwright-report | |
| path: vuu-ui/playwright-report/ | |
| retention-days: 10 | |
| - name: Add Playwright Results to Summary | |
| if: always() | |
| run: | | |
| echo "## 🎭 Playwright Component Tests" >> $GITHUB_STEP_SUMMARY | |
| echo "" >> $GITHUB_STEP_SUMMARY | |
| if [ -f "vuu-ui/playwright-report/index.html" ]; then | |
| echo "✅ **Tests completed successfully**" >> $GITHUB_STEP_SUMMARY | |
| echo "" >> $GITHUB_STEP_SUMMARY | |
| echo "📊 **Report available**: Download the 'playwright-report' artifact to view detailed results" >> $GITHUB_STEP_SUMMARY | |
| else | |
| echo "❌ **Tests failed or report not generated**" >> $GITHUB_STEP_SUMMARY | |
| fi | |
| echo "" >> $GITHUB_STEP_SUMMARY | |
| echo "🔍 **Test Location**: \`packages/vuu-ui-controls/src/__tests__/__component__/\`" >> $GITHUB_STEP_SUMMARY | |
| echo "📝 **Test Pattern**: \`*.playwright.test.tsx\`" >> $GITHUB_STEP_SUMMARY | |
| # ensure the vuu example still builds | |
| vuu-app-build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v3 | |
| - name: Install Node & dependencies | |
| uses: ./.github/actions/setup-vuu-ui | |
| - name: Build Vuu Libraries | |
| run: cd ./vuu-ui && npm run build | |
| - name: Build Vuu app | |
| run: cd ./vuu-ui && npm run build:app |