stress-test: add cli application

apps/stress-test/.gitignore

@@ -2,6 +2,6 @@ node_modules/
 dist/
 
 benchmarks/**/*.json
-benchmarks/**/results.js
+benchmarks/**/*.js
 
-yarn-error.log
+yarn-error.log

apps/stress-test/README.md

@@ -4,7 +4,47 @@ Stress Test is an application for testing Fluent UI components in "stressful" sc
 
 This application is configured to support Fluent UI v8, v9 and Web Components.
 
-Stress Test is a simple Webpack application as Webpack allows us to support Fluent v8, v9 and Web Components in a single app while using each version of Fluent natively (that is, the React versions of Fluent are typical React apps, the Web Component version is a typical web component app). Additionally, Griffel, a dependency of Fluent v9 provides some Webpack loaders so Stress Test needs to be able to use those.
+## Usage
+
+Run tests by invoking the CLI:
+
+```shell
+$ yarn workspace @fluentui/stress-test stress-test
+```
+
+This will show the help documentation that provides details for each command.
+
+### Building
+
+Building produces a static application that can be served with a simple HTTP server.
+
+```shell
+# Build all the dependencies for this application (e.g., `@fluentui/react`, `@fluentui/web-components`) along with the application.
+$ yarn workspace @fluentui/stress-test build:local
+
+# Build only this application.
+$ yarn workspace @fluentui/stress-test build:app
+```
+
+> NOTE: `build:local` is much slower, but is required the first time you're building the application or if you've pulled in lots of changes. Use `build:app` if you don't need to build dependencies like `@fluentui/react` as it's much faster.
+
+### Examples
+
+```shell
+# Run the "simple-stress" scenario with the "mount" and "prop-update" test cases against Firefox with small sizes and low sample size
+$ yarn workspace @fluentui/stress-test stress-test run --scenario simple-stress --sample-size 2 --test-cases mount prop-update --browsers firefox --sizes xs s
+
+# Run the "simple-stress" scenario with the "mount" and "prop-update" test cases against the default browsers at the default sizes and sample size
+$ yarn workspace @fluentui/stress-test stress-test run --scenario simple-stress --test-cases mount prop-update
+```
+
+> NOTE: Tests should be run against production builds. While tests can be run against development builds, and this is useful for gathering quick results and debugging, the performance characteristics of development and production builds can differ quite a bit.
+
+## Glossary
+
+- **scenario**: A testing scenario for a specific line of investigation. For example, if you wanted to compare the performance of different `Button` implementations you might create a "button-test" scenario for various targets.
+- **targets**: Different implementation targets. For example: "v8" for Fluent UI v8, "v9" for Fluent UI v9, "wc" for Fluent UI Web Components.
+- **test cases**: Different test cases to run against a given scenario. For example, you might want to test mounting performance for a scenario.
 
 ## Development
 
@@ -16,22 +56,12 @@ The project is laid out with folders for each supported version of Fluent (`v8`,
 
 The `shared` folder is for utilities that are shared across Fluent versions.
 
-The `components` folder is also split by supported Fluent versions and is where compoenents that can be shared across test cases live.
+The `components` folder is also split by supported Fluent versions and is where components that can be shared across test cases live.
 
 The `benchmarks` folder houses Tachometer configurations and test results; and helper scripts for generating configurations and processing results.
 
-### Adding test cases
-
-Currently, new test cases must be manually added. Add tests cases to the `pages` array in `webpack.config.js` and they will be generated by Webpack. This configuration keeps the different Fluent versions in separate Webpack chunks. The dev server needs to be restarted after changes to the config file.
+The `scripts` folder house the Stress Test CLI app that is used to run tests.
 
-## Production
-
-Run `yarn workspace @fluentui/stress-test build` from the repo root to build a static production bundle of the application.
-
-Run `yarn workspace @fluentui/stress-test serve` to serve the static production bundle.
-
-## Running test cases
-
-Run `yarn workspace @fluentui/stress-test bench:*` where "\*" is one of the test cases in `package.json`.
+### Adding test cases
 
-NOTE: Stress Test must be running, preferrably as a production build.
+Add tests cases to the appropriate `src/pages` sub-folder. For example to create a new test, "my test" for Fluent v9 add it to `src/pages/v9/my-test`. Use an existing page as a guide for the files you need to add. Pages are automatically picked up by Webpack when the dev server is started.

apps/stress-test/package.json

@@ -5,28 +5,11 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
+    "stress-test": "node ./scripts/stressTest.js",
     "start": "webpack-dev-server --mode=development",
     "build:local": "lage build --to @fluentui/react @fluentui/web-components --verbose && yarn build:app",
     "build:app": "webpack --mode=production",
-    "serve": "http-server ./dist",
-    "bench:simple-stress:build": "node ./benchmarks/simple-stress/buildConfig.js",
-    "bench:simple-stress": "yarn bench:simple-stress:mount && yarn bench:simple-stress:inject-styles && yarn bench:simple-stress:prop-update && yarn bench:simple-stress:add-node && yarn bench:simple-stress:remove-node",
-    "bench:simple-stress:process": "node ./benchmarks/simple-stress/processResults.js",
-    "bench:simple-stress:mount": "yarn bench:simple-stress:mount:chrome && yarn bench:simple-stress:mount:firefox",
-    "bench:simple-stress:inject-styles": "yarn bench:simple-stress:inject-styles:chrome && yarn bench:simple-stress:inject-styles:firefox",
-    "bench:simple-stress:prop-update": "yarn bench:simple-stress:prop-update:chrome && yarn bench:simple-stress:prop-update:firefox",
-    "bench:simple-stress:add-node": "yarn bench:simple-stress:add-node:chrome && yarn bench:simple-stress:add-node:firefox",
-    "bench:simple-stress:remove-node": "yarn bench:simple-stress:remove-node:chrome && yarn bench:simple-stress:remove-node:firefox",
-    "bench:simple-stress:mount:chrome": "tach --config ./benchmarks/simple-stress/config/chrome.mount.json --json-file ./benchmarks/simple-stress/results/chrome.mount.results.json",
-    "bench:simple-stress:mount:firefox": "tach --config ./benchmarks/simple-stress/config/firefox.mount.json --json-file ./benchmarks/simple-stress/results/firefox.mount.results.json",
-    "bench:simple-stress:inject-styles:chrome": "tach --config ./benchmarks/simple-stress/config/chrome.inject-styles.json --json-file ./benchmarks/simple-stress/results/chrome.inject-styles.results.json",
-    "bench:simple-stress:inject-styles:firefox": "tach --config ./benchmarks/simple-stress/config/firefox.inject-styles.json --json-file ./benchmarks/simple-stress/results/firefox.inject-styles.results.json",
-    "bench:simple-stress:prop-update:chrome": "tach --config ./benchmarks/simple-stress/config/chrome.prop-update.json --json-file ./benchmarks/simple-stress/results/chrome.prop-update.results.json",
-    "bench:simple-stress:prop-update:firefox": "tach --config ./benchmarks/simple-stress/config/firefox.prop-update.json --json-file ./benchmarks/simple-stress/results/firefox.prop-update.results.json",
-    "bench:simple-stress:add-node:chrome": "tach --config ./benchmarks/simple-stress/config/chrome.add-node.json --json-file ./benchmarks/simple-stress/results/chrome.add-node.results.json",
-    "bench:simple-stress:add-node:firefox": "tach --config ./benchmarks/simple-stress/config/firefox.add-node.json --json-file ./benchmarks/simple-stress/results/firefox.add-node.results.json",
-    "bench:simple-stress:remove-node:chrome": "tach --config ./benchmarks/simple-stress/config/chrome.remove-node.json --json-file ./benchmarks/simple-stress/results/chrome.remove-node.results.json",
-    "bench:simple-stress:remove-node:firefox": "tach --config ./benchmarks/simple-stress/config/firefox.remove-node.json --json-file ./benchmarks/simple-stress/results/firefox.remove-node.results.json"
+    "type-check": "tsc -b tsconfig.type.json"
   },
   "dependencies": {
     "@fluentui/react": "^8.91.1",

apps/stress-test/scenarios/default.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {Object} TestOptions
+ * @property {number} numStartNodes
+ * @property {number} numAddNodes
+ * @property {number} numRemoveNodes
+ */
+
+/**
+ * @typedef {Object.<string, TestOptions>} SizeMap
+ */
+
+/**
+ * @typedef {Object} ScenarioConfig
+ * @property {string[]} [testCases]
+ * @property {SizeMap} [sizes]
+ * @property {string[]} [browsers]
+ * @property {number} [sampleSize]
+ * @property {string[]} [targets]
+ */
+
+module.exports = {
+  testCases: ['mount', 'inject-styles', 'prop-update', 'remove-node', 'add-node'],
+
+  sizes: {
+    xs: {
+      numStartNodes: 100,
+      numAddNodes: 100,
+      numRemoveNodes: 99,
+    },
+
+    s: {
+      numStartNodes: 250,
+      numAddNodes: 250,
+      numRemoveNodes: 249,
+    },
+
+    m: {
+      numStartNodes: 500,
+      numAddNodes: 500,
+      numRemoveNodes: 499,
+    },
+
+    l: {
+      numStartNodes: 750,
+      numAddNodes: 750,
+      numRemoveNodes: 749,
+    },
+
+    xl: {
+      numStartNodes: 1000,
+      numAddNodes: 1000,
+      numRemoveNodes: 999,
+    },
+  },
+};