chore: Run tests per-package

[ecraig12345]

Add an individual jest configuration for each package instead of one configuration at the root. This is one step towards making the packages' builds more modular, which is a prereq for converging to one repo.

Also add per-package test, test:watch, and clean commands, and make gulp bundle:package:* automatically run against the current directory if in a sub-package.

New workflow

While in the root directory:

• yarn test runs each project's test script (basically lerna run test --stream)
• Same as before, yarn test:watch runs/watches all tests in non-just projects
• (new) yarn clean cleans cache, docs, and each project

While in a package directory:

• yarn test and yarn test:watch runs that project's tests
• yarn clean cleans that project's output
• gulp bundle:package:* (where * is the rest of a task name) runs the specified task against only the current package

Details

Getting the tests working per-project also required adding per-project gulpfile.ts, .gulp.js (formerly .gulp.json), and babel.config.js. For now these mostly just reuse the base configs.

Exception to the above: I removed the build:docs:component-info and build:docs:component-behavior-menu steps from the default test command, and moved them to overrides of the test command in the gulpfiles of the relevant projects (react and accessibility respectively).

I also made assorted typing updates to build files--turned out to not be needed, but I'm checking them in anyway since I already did the work and they help a bit with maintainability/understandability. (Background is I thought they were needed before Ken figured out that I needed to copy the .gulp.js file into each project to make it register babel properly. Without that file, it was trying to use ts-node to interpret TS scripts, and apparently ts-node does type checking based on the project's config, which caused type errors in newer projects with stricter configs.)

Other stuff

• Update bundle:package:types to only cd if it's being run at the root
• Update root jest config to automatically exclude just-based projects
• Add isRoot and package to config.ts for convenient reference in tasks
• Combine clean tasks and use del instead of rimraf so we can easily delete multiple things in one task
• Move jest maxWorkers CI setting from config.yml to build/gulp/tasks/test-unit.ts to avoid issues with the syntax of passing it through on the command line
• Split watch:docs task into separate parts so that the react and accessibility packages can run only the parts they need
• Make perf-test/just.config.ts wait to load anything from @fluentui/digest until it's actually needed. This makes the clean and test scripts work even if digest hasn't been built yet. (issue will go away with project references!)
• Babel config:
  • Switch Node compatibility target in Babel config to 10 (matches CI configs)
  • Add sourcemap options to help facilitate debugging build scripts in an editor...because I needed to do that (these options are only used when process.env.DEBUG is set--could switch to a different detection method if preferred)
• Add moduleNameMapper config using lerna-alias in jest config for just-based projects

If anyone is interested, this is the VS Code launch.json configuration I used for debugging scripts...

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug test",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
      "cwd": "${workspaceFolder}/packages/react",
      "runtimeExecutable": null,
      "runtimeArgs": ["--nolazy", "--debug"],
      "args": ["test"],
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "1"
      },
      "sourceMaps": true,
      "outputCapture": "std",
      "console": "integratedTerminal"
    }
  ]
}

[DustyTheBot]

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🔧	Avatar.Fluent	0.58	0.36	1.61:1	2000	1162
🔧	Button.Fluent	1.21	0.17	7.12:1	1000	1209
🔧	Checkbox.Fluent	1.3	0.28	4.64:1	1000	1297
🔧	Dialog.Fluent	0.32	0.16	2:1	5000	1601
🔧	Dropdown.Fluent	3.17	0.36	8.81:1	1000	3170
🔧	Icon.Fluent	0.24	0.03	8:1	5000	1212
🔧	Image.Fluent	0.11	0.07	1.57:1	5000	527
🔧	Slider.Fluent	1.74	0.28	6.21:1	1000	1736
🦄	Text.Fluent	0.06	0.16	0.38:1	5000	277
🦄	Tooltip.Fluent	0.34	14.08	0.02:1	5000	1712

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

[kenotron]

Thanks so much for this, @ecraig12345 - this is a good step forward

[miroslavstastny]

Since Stardust became a monorepo it was not possible to run UTs direcly in WebStorm.
After this change I can run them again 🎉

[ecraig12345]

Since Stardust became a monorepo it was not possible to run UTs direcly in WebStorm.
After this change I can run them again 🎉

@miroslavstastny Cool! I'm curious which part of the change enabled that?

[miroslavstastny]

Cool! I'm curious which part of the change enabled that?

I think the pure fact that it is now possible to run jest directly from the package directory.

[layershifter]

❤️

[layershifter]

👍

[kenotron]

So much awesome!!!