Merge pull request #328 from shairez/pr-cypress-ci

Author: shairez

.github/actions/test/action.yml

@@ -30,14 +30,19 @@ runs:
       shell: bash
       run: npx nx build-storybook headless
 
-    - name: Publish to Chromatic
-      uses: chromaui/action@v1
-      # Chromatic GitHub Action options
+    - name: Run Cypress component tests
+      uses: cypress-io/github-action@v5
       with:
-        # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-        projectToken: ${{ inputs.chromatic_token }}
-        storybookBuildDir: dist/storybook/headless
-        zip: true
+        command: 'pnpm test:headless:ci'
+
+    # - name: Publish to Chromatic
+    #   uses: chromaui/action@v1
+    #   # Chromatic GitHub Action options
+    #   with:
+    #     # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+    #     projectToken: ${{ inputs.chromatic_token }}
+    #     storybookBuildDir: dist/storybook/headless
+    #     zip: true
 
     # - name: Build Tailwind Theme
     #   shell: bash

.gitignore

@@ -67,3 +67,7 @@ Thumbs.db
 
 # Storybook
 **/storybook-static/*
+
+# Cypress
+**/cypress/screenshots
+**/cypress/videos

package.json

@@ -11,7 +11,8 @@
     "commit": "git-cz",
     "format:fix": "pretty-quick --staged",
     "prepare": "husky install",
-    "test:headless": "nx component-test headless --watch",
+    "test:headless": "nx component-test headless",
+    "test:headless:ci": "nx component-test-ci headless",
     "story:build:headless": "nx build-storybook headless",
     "story:headless": "nx storybook headless",
     "website": "nx serve website"
@@ -25,6 +26,7 @@
     "@cypress/code-coverage": "3.10.0",
     "@cypress/vite-dev-server": "^2.2.1",
     "@floating-ui/dom": "1.0.10",
+    "@frsource/cypress-plugin-visual-regression-diff": "3.3.5",
     "@jscutlery/semver": "^2.30.1",
     "@k11r/nx-cloudflare-wrangler": "^2.0.0",
     "@nx/cypress": "16.0.3",

packages/kit-headless/cypress.config.ts

@@ -1,11 +1,17 @@
 import { defineConfig } from 'cypress';
+import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
 
 export default defineConfig({
   component: {
     specPattern: '**/*.spec.{js,jsx,ts,tsx}',
+    screenshotOnRunFailure: true,
+    video: false,
     devServer: {
       framework: 'cypress-ct-qwik',
       bundler: 'vite',
     } as any,
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
   },
 });

packages/kit-headless/cypress/support/component.ts

@@ -12,7 +12,7 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
+import '@frsource/cypress-plugin-visual-regression-diff';
 import { addQwikLoader, mount } from 'cypress-ct-qwik';
 
 addQwikLoader();

packages/kit-headless/project.json

@@ -105,7 +105,21 @@
       "executor": "@nx/cypress:cypress",
       "options": {
         "cypressConfig": "packages/kit-headless/cypress.config.ts",
-        "testingType": "component"
+        "testingType": "component",
+        "watch": true,
+        "env": {
+          "pluginVisualRegressionCleanupUnusedImages": false
+        }
+      }
+    },
+    "component-test-ci": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "packages/kit-headless/cypress.config.ts",
+        "testingType": "component",
+        "env": {
+          "pluginVisualRegressionCleanupUnusedImages": false
+        }
       }
     }
   },