Improve screener configs

.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}}

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 =>

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;

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),
+};

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;

scripts/tasks/screener.ts

@@ -1,16 +1,21 @@
 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';
 /**
  * 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));