Skip to content

Commit

Permalink
1JS VRT tooll add pipeline to generate V8 screenshots (microsoft#25643)
Browse files Browse the repository at this point in the history
  • Loading branch information
sunilsurana authored and NotWoods committed Nov 18, 2022
1 parent fe76b11 commit f7bcf4a
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 71 deletions.
47 changes: 47 additions & 0 deletions .devops/templates/runpublishvrscreenshot.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
parameters:
- name: fluentVersion
type: string
default: v8
- name: vrTestPackageName
type: string
default: '@fluentui/vr-tests'
- name: vrTestPackagePath
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.vrTestPackageName }} 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.vrTestPackageName }} screener: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'
26 changes: 22 additions & 4 deletions apps/vr-tests-react-components/convertStoriesToStoryWright.sh
100755 → 100644
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion apps/vr-tests-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
26 changes: 26 additions & 0 deletions apps/vr-tests/convertStoriesToStoryWright.sh
Original file line number Diff line number Diff line change
@@ -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"

8 changes: 6 additions & 2 deletions apps/vr-tests/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
62 changes: 33 additions & 29 deletions azure-pipelines.vrt-baseline.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
vrTestPackageName: '@fluentui/vr-tests-react-components'
vrTestPackagePath: '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
vrTestPackageName: '@fluentui/vr-tests'
vrTestPackagePath: '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)
Expand Down
108 changes: 82 additions & 26 deletions azure-pipelines.vrt-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -38,9 +42,9 @@ jobs:
"blockingPipeline":{
},
"nonBlockingPipeline":{
"202": {
"$(pipelineId)": {
"pipelineStatus": "PENDING",
"pipelineName": "fluent-ui VRT Pipeline"
"pipelineName": "$(pipelineName)"
}
},
"postPolicy": '${postPolicy}',
Expand All @@ -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
vrTestPackageName: '@fluentui/vr-tests-react-components'
vrTestPackagePath: '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
vrTestPackageName: '@fluentui/vr-tests'
vrTestPackagePath: '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"
Expand All @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit f7bcf4a

Please sign in to comment.