chore: make the CI more stable on deployments (#532)

* chore: make the CI more stable on deployments

* test: remove counter test

The counter test was fixed #492 which requires you to delete the product rather
than reducing the quantity to 0.

* fix: Update visual regression baseline images

---------

Co-authored-by: Anudeep Vattipalli <[email protected]>

.github/workflows/lighthouse.yml

@@ -1,14 +1,15 @@
 name: Lighthouse Report
 
 on:
-  deployment_status
+  deployment_status:
+    states: ['success']
 
 jobs:
   generate_lighthouse_audit:
     name: Deployment Audit
     timeout-minutes: 30
     runs-on: ubuntu-latest
-    if:  ${{ github.event.deployment_status.state == 'success' && contains(github.event.deployment_status.target_url, 'catalyst-latest') }}
+    if: ${{ contains(fromJson('["Production – catalyst-latest", "Preview – catalyst-latest"]'), github.event.deployment_status.environment) }}
 
     steps:
       - name: Checkout code

.github/workflows/playwright-ui.yml

@@ -0,0 +1,47 @@
+name: Playwright UI Tests
+
+on:
+  deployment_status:
+    states: ['success']
+
+jobs:
+  ui-tests:
+    name: Run UI Tests
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    if: ${{ contains(fromJson('["Production – catalyst-latest", "Preview – catalyst-latest"]'), github.event.deployment_status.environment) }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: |
+          cd packages/functional
+          npx playwright install chromium
+
+      - name: Run Playwright tests
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+          VERCEL_PROTECTION_BYPASS: ${{ secrets.VERCEL_PROTECTION_BYPASS_CATALYST_LATEST }}
+        run: |
+          cd packages/functional
+          npx playwright test tests/ui/ --project=tests-chromium 
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: packages/functional/playwright-report/
+          retention-days: 30

.github/workflows/playwright-visual-regression.yml

@@ -0,0 +1,47 @@
+name: Playwright Visual Regression Tests
+
+on:
+  deployment_status:
+    states: ['success']
+
+jobs:
+  visual-regression-tests:
+    name: Run Visual Regression Tests
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    if: ${{ contains(fromJson('["Production – catalyst-storybook", "Preview – catalyst-storybook"]'), github.event.deployment_status.environment) }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: |
+          cd packages/functional
+          npx playwright install chromium
+
+      - name: Run Playwright tests
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+          VERCEL_PROTECTION_BYPASS: ${{ secrets.VERCEL_PROTECTION_BYPASS_STORYBOOK }}
+        run: |
+          cd packages/functional
+          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: packages/functional/playwright-report/
+          retention-days: 30

packages/functional/playwright.config.js

@@ -15,6 +15,10 @@ export default defineConfig({
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',
     trace: 'retain-on-failure',
+    extraHTTPHeaders: {
+      'x-vercel-protection-bypass': process.env.VERCEL_PROTECTION_BYPASS,
+      'x-vercel-set-bypass-cookie': process.env.CI ? 'true' : 'false',
+    },
   },
   projects: [
     {

packages/functional/tests/ui/core/components/Counter.spec.ts

@@ -35,17 +35,3 @@ test('Decrease count and verify the results', async ({ page }) => {
 
   await expect(page.getByRole('spinbutton')).toHaveValue('1');
 });
-
-test('Decreasing the count to 0 should remove the product from cart', async ({ page }) => {
-  await ProductActions.addProductToCart(page, '[Sample] Orbit Terrarium - Large');
-  await page.getByRole('link', { name: 'your cart' }).click();
-
-  await expect(page.getByRole('spinbutton')).toHaveValue('1');
-
-  await page.getByLabel('Decrease count').click();
-
-  await expect(page.getByRole('spinbutton')).toHaveValue('0');
-  await expect(page.getByText('[Sample] Orbit Terrarium -')).toBeHidden({
-    timeout: 10000,
-  });
-});