test(visual-regression): add new scenario for text and tabs

.github/CODEOWNERS

@@ -247,6 +247,7 @@ packages/react-components/react-tabs/library @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-tabs/stories @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-text/library @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-text/stories @microsoft/cxe-prg @marcosmoura
+packages/react-components/react-text/visual-regression @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-textarea/library @microsoft/cxe-prg
 packages/react-components/react-textarea/stories @microsoft/cxe-prg
 packages/react-components/react-tooltip/library @microsoft/cxe-prg

.github/workflows/pr-vrt-poc-comment.yml

@@ -0,0 +1,67 @@
+name: VRT POC | Comment on PR
+on:
+  workflow_run:
+    workflows: ['VRT POC']
+    types:
+      - completed
+
+concurrency:
+  # see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_PARALLEL: 4 # ubuntu-latest = 4-core CPU / 16 GB of RAM | macos-14-xlarge (arm) = 6-core CPU / 14 GB of RAM
+  NX_PREFER_TS_NODE: true
+  NX_VERBOSE_LOGGING: true
+
+jobs:
+  run_vr_diff:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'microsoft' }} && ${{ github.event.workflow_run.event == 'pull_request' }}
+    outputs:
+      pr_number: ${{ steps.pr_number.outputs.result }}
+    permissions:
+      # necessary to write comments to the PR from the vr-approval-cli
+      pull-requests: write
+      # id-token: write
+    steps:
+      # - uses: actions/checkout@v4
+      #   with:
+      #     sparse-checkout: |
+      #       .github
+
+      # - uses: actions/download-artifact@v4
+      #   with:
+      #     name: vrt_report
+      #     path: ./vrt_report
+      #     run-id: ${{ github.event.workflow_run.id }}
+      #     github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Debug
+        run: |
+          echo $W_RUN
+        env:
+          W_RUN: ${{ toJSON(github.event.workflow_run) }}
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: pr-number
+          path: ./results
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Load PR number
+        id: pr_number
+        run: echo "id=$(cat pr.txt)" >> $GITHUB_OUTPUT
+        working-directory: ./results
+
+      - name: 'Comment on PR'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: vr-report-comment
+          number: ${{ steps.pr_number.outputs.id }}
+          message: |
+            VR Regression Report:
+            - status: ${{ github.event.workflow_run.conclusion }}
+            - check whole [report](${{github.event.workflow_run.html_url}}) to review visual differences

.github/workflows/pr-vrt-poc.yml

@@ -0,0 +1,165 @@
+name: VRT POC
+on:
+  push:
+    branches:
+      - hotell/fhl-spring-25
+  pull_request:
+    # TODO: once testing is done enable pull_request on all branches again
+    branches:
+      - hotell/fhl-spring-25
+  issue_comment:
+    types: [created]
+
+concurrency:
+  # see https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-only-cancel-in-progress-jobs-or-runs-for-the-current-workflow
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NX_PARALLEL: 6 # ubuntu-latest = 4-core CPU / 16 GB of RAM | macos-14-xlarge (arm) = 6-core CPU / 14 GB of RAM
+  NX_PREFER_TS_NODE: true
+  NX_VERBOSE_LOGGING: true
+
+jobs:
+  # TODO: it's not possible to update another JOB result to "success" in order to make PR mergeable
+  #
+  approve_vrt_diff:
+    if: github.event.issue.pull_request && contains(github.event.comment.body,'/approve-snapshots')
+    runs-on: ubuntu-latest
+    #   permissions:
+    #     statuses: write
+    steps:
+      - run: echo "Hello"
+  #     - name: Approve VRT Diff
+  #       uses: actions/github-script@v7
+  #       with:
+  #         script: |
+  #           const run = require('./.github/scripts/approve-pr-vrt-diff');
+  #           const config = { prId: context.payload.issue.number };
+  #           await run({github,context,core,config});
+
+  vrt_baseline:
+    if: ${{ github.repository_owner == 'microsoft' && github.event_name == 'push' && github.event_name!='pull_request' }}
+    # NOTE: there is an issue on GH atm obtaining large runner - undo this change once resolved
+    # runs-on: macos-14-xlarge
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'write'
+      actions: 'write'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'hotell/fhl-spring-25'
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'yarn'
+          node-version: '20'
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn playwright install --with-deps
+      - run: yarn nx run visual-regression-assert:build
+
+      - name: Update VR tests baseline
+        run: yarn nx affected -t test-vr-cli -u --nxBail
+
+      - name: Affected Projects
+        id: affected_projects_count
+        run: |
+          yarn --silent nx show projects -t test-vr-cli --affected --verbose false
+          affected_count=$(yarn --silent nx show projects -t test-vr-cli --affected --verbose false | wc -l | tr -d ' ')
+          echo "value=$affected_count" >> $GITHUB_OUTPUT
+
+      - name: Affected Projects Count
+        run: echo ${{steps.affected_projects_count.outputs.value}}
+
+      - name: Update Baseline
+        if: steps.affected_projects_count.outputs.value > 0
+        run: |
+          git config user.name "Fluent UI Build"
+          git config user.email "fluentui-internal@service.microsoft.com"
+          git add *.png
+          if [[ -n $(git status --porcelain) ]]; then
+            git commit -m "chore: update vrt baseline"
+            git push origin HEAD:${{ github.ref_name }}
+          else
+            echo "No PNG changes to commit."
+          fi
+
+      - name: Report Updated Baseline
+        if: steps.affected_projects_count.outputs.value > 0
+        run: |
+          yarn visual-regression-assert report --outputPath dist/vrt
+          cat dist/vrt/vrt-report.md >> $GITHUB_STEP_SUMMARY
+
+  vrt_pr:
+    if: ${{ github.repository_owner == 'microsoft' && github.event_name == 'pull_request' }}
+    # NOTE: there is an issue on GH atm obtaining large runner - undo this change once resolved
+    # runs-on: macos-14-xlarge
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'hotell/fhl-spring-25'
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'yarn'
+          node-version: '20'
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn playwright install --with-deps
+      - run: yarn nx run visual-regression-assert:build
+
+      - name: Run VR tests
+        run: yarn nx affected -t test-vr-cli
+
+      - name: Report
+        if: always()
+        id: report
+        run: |
+          yarn visual-regression-assert report --outputPath dist/vrt
+          cat dist/vrt/vrt-report.md >> $GITHUB_STEP_SUMMARY
+          echo "value=true" >> $GITHUB_OUTPUT
+
+      - name: Upload Report
+        if: ${{ always() && steps.report.outputs.value == 'true' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: vrt_report
+          retention-days: 1
+          if-no-files-found: error
+          path: |
+            dist/vrt/
+
+      - name: Save PR number
+        if: always()
+        run: echo ${{ github.event.number }} > pr.txt
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: pr-number
+          retention-days: 1
+          if-no-files-found: error
+          path: |
+            pr.txt
+
+      # - name: Upload VR screenshots
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: vrscreenshot
+      #     retention-days: 1
+      #     path: ${{steps.screenshots_root.outputs.result}}

.gitignore

@@ -51,6 +51,7 @@ $RECYCLE.BIN/
 
 # Generated files
 *.scss.ts
+playwright-report
 
 # Files that might appear on external disk
 .Spotlight-V100