chore: Run tests per-package (#2170)

Author: ecraig12345

.circleci/config.yml

@@ -45,7 +45,7 @@ jobs:
           command: yarn prettier
       - run:
           name: Unit Tests
-          command: yarn test --maxWorkers=2
+          command: yarn test
       - run:
           name: Report coverage
           command: bash <(curl -s https://codecov.io/bash)

.github/CONTRIBUTING.md

@@ -3,7 +3,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Getting started](#getting-started)
   - [Useful Commands](#useful-commands)
 - [Workflow](#workflow)
@@ -168,11 +167,11 @@ These changes are required to setup internal tooling and package publishing.
 -    "test": "echo \"Error: run tests from root\" && exit 1"
 -  },
 +  "scripts": {
-+    "build": "gulp bundle:package:no-umd --package react-proptypes"
++    "build": "gulp bundle:package:no-umd"
 +  },
 ```
 
-Don't forget to provide a correct directory name, you can also use `gulp bundle:package` to bundle your package with UMD.
+You can also use `gulp bundle:package` to bundle your package with UMD.
 
 #### Create `tsconfig.json`
 

.gulp.js

@@ -0,0 +1,6 @@
+// https://github.com/gulpjs/gulp-cli#configuration
+module.exports = {
+  flags: {
+    require: '@fluentui/internal-tooling/babel/register',
+  },
+}

.gulp.json

@@ -10,14 +10,17 @@ trigger: [master]
 pool:
   vmImage: 'ubuntu-latest'
 
-steps:
-- task: ComponentGovernanceComponentDetection@0
-  inputs:
-    scanType: 'Register'
-    verbosity: 'Verbose'
-    alertWarningLevel: 'High'
-  displayName: Component governance registration
+variables:
+  # emulate circleci method of detecting whether build is running in CI or local
+  CI: 1
 
+steps:
+  - task: ComponentGovernanceComponentDetection@0
+    inputs:
+      scanType: 'Register'
+      verbosity: 'Verbose'
+      alertWarningLevel: 'High'
+    displayName: Component governance registration
 # Rest of build is not being used for now, but leaving setup for reference
 
 #   - task: NodeTool@0

azure-pipelines.yml

@@ -1,8 +1,7 @@
 import { task, series, parallel, src, dest } from 'gulp'
 import babel from 'gulp-babel'
-import rimraf from 'rimraf'
+import del from 'del'
 import webpack from 'webpack'
-import { argv } from 'yargs'
 
 import config from '../../../config'
 import sh from '../sh'
@@ -12,27 +11,19 @@ const g = require('gulp-load-plugins')()
 const { paths } = config
 const { log, PluginError } = g.util
 
-const packageName = (argv.package as string) || 'react'
+const packageName = config.package
 
 // ----------------------------------------
 // Clean
 // ----------------------------------------
 
-task('bundle:package:clean:es', cb => {
-  rimraf(`${config.paths.packageDist(packageName)}/es/*`, cb)
-})
-
-task('bundle:package:clean:commonjs', cb => {
-  rimraf(`${config.paths.packageDist(packageName)}/commonjs/*`, cb)
-})
-
-task('bundle:package:clean:umd', cb => {
-  rimraf(`${config.paths.packageDist(packageName)}/umd/*`, cb)
-})
-
-task(
-  'bundle:package:clean',
-  parallel('bundle:package:clean:es', 'bundle:package:clean:commonjs', 'bundle:package:clean:umd'),
+task('bundle:package:clean', () =>
+  del([
+    `${paths.packageDist(packageName)}/es/*`,
+    `${paths.packageDist(packageName)}/commonjs/*`,
+    `${paths.packageDist(packageName)}/umd/*`,
+    `${paths.packageDist(packageName)}/dts`,
+  ]),
 )
 
 // ----------------------------------------
@@ -51,11 +42,17 @@ task('bundle:package:commonjs', () =>
 
 task('bundle:package:es', () =>
   src(componentsSrc)
-    .pipe(babel({ caller: { useESModules: true } }))
+    .pipe(babel({ caller: { useESModules: true } } as any))
     .pipe(dest(paths.packageDist(packageName, 'es'))),
 )
 
-task('bundle:package:types:tsc', () => sh(`cd packages/${packageName} && tsc -b`))
+task('bundle:package:types:tsc', () => {
+  let cmd = 'tsc -b'
+  if (process.cwd() === config.path_base) {
+    cmd = `cd packages && cd ${packageName} && ${cmd}`
+  }
+  return sh(cmd)
+})
 task('bundle:package:types:copy', () => {
   return src(paths.packageDist(packageName, 'dts/src/**/*.d.ts')).pipe(
     dest(paths.packageDist(packageName, 'es')),
@@ -104,5 +101,5 @@ task('bundle:package', series('bundle:package:no-umd', 'bundle:package:umd'))
 
 task('bundle:all-packages', async () => {
   await sh('lerna run build')
-  rimraf.sync(`${config.paths.packages()}/*/dist/dts`)
+  return del(`${config.paths.packages()}/*/dist/dts`)
 })

build/gulp/tasks/bundle.ts

@@ -4,7 +4,7 @@ import cache from 'gulp-cache'
 import remember from 'gulp-remember'
 import fs from 'fs'
 import path from 'path'
-import rimraf from 'rimraf'
+import del from 'del'
 import through2 from 'through2'
 import webpack from 'webpack'
 import WebpackDevMiddleware from 'webpack-dev-middleware'
@@ -28,11 +28,11 @@ const g = require('gulp-load-plugins')()
 
 const { log } = g.util
 
-const logWatchAdd = filePath => log('Created', chalk.blue(path.basename(filePath)))
-const logWatchChange = filePath => log('Changed', chalk.magenta(path.basename(filePath)))
-const logWatchUnlink = filePath => log('Deleted', chalk.red(path.basename(filePath)))
+const logWatchAdd = (filePath: string) => log('Created', chalk.blue(path.basename(filePath)))
+const logWatchChange = (filePath: string) => log('Changed', chalk.magenta(path.basename(filePath)))
+const logWatchUnlink = (filePath: string) => log('Deleted', chalk.red(path.basename(filePath)))
 
-const handleWatchUnlink = (group, filePath) => {
+const handleWatchUnlink = (group: any, filePath: string) => {
   logWatchUnlink(filePath)
   remember.forget(group, filePath)
 }
@@ -43,40 +43,15 @@ const handleWatchUnlink = (group, filePath) => {
 
 task('clean:cache', () => cache.clearAll())
 
-task('clean:docs:schema', cb => {
-  rimraf(paths.packages('ability-attributes', 'src/schema.ts'), cb)
-})
-
-task('clean:docs:component-menu', cb => {
-  rimraf(paths.docsSrc('componentMenu.json'), cb)
-})
-
-task('clean:docs:component-menu-behaviors', cb => {
-  rimraf(paths.docsSrc('behaviorMenu.json'), cb)
-})
-
-task('clean:docs:dist', cb => {
-  rimraf(paths.docsDist(), cb)
-})
-
-task('clean:docs:example-menus', cb => {
-  rimraf(paths.docsSrc('exampleMenus'), cb)
-})
-
-task('clean:docs:example-sources', cb => {
-  rimraf(paths.docsSrc('exampleSources'), cb)
-})
-
-task(
-  'clean:docs',
-  parallel(
-    'clean:docs:component-menu',
-    'clean:docs:component-menu-behaviors',
-    'clean:docs:dist',
-    'clean:docs:schema',
-    'clean:docs:example-menus',
-    'clean:docs:example-sources',
-  ),
+task('clean:docs', () =>
+  del([
+    paths.packages('ability-attributes/src/schema.ts'),
+    paths.docsSrc('componentMenu.json'),
+    paths.docsSrc('behaviorMenu.json'),
+    paths.docsDist(),
+    paths.docsSrc('exampleMenus'),
+    paths.docsSrc('exampleSources'),
+  ]),
 )
 
 // ----------------------------------------
@@ -220,7 +195,7 @@ task('serve:docs:hot', async () => {
           noInfo: true, // must be quite for hot middleware to show overlay
           lazy: false,
           stats: config.compiler_stats,
-        }),
+        } as WebpackDevMiddleware.Options),
       )
       .use(WebpackHotMiddleware(compiler)),
   )
@@ -232,13 +207,26 @@ task('serve:docs:stop', () => forceClose(server))
 // Watch
 // ----------------------------------------
 
-task('watch:docs', cb => {
+task('watch:docs:component-info', cb => {
   // rebuild component info
   watch(componentsSrc, series('build:docs:component-info'))
     .on('add', logWatchAdd)
     .on('change', logWatchChange)
     .on('unlink', logWatchUnlink)
 
+  cb()
+})
+
+task('watch:docs:component-menu-behaviors', cb => {
+  watch(behaviorSrc, series('build:docs:component-menu-behaviors'))
+    .on('add', logWatchAdd)
+    .on('change', logWatchChange)
+    .on('unlink', filePath => handleWatchUnlink('component-menu-behaviors', filePath))
+
+  cb()
+})
+
+task('watch:docs:other', cb => {
   watch(schemaSrc, series('build:docs:schema')).on('change', logWatchChange)
 
   // rebuild example menus
@@ -261,11 +249,6 @@ task('watch:docs', cb => {
       } catch (e) {}
     })
 
-  watch(behaviorSrc, series('build:docs:component-menu-behaviors'))
-    .on('add', logWatchAdd)
-    .on('change', logWatchChange)
-    .on('unlink', filePath => handleWatchUnlink('component-menu-behaviors', filePath))
-
   // rebuild images
   watch(`${config.paths.docsSrc()}/**/*.{png,jpg,gif}`, series('build:docs:images'))
     .on('add', logWatchAdd)
@@ -275,6 +258,11 @@ task('watch:docs', cb => {
   cb()
 })
 
+task(
+  'watch:docs',
+  series('watch:docs:component-info', 'watch:docs:component-menu-behaviors', 'watch:docs:other'),
+)
+
 // ----------------------------------------
 // Default
 // ----------------------------------------

build/gulp/tasks/docs.ts

@@ -4,7 +4,7 @@ import { series, task } from 'gulp'
 import _ from 'lodash'
 import ProgressBar from 'progress'
 import puppeteer from 'puppeteer'
-import rimraf from 'rimraf'
+import del from 'del'
 import { argv } from 'yargs'
 import markdownTable from 'markdown-table'
 
@@ -109,9 +109,7 @@ const createMarkdownTable = (
   ])
 }
 
-task('perf:clean', cb => {
-  rimraf(paths.perfDist(), cb)
-})
+task('perf:clean', () => del(paths.perfDist()))
 
 task('perf:build', cb => {
   webpackPlugin(require('../../../build/webpack.config.perf').default, cb)

build/gulp/tasks/perf.ts

@@ -9,7 +9,7 @@ import config from '../../../../config'
 const { paths } = config
 
 const prefix = (argv.prefix as string) || ''
-const packageName = (argv.package as string) || 'react'
+const packageName = config.package
 
 /**
  * Lists runtime dependencies (by crawling the actual code) of the requested Fluent UI package.

build/gulp/tasks/test-dependencies/index.ts

@@ -1,6 +1,6 @@
 import { task, series } from 'gulp'
 import * as yargs from 'yargs'
-import rimraf from 'rimraf'
+import del from 'del'
 import config from '../../../config'
 import webpackPlugin from '../plugins/gulp-webpack'
 
@@ -15,9 +15,7 @@ const argv = yargs
   .option('testNamePattern', { alias: 't' })
   .option('testFilePattern', { alias: 'F' }).argv
 
-task('test:e2e:clean', cb => {
-  rimraf(paths.e2eDist(), cb)
-})
+task('test:e2e:clean', () => del(paths.e2eDist()))
 
 task('test:e2e:build', cb => {
   webpackPlugin(require('../../../build/webpack.config.e2e').default, cb)

build/gulp/tasks/test-e2e.ts

@@ -6,7 +6,7 @@ import path from 'path'
 import portfinder from 'portfinder'
 import puppeteer from 'puppeteer'
 import sh from '../sh'
-import rimraf from 'rimraf'
+import del from 'del'
 
 import config from '../../../config'
 import tmp from 'tmp'
@@ -87,7 +87,7 @@ const createReactApp = async (atTempDirectory: string, appName: string): Promise
     await runIn(tempUtilProjectPath)(`yarn create-react-app ${appProjectPath} --typescript`)
   } finally {
     // remove temp util directory
-    rimraf.sync(tempUtilProjectPath)
+    del.sync(tempUtilProjectPath, { force: true })
   }
 
   return appProjectPath

build/gulp/tasks/test-projects.ts

@@ -1,9 +1,10 @@
 import { parallel, series, task } from 'gulp'
 import yargs from 'yargs'
 
-import sh from '../sh'
 import jest, { JestPluginConfig } from '../plugins/gulp-jest'
 
+import config from '../../../config'
+
 const argv = yargs
   .option('runInBand', {})
   .option('maxWorkers', {})
@@ -19,15 +20,9 @@ const jestConfigFromArgv: Partial<JestPluginConfig> = {
   testFilePattern: argv.testFilePattern as string,
 }
 
-task('test:jest:pre', () => sh('yarn satisfied'))
-
-task(
-  'test:jest:setup',
-  series(
-    'test:jest:pre',
-    parallel('build:docs:component-info', 'build:docs:component-menu-behaviors'),
-  ),
-)
+if (process.env.CI) {
+  jestConfigFromArgv.maxWorkers = 2
+}
 
 task(
   'test:jest',
@@ -51,5 +46,18 @@ task(
 // Tests
 // ----------------------------------------
 
-task('test', series('test:jest:setup', 'test:jest'))
-task('test:watch', series('test:jest:setup', parallel('test:jest:watch', 'watch:docs')))
+if (config.isRoot) {
+  // If running at root, define test and test:watch to build doc-related pre-reqs
+  task(
+    'test:jest:setup',
+    parallel('build:docs:component-info', 'build:docs:component-menu-behaviors'),
+  )
+  task('test', series('test:jest:setup', 'test:jest'))
+  task(
+    'test:watch',
+    series('test:jest:setup', parallel('test:jest:watch', 'watch:docs:component-info')),
+  )
+} else {
+  task('test', series('test:jest'))
+  task('test:watch', series('test:jest', 'test:jest:watch'))
+}