diff --git a/apps/vr-tests-react-components/convertStoriesToStoryWright.sh b/apps/vr-tests-react-components/convertStoriesToStoryWright.sh new file mode 100755 index 00000000000000..f65f3bb7420f28 --- /dev/null +++ b/apps/vr-tests-react-components/convertStoriesToStoryWright.sh @@ -0,0 +1,5 @@ +#!/usr/bin/env bash +set -x +sed -i "s/import.*Screener.*screener'/import { StoryWright, Steps } from 'storywright'/g" src/stories/* +sed -i "s/Screener.Steps/Steps/g" src/stories/* +sed -i "s/Screener/StoryWright/g" src/stories/* diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index fbf47998f437c6..5075d4fc30aa81 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -5,6 +5,8 @@ "description": "Visual regression tests for @fluentui/react-components", "scripts": { "build": "build-storybook -o dist/storybook", + "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true", + "convert": "bash convertStoriesToStoryWright.sh", "clean": "just-scripts clean", "format": "prettier . -w --ignore-path ../../.prettierignore", "lint": "just-scripts lint", @@ -14,7 +16,8 @@ "type-check": "tsc" }, "devDependencies": { - "@fluentui/eslint-plugin": "*" + "@fluentui/eslint-plugin": "*", + "storywright": "0.0.23-beta.6" }, "dependencies": { "@fluentui/react-accordion": "^9.0.9", diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml new file mode 100644 index 00000000000000..676320c1c93fb9 --- /dev/null +++ b/azure-pipelines.vrt-baseline.yml @@ -0,0 +1,49 @@ +# Starter pipeline +# Start with a minimal pipeline that you can customize to build and deploy your code. +# Add steps that build, run tests, deploy, and more: +# https://aka.ms/yaml + +trigger: + batch: true + branches: + include: + - master + +variables: + skipComponentGovernanceDetection: true + +pool: '1ES-Host-Ubuntu' + +jobs: + - job: VRToolUpdateBaseline + workspace: + clean: all + steps: + - template: .devops/templates/tools.yml + + - task: Bash@3 + inputs: + filePath: yarn-ci.sh + displayName: yarn (install packages) + + - 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 + + - task: PublishBuildArtifacts@1 + inputs: + PathtoPublish: 'screenshots' + ArtifactName: 'vrscreenshot' + publishLocation: 'Container' + + - bash: node packages/screenshotdiff/dist/index.js release --buildId $(Build.BuildId) + displayName: 'Run Screenshotdiff update baseline' diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml new file mode 100644 index 00000000000000..d2e25b6312cec5 --- /dev/null +++ b/azure-pipelines.vrt-pr.yml @@ -0,0 +1,46 @@ +pr: + - master + +# There's a separate pipeline for CI which also uses this file, but with a trigger override in the UI +# https://dev.azure.com/uifabric/fabricpublic/_apps/hub/ms.vss-ciworkflow.build-ci-hub?_a=edit-build-definition&id=164&view=Tab_Triggers +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: TestVRTool + workspace: + clean: all + steps: + - template: .devops/templates/tools.yml + + - task: Bash@3 + inputs: + filePath: yarn-ci.sh + displayName: yarn (install packages) + + - 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 + + - task: PublishBuildArtifacts@1 + inputs: + PathtoPublish: 'screenshots' + ArtifactName: 'vrscreenshot' + publishLocation: 'Container' diff --git a/yarn.lock b/yarn.lock index 45c58c2641ba29..1da940e42cd481 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21155,6 +21155,18 @@ pkg-up@^4.0.0: dependencies: find-up "^6.2.0" +playwright-core@1.27.1: + version "1.27.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.27.1.tgz#840ef662e55a3ed759d8b5d3d00a5f885a7184f4" + integrity sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q== + +playwright@^1.27.0: + version "1.27.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.27.1.tgz#4eecac5899566c589d4220ca8acc16abe8a67450" + integrity sha512-xXYZ7m36yTtC+oFgqH0eTgullGztKSRMb4yuwLPl8IYSmgBM88QiB+3IWb1mRIC9/NNwcgbG0RwtFlg+EAFQHQ== + dependencies: + playwright-core "1.27.1" + please-upgrade-node@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942" @@ -24283,6 +24295,15 @@ storybook-addon-performance@0.16.1: tiny-invariant "^1.1.0" xstate "^4.22.0" +storywright@0.0.23-beta.6: + version "0.0.23-beta.6" + resolved "https://registry.yarnpkg.com/storywright/-/storywright-0.0.23-beta.6.tgz#cf44dadd29caddd51a7b1b6af1074f8efc876f76" + integrity sha512-Kwhk0xlRdy+e8CP21ZueAVSkw0e367MgO2XJPqPdet/RsE+rr4j0VOGA/TjqsHP+G25/FxwZI0UL/6q9alNUfQ== + dependencies: + playwright "^1.27.0" + prop-types "^15.6.0" + yargs "^16.2.0" + stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"