ci: enable CI for screenshot testing inside Cypress CT

.github/workflows/e2e-cypress.yml

@@ -1,21 +1,49 @@
 name: ⚙️ Cypress component testing
 on:
   pull_request:
-  push:
-    branches:
-      - main
+
+env:
+  CYPRESS_BASELINE_REPO: 'baseline'
+  CYPRESS_RESULTS_FOLDER: 'projects/demo-cypress/tests-results'
+  CYPRESS_BASELINE_SNAPSHOTS: 'projects/demo-cypress/tests-results/snapshots/baseline'
+  CYPRESS_SNAPSHOTS_ARTIFACTS_KEY:
+    'cypress-e2e-artifacts--${{ github.event.pull_request.head.sha || github.sha }}-${{ github.run_id }}-${{
+    github.event.number }}'
 
 jobs:
   cypress:
-    if: ${{ !contains(github.head_ref, 'release/') }}
     runs-on: ubuntu-latest
     name: Component testing result
     steps:
       - uses: actions/[email protected]
-      - uses: taiga-family/ci/actions/setup/[email protected]
-      - uses: taiga-family/ci/actions/setup/[email protected]
-      - run: npx tsc -p projects/demo-cypress/tsconfig.json
-      - run: npx nx component-test demo-cypress
+      - uses: actions/[email protected]
+        with:
+          ref: ${{ github.base_ref }}
+          path: ${{ env.CYPRESS_BASELINE_REPO }}
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - uses: taiga-family/ci/actions/setup/[email protected]
+      - run: |
+          cd baseline
+          npx nx component-test demo-cypress
+          cd ../
+          cp ${{ env.CYPRESS_BASELINE_REPO }}/${{ env.CYPRESS_BASELINE_SNAPSHOTS }} ${{ env.CYPRESS_BASELINE_SNAPSHOTS }}
+          npx nx component-test demo-cypress
+      - run: |
+          npm install canvas
+          npx ts-node ./scripts/visual-testing/combine-cypress-failed-screenshots.ts
+
+      - name: Debug output
+        continue-on-error: true
+        run: tree ${{ env.CYPRESS_RESULTS_FOLDER }}  -L 1
+
+      - name: Upload artifacts / ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
+        uses: actions/[email protected]
+        with:
+          path: '${{ env.CYPRESS_RESULTS_FOLDER }}/**/*.diff.png'
+          name: ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
+          if-no-files-found: ignore
+          compression-level: 0
+          retention-days: 1
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

projects/demo-cypress/cypress-image-diff.config.js

@@ -6,4 +6,7 @@ module.exports = {
         FILENAME: 'report-summary',
         OVERWRITE: true,
     },
+    RETRY_OPTIONS: {
+        doNotFail: process.env.CI || false,
+    },
 };

projects/demo-cypress/src/tests/input-phone-international.cy.ts

@@ -29,7 +29,7 @@ import {createOutputSpy} from 'cypress/angular';
                 [formControl]="control"
                 [(countryIsoCode)]="countryIsoCode"
             >
-                <tui-icon icon="@tui.phone" />
+                <tui-icon icon="@tui.sun" />
             </tui-input-phone-international>
         </tui-root>
     `,