diff --git a/.github/workflows/screener-run.yml b/.github/workflows/screener-run.yml index 6ddd0a26c50be..19c4d4be5e059 100644 --- a/.github/workflows/screener-run.yml +++ b/.github/workflows/screener-run.yml @@ -175,7 +175,7 @@ jobs: if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - name: Start @fluentui/react VR Test - run: yarn workspace @fluentui/vr-tests screener + run: yarn workspace @fluentui/vr-tests screener --v8 env: SCREENER_ENDPOINT: ${{secrets.SCREENER_ENDPOINT}} SCREENER_PROXY_ENDPOINT: ${{secrets.SCREENER_PROXY_ENDPOINT}} @@ -252,7 +252,7 @@ jobs: if: ${{ env.IS_ARTIFACT_PRESENT == 'true' }} - name: Start @fluentui/react-components VR Test - run: yarn workspace @fluentui/vr-tests-react-components screener + run: yarn workspace @fluentui/vr-tests-react-components screener --v9 env: SCREENER_ENDPOINT: ${{secrets.SCREENER_ENDPOINT}} SCREENER_PROXY_ENDPOINT: ${{secrets.SCREENER_PROXY_ENDPOINT}} diff --git a/apps/vr-tests-react-components/screener.config.js b/apps/vr-tests-react-components/screener.config.js deleted file mode 100644 index caa843a8fbb11..0000000000000 --- a/apps/vr-tests-react-components/screener.config.js +++ /dev/null @@ -1,42 +0,0 @@ -const cp = require('child_process'); - -function getCurrentHash() { - try { - const buffer = cp.execSync('git rev-list --parents -n 1 HEAD', { - stdio: ['pipe', 'pipe', process.stderr], - }); - - if (buffer) { - // The command returns a list of hashes, the last one is the one we want - return buffer.toString().trim().split(' ').pop(); - } - } catch (e) { - console.error('Cannot get current git hash'); - process.exit(1); - } - - return ''; -} - -const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH - ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '') - : 'master'; - -// https://github.com/screener-io/screener-storybook#additional-configuration-options -const config = { - projectRepo: 'microsoft/fluentui/react-components', - storybookStaticBuildDir: 'dist/storybook', - storybookConfigDir: '.storybook', - apiKey: process.env.SCREENER_API_KEY, - resolution: '1024x768', - baseBranch, - failureExitCode: 0, - alwaysAcceptBaseBranch: true, - ...(process.env.BUILD_SOURCEBRANCH && process.env.BUILD_SOURCEBRANCH.indexOf('refs/pull') > -1 - ? { commit: getCurrentHash() } - : null), - baseUrl: `${process.env.DEPLOYURL}/react-components-screener/iframe.html`, -}; -console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2)); - -module.exports = config; diff --git a/apps/vr-tests/screener.config.js b/apps/vr-tests/screener.config.js deleted file mode 100644 index 3002918395bf2..0000000000000 --- a/apps/vr-tests/screener.config.js +++ /dev/null @@ -1,44 +0,0 @@ -// @ts-check - -const cp = require('child_process'); - -function getCurrentHash() { - try { - const buffer = cp.execSync('git rev-list --parents -n 1 HEAD', { - stdio: ['pipe', 'pipe', process.stderr], - }); - - if (buffer) { - // The command returns a list of hashes, the last one is the one we want - return buffer.toString().trim().split(' ').pop(); - } - } catch (e) { - console.error('Cannot get current git hash'); - process.exit(1); - } - - return ''; -} - -const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH - ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '') - : 'master'; - -// https://github.com/screener-io/screener-storybook#additional-configuration-options -const config = { - projectRepo: 'microsoft/fluentui', - storybookStaticBuildDir: 'dist/storybook', - storybookConfigDir: '.storybook', - apiKey: process.env.SCREENER_API_KEY, - resolution: '1024x768', - baseBranch, - failureExitCode: 0, - alwaysAcceptBaseBranch: true, - ...(process.env.BUILD_SOURCEBRANCH && process.env.BUILD_SOURCEBRANCH.indexOf('refs/pull') > -1 - ? { commit: getCurrentHash() } - : null), - baseUrl: `${process.env.DEPLOYURL}/react-screener/iframe.html`, -}; -console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2)); - -module.exports = config; diff --git a/scripts/gulp/tasks/screener.ts b/scripts/gulp/tasks/screener.ts index cad16621b101c..95acf3605e625 100644 --- a/scripts/gulp/tasks/screener.ts +++ b/scripts/gulp/tasks/screener.ts @@ -22,7 +22,7 @@ task('screener:runner', cb => { throw new Error(`package ${docsPackageName} does not exist in the repo`); } - const screenerConfigPath = paths.base('scripts/screener/screener.config.js'); + const screenerConfigPath = paths.base('scripts/screener/screener.config-northstar.js'); // kill the server when done const handlePromiseExit = promise => diff --git a/scripts/just.config.ts b/scripts/just.config.ts index 6406ae09cd17b..a43927a80a559 100644 --- a/scripts/just.config.ts +++ b/scripts/just.config.ts @@ -1,4 +1,4 @@ -import { task, series, parallel, condition, option, addResolvePath } from 'just-scripts'; +import { task, series, parallel, condition, option, addResolvePath, argv } from 'just-scripts'; import path from 'path'; import fs from 'fs'; @@ -124,8 +124,8 @@ export function preset() { 'bundle', condition('webpack', () => fs.existsSync(path.join(process.cwd(), 'webpack.config.js'))), ); - - task('screener', screener); + option('v8'); + task('screener', () => screener({ version: argv().v8 ? 'v8' : 'v9' })); } preset.basic = basicPreset; diff --git a/scripts/screener/screener.config-northstar.js b/scripts/screener/screener.config-northstar.js new file mode 100644 index 0000000000000..cf6f5d30dd3b0 --- /dev/null +++ b/scripts/screener/screener.config-northstar.js @@ -0,0 +1,63 @@ +require('../babel/register'); + +const cp = require('child_process'); + +function getCurrentHash() { + try { + const buffer = cp.execSync('git rev-list --parents -n 1 HEAD', { + stdio: ['pipe', 'pipe', process.stderr], + }); + + if (buffer) { + // The command returns a list of hashes, the last one is the one we want + return buffer.toString().trim().split(' ').pop(); + } + } catch (e) { + console.error('Cannot get current git hash'); + process.exit(1); + } + + return ''; +} + +const config = require('../config').default; + +const { compilerOptions } = require(config.paths.docs('tsconfig.json')); + +require('tsconfig-paths').register({ + baseUrl: config.path_base, + paths: compilerOptions.paths, +}); + +const baseBranch = 'master'; +const sourceBranch = process.env.BUILD_SOURCEBRANCH; + +// https://github.com/screener-io/screener-runner +module.exports = { + apiKey: process.env.SCREENER_API_KEY, + projectRepo: 'microsoft/fluentui/fluentui', + + diffOptions: { + structure: true, + layout: true, + style: true, + content: true, + minLayoutPosition: 1, // Optional threshold for Layout changes. Defaults to 4 pixels. + minLayoutDimension: 1, // Optional threshold for Layout changes. Defaults to 10 pixels. + minShiftGraphic: 1, // Optional threshold for pixel shifts in graphics. + compareSVGDOM: false, // Pass if SVG DOM is the same. Defaults to false. + }, + + // screenshot every example in maximized mode + states: require('./screener.states').default, + + alwaysAcceptBaseBranch: true, + baseBranch, + failureExitCode: 0, + + ...(sourceBranch && sourceBranch.indexOf('refs/pull') > -1 + ? { + commit: getCurrentHash(), + } + : null), +}; diff --git a/scripts/screener/screener.config.js b/scripts/screener/screener.config.js index cf6f5d30dd3b0..dfac8bdef013e 100644 --- a/scripts/screener/screener.config.js +++ b/scripts/screener/screener.config.js @@ -1,4 +1,4 @@ -require('../babel/register'); +// @ts-check const cp = require('child_process'); @@ -20,44 +20,35 @@ function getCurrentHash() { return ''; } -const config = require('../config').default; - -const { compilerOptions } = require(config.paths.docs('tsconfig.json')); - -require('tsconfig-paths').register({ - baseUrl: config.path_base, - paths: compilerOptions.paths, -}); - -const baseBranch = 'master'; -const sourceBranch = process.env.BUILD_SOURCEBRANCH; - -// https://github.com/screener-io/screener-runner -module.exports = { - apiKey: process.env.SCREENER_API_KEY, - projectRepo: 'microsoft/fluentui/fluentui', - - diffOptions: { - structure: true, - layout: true, - style: true, - content: true, - minLayoutPosition: 1, // Optional threshold for Layout changes. Defaults to 4 pixels. - minLayoutDimension: 1, // Optional threshold for Layout changes. Defaults to 10 pixels. - minShiftGraphic: 1, // Optional threshold for pixel shifts in graphics. - compareSVGDOM: false, // Pass if SVG DOM is the same. Defaults to false. - }, - - // screenshot every example in maximized mode - states: require('./screener.states').default, - - alwaysAcceptBaseBranch: true, - baseBranch, - failureExitCode: 0, +/** + * + * @param {Object} options + * @param {string} options.screenerApiKey + * @param {string} options.sourceBranchName + * @param {string} options.deployUrl + * @param {string} options.targetBranch + * @param {string} options.version + * @returns + */ +function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch, version }) { + const baseBranch = targetBranch ? targetBranch.replace(/^refs\/heads\//, '') : 'master'; + const projectRepo = version === 'v8' ? 'microsoft/fluentui' : 'microsoft/fluentui/react-components'; + const baseUrlEndpoint = version === 'v8' ? 'react-screener' : 'react-components-screener'; + // https://github.com/screener-io/screener-storybook#additional-configuration-options + const config = { + projectRepo: projectRepo, + storybookStaticBuildDir: 'dist/storybook', + storybookConfigDir: '.storybook', + apiKey: screenerApiKey, + resolution: '1024x768', + baseBranch, + failureExitCode: 0, + alwaysAcceptBaseBranch: true, + ...(sourceBranchName !== 'master' ? { commit: getCurrentHash() } : null), + baseUrl: `${deployUrl}/${baseUrlEndpoint}/iframe.html`, + }; + console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2)); + return config; +} - ...(sourceBranch && sourceBranch.indexOf('refs/pull') > -1 - ? { - commit: getCurrentHash(), - } - : null), -}; +module.exports = getConfig; diff --git a/scripts/tasks/screener.ts b/scripts/tasks/screener.ts index c662e83a16caa..13970d5859691 100644 --- a/scripts/tasks/screener.ts +++ b/scripts/tasks/screener.ts @@ -1,6 +1,5 @@ import { screenerRunner, environment } from '../screener/screener.runner'; import { ScreenerRunnerConfig, ScreenerRunnerStep, ScreenerState } from '../screener/screener.types'; -import path from 'path'; // @ts-ignore - screener-storybook has no typings import { startStorybook, getStorybook as screenerGetStorybook } from 'screener-storybook'; import { getStorybook } from '@storybook/react'; @@ -8,9 +7,15 @@ import { getStorybook } from '@storybook/react'; * Starts or cancels a screener run through the screener proxy. * Runs are cancelled if package does not appear in Lage's affected package graph. */ -export async function screener() { - const screenerConfigPath = path.resolve(process.cwd(), './screener.config.js'); - const screenerConfig: ScreenerRunnerConfig = require(screenerConfigPath); +export async function screener({ version }) { + const getConfig = require('../screener/screener.config'); + const screenerConfig: ScreenerRunnerConfig = getConfig({ + version: version, + screenerApiKey: process.env.SCREENER_API_KEY, + sourceBranchName: process.env.BUILD_SOURCEBRANCHNAME, + deployUrl: process.env.DEPLOYURL, + targetBranch: process.env.SYSYEM_PULLREQUEST_TARGETBRANCH, + }); console.log('screener config for run:'); console.log(JSON.stringify(screenerConfig, null, 2));