1JS VRT tooll add pipeline to generate V8 screenshots

.devops/templates/runpublishvrscreenshot.yml

@@ -0,0 +1,47 @@
+parameters:
+  - name: fluentVersion
+    type: string
+    default: v8
+  - name: storyPackageName
+    type: string
+    default: '@fluentui/vr-tests'
+  - name: storyPackagePath
+    type: string
+    default: 'apps/vr-tests'
+  - name: shouldbuildstorybookaddon
+    type: boolean
+    default: false
+
+steps:
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn (install packages)
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} convert
+    displayName: Convert screener component to storywright
+
+  - ${{ if eq(parameters.shouldbuildstorybookaddon, 'true') }}:
+      - script: |
+          yarn build --to @fluentui/react-storybook-addon
+        displayName: Build react-storybook-addon
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} screener:build
+    displayName: Build VR tests components package
+
+  - script: |
+      yarn workspace ${{ parameters.storyPackageName }} test:component --verbose
+    displayName: 'Run VR tests'
+
+  - script: |
+      mkdir -p screenshots
+      cp -rf ${{ parameters.storyPackagePath }}/dist/screenshots/*.png screenshots/
+    displayName: Collate Artifacts
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: 'screenshots'
+      ArtifactName: 'vrscreenshot${{ parameters.fluentVersion }}'
+      publishLocation: 'Container'

apps/vr-tests-react-components/convertStoriesToStoryWright.sh

@@ -1,5 +1,23 @@
 #!/usr/bin/env bash
-set -x
-find ./src/stories/ -type f | xargs sed -i "s/import.*Screener.*screener'/import { StoryWright, Steps } from 'storywright'/g"
-find ./src/stories/ -type f | xargs sed -i "s/Screener.Steps/Steps/g"
-find ./src/stories/ -type f | xargs sed -i "s/Screener/StoryWright/g"
+
+find ./src -type f |while read fname; do
+  impor=""
+  if grep -q "screener-storybook" $fname; then
+    echo "$fname"
+    if grep -q "<Screener" $fname; then
+      impor="${impor}StoryWright, "
+    fi
+    if grep -q "Steps(" $fname; then
+      impor="${impor}Steps, "
+    fi
+    if grep "Step " $fname; then
+      impor="${impor}Step , "
+    fi
+  fi
+  impor="${impor%??}"
+  sed -i "s/import.*screener'/import { ${impor} } from 'storywright'/g" $fname
+done
+
+find ./src -type f | xargs sed -i "s/Screener.Steps/Steps/g"
+find ./src -type f | xargs sed -i "s/<Screener/<StoryWright/g"
+find ./src -type f | xargs sed -i "s/Screener>/StoryWright>/g"

apps/vr-tests-react-components/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts": "^1.0.0",
-    "storywright": "0.0.23-beta.6"
+    "storywright": "0.0.26-beta.1"
   },
   "dependencies": {
     "@fluentui/react-accordion": "^9.0.11",

apps/vr-tests/convertStoriesToStoryWright.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+
+#!/usr/bin/env bash
+
+find ./src -type f |while read fname; do
+  impor=""
+  if grep -q "screener-storybook" $fname; then
+    echo "$fname"
+    if grep -q "<Screener" $fname; then
+      impor="${impor}StoryWright, "
+    fi
+    if grep -q "Steps(" $fname; then
+      impor="${impor}Steps, "
+    fi
+    if grep "Step " $fname; then
+      impor="${impor}Step , "
+    fi
+  fi
+  impor="${impor%??}"
+  sed -i "s/import.*screener'/import { ${impor} } from 'storywright'/g" $fname
+done
+
+find ./src -type f | xargs sed -i "s/Screener.Steps/Steps/g"
+find ./src -type f | xargs sed -i "s/<Screener/<StoryWright/g"
+find ./src -type f | xargs sed -i "s/Screener>/StoryWright>/g"
+

apps/vr-tests/package.json

@@ -6,15 +6,19 @@
   "scripts": {
     "build": "just-scripts build",
     "clean": "just-scripts clean",
+    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
     "code-style": "just-scripts code-style",
+    "convert": "bash convertStoriesToStoryWright.sh",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "screener:build": "cross-env NODE_OPTIONS=--max-old-space-size=3072 just-scripts storybook:build",
     "screener": "just-scripts screener",
-    "start": "just-scripts dev:storybook"
+    "start": "just-scripts dev:storybook",
+    "type-check": "tsc"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "*"
+    "@fluentui/eslint-plugin": "*",
+    "storywright": "0.0.26-beta.1"
   },
   "dependencies": {
     "@fluentui/example-data": "^8.4.3",

azure-pipelines.vrt-baseline.yml

@@ -15,50 +15,54 @@ variables:
 pool: '1ES-Host-Ubuntu'
 
 jobs:
-  - job: VRToolUpdateBaseline
+  - job: VRToolUpdateBaseline_V9
     workspace:
       clean: all
     steps:
       - template: .devops/templates/tools.yml
 
-      - task: Bash@3
-        inputs:
-          filePath: yarn-ci.sh
-        displayName: yarn (install packages)
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v9
+          storyPackageName: '@fluentui/vr-tests-react-components'
+          storyPackagePath: 'apps/vr-tests-react-components'
+          shouldbuildstorybookaddon: true
 
-      - script: |
-          yarn workspace @fluentui/vr-tests-react-components convert
-        displayName: Convert screener component to storywright
-
-      - script: |
-          yarn workspace @fluentui/vr-tests-react-components screener:build
-        displayName: Build VR tests components package
-
-      - script: |
-          yarn lage test:component --verbose
-        displayName: 'Run VR tests'
-
-      - script: |
-          mkdir -p screenshots
-          cp -rf apps/vr-tests-react-components/dist/screenshots/*.png screenshots/
-        displayName: Collate Artifacts
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentuiv9" --buildId $(Build.BuildId)
+        displayName: 'Run Screenshotdiff update baseline'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(TEST_PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv9
+          GITHUB_API_TOKEN: $(GITHUB_TEST_PAT)
+          STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
+          STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)
+          BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
 
-      - task: PublishBuildArtifacts@1
-        inputs:
-          PathtoPublish: 'screenshots'
-          ArtifactName: 'vrscreenshot'
-          publishLocation: 'Container'
+  - job: VRToolUpdateBaseline_V8
+    workspace:
+      clean: all
+    steps:
+      - template: .devops/templates/tools.yml
 
-      # - bash: cd packages/screenshotdiff && yarn build
-      #   displayName: 'Build'
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v8
+          storyPackageName: '@fluentui/vr-tests'
+          storyPackagePath: 'apps/vr-tests'
+          shouldbuildstorybookaddon: false
 
-      - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentui" --buildId $(Build.BuildId)
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentuiv8" --buildId $(Build.BuildId)
         displayName: 'Run Screenshotdiff update baseline'
         env:
           API_URL: $(System.CollectionUri)
           API_TOKEN: $(TEST_PAT)
           API_REPOSITORY: $(Build.Repository.Name)
           API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv8
           GITHUB_API_TOKEN: $(GITHUB_TEST_PAT)
           STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
           STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)

azure-pipelines.vrt-pr.yml

@@ -15,7 +15,11 @@ variables:
 pool: '1ES-Host-Ubuntu'
 
 jobs:
-  - job: TestVRTool
+  - job: VisualRegressionTest_V9
+    variables:
+      pipelineId: '211'
+      pipelineName: 'fluent-ui VRT Pipeline v9'
+
     workspace:
       clean: all
     steps:
@@ -38,9 +42,9 @@ jobs:
               "blockingPipeline":{
               },
               "nonBlockingPipeline":{
-                "202": {
+                "$(pipelineId)": {
                   "pipelineStatus": "PENDING",
-                  "pipelineName": "fluent-ui VRT Pipeline"
+                  "pipelineName": "$(pipelineName)"
                 }
               },
               "postPolicy": '${postPolicy}',
@@ -50,33 +54,84 @@ jobs:
         env:
           VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
 
-      - task: Bash@3
-        inputs:
-          filePath: yarn-ci.sh
-        displayName: yarn (install packages)
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v9
+          storyPackageName: '@fluentui/vr-tests-react-components'
+          storyPackagePath: 'apps/vr-tests-react-components'
+          shouldbuildstorybookaddon: true
 
-      - script: |
-          yarn workspace @fluentui/vr-tests-react-components convert
-        displayName: Convert screener component to storywright
+      - powershell: |
+          $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"
+          Write-Host "Looking up latest official build via url: $url"
+          $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"}
+          Write-Host "Response: $pipelineBuildInfo"
+          [int]$latestBuildId = $pipelineBuildInfo.value.id
+          Write-Host "Setting variable LatestBuildId=$latestBuildId"
+          Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId"
+        name: GetLatestGreenCIBuild
+        env:
+          SYSTEM_ACCESSTOKEN: $(System.AccessToken)
+          BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID)
 
-      - script: |
-          yarn workspace @fluentui/vr-tests-react-components screener:build
-        displayName: Build vr tests components package
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentuiv9" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)'
+        displayName: 'Run fluentui-screenshotdiff'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(TEST_PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv9
+          GITHUB_API_TOKEN: $(githubRepoStatusPAT)
+          STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
+          STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)
+          BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
 
-      - script: |
-          yarn lage test:component --verbose
-        displayName: 'Run VR tests'
+  - job: VisualRegressionTest_V8
+    variables:
+      pipelineId: '212'
+      pipelineName: 'fluent-ui VRT Pipeline v8'
+    workspace:
+      clean: all
+    steps:
+      - template: .devops/templates/tools.yml
 
-      - script: |
-          mkdir -p screenshots
-          cp -rf apps/vr-tests-react-components/dist/screenshots/*.png screenshots/
-        displayName: Collate Artifacts
+      - bash: |
+          postPolicy="true";
+          response=$(curl --request POST 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id=288a69b6-760d-4c1f-ad6d-0183b5e5740f' --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} )
+            parsedResponse=${response/*"access_token"/}
+            token=${parsedResponse:3:${#parsedResponse}-5}
+            curl --location --request POST 'https://vrt-fluentapp.azurewebsites.net/api/policyState' \
+            --header 'Authorization: Bearer '"$token" \
+            --header 'Content-Type: application/json' \
+            --data-raw '	{
+            "organization": "uifabric",
+            "projectName": "fabricpublic",
+            "prId": $(System.PullRequest.PullRequestNumber),
+            "commitId": "$(Build.SourceVersion)",
+              "generate":true,
+              "blockingPipeline":{
+              },
+              "nonBlockingPipeline":{
+                "$(pipelineId)": {
+                  "pipelineStatus": "PENDING",
+                  "pipelineName": "$(pipelineName)"
+                }
+              },
+              "postPolicy": '${postPolicy}',
+              "policyType": "OPTIONAL"
+            }'
+        displayName: 'Call policy State Api'
+        env:
+          VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
 
-      - task: PublishBuildArtifacts@1
-        inputs:
-          PathtoPublish: 'screenshots'
-          ArtifactName: 'vrscreenshot'
-          publishLocation: 'Container'
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v8
+          storyPackageName: '@fluentui/vr-tests'
+          storyPackagePath: 'apps/vr-tests'
+          shouldbuildstorybookaddon: false
 
       - powershell: |
           $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"
@@ -91,13 +146,14 @@ jobs:
           SYSTEM_ACCESSTOKEN: $(System.AccessToken)
           BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID)
 
-      - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentui" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId)
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentuiv8" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)'
         displayName: 'Run fluentui-screenshotdiff'
         env:
           API_URL: $(System.CollectionUri)
           API_TOKEN: $(TEST_PAT)
           API_REPOSITORY: $(Build.Repository.Name)
           API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv8
           GITHUB_API_TOKEN: $(githubRepoStatusPAT)
           STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI)
           STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI)

package.json

@@ -303,7 +303,7 @@
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "2.4.0",
     "typescript": "4.3.5",
-    "vrscreenshotdiff": "0.0.6",
+    "vrscreenshotdiff": "0.0.9",
     "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.4.2",
     "webpack-cli": "4.10.0",