ci: deploy e2e report to firebase

.firebaserc

@@ -0,0 +1,15 @@
+{
+  "projects": {},
+  "targets": {
+    "taiga-editor": {
+      "hosting": {
+        "taiga-editor": [
+          "taiga-editor"
+        ],
+        "taiga-editor-e2e-report": [
+          "taiga-editor-e2e-report"
+        ]
+      }
+    }
+  }
+}

.github/workflows/auto-merge.yml

@@ -3,7 +3,7 @@ on:
   pull_request:
 
 env:
-  JOBS_NAME: '[ "Build package", "Build demo", "Lint", "Tests", "E2E" ]'
+  JOBS_NAME: '[ "Build package", "Lint", "Tests", "E2E" ]'
 
 jobs:
   setup:

.github/workflows/build-demo.yml

@@ -1,6 +1,5 @@
 name: ⚙️ Build demo
 on:
-  pull_request:
   push:
     branches:
       - main

.github/workflows/deploy-gh-pages.yml → .github/workflows/deploy-prod.yml

@@ -4,7 +4,7 @@ on:
     branches: [main]
 
 jobs:
-  deploy:
+  prod:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/[email protected]

.github/workflows/deploy-preview.yml → .github/workflows/deploy-staging.yml

@@ -1,23 +1,22 @@
-name: 🚀 Deploy / preview
+name: 🚀 Deploy
 on: pull_request
 
 jobs:
-  build_and_preview:
-    name: Firebase
+  staging:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
       - uses: taiga-family/ci/actions/setup/[email protected]
       - run: npx nx build editor-demo
-      - name: Deploy preview
-        uses: FirebaseExtended/action-hosting-deploy@v0
+      - uses: FirebaseExtended/action-hosting-deploy@v0
         continue-on-error: true
         if: ${{ env.IS_FORK == 'false' && env.IS_DEPENDABOT == 'false' }}
         with:
-          repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_TUI_EDITOR }}
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
           projectId: taiga-editor
+          target: taiga-editor
           expires: 1d
 
 concurrency:

.github/workflows/e2e.yml

@@ -32,22 +32,45 @@ jobs:
       - run: npx nx e2e editor-demo-playwright
         continue-on-error: true
 
-      - uses: actions/[email protected]
+      - run: tree ./projects/demo-playwright/tests-results
+      - name: Deploy e2e report
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        continue-on-error: true
+        with:
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_TUI_EDITOR }}
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          live: ${{ github.event.number }}
+          target: taiga-editor-e2e-report
+          projectId: taiga-editor
+          expires: 1d
+
+      - name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
+        uses: actions/[email protected]
+        id: artifact
         with:
-          path: ./projects/demo-playwright/tests-results/**/*-diff.png
+          path: |
+            ./projects/demo-playwright/tests-results/**/*-diff.png
+            !./projects/demo-playwright/tests-results/**/*-retry*/*-diff.png
           name: ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
           if-no-files-found: ignore
           compression-level: 0
           retention-days: 1
 
-      - id: diff-checker
+      - name: Check if diff-output exists
+        id: diff_checker
         run: |
-          echo "diff_exist=$(find ./projects/demo-playwright/tests-results -regex '.*diff\.png$' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT
-      - if: ${{ steps.diff-checker.outputs.diff_exist != '0' }}
+          echo "diff_exist=$(find ./projects/demo-playwright/tests-results ! -path '*retry*' -iname '*-diff.png' | wc -l | sed -e 's/^[[:space:]]*//')" >> $GITHUB_OUTPUT
+      - name: Fall with an error if diff-output exists
+        if: ${{ steps.diff_checker.outputs.diff_exist != '0' }}
         run: |
-          find ./projects/demo-playwright/tests-results -regex '.*diff\.png$' -exec echo "{}" \;
+          find ./projects/demo-playwright/tests-results ! -path '*retry*' -iname '*-diff.png' -exec echo "{}" \;
           exit 1
 
+      - uses: daun/[email protected]
+        if: always()
+        with:
+          report-file: ./projects/demo-playwright/test-results.json
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true

.gitignore

@@ -17,6 +17,7 @@
 
 # misc
 /coverage
+test-results.json
 *.log
 
 # System Files

firebase.json

@@ -1,12 +1,27 @@
 {
-    "hosting": {
-        "public": "dist/demo/browser",
-        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
-        "rewrites": [
-            {
-                "source": "**",
-                "destination": "/index.html"
-            }
-        ]
-    }
+    "$schema": "https://raw.githubusercontent.com/firebase/firebase-tools/master/schema/firebase-config.json",
+    "hosting": [
+        {
+            "target": "taiga-editor",
+            "public": "dist/demo/browser",
+            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+            "rewrites": [
+                {
+                    "source": "**",
+                    "destination": "/index.html"
+                }
+            ]
+        },
+        {
+            "target": "taiga-editor-e2e-report",
+            "public": "projects/demo-playwright/tests-report",
+            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+            "rewrites": [
+                {
+                    "source": "**",
+                    "destination": "/index.html"
+                }
+            ]
+        }
+    ]
 }

projects/demo-playwright/playwright.config.ts

@@ -1,35 +1,41 @@
+import type {ViewportSize} from '@playwright/test';
 import {defineConfig, devices} from '@playwright/test';
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
+const DEFAULT_VIEWPORT: ViewportSize = {width: 750, height: 700};
+
 export default defineConfig({
     testDir: __dirname,
     testMatch: '**/*.spec.ts',
     outputDir: 'tests-results',
     snapshotDir: 'snapshots',
-    reporter: process.env.CI ? 'github' : [['html', {outputFolder: 'tests-report'}]],
+    reporter: [
+        ['html', {outputFolder: 'tests-report'}],
+        ['json', {outputFile: 'test-results.json'}],
+    ],
     fullyParallel: true,
-    /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
-    retries: process.env.CI ? 1 : 0,
+    retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? '100%' : '50%',
+    timeout: 5 * 60 * 1000,
     use: {
         baseURL: `http://localhost:${process.env.NG_SERVER_PORT ?? 3333}`,
         trace: 'on-first-retry',
+        testIdAttribute: 'automation-id',
+        actionTimeout: 10_000,
         contextOptions: {
+            deviceScaleFactor: 2,
             reducedMotion: 'reduce',
+            viewport: DEFAULT_VIEWPORT,
+            screen: DEFAULT_VIEWPORT,
+            hasTouch: true,
         },
     },
     projects: [
         {
             name: 'chromium',
             use: {
                 ...devices['Desktop Chrome HiDPI'],
-                viewport: {
-                    width: 720,
-                    height: 1024,
-                },
+                viewport: DEFAULT_VIEWPORT,
             },
         },
     ],

projects/demo-playwright/project.json

@@ -14,7 +14,7 @@
         "e2e-ui": {
             "executor": "nx:run-commands",
             "options": {
-                "command": "nx e2e editor-demo-playwright -- --ui --debug --update-snapshots"
+                "command": "nx e2e editor-demo-playwright --ui --debug --update-snapshots"
             }
         }
     }

projects/demo-playwright/tests/toolbar.spec.ts

@@ -79,6 +79,7 @@ test.describe('Toolbar', () => {
         await page.keyboard.press('ArrowUp');
         await page.keyboard.press('ArrowUp');
 
+        await page.locator('#demo-content').scrollIntoViewIfNeeded();
         await page.locator('[automation-id="toolbar__insert-table-button"]').click();
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-11.png');
@@ -105,27 +106,27 @@ test.describe('Toolbar', () => {
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-13.png');
 
         await page.locator('[automation-id="toolbar__ordering-list-button"]').focus();
-        await page.waitForTimeout(100);
+
         await page.keyboard.press('Enter');
 
         await page
             .locator('[automation-id="toolbar__un-ordered-list-button"].t-option')
             .focus();
-        await page.waitForTimeout(100);
+
         await page.keyboard.press('Enter');
 
         await page.locator('[automation-id="toolbar__font-style-button"]').focus();
-        await page.waitForTimeout(100);
+
         await page.keyboard.press('Enter');
 
         await page.locator('[contenteditable]').nth(0).focus();
-        await page.waitForTimeout(100);
+
         await page.keyboard.type('12345');
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-14.png');
 
         await page.locator('[automation-id="toolbar__insert-table-button"]').focus();
-        await page.waitForTimeout(100);
+
         await page.keyboard.press('Enter');
 
         const cell = page
@@ -134,7 +135,6 @@ test.describe('Toolbar', () => {
             .locator('.t-cell')
             .nth(1);
 
-        await page.waitForTimeout(100);
         await cell.hover();
         await cell.click();
 
@@ -152,6 +152,9 @@ test.describe('Toolbar', () => {
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-16.png');
 
+        await page.locator('[contenteditable]').nth(0).focus();
+        await page.locator('[automation-id="toolbar__align-button"]').focus();
+        await page.keyboard.press('Enter');
         await page.keyboard.press('ArrowRight');
         await page.keyboard.press('Enter');
 
@@ -170,21 +173,18 @@ test.describe('Toolbar', () => {
         await page.locator('[contenteditable]').nth(0).focus();
         await page.keyboard.press('Meta+A');
         await page.keyboard.press('Backspace');
-        await page.waitForTimeout(300);
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-19.png');
 
         await page.locator('[contenteditable]').nth(0).focus();
         await page.locator('[automation-id="toolbar__undo-button"]').focus();
         await page.keyboard.press('Enter');
-        await page.waitForTimeout(300);
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-20.png');
 
         await page.locator('[contenteditable]').nth(0).focus();
         await page.locator('[automation-id="toolbar__redo-button"]').focus();
         await page.keyboard.press('Enter');
-        await page.waitForTimeout(300);
 
         await expect(page.locator('tui-editor')).toHaveScreenshot('Toolbar-21.png');
     });

projects/demo-playwright/utils/goto.ts

@@ -2,6 +2,8 @@ import type {Page} from '@playwright/test';
 
 import {tuiMockDate} from './mock-date';
 import {tuiMockImages} from './mock-images';
+import {tuiWaitForFonts} from './wait-for-fonts';
+import {waitStableState} from './wait-stable-state';
 
 interface TuiGotoOptions extends NonNullable<Parameters<Page['goto']>[1]> {
     date?: Date;
@@ -39,6 +41,11 @@ export async function tuiGoto(
 
     const response = await page.goto(url, playwrightGotoOptions);
 
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForLoadState('load');
+    await tuiWaitForFonts(page);
+    await waitStableState(page.locator('app'));
+
     if (hideHeader) {
         for (const locator of await page.locator('[tuidocheader]').all()) {
             if (await locator.isVisible()) {

projects/demo-playwright/utils/wait-for-fonts.ts

@@ -0,0 +1,12 @@
+import type {Page} from '@playwright/test';
+import {expect} from '@playwright/test';
+
+export async function tuiWaitForFonts(page: Page): Promise<void> {
+    await expect(async () => {
+        expect(await page.evaluate(() => (document as any).fonts.size)).toBeGreaterThan(
+            0,
+        );
+        expect(await page.evaluate(() => (document as any).fonts.ready)).toBeTruthy();
+        expect(await page.evaluate(() => (document as any).fonts.status)).toBe('loaded');
+    }).toPass({timeout: 30_000});
+}

projects/demo-playwright/utils/wait-stable-state.ts

@@ -0,0 +1,17 @@
+import type {Locator} from '@playwright/test';
+
+export async function waitStableState(locator: Locator): Promise<void> {
+    try {
+        const handle = await locator.elementHandle();
+
+        // https://playwright.dev/docs/actionability#stable
+        // element is Stable, as in not animating or completed animation
+        // Element is considered stable when it has maintained
+        // the same bounding box for at least two consecutive animation frames.
+        await handle?.waitForElementState('stable');
+
+        // https://playwright.dev/docs/actionability#visible
+        // Element is considered visible when it has non-empty bounding box
+        await handle?.waitForElementState('visible');
+    } catch {}
+}