diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5ed6bfc..48de5f2 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -12,75 +12,43 @@ jobs: strategy: matrix: node-version: [20.x] - steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'npm' - - run: npm ci + - name: Install dependencies + run: | + sudo apt-get update + sudo apt-get install -y libgbm-dev + npm ci - name: Run tests with coverage run: | npm test echo "# Test Results (Node ${{ matrix.node-version }})" >> $GITHUB_STEP_SUMMARY - echo "\`\`\`" >> $GITHUB_STEP_SUMMARY - cat coverage/lcov-report/index.html | grep -A 4 "
" | grep -v "//g' | sed 's/<\/span>//g' | sed 's/^[ \t]*//' >> $GITHUB_STEP_SUMMARY - echo "\`\`\`" >> $GITHUB_STEP_SUMMARY - echo "## Coverage Report" >> $GITHUB_STEP_SUMMARY + echo "## Coverage" >> $GITHUB_STEP_SUMMARY + echo "| Type | Coverage | Details |" >> $GITHUB_STEP_SUMMARY + echo "|------|----------|----------|" >> $GITHUB_STEP_SUMMARY + echo "| Statements | $(cat coverage/lcov-report/index.html | grep -A 1 "statements" | tail -n 1 | sed 's/.*>\([0-9.]*\)%.*/\1/') % | $(cat coverage/lcov-report/index.html | grep -A 1 "statements" | tail -n 1 | sed 's/.*(\([0-9]*\/[0-9]*\)).*/\1/') |" >> $GITHUB_STEP_SUMMARY + echo "| Branches | $(cat coverage/lcov-report/index.html | grep -A 1 "branches" | tail -n 1 | sed 's/.*>\([0-9.]*\)%.*/\1/') % | $(cat coverage/lcov-report/index.html | grep -A 1 "branches" | tail -n 1 | sed 's/.*(\([0-9]*\/[0-9]*\)).*/\1/') |" >> $GITHUB_STEP_SUMMARY + echo "| Functions | $(cat coverage/lcov-report/index.html | grep -A 1 "functions" | tail -n 1 | sed 's/.*>\([0-9.]*\)%.*/\1/') % | $(cat coverage/lcov-report/index.html | grep -A 1 "functions" | tail -n 1 | sed 's/.*(\([0-9]*\/[0-9]*\)).*/\1/') |" >> $GITHUB_STEP_SUMMARY + echo "| Lines | $(cat coverage/lcov-report/index.html | grep -A 1 "lines" | tail -n 1 | sed 's/.*>\([0-9.]*\)%.*/\1/') % | $(cat coverage/lcov-report/index.html | grep -A 1 "lines" | tail -n 1 | sed 's/.*(\([0-9]*\/[0-9]*\)).*/\1/') |" >> $GITHUB_STEP_SUMMARY + echo "" >> $GITHUB_STEP_SUMMARY echo "Full coverage report available as artifact." >> $GITHUB_STEP_SUMMARY - name: Upload coverage report - uses: actions/upload-artifact@v3 - with: - name: coverage-report-${{ matrix.node-version }} - path: coverage - retention-days: 14 - - visual-test: - runs-on: ubuntu-latest - needs: test - container: - image: mcr.microsoft.com/playwright:v1.40.0-jammy - steps: - - uses: actions/checkout@v3 - - name: Use Node.js 20.x - uses: actions/setup-node@v3 + uses: actions/upload-artifact@v4 with: - node-version: 20.x - cache: 'npm' - - run: npm ci + name: coverage-report + path: coverage/ - name: Run visual tests - run: | - xvfb-run --auto-servernum --server-args="-screen 0 1280x800x24" npm run test:visual:ci -- -u - echo "# Visual Test Results" >> $GITHUB_STEP_SUMMARY - echo "## Screenshots" >> $GITHUB_STEP_SUMMARY - echo "The following forms were tested:" >> $GITHUB_STEP_SUMMARY - echo "- Upload Asset Form" >> $GITHUB_STEP_SUMMARY - echo "- Complete Workflow Form" >> $GITHUB_STEP_SUMMARY - echo "- Cleanup Confirmation Form" >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - echo "Screenshots are available in the artifacts." >> $GITHUB_STEP_SUMMARY - if [ -d "__image_snapshots__/__diff_output__" ]; then - echo "## Visual Differences Detected" >> $GITHUB_STEP_SUMMARY - echo "Check the artifacts for diff images." >> $GITHUB_STEP_SUMMARY - fi + run: xvfb-run --auto-servernum --server-args="-screen 0 1280x800x24" npm run test:visual:ci -- -u - name: Upload visual test artifacts if: always() - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: - name: visual-test-output + name: visual-test-artifacts path: | __image_snapshots__ - __image_snapshots__/__diff_output__ - retention-days: 14 - - name: Generate visual test report - if: always() - run: | - echo "## Visual Test Summary" >> $GITHUB_STEP_SUMMARY - echo "### Base Screenshots" >> $GITHUB_STEP_SUMMARY - ls -l __image_snapshots__ | grep -v diff | awk '{print "- "$9}' >> $GITHUB_STEP_SUMMARY - if [ -d "__image_snapshots__/__diff_output__" ]; then - echo "### Diff Images" >> $GITHUB_STEP_SUMMARY - ls -l __image_snapshots__/__diff_output__ | awk '{print "- "$9}' >> $GITHUB_STEP_SUMMARY - fi \ No newline at end of file + __image_snapshots__-diff \ No newline at end of file diff --git a/jest.visual.config.js b/jest.visual.config.js index 9718177..9180e13 100644 --- a/jest.visual.config.js +++ b/jest.visual.config.js @@ -1,11 +1,11 @@ module.exports = { - testEnvironment: 'jsdom', - testTimeout: 30000, - testMatch: process.env.CI ? ['**/test/**/*.visual.test.js'] : [], - setupFilesAfterEnv: ['./test/setup.visual.js'], + testEnvironment: 'node', + testMatch: ['**/test/*.visual.test.js'], transform: { - '^.+\\.js$': 'babel-jest' + '^.+\\.jsx?$': 'babel-jest' }, + setupFilesAfterEnv: ['./test/setup.visual.js'], + testTimeout: 30000, moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1' }, diff --git a/test/index.visual.test.js b/test/index.visual.test.js index fec83e3..c8f76a4 100644 --- a/test/index.visual.test.js +++ b/test/index.visual.test.js @@ -21,9 +21,9 @@ describeVisual('Zapier Visual Tests', () => { '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu', - '--disable-software-rasterizer', + '--window-size=1280,800', '--disable-web-security', - '--single-process' + '--disable-features=IsolateOrigins,site-per-process' ], ignoreHTTPSErrors: true, defaultViewport: { diff --git a/test/setup.js b/test/setup.js new file mode 100644 index 0000000..e69de29