feat (CI): Enable 1JS VR tool to run on v7

.devops/templates/runpublishvrscreenshot.yml

@@ -0,0 +1,39 @@
+parameters:
+  - name: fluentVersion
+    type: string
+    default: v7
+  - name: vrTestPackageName
+    type: string
+    default: 'vr-tests'
+  - name: vrTestPackagePath
+    type: string
+    default: 'apps/vr-tests'
+
+steps:
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn (install packages)
+
+  - script: |
+      yarn workspace ${{ parameters.vrTestPackageName }} convert
+    displayName: Convert screener component to storywright
+
+  - script: |
+      yarn workspace ${{ parameters.vrTestPackageName }} vrt:build
+    displayName: Build VR tests components package
+
+  - script: |
+      yarn workspace ${{ parameters.vrTestPackageName }} test:component --verbose
+    displayName: 'Run VR tests'
+
+  - script: |
+      mkdir -p screenshots
+      cp -rf ${{ parameters.vrTestPackagePath }}/dist/screenshots/*.png screenshots/
+    displayName: Collate Artifacts
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: 'screenshots'
+      ArtifactName: 'vrscreenshot${{ parameters.fluentVersion }}'
+      publishLocation: 'Container'

.devops/templates/tools.yml

@@ -2,7 +2,8 @@
 steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '12.x'
+      versionSpec: '14.18.1'
+      checkLatest: false
     displayName: 'Install Node.js'
 
   - task: YarnInstaller@0

apps/vr-tests/convertStoriesToStoryWright.sh

@@ -0,0 +1,29 @@
+#!/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
+    if grep "Keys " $fname; then
+      impor="${impor}Keys , "
+    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

@@ -5,13 +5,17 @@
   "description": "Visual Regression Tests for Fluent UI React",
   "scripts": {
     "build": "just-scripts build",
+    "build:storybook": "build-storybook -o dist/storybook",
     "clean": "",
     "code-style": "just-scripts code-style",
+    "convert": "bash convertStoriesToStoryWright.sh",
     "just": "just-scripts",
     "screener": "screener-storybook --conf screener.config.js",
     "screener:local": "screener-storybook --conf screener.local.config.js --debug",
     "start": "start-storybook --port 5555",
-    "test": "just-scripts test"
+    "test": "just-scripts test",
+    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
+    "vrt:build": "yarn build:storybook"
   },
   "dependencies": {
     "@fluentui/react-button": "^0.20.16",
@@ -51,6 +55,8 @@
     "screener-runner": "^0.10.43",
     "screener-storybook": "^0.18.6",
     "storybook-readme": "^3.3.0",
-    "style-loader": "^1.2.1"
+    "storywright": "0.0.26-beta.1",
+    "style-loader": "^1.2.1",
+    "vrscreenshotdiff": "0.0.16"
   }
 }

apps/vr-tests/src/stories/TagPicker.stories.tsx

@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import Screener, { Keys } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator, FabricDecoratorFixedWidth } from '../utilities';
 import { TagPicker, Fabric, ITag } from 'office-ui-fabric-react';
@@ -27,7 +27,8 @@ const getTextFromItem = (item: ITag) => item.name;
 
 const getList = () => testTags;
 
-// Pickers that are 'disabled' are added before the Screener decorator because css classes for suggestion items won't exist
+// Pickers that are 'disabled' are added before the Screener decorator because css classes
+// for suggestion items won't exist
 storiesOf('TagPicker', module)
   .addDecorator(FabricDecorator)
   .addStory('TagPicker disabled', () => <TagPicker onResolveSuggestions={getList} disabled />);
@@ -43,7 +44,7 @@ storiesOf('TagPicker', module)
         .snapshot('Open Suggestion Menu', { cropTo: '.testWrapper' })
         .hover('.ms-Suggestions-item')
         .snapshot('Suggestion Menu Item Hover', { cropTo: '.testWrapper' })
-        .keys('.ms-BasePicker-input', Screener.Keys.upArrow)
+        .keys('.ms-BasePicker-input', Keys.upArrow)
         .end()}
     >
       {story()}

azure-pipelines.vrt-baseline-v7.yml

@@ -0,0 +1,38 @@
+trigger:
+  batch: true
+  branches:
+    include:
+      - 7.0
+
+variables:
+  skipComponentGovernanceDetection: true
+
+pool: '1ES-Host-Ubuntu'
+
+jobs:
+  - job: VRToolUpdateBaseline_V7
+    workspace:
+      clean: all
+    steps:
+      - template: .devops/templates/tools.yml
+
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v7
+          vrTestPackageName: 'vr-tests'
+          vrTestPackagePath: 'apps/vr-tests'
+
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "FluentUI-v7" --buildId $(Build.BuildId)
+        displayName: 'Run Screenshotdiff update baseline'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(fabric-public-pipeline-access-PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv7
+          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: $(VRClientSecret)
+          VR_APPROVAL_HOST: $(VR_APPROVAL_HOST)

azure-pipelines.vrt-pr.yml

@@ -0,0 +1,93 @@
+pr:
+  - 7.0
+
+trigger: none
+
+variables:
+  - ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}:
+      - name: sinceArg
+        value: --since $(targetBranch)
+
+  - template: .devops/templates/variables.yml
+
+pool: '1ES-Host-Ubuntu'
+
+jobs:
+  - job: VisualRegressionTest_V7
+    variables:
+      pipelineId: '314'
+      pipelineName: 'fluent-ui VRT Pipeline v7'
+    workspace:
+      clean: all
+    steps:
+      - checkout: self
+        fetchDepth: 0
+
+      - template: .devops/templates/tools.yml
+
+      - 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)
+          VR_APPROVAL_HOST: $(VR_APPROVAL_HOST)
+
+      - template: .devops/templates/runpublishvrscreenshot.yml
+        parameters:
+          fluentVersion: v7
+          vrTestPackageName: 'vr-tests'
+          vrTestPackagePath: 'apps/vr-tests'
+
+      - 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-V7)
+
+      - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "FluentUI-v7" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)'
+        displayName: 'Run fluentui-screenshotdiff'
+        env:
+          API_URL: $(System.CollectionUri)
+          API_TOKEN: $(fabric-public-pipeline-access-PAT)
+          API_REPOSITORY: $(Build.Repository.Name)
+          API_PROJECT: $(System.TeamProject)
+          SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv7
+          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: $(VRClientSecret)
+          GITHUB_REPO_OWNER: 'microsoft'
+          GITHUB_REPO_NAME: 'fluentui'
+          VR_APPROVAL_HOST: $(VR_APPROVAL_HOST)
+          VR_APP_NAME: $(VR_APP_NAME)