feat: implement two up interactive diff viewer (#707)

* feat: implement two up interactive diff viewer mode

* chore: split 2 up interactive mode into pure and connected components

* fix: save changes when working on component tests

* fix: fix incorrect placement of smaller images in fit to view mode

* test: install testing library, generate test images, implement first pack of tests on 2-up interactive viewer

* test: updated packages with fixes for component tests and implement component tests ci action

* ci: upload reports to S3 instead of gh-pages

* ci: fix component tests report path in S3

* test: implement component tests for 2up diff viewer

* chore: remove test images gen script and improve diff comment generation

* fix: do not list 2up interactive in old UI, because it can't work there

Author: shadowusr

.eslintignore

@@ -15,3 +15,4 @@ hot
 /testplane-report
 tmp
 **/playwright-report
+**/html-report/*

.eslintrc.js

@@ -30,7 +30,8 @@ module.exports = {
             files: ['test/**'],
             rules: {
                 // For convenient casting of test objects
-                '@typescript-eslint/no-explicit-any': 'off'
+                '@typescript-eslint/no-explicit-any': 'off',
+                '@typescript-eslint/no-restricted-imports': 'off'
             }
         }
     ]

.github/workflows/component-tests.yml

@@ -0,0 +1,98 @@
+name: Testplane Component Tests
+
+on:
+  pull_request:
+    branches: [ master ]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  testplane-component:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    env:
+      DOCKER_IMAGE_NAME: html-reporter-browsers
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js 22
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build the package
+      run: npm run build
+
+    - name: 'Prepare component tests: Cache browser docker image'
+      uses: actions/cache@v3
+      with:
+        path: ~/.docker/cache
+        key: docker-browser-image-${{ hashFiles('test/func/docker/Dockerfile') }}
+
+    - name: 'Prepare component tests: Pull browser docker image'
+      run: |
+        mkdir -p ~/.docker/cache
+        if [ -f ~/.docker/cache/image.tar ]; then
+          docker load -i ~/.docker/cache/image.tar
+        else
+          docker pull yinfra/html-reporter-browsers
+          docker save yinfra/html-reporter-browsers -o ~/.docker/cache/image.tar
+        fi
+
+    - name: 'Prepare component tests: Run browser docker image'
+      run: docker run -d --name ${{ env.DOCKER_IMAGE_NAME }} -it --rm --network=host $(which colima >/dev/null || echo --add-host=host.docker.internal:0.0.0.0) yinfra/html-reporter-browsers
+
+    - name: 'component-tests: Run Testplane'
+      id: 'testplane'
+      continue-on-error: true
+      run: npm run component-tests
+
+    - name: 'component-tests: Stop browser docker image'
+      run: |
+        docker kill ${{ env.DOCKER_IMAGE_NAME }} || true
+        docker rm ${{ env.DOCKER_IMAGE_NAME }} || true
+
+    - name: Upload Testplane html-reporter reports to S3
+      uses: jakejarvis/[email protected]
+      with:
+        args: --acl public-read --follow-symlinks
+      env:
+        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        AWS_S3_ENDPOINT: https://s3.yandexcloud.net/
+        SOURCE_DIR: "test/component/html-report"
+        DEST_DIR: "testplane-ci/component-tests-reports/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/"
+
+    - name: Construct PR comment
+      run: |
+        link="https://${{ secrets.AWS_S3_BUCKET }}.s3.yandexcloud.net/testplane-ci/component-tests-reports/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/index.html"
+        if [ "${{ steps.testplane.outcome }}" != "success" ]; then
+          comment="### ❌ Component tests failed<br><br>[Report](${link})"
+          echo "PR_COMMENT=${comment}" >> $GITHUB_ENV
+        else
+          comment="### ✅ Component tests succeed<br><br>[Report](${link})"
+          echo "PR_COMMENT=${comment}" >> $GITHUB_ENV
+        fi
+
+    - name: Leave comment to PR with link to Testplane HTML reports
+      if: github.event.pull_request
+      uses: thollander/actions-comment-pull-request@v3
+      with:
+          message: ${{ env.PR_COMMENT }}
+          comment-tag: testplane_component_results
+
+    - name: Fail the job if any Testplane job is failed
+      if: ${{ steps.testplane.outcome != 'success' }}
+      run: exit 1

.github/workflows/e2e.yml

@@ -64,12 +64,6 @@ jobs:
     - name: 'Prepare e2e tests: Generate fixtures'
       run: npm run e2e:generate-fixtures || true
 
-    - name: 'Prepare e2e tests: Setup env'
-      run: |
-        REPORT_PREFIX=testplane-reports
-        REPORT_DATE=$(date '+%Y-%m-%d')
-        echo "DEST_REPORTS_DIR=$REPORT_PREFIX/$REPORT_DATE/${{ github.run_id }}/${{ github.run_attempt }}" >> $GITHUB_ENV
-
     - name: 'e2e: Run Testplane'
       id: 'testplane'
       continue-on-error: true
@@ -84,25 +78,29 @@ jobs:
     - name: Merge Testplane html-reporter reports
       working-directory: 'test/func/tests'
       run: |
-        mkdir -p ../../../${{ env.DEST_REPORTS_DIR }}
-        npx testplane merge-reports reports/*/sqlite.db -d ../../../${{ env.DEST_REPORTS_DIR }}
+        mkdir -p ../../../e2e-report
+        npx testplane merge-reports reports/*/sqlite.db -d ../../../e2e-report
 
-    - name: Deploy Testplane html-reporter reports
-      uses: peaceiris/actions-gh-pages@v4
+    - name: Upload Testplane html-reporter reports to S3
+      uses: jakejarvis/[email protected]
       with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ${{ env.DEST_REPORTS_DIR }}
-        destination_dir: ${{ env.DEST_REPORTS_DIR }}
-        keep_files: true
+        args: --acl public-read --follow-symlinks
+      env:
+        AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        AWS_S3_ENDPOINT: https://s3.yandexcloud.net/
+        SOURCE_DIR: "e2e-report"
+        DEST_DIR: "testplane-ci/e2e-tests-reports/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/"
 
     - name: Construct PR comment
       run: |
-        link="https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ env.DEST_REPORTS_DIR }}"
+        link="https://${{ secrets.AWS_S3_BUCKET }}.s3.yandexcloud.net/testplane-ci/e2e-tests-reports/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/index.html"
         if [ "${{ steps.testplane.outcome }}" != "success" ]; then
-          comment="### ❌ Testplane run failed<br><br>[Report](${link})"
+          comment="### ❌ E2E tests failed<br><br>[Report](${link})"
           echo "PR_COMMENT=${comment}" >> $GITHUB_ENV
         else
-          comment="### ✅ Testplane run succeed<br><br>[Report](${link})"
+          comment="### ✅ E2E tests succeed<br><br>[Report](${link})"
           echo "PR_COMMENT=${comment}" >> $GITHUB_ENV
         fi
 
@@ -111,7 +109,7 @@ jobs:
       uses: thollander/actions-comment-pull-request@v3
       with:
           message: ${{ env.PR_COMMENT }}
-          comment-tag: testplane_results
+          comment-tag: testplane_e2e_results
 
     - name: Fail the job if any Testplane job is failed
       if: ${{ steps.testplane.outcome != 'success' }}

.gitignore

@@ -26,6 +26,7 @@ html-reporter-*.tgz
 
 **/playwright-report
 hermione-report
+html-report
 testplane-report
 test/func/**/report
 test/func/**/report-backup

lib/constants/diff-modes.ts

@@ -1,3 +1,4 @@
+import {pick} from 'lodash';
 import type {ValueOf} from 'type-fest';
 
 export const DiffModes = {
@@ -35,9 +36,16 @@ export const DiffModes = {
         id: 'onion-skin',
         title: 'Onion skin',
         description: 'Onion Skin. Change the image opacity to compare expected and actual images.'
+    },
+    TWO_UP_INTERACTIVE: {
+        id: '2-up-interactive',
+        title: '2-up Interactive',
+        description: '2-up Interactive. Compare expected and actual images side by side with synchronized pan and zoom.'
     }
 } as const;
 
+export const ClassicDiffModes = pick(DiffModes, ['THREE_UP', 'THREE_UP_SCALED', 'THREE_UP_SCALED_TO_FIT', 'ONLY_DIFF', 'SWITCH', 'SWIPE', 'ONION_SKIN']);
+
 export type DiffModes = typeof DiffModes;
 
 export type DiffMode = ValueOf<DiffModes>;

lib/constants/index.ts

@@ -11,4 +11,5 @@ export * from './plugin-events';
 export * from './save-formats';
 export * from './test-statuses';
 export * from './tool-names';
+export * from './two-up-modes';
 export * from './view-modes';

lib/constants/local-storage.ts

@@ -4,6 +4,8 @@ export enum LocalStorageKey {
 }
 
 export const TIME_TRAVEL_PLAYER_VISIBILITY_KEY = 'time-travel-player-visibility';
+export const TWO_UP_DIFF_VISIBILITY_KEY = '2up-diff-visibility';
+export const TWO_UP_FIT_MODE_KEY = '2up-fit-mode';
 
 export enum UiMode {
     Old = 'old',

lib/constants/two-up-modes.ts

@@ -0,0 +1,4 @@
+export enum TwoUpFitMode {
+    FitToView = 'fit-to-view',
+    FitToWidth = 'fit-to-width'
+}

lib/static/components/controls/common-controls.jsx

@@ -10,7 +10,7 @@ import BaseHostInput from './base-host-input';
 import MenuBar from './menu-bar';
 import ReportInfo from './report-info';
 import {ViewMode} from '../../../constants/view-modes';
-import {DiffModes} from '../../../constants/diff-modes';
+import {ClassicDiffModes} from '../../../constants/diff-modes';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
 
 class ControlButtons extends Component {
@@ -77,7 +77,7 @@ class ControlButtons extends Component {
                     label="Diff mode"
                     value={view.diffMode}
                     handler={diffModeId => actions.setDiffMode({diffModeId})}
-                    options = {Object.values(DiffModes).map((dm) => {
+                    options = {Object.values(ClassicDiffModes).map((dm) => {
                         return {value: dm.id, content: dm.title};
                     })}
                     extendClassNames="diff-mode"