diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 80e036d32da0d..d005c5349a56e 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -102,6 +102,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build apps/ts-minbar-test-react-components @microsoft/fluentui-react-build apps/vr-tests @microsoft/fluentui-react apps/vr-tests-react-components @microsoft/fluentui-react +apps/vr-tests-web-components @microsoft/fui-wc apps/ssr-tests @microsoft/fluentui-react apps/pr-deploy-site @microsoft/fluentui-react-build apps/test-bundles @microsoft/fluentui-react diff --git a/apps/vr-tests-web-components/.eslintrc.json b/apps/vr-tests-web-components/.eslintrc.json new file mode 100644 index 0000000000000..006c4cb41f035 --- /dev/null +++ b/apps/vr-tests-web-components/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "import"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": "off" + } +} diff --git a/apps/vr-tests-web-components/.storybook/main.cjs b/apps/vr-tests-web-components/.storybook/main.cjs new file mode 100644 index 0000000000000..6aeeb3e53b58e --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/main.cjs @@ -0,0 +1,85 @@ +const path = require('path'); +const CircularDependencyPlugin = require('circular-dependency-plugin'); +const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); + +const tsBin = require.resolve('typescript'); +const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json'); + +const tsPaths = new TsconfigPathsPlugin({ + configFile: tsConfigPath, +}); + +module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({ + addons: [ + { + name: '@storybook/addon-docs', + }, + { + name: '@storybook/addon-essentials', + options: { + backgrounds: false, + viewport: false, + toolbars: false, + actions: false, + }, + }, + ], + + stories: ['../src/**/*.stories.tsx'], + core: { + builder: 'webpack5', + disableTelemetry: true, + }, + babel: {}, + typescript: { + // disable react-docgen-typescript (totally not needed here, slows things down a lot) + reactDocgen: false, + }, + webpackFinal: async config => { + config.resolve = config.resolve ?? {}; + config.resolve.extensions = config.resolve.extensions ?? []; + config.resolve.plugins = config.resolve.plugins ?? []; + config.module = config.module ?? {}; + config.plugins = config.plugins ?? []; + + config.resolve.extensionAlias = { + '.js': ['.ts', '.js'], + '.mjs': ['.mts', '.mjs'], + }; + config.resolve.extensions.push(...['.ts', '.js']); + config.resolve.plugins.push(tsPaths); + config.module.rules = config.module.rules ?? []; + config.module.rules.push( + { + test: /\.([cm]?ts|tsx)$/, + loader: 'ts-loader', + sideEffects: true, + options: { + transpileOnly: true, + compiler: tsBin, + }, + }, + // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM + // It also enables importing other packages without proper ESM extensions, but that should be avoided ! + // @see https://webpack.js.org/configuration/module/#resolvefullyspecified + { + test: /\.m?js/, + resolve: { fullySpecified: false }, + }, + ); + + config.plugins.push( + new CircularDependencyPlugin({ + exclude: /node_modules/, + failOnError: process.env.NODE_ENV === 'production', + }), + ); + + // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged. + if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) { + config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin'); + } + + return config; + }, +}); diff --git a/apps/vr-tests-web-components/.storybook/manager.mjs b/apps/vr-tests-web-components/.storybook/manager.mjs new file mode 100644 index 0000000000000..87192fa503710 --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/manager.mjs @@ -0,0 +1,11 @@ +import { addons } from '@storybook/addons'; + +addons.setConfig({ + previewTabs: { + canvas: { hidden: true }, + }, + enableShortcuts: false, + sidebar: { + showRoots: true, + }, +}); diff --git a/apps/vr-tests-web-components/.storybook/preview.mjs b/apps/vr-tests-web-components/.storybook/preview.mjs new file mode 100644 index 0000000000000..45fb8f19d2acc --- /dev/null +++ b/apps/vr-tests-web-components/.storybook/preview.mjs @@ -0,0 +1,13 @@ +export const parameters = { + layout: 'fullscreen', + controls: { expanded: true }, + viewMode: 'docs', + previewTabs: { + canvas: { hidden: true }, + }, + options: { + storySort: { + method: 'alphabetical', + }, + }, +}; diff --git a/apps/vr-tests-web-components/jest.config.cjs b/apps/vr-tests-web-components/jest.config.cjs new file mode 100644 index 0000000000000..b33299f4e3b39 --- /dev/null +++ b/apps/vr-tests-web-components/jest.config.cjs @@ -0,0 +1,18 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'vr-tests-web-components', + preset: '../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, +}; diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json new file mode 100644 index 0000000000000..b69f1e095ed77 --- /dev/null +++ b/apps/vr-tests-web-components/package.json @@ -0,0 +1,29 @@ +{ + "name": "@fluentui/vr-tests-web-components", + "version": "0.0.1", + "private": true, + "description": "Visual regression tests for @fluentui/web-components", + "type": "module", + "scripts": { + "build": "build-storybook -o dist/storybook", + "format": "prettier . -w --ignore-path ../../.prettierignore", + "lint": "eslint src --ext .ts,.tsx", + "start": "start-storybook", + "test": "jest --passWithNoTests", + "type-check": "tsc", + "vr:build": "yarn build", + "vr:test": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/scripts-tasks": "*", + "html-react-parser": "4.0.0", + "typescript": "4.7.4" + }, + "dependencies": { + "@fluentui/react-button": "^9.2.3", + "@fluentui/react-storybook-addon": "9.0.0-rc.1", + "@fluentui/web-components": "3.0.0-alpha.24", + "tslib": "^2.1.0" + } +} diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx new file mode 100644 index 0000000000000..3666c5f3dba27 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import parse from 'html-react-parser'; +import { StoryWright, Steps } from 'storywright'; +import { accordionDefinition, accordionItemDefinition, FluentDesignSystem } from '@fluentui/web-components'; + +accordionDefinition.define(FluentDesignSystem.registry); +accordionItemDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Accordion', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+ + ); + }, + ], +}; + +const add20Filled = ` + +`; +const subtract20Filled = ` + +`; + +export const AccordionWithCustomIcons = () => + parse(` + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 1 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 2 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 3 + Accordion Panel 1 + + +`); + +export const AccordionWithCustomIconsRTL = () => + parse(` + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 1 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 2 + Accordion Panel 1 + + + ${add20Filled} + ${subtract20Filled} + Accordion Header 3 + Accordion Panel 1 + + +`); diff --git a/apps/vr-tests-web-components/tsconfig.json b/apps/vr-tests-web-components/tsconfig.json new file mode 100644 index 0000000000000..871c79ae16bfe --- /dev/null +++ b/apps/vr-tests-web-components/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.base.wc.json", + "compilerOptions": { + "target": "ES2019", + "module": "ESNext", + "noEmit": true, + "experimentalDecorators": true, + "resolveJsonModule": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "typeRoots": ["../../node_modules/@types"] + }, + "include": ["./src", "./.storybook/*"] +} diff --git a/azure-pipelines.vrt-baseline-web-components.yml b/azure-pipelines.vrt-baseline-web-components.yml new file mode 100644 index 0000000000000..4bad7ff957740 --- /dev/null +++ b/azure-pipelines.vrt-baseline-web-components.yml @@ -0,0 +1,45 @@ +# 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: + - web-components-v3 + +variables: + skipComponentGovernanceDetection: true + +pool: '1ES-Host-Ubuntu' + +jobs: + # TODO: When web-components-v3 branch is merged with master, this file can be deleted and everything below this comment + # can be moved to azure-pipelines.vrt-baseline.yml. The corresponding pipeline on ADO can be deleted as well. + - job: VRToolUpdateBaseline_WebComponents + workspace: + clean: all + steps: + - template: .devops/templates/tools.yml + + - template: .devops/templates/runpublishvrscreenshot.yml + parameters: + fluentVersion: webcomponents + vrTestPackageName: '@fluentui/vr-tests-web-components' + vrTestPackagePath: 'apps/vr-tests-web-components' + + - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "FluentUI-web-components" --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: vrscreenshotwebcomponents + 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) + VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml deleted file mode 100644 index f8b8c1b309663..0000000000000 --- a/azure-pipelines.vrt-baseline.yml +++ /dev/null @@ -1,100 +0,0 @@ -# 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_V9 - workspace: - clean: all - steps: - - template: .devops/templates/tools.yml - - - template: .devops/templates/runpublishvrscreenshot.yml - parameters: - fluentVersion: v9 - vrTestPackageName: '@fluentui/vr-tests-react-components' - vrTestPackagePath: 'apps/vr-tests-react-components' - shouldBuildstorybookaddon: true - - - 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: $(fabric-public-pipeline-access-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) - VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) - - - job: VRToolUpdateBaseline_V8 - workspace: - clean: all - steps: - - template: .devops/templates/tools.yml - - - 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 "fluentuiv8" --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: vrscreenshotv8 - 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) - VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) - - - job: VRToolUpdateBaseline_V0 - workspace: - clean: all - steps: - - template: .devops/templates/tools.yml - - - template: .devops/templates/runpublishvrscreenshot.yml - parameters: - fluentVersion: v0 - vrTestPackageName: '@fluentui/docs' - vrTestPackagePath: 'packages/fluentui/docs' - shouldBuildNorthstar: true - - - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "FluentUI-v0" --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: vrscreenshotv0 - 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) - VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml index 064756335ad18..c94bf052bc481 100644 --- a/azure-pipelines.vrt-pr.yml +++ b/azure-pipelines.vrt-pr.yml @@ -1,5 +1,5 @@ pr: - - master + - web-components-v3 # 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 @@ -15,11 +15,10 @@ variables: pool: '1ES-Host-Ubuntu' jobs: - - job: VisualRegressionTest_V9 + - job: VisualRegressionTest_WebComponents variables: - pipelineId: '311' - pipelineName: 'fluent-ui VRT Pipeline v9' - + pipelineId: '315' + pipelineName: 'fluent-ui VRT Pipeline web-components' workspace: clean: all steps: @@ -60,10 +59,9 @@ jobs: - template: .devops/templates/runpublishvrscreenshot.yml parameters: - fluentVersion: v9 - vrTestPackageName: '@fluentui/vr-tests-react-components' - vrTestPackagePath: 'apps/vr-tests-react-components' - shouldBuildstorybookaddon: true + fluentVersion: webcomponents + vrTestPackageName: '@fluentui/vr-tests-web-components' + vrTestPackagePath: 'apps/vr-tests-web-components' - powershell: | $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" @@ -76,180 +74,19 @@ jobs: name: GetLatestGreenCIBuild env: SYSTEM_ACCESSTOKEN: $(System.AccessToken) - BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID) - condition: eq(variables['vrTestSkip'], 'no') - - - 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: $(fabric-public-pipeline-access-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) - GITHUB_REPO_OWNER: 'microsoft' - GITHUB_REPO_NAME: 'fluentui' - VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) - VR_APP_NAME: $(VR_APP_NAME) + # TODO: When web-components-v3 branch is merged with master, + # BASELINE-PIPELINE-ID-WEBCOMPONENTS should be changed to simply BASELINE-PIPELINE-ID. + BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID-WEBCOMPONENTS) condition: eq(variables['vrTestSkip'], 'no') - - job: VisualRegressionTest_V8 - variables: - pipelineId: '312' - pipelineName: 'fluent-ui VRT Pipeline v8' - 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: 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" - 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) - condition: eq(variables['vrTestSkip'], 'no') - - - 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: $(fabric-public-pipeline-access-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) - BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) - VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) - GITHUB_REPO_OWNER: 'microsoft' - GITHUB_REPO_NAME: 'fluentui' - VR_APPROVAL_HOST: $(VR_APPROVAL_HOST) - VR_APP_NAME: $(VR_APP_NAME) - condition: eq(variables['vrTestSkip'], 'no') - - - job: VisualRegressionTest_V0 - variables: - pipelineId: '313' - pipelineName: 'fluent-ui VRT Pipeline v0' - - 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) - - template: .devops/templates/runpublishvrscreenshot.yml - parameters: - fluentVersion: v0 - vrTestPackageName: '@fluentui/docs' - vrTestPackagePath: 'packages/fluentui/docs' - shouldBuildstorybookaddon: false - shouldBuildNorthstar: true - - - 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) - condition: eq(variables['vrTestSkip'], 'no') - - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "FluentUI-v0" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)' + - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "FluentUI-web-components" --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: vrscreenshotv0 + SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotwebcomponents GITHUB_API_TOKEN: $(githubRepoStatusPAT) STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI) STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) diff --git a/package.json b/package.json index dc046330b5a82..4e4555c17d6e4 100644 --- a/package.json +++ b/package.json @@ -516,6 +516,7 @@ }, { "packages": [ + "@fluentui/vr-tests-web-components", "@fluentui/web-components" ], "dependencies": [ diff --git a/packages/tokens/src/themeToTokensObject.ts b/packages/tokens/src/themeToTokensObject.ts index 25189f147d874..f6c6473a46698 100644 --- a/packages/tokens/src/themeToTokensObject.ts +++ b/packages/tokens/src/themeToTokensObject.ts @@ -12,7 +12,7 @@ export function themeToTokensObject(theme: TTheme): Record const tokens = {} as Record; const keys = Object.keys(theme) as (keyof TTheme)[]; for (const key of keys) { - tokens[key] = `var(--${key})`; + tokens[key] = `var(--${String(key)})`; } return tokens; } diff --git a/workspace.json b/workspace.json index 6103cce5741dd..1c4e4723854d1 100644 --- a/workspace.json +++ b/workspace.json @@ -1130,6 +1130,11 @@ "projectType": "application", "implicitDependencies": [] }, + "@fluentui/vr-tests-web-components": { + "root": "apps/vr-tests-web-components", + "projectType": "application", + "implicitDependencies": [] + }, "@fluentui/web-components": { "root": "packages/web-components", "projectType": "library", diff --git a/yarn.lock b/yarn.lock index a46ec4a70bea2..212e28be42d74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11140,6 +11140,15 @@ dom-serializer@^1.0.1: domhandler "^4.2.0" entities "^2.0.0" +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" + dom-walk@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018" @@ -11160,10 +11169,10 @@ domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f" integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w== -domelementtype@^2.0.1, domelementtype@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57" - integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== +domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" + integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== domexception@^2.0.1: version "2.0.1" @@ -11172,6 +11181,13 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" +domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== + dependencies: + domelementtype "^2.3.0" + domhandler@^2.3.0: version "2.4.2" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" @@ -11210,6 +11226,15 @@ domutils@^2.0.0, domutils@^2.5.2, domutils@^2.6.0: domelementtype "^2.2.0" domhandler "^4.2.0" +domutils@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" + integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== + dependencies: + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.3" + dot-case@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee" @@ -11511,6 +11536,11 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4" integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw== +entities@^4.2.0, entities@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" + integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== + env-paths@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43" @@ -14512,6 +14542,14 @@ hpack.js@^2.1.6: readable-stream "^2.0.1" wbuf "^1.1.0" +html-dom-parser@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-4.0.0.tgz#dc382fbbc9306f8c9b5aae4e3f2822e113a48709" + integrity sha512-TUa3wIwi80f5NF8CVWzkopBVqVAtlawUzJoLwVLHns0XSJGynss4jiY0mTWpiDOsuyw+afP+ujjMgRh9CoZcXw== + dependencies: + domhandler "5.0.3" + htmlparser2 "9.0.0" + html-element-map@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.1.tgz#3c4fcb4874ebddfe4283b51c8994e7713782b592" @@ -14559,6 +14597,16 @@ html-minifier-terser@^5.0.1, html-minifier-terser@^5.1.1: relateurl "^0.2.7" terser "^4.6.3" +html-react-parser@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-4.0.0.tgz#a727be4539ad85b133a5071f97b8c2f835a55bdf" + integrity sha512-OzlOavs9lLyBxoRiXbXfODIX/nSShukMtdx3+WSMjon/FF1gJZRq0rBELoR5OswfbN56C0oKpAii7i3yzO/uVQ== + dependencies: + domhandler "5.0.3" + html-dom-parser "4.0.0" + react-property "2.0.0" + style-to-js "1.1.3" + html-tags@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" @@ -14606,6 +14654,16 @@ html-webpack-plugin@^4.0.0: tapable "^1.1.3" util.promisify "1.0.0" +htmlparser2@9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.0.0.tgz#e431142b7eeb1d91672742dea48af8ac7140cddb" + integrity sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.3" + domutils "^3.1.0" + entities "^4.5.0" + htmlparser2@^3.9.1: version "3.10.1" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" @@ -21630,6 +21688,11 @@ react-node-resolver@^1.0.1: resolved "https://registry.yarnpkg.com/react-node-resolver/-/react-node-resolver-1.0.1.tgz#1798a729c0e218bf2f0e8ddf79c550d4af61d83a" integrity sha1-F5inKcDiGL8vDo3fecVQ1K9h2Do= +react-property@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136" + integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw== + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -24008,6 +24071,13 @@ style-loader@^1.3.0: loader-utils "^2.0.0" schema-utils "^2.7.0" +style-to-js@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.3.tgz#2012d75dc89bf400edc29c545ed61c8626b00184" + integrity sha512-zKI5gN/zb7LS/Vm0eUwjmjrXWw8IMtyA8aPBJZdYiQTXj4+wQ3IucOLIOnF7zCHxvW8UhIGh/uZh/t9zEHXNTQ== + dependencies: + style-to-object "0.4.1" + style-to-object@0.3.0, style-to-object@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" @@ -24015,6 +24085,13 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +style-to-object@0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37" + integrity sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw== + dependencies: + inline-style-parser "0.1.1" + styled-components@^5.1.1: version "5.2.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"