From 975ab600528e3153b2085be07962ad7c86d31e2c Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 20 Sep 2022 17:38:27 +0200 Subject: [PATCH] Revert "chore: Northstar screener should read from screenerStates.json (#24848)" This reverts commit d83195cc36e432b094af3dd79eb1792564972ae9. --- .../screener.config.js | 3 +- apps/vr-tests/screener.config.js | 3 +- gulpfile.ts | 3 +- .../gulp/tasks/{vr-test.ts => screener.ts} | 19 +++-- scripts/gulp/tasks/vr-build.ts | 21 ------ scripts/screener/screener.config.js | 10 +-- scripts/screener/screener.states.ts | 74 +++++++++---------- scripts/screener/screener.types.ts | 6 +- 8 files changed, 59 insertions(+), 80 deletions(-) rename scripts/gulp/tasks/{vr-test.ts => screener.ts} (76%) delete mode 100644 scripts/gulp/tasks/vr-build.ts diff --git a/apps/vr-tests-react-components/screener.config.js b/apps/vr-tests-react-components/screener.config.js index 0e229136d99d10..56a9934f99dc1c 100644 --- a/apps/vr-tests-react-components/screener.config.js +++ b/apps/vr-tests-react-components/screener.config.js @@ -24,7 +24,7 @@ function getCurrentHash() { * @param {string} options.sourceBranchName * @param {string} options.deployUrl * @param {string} options.targetBranch - * @returns {import('@fluentui/scripts/screener/screener.types').ScreenerRunnerConfig} + * @returns */ function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch }) { const baseBranch = targetBranch ? targetBranch.replace(/^refs\/heads\//, '') : 'master'; @@ -38,7 +38,6 @@ function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch } baseBranch, failureExitCode: 0, alwaysAcceptBaseBranch: true, - states: [], ...(sourceBranchName !== 'master' ? { commit: getCurrentHash() } : null), baseUrl: `${deployUrl}/react-components-screener/iframe.html`, }; diff --git a/apps/vr-tests/screener.config.js b/apps/vr-tests/screener.config.js index 13f073e99c97d0..b928986b51524a 100644 --- a/apps/vr-tests/screener.config.js +++ b/apps/vr-tests/screener.config.js @@ -27,7 +27,7 @@ function getCurrentHash() { * @param {string} options.sourceBranchName * @param {string} options.deployUrl * @param {string} options.targetBranch - * @returns {import('@fluentui/scripts/screener/screener.types').ScreenerRunnerConfig} + * @returns */ function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch }) { const baseBranch = targetBranch ? targetBranch.replace(/^refs\/heads\//, '') : 'master'; @@ -44,7 +44,6 @@ function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch } alwaysAcceptBaseBranch: true, ...(sourceBranchName !== 'master' ? { commit: getCurrentHash() } : null), baseUrl: `${deployUrl}/react-screener/iframe.html`, - states: [], }; console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2)); return config; diff --git a/gulpfile.ts b/gulpfile.ts index dd562b2ee3f980..e7f72e8db3565c 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -22,8 +22,7 @@ tsPaths.register({ require('./scripts/gulp/tasks/bundle'); require('./scripts/gulp/tasks/component-info'); require('./scripts/gulp/tasks/docs'); -require('./scripts/gulp/tasks/vr-build'); -require('./scripts/gulp/tasks/vr-test'); +require('./scripts/gulp/tasks/screener'); require('./scripts/gulp/tasks/stats'); require('./scripts/gulp/tasks/test-unit'); require('./scripts/gulp/tasks/perf'); diff --git a/scripts/gulp/tasks/vr-test.ts b/scripts/gulp/tasks/screener.ts similarity index 76% rename from scripts/gulp/tasks/vr-test.ts rename to scripts/gulp/tasks/screener.ts index 9e99e85fda6182..329bf716c30e82 100644 --- a/scripts/gulp/tasks/vr-test.ts +++ b/scripts/gulp/tasks/screener.ts @@ -1,13 +1,11 @@ -import { task } from 'gulp'; +import { task, series } from 'gulp'; import { argv } from 'yargs'; import config from '../../config'; import { getAllPackageInfo } from '../../monorepo'; import { screenerRunner } from '../../screener/screener.runner'; -import getConfig from '../../screener/screener.config'; const { paths } = config; -const docsPackageName = '@fluentui/docs'; // ---------------------------------------- // Visual @@ -17,11 +15,15 @@ task('screener:runner', cb => { // screener-runner doesn't allow to pass custom options if (argv.filter) process.env.SCREENER_FILTER = argv.filter as string; + const docsPackageName = '@fluentui/docs'; + const packageInfos = getAllPackageInfo(); if (Object.values(packageInfos).every(packageInfo => packageInfo.packageJson.name !== docsPackageName)) { throw new Error(`package ${docsPackageName} does not exist in the repo`); } + const screenerConfigPath = paths.base('scripts/screener/screener.config.js'); + // kill the server when done const handlePromiseExit = promise => promise @@ -34,14 +36,17 @@ task('screener:runner', cb => { process.exit(1); }); + const getConfig = require(screenerConfigPath); const screenerConfig = getConfig({ screenerApiKey: process.env.SCREENER_API_KEY, sourceBranchName: process.env.BUILD_SOURCEBRANCHNAME, - deployUrl: process.env.DEPLOYURL, }); - const screenerStates = require(paths.docsDist('screenerStates.json')); - screenerConfig.states = screenerStates; - handlePromiseExit(screenerRunner(screenerConfig)); }); + +// ---------------------------------------- +// Default +// ---------------------------------------- + +task('screener:build', series('build:docs')); diff --git a/scripts/gulp/tasks/vr-build.ts b/scripts/gulp/tasks/vr-build.ts deleted file mode 100644 index 6fe6cb4460b0ff..00000000000000 --- a/scripts/gulp/tasks/vr-build.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { task, series } from 'gulp'; -import fs from 'fs'; - -import config from '../../config'; -import getScreenerStates from '../../screener/screener.states'; - -const { paths } = config; - -task('screener:states', cb => { - const states = getScreenerStates(); - const statesJson = JSON.stringify(states, null, 2); - fs.writeFile(paths.docsDist('screenerStates.json'), statesJson, { encoding: 'utf8' }, err => { - if (err) { - cb(err); - } - - cb(); - }); -}); - -task('screener:build', series('build:docs', 'screener:states')); diff --git a/scripts/screener/screener.config.js b/scripts/screener/screener.config.js index ee63d4dea9ec77..64384043d2cab5 100644 --- a/scripts/screener/screener.config.js +++ b/scripts/screener/screener.config.js @@ -36,13 +36,11 @@ const baseBranch = 'master'; * @param {Object} options * @param {string} options.screenerApiKey * @param {string} options.sourceBranchName - * @param {string} options.deployUrl - * @returns {import('./screener.types').ScreenerRunnerConfig} + * @returns */ -function getConfig({ screenerApiKey, sourceBranchName, deployUrl }) { +function getConfig({ screenerApiKey, sourceBranchName }) { // https://github.com/screener-io/screener-runner return { - baseUrl: `${deployUrl}/react-northstar-screener`, apiKey: screenerApiKey, projectRepo: 'microsoft/fluentui/fluentui', @@ -56,7 +54,9 @@ function getConfig({ screenerApiKey, sourceBranchName, deployUrl }) { minShiftGraphic: 1, // Optional threshold for pixel shifts in graphics. compareSVGDOM: false, // Pass if SVG DOM is the same. Defaults to false. }, - states: [], + + // screenshot every example in maximized mode + states: require('./screener.states').default, alwaysAcceptBaseBranch: true, baseBranch, diff --git a/scripts/screener/screener.states.ts b/scripts/screener/screener.states.ts index 5876517c02c5df..20ad7881f1b9fc 100644 --- a/scripts/screener/screener.states.ts +++ b/scripts/screener/screener.states.ts @@ -7,44 +7,42 @@ import path from 'path'; import getScreenerSteps from './screener.steps'; import { ScreenerState } from './screener.types'; -export default function getScreenerStates() { - const baseUrl = `${process.env.DEPLOYURL}/react-northstar-screener`; - const examplePaths = glob.sync('packages/fluentui/docs/src/examples/**/*.tsx', { - ignore: ['**/index.tsx', '**/*.knobs.tsx', '**/BestPractices/*.tsx', '**/Playground.tsx'], - }); - - const pathFilter = process.env.SCREENER_FILTER; - const filteredPaths: string[] = minimatch.match(examplePaths, pathFilter || '*', { - matchBase: true, - }); - - if (pathFilter) { - console.log(chalk.bgGreen.black(' --filter '), pathFilter); - filteredPaths.forEach(filteredPath => console.log(`${_.repeat(' ', 10)} ${filteredPath}`)); - } - - const getStateForPath = (examplePath: string): ScreenerState => { - const { name: exampleNameWithoutExtension, base: exampleNameWithExtension, dir: exampleDir } = path.parse( - examplePath, - ); - - const rtl = exampleNameWithExtension.endsWith('.rtl.tsx'); - const exampleUrl = _.kebabCase(exampleNameWithoutExtension); - const pageUrl = `${baseUrl}/maximize/${exampleUrl}/${rtl}`; - - return { - url: pageUrl, - name: exampleNameWithExtension, - - // https://www.npmjs.com/package/screener-runner#testing-interactions - steps: getScreenerSteps(pageUrl, `${exampleDir}/${exampleNameWithoutExtension}.steps`), - }; +const baseUrl = `${process.env.DEPLOYURL}/react-northstar-screener`; +const examplePaths = glob.sync('packages/fluentui/docs/src/examples/**/*.tsx', { + ignore: ['**/index.tsx', '**/*.knobs.tsx', '**/BestPractices/*.tsx', '**/Playground.tsx'], +}); + +const pathFilter = process.env.SCREENER_FILTER; +const filteredPaths: string[] = minimatch.match(examplePaths, pathFilter || '*', { + matchBase: true, +}); + +if (pathFilter) { + console.log(chalk.bgGreen.black(' --filter '), pathFilter); + filteredPaths.forEach(filteredPath => console.log(`${_.repeat(' ', 10)} ${filteredPath}`)); +} + +const getStateForPath = (examplePath: string): ScreenerState => { + const { name: exampleNameWithoutExtension, base: exampleNameWithExtension, dir: exampleDir } = path.parse( + examplePath, + ); + + const rtl = exampleNameWithExtension.endsWith('.rtl.tsx'); + const exampleUrl = _.kebabCase(exampleNameWithoutExtension); + const pageUrl = `${baseUrl}/maximize/${exampleUrl}/${rtl}`; + + return { + url: pageUrl, + name: exampleNameWithExtension, + + // https://www.npmjs.com/package/screener-runner#testing-interactions + steps: getScreenerSteps(pageUrl, `${exampleDir}/${exampleNameWithoutExtension}.steps`), }; +}; - const screenerStates = filteredPaths.reduce((states, examplePath) => { - states.push(getStateForPath(examplePath)); - return states; - }, [] as ReturnType[]); +const screenerStates = filteredPaths.reduce((states, examplePath) => { + states.push(getStateForPath(examplePath)); + return states; +}, [] as ReturnType[]); - return screenerStates; -} +export default screenerStates; diff --git a/scripts/screener/screener.types.ts b/scripts/screener/screener.types.ts index d7f38c24ec7f43..087f92d7ef536d 100644 --- a/scripts/screener/screener.types.ts +++ b/scripts/screener/screener.types.ts @@ -2,7 +2,7 @@ export type ScreenerRunnerConfig = { apiKey: string; projectRepo: string; - diffOptions?: { + diffOptions: { structure: boolean; layout: boolean; style: boolean; @@ -10,14 +10,14 @@ export type ScreenerRunnerConfig = { minLayoutPosition: number; // Optional threshold for Layout changes. Defaults to 4 pixels. minLayoutDimension: number; // Optional threshold for Layout changes. Defaults to 10 pixels. minShiftGraphic: number; // Optional threshold for pixel shifts in graphics. - compareSVGDOM: boolean; // Pass if SVG DOM is the same. Defaults to false. + compareSVGDOM: number; // Pass if SVG DOM is the same. Defaults to false. }; states: ScreenerState[]; alwaysAcceptBaseBranch: boolean; baseBranch: string; - commit?: string; + commit: string; failureExitCode: number; /** Base url of deployed storybook screener should test */