Revert "chore: Northstar screener should read from screenerStates.json"

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`,
   };

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;

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');

scripts/gulp/tasks/vr-test.ts → 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'));

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,

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<typeof getStateForPath>[]);
+const screenerStates = filteredPaths.reduce((states, examplePath) => {
+  states.push(getStateForPath(examplePath));
+  return states;
+}, [] as ReturnType<typeof getStateForPath>[]);
 
-  return screenerStates;
-}
+export default screenerStates;

scripts/screener/screener.types.ts

@@ -2,22 +2,22 @@ export type ScreenerRunnerConfig = {
   apiKey: string;
   projectRepo: string;
 
-  diffOptions?: {
+  diffOptions: {
     structure: boolean;
     layout: boolean;
     style: boolean;
     content: boolean;
     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 */