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",