Merge pull request #9006 from infor-design/fix-tests2

Chore - Add new build commands

.github/workflows/ci.yml

@@ -53,7 +53,13 @@ jobs:
       run: npx playwright install --with-deps
 
     - name: Run Tests
-      run: npx percy exec -- npm run test:ci
+      run: npm run test:ci
+      env:
+        NODE_OPTIONS: "--max-old-space-size=8192"
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+
+    - name: Run Percy Tests
+      run: npx percy exec -- npm run test:ci:percy
       env:
         NODE_OPTIONS: "--max-old-space-size=8192"
         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/env-deploy-gha.yaml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Extract branch name
         shell: bash
@@ -46,7 +46,7 @@ jobs:
           tags: hookandloop/enterprise:${{ steps.extract_branch.outputs.branch }}
           push: true
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           repository: infor-design/apps
           ref: main
@@ -94,15 +94,15 @@ jobs:
           repository: infor-design/apps
           github_token: ${{ secrets.GH_ACCESS_TOKEN }}
           branch: main
-
-      - name: Install Browsers
-        run: npx playwright install --with-deps
 
       - name: Install
         run: npm ci
 
-      - name: Run Tests
-        run: npx percy exec -- npm run test:ci
+      - name: Install Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Percy Tests
+        run: npx percy exec -- npm run test:ci:percy
         env:
           NODE_OPTIONS: "--max-old-space-size=8192"
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/file-check.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     name: Test changed-files
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 

package.json

@@ -62,12 +62,13 @@
     "stylelint:demo": "npx stylelint app/src/**/*.scss --config .stylelintrc",
     "stylelint:src": "npx stylelint src/**/**/*.scss --config .stylelintrc",
     "test:start-server": "node app/server.js --test-port",
-    "test": "PERCY_LOGLEVEL=silent npx playwright test --reporter=list",
+    "test": "npx playwright test --reporter=list",
     "test:build": "npm run build:demoapp && npm run build",
-    "test:visual": "PERCY_LOGLEVEL=silent npx percy exec -- npx playwright test --reporter=list",
+    "test:visual": "npx percy exec -- npx playwright test --reporter=list",
     "test:coverage": "npx rimraf .nyc_output && npm run build:coverage && npm run test && npx nyc report && open coverage/index.html",
     "test:coverage:no-build": "npx rimraf .nyc_output && npm run test && npx nyc report && open coverage/index.html",
-    "test:ci": "PERCY_LOGLEVEL=silent npx rimraf .nyc_output && npm run build:coverage && npm run test && npx nyc report",
+    "test:ci": "npx rimraf .nyc_output && npm run build:coverage && npx playwright test --reporter=list --workers=3 --grep-invert 'percy' && npx nyc report",
+    "test:ci:percy": "npm run build && npx playwright test --reporter=list --workers=1 --grep 'percy'",
     "watch": "npm run watch:js & npm run watch:scss",
     "watch:js": "nodemon --watch \"src/\" -e js --ignore dist/ --ignore app/ -x \"npm run build:js\" --on-change-only",
     "watch:scss": "nodemon --watch \"src/\" -e scss --ignore dist/ --ignore app/ -x \"npm run build:css\" --on-change-only",

tests/toolbar/toolbar.spec.js

@@ -43,6 +43,7 @@ test.describe('Toolbar tests', () => {
     test.describe('snapshot tests', () => {
       test('should match the visual snapshot in percy', async ({ page, browserName }) => {
         if (browserName !== 'chromium') return;
+        await page.waitForLoadState();
         await percySnapshot(page, 'toolbar-light');
       });
     });