diff --git a/apps/stress-test/README.md b/apps/stress-test/README.md index 5726399518aa6..9e68586e078a9 100644 --- a/apps/stress-test/README.md +++ b/apps/stress-test/README.md @@ -26,16 +26,16 @@ $ yarn workspace @fluentui/stress-test stress-test build --build-deps $ yarn workspace @fluentui/stress-test stress-test build ``` -> 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. +> NOTE: `build --build-deps` 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` 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 +$ yarn workspace @fluentui/stress-test stress-test run --scenario simple-stress --sample-size 2 --test-cases mount prop-update --browsers firefox --sizes xs s --targets v8/stress-tree?r=button v9/stress-tree?r=button # 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 +$ yarn workspace @fluentui/stress-test stress-test run --scenario simple-stress --test-cases mount prop-update --targets v8/stress-tree?r=button v9/stress-tree?r=button ``` > 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. @@ -65,6 +65,6 @@ The `benchmarks` folder houses Tachometer configurations and test results; and h The `scripts` folder house the Stress Test CLI app that is used to run tests. -### Adding test cases +### Adding test pages -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. +Add tests pages 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. diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index ee464412c3ba4..0036740e1af54 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -15,6 +15,7 @@ "@fluentui/web-components": "^2.5.5", "@microsoft/fast-element": "^1.10.4", "react": "17.0.2", - "react-dom": "17.0.2" + "react-dom": "17.0.2", + "random-seedable": "1.0.8" } } diff --git a/apps/stress-test/scenarios/default.js b/apps/stress-test/scenarios/default.js deleted file mode 100644 index d2ac6503704b3..0000000000000 --- a/apps/stress-test/scenarios/default.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * @typedef {Object} TestOptions - * @property {number} numStartNodes - * @property {number} numAddNodes - * @property {number} numRemoveNodes - */ - -/** - * @typedef {Object.} 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, - }, - }, -}; diff --git a/apps/stress-test/scripts/commands/buildTestConfig.js b/apps/stress-test/scripts/commands/buildTestConfig.js index 351669f273e77..8dc0d5c32f8b4 100644 --- a/apps/stress-test/scripts/commands/buildTestConfig.js +++ b/apps/stress-test/scripts/commands/buildTestConfig.js @@ -2,8 +2,6 @@ const fs = require('fs-extra'); const path = require('path'); const { getConfigDir, getResultsDir, ensureClean } = require('../utils/paths'); const configureYargs = require('../utils/configureYargs'); -const getScenarioConfig = require('../utils/getScenarioConfig'); -const processOptions = require('../utils/processOptions'); const querystring = require('querystring'); /** @@ -15,6 +13,8 @@ const querystring = require('querystring'); * @property {number} sampleSize * @property {string[]} targets * @property {number} port + * @property {TestOptions} testOptions + * @property {string[]} renderers */ /** @@ -35,8 +35,7 @@ const command = 'build-test-config'; * @returns {ConfigResult[]} Paths to generated config files */ const buildTestConfig = options => { - const { scenario, browsers, testCases, sampleSize, targets, sizes, port } = options; - const config = getScenarioConfig(scenario); + const { scenario, browsers, testCases, sampleSize, targets, sizes, port, testOptions, renderers } = options; const configDir = getConfigDir(scenario); ensureClean(configDir); @@ -45,7 +44,17 @@ const buildTestConfig = options => { for (const browser of browsers) { for (const testCase of testCases) { for (const size of sizes) { - const json = makeConfigJson(scenario, browser, testCase, sampleSize, targets, size, config.sizes[size], port); + const json = makeConfigJson( + scenario, + browser, + testCase, + sampleSize, + targets, + size, + testOptions, + port, + renderers, + ); const configName = [browser, testCase, size].join('.') + '.json'; const configPath = path.join(configDir, configName); fs.writeFileSync(configPath, json, { encoding: 'utf8' }); @@ -76,9 +85,10 @@ const buildTestConfig = options => { * @param {string} size * @param {TestOptions} testOptions * @param {number} port + * @param {string} renderer * @returns {string} Stringified JSON */ -const makeConfigJson = (scenario, browser, testCase, sampleSize, targets, size, testOptions, port) => { +const makeConfigJson = (scenario, browser, testCase, sampleSize, targets, size, testOptions, port, renderers) => { const baseUrl = `http://localhost:${port}`; const json = { $schema: 'https://raw.githubusercontent.com/Polymer/tachometer/master/config.schema.json', @@ -96,13 +106,34 @@ const makeConfigJson = (scenario, browser, testCase, sampleSize, targets, size, }, ], - expand: targets.map(target => { - const params = querystring.stringify({ test: testCase, ...testOptions }); + expand: targets.flatMap(target => { + const targetParams = target.includes('?') ? querystring.parse(target.substring(target.indexOf('?') + 1)) : {}; + const params = querystring.stringify({ + ...targetParams, + test: testCase, + fixtureName: `${size}_1`, + ...testOptions, + }); + + const targetWithoutParams = target.substring(0, target.indexOf('?')); return { name: `${target} - ${testCase} - ${size}`, - url: `${baseUrl}/${target}/${scenario}/?${params}`, + url: `${baseUrl}/${targetWithoutParams}/?${params}`, }; + // return renderers.map(renderer => { + // const params = querystring.stringify({ + // test: testCase, + // fixtureName: `${size}_1`, + // rendererName: renderer, + // ...testOptions, + // }); + + // return { + // name: `${renderer}\n${target} - ${testCase} - ${size}`, + // url: `${baseUrl}/${target}/?${params}`, + // }; + // }); }), }, ], @@ -122,9 +153,7 @@ const api = { * @param {CLIBuildTestConfigOptions} argv */ handler: argv => { - const options = processOptions(argv); - // @ts-ignore - buildTestConfig(options); + buildTestConfig(argv); }, }; diff --git a/apps/stress-test/scripts/commands/processResults.js b/apps/stress-test/scripts/commands/processResults.js index d391cddc7a740..938f2314f4616 100644 --- a/apps/stress-test/scripts/commands/processResults.js +++ b/apps/stress-test/scripts/commands/processResults.js @@ -19,7 +19,10 @@ const handler = argv => { const resultsDir = getResultsDir(scenario); const files = readDirJson(resultsDir); - const browserData = {}; + const browserData = { + scenario, + testCases: {}, + }; for (const file of files) { const contents = fs.readFileSync(path.join(resultsDir, file), { encoding: 'utf8', @@ -27,16 +30,23 @@ const handler = argv => { const json = JSON.parse(contents); const benchmark = json.benchmarks[0]; const browser = benchmark.browser.name; - const testCase = benchmark.name.split('-')[1].trim(); - browserData[browser] = browserData[browser] || {}; + const [, testCase, size] = benchmark.name.split(' - '); + + browserData.testCases[testCase] = browserData.testCases[testCase] || { sizes: {} }; + browserData.testCases[testCase].sizes[size] = browserData.testCases[testCase].sizes[size] || { browsers: {} }; + + browserData.testCases[testCase].sizes[size].browsers[browser] = json.benchmarks.map(bm => { + const [bmTarget, bmTestCase, bmSize] = bm.name.split(' - '); - browserData[browser][testCase] = json.benchmarks.map(test => { return { - name: test.name, - mean: test.mean, - differences: test.differences, - samples: test.samples, + name: bm.name, + mean: bm.mean, + differences: bm.differences, + samples: bm.samples, + target: bmTarget, + testCase: bmTestCase, + size: bmSize, }; }); } diff --git a/apps/stress-test/scripts/commands/run.js b/apps/stress-test/scripts/commands/run.js index 42722cea7a474..d0bb4be707a52 100644 --- a/apps/stress-test/scripts/commands/run.js +++ b/apps/stress-test/scripts/commands/run.js @@ -1,4 +1,3 @@ -const processOptions = require('../utils/processOptions'); const configureYargs = require('../utils/configureYargs'); const { startServer, stopServer } = require('../utils/server'); const runTachometer = require('../utils/tachometer'); @@ -35,14 +34,12 @@ const run = async (testConfigs, options) => { * @param {CLIRunOptions} argv */ const handler = argv => { - const options = processOptions(argv); - - const testConfigs = buildTestConfig(options); - run(testConfigs, options).finally(() => { + const testConfigs = buildTestConfig(argv); + run(testConfigs, argv).finally(() => { stopServer(); - if (options.processResults) { - processResults(options); + if (argv.processResults) { + processResults(argv); } }); }; diff --git a/apps/stress-test/scripts/utils/configureYargs.js b/apps/stress-test/scripts/utils/configureYargs.js index 435b92b53f111..817499b12ec0b 100644 --- a/apps/stress-test/scripts/utils/configureYargs.js +++ b/apps/stress-test/scripts/utils/configureYargs.js @@ -25,12 +25,8 @@ const cliOptions = { default: 25, }, targets: { - describe: 'Libraries to target.', - default: ['v8', 'v9', 'wc'], - }, - 'use-config': { - describe: 'Use options from config, overriding any config values with command line arguments.', - default: true, + describe: 'Tests to target', + demand: true, }, 'process-results': { describe: 'Process the test results for display.', @@ -48,6 +44,24 @@ const cliOptions = { describe: 'Optimization mode for Griffel.', default: 'buildtime', }, + renderers: { + describe: 'Renderers to use for testing. This determines what is actually tested.', + }, + 'test-options': { + describe: 'Options to apply to each test. E.g., option1=value1 option2=value2', + coerce: arg => { + return arg.reduce((map, current) => { + const [key, value] = current.split('='); + if (!key || !value) { + throw new Error(`Invalid test option. Got ${current}. Expected the form "key=value".`); + } + + map[key] = value; + return map; + }, {}); + }, + default: [], + }, mode: { describe: 'Build mode.', default: 'production', @@ -78,6 +92,8 @@ const configure = (yargs, options) => { case 'test-cases': case 'browsers': case 'targets': + case 'test-options': + case 'renderers': y = y.array(option); break; @@ -123,8 +139,9 @@ const configureYargs = (command, yargs) => { browsers, 'sample-size': sampleSize, targets, - 'use-config': useConfig, + 'test-options': testOptions, port, + renderers, } = cliOptions; configure(yargs, { scenario, @@ -133,8 +150,9 @@ const configureYargs = (command, yargs) => { browsers, 'sample-size': sampleSize, targets, - 'use-config': useConfig, + 'test-options': testOptions, port, + renderers, }); break; } @@ -147,10 +165,11 @@ const configureYargs = (command, yargs) => { browsers, 'sample-size': sampleSize, targets, - 'use-config': useConfig, + 'test-options': testOptions, 'process-results': processResults, port, root, + renderers, } = cliOptions; configure(yargs, { scenario, @@ -159,10 +178,11 @@ const configureYargs = (command, yargs) => { browsers, 'sample-size': sampleSize, targets, - 'use-config': useConfig, + 'test-options': testOptions, 'process-results': processResults, port, root, + renderers, }); break; } diff --git a/apps/stress-test/scripts/utils/getBrowsers.js b/apps/stress-test/scripts/utils/getBrowsers.js index ef39aab2928ab..222e2635e2814 100644 --- a/apps/stress-test/scripts/utils/getBrowsers.js +++ b/apps/stress-test/scripts/utils/getBrowsers.js @@ -2,10 +2,12 @@ const os = require('os'); module.exports.getBrowsers = () => { // https://github.com/Polymer/tachometer#webdriver-plugins - const browsers = ['chrome', 'firefox' /*'edge'*/]; + const browsers = ['chrome', 'firefox']; if (os.type() === 'Darwin') { browsers.push('safari'); + } else if (os.type() === 'Windows_NT') { + browsers.push('edge'); } return browsers; diff --git a/apps/stress-test/scripts/utils/getScenarioConfig.js b/apps/stress-test/scripts/utils/getScenarioConfig.js deleted file mode 100644 index 2b96f4befee3f..0000000000000 --- a/apps/stress-test/scripts/utils/getScenarioConfig.js +++ /dev/null @@ -1,24 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const { getScenariosDir } = require('./paths'); - -/** - * @function getScenarioConfig - * @param {string} scenarioName - * @returns {Object.} - */ -const getScenarioConfig = scenarioName => { - const scenarioConfig = require('../../scenarios/default.js'); - let returnConfig = { ...scenarioConfig }; - if (fs.existsSync(path.join(getScenariosDir(), `${scenarioName}.js`))) { - const config = require(`../../scenarios/${scenarioName}.js`); - returnConfig = { - ...returnConfig, - ...config, - }; - } - - return returnConfig; -}; - -module.exports = getScenarioConfig; diff --git a/apps/stress-test/scripts/utils/processOptions.js b/apps/stress-test/scripts/utils/processOptions.js deleted file mode 100644 index 4a982ea01ff03..0000000000000 --- a/apps/stress-test/scripts/utils/processOptions.js +++ /dev/null @@ -1,23 +0,0 @@ -const getScenarioConfig = require('./getScenarioConfig'); - -/** - * @param {Object.} parsedOptions - * @returns {Object.} - */ -const processOptions = parsedOptions => { - if (parsedOptions.useConfig) { - const scenarioConfig = getScenarioConfig(parsedOptions.scenario); - - const options = { - ...scenarioConfig, - ...parsedOptions, - sizes: !parsedOptions.sizes && scenarioConfig.sizes ? Object.keys(scenarioConfig.sizes) : parsedOptions.sizes, - }; - - return options; - } - - return parsedOptions; -}; - -module.exports = processOptions; diff --git a/apps/stress-test/src/components/v8/StressApp.tsx b/apps/stress-test/src/components/v8/StressApp.tsx index df6eadaf54f5a..6e3da22b363d7 100644 --- a/apps/stress-test/src/components/v8/StressApp.tsx +++ b/apps/stress-test/src/components/v8/StressApp.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import { getTestParams } from '../../shared/testParams'; -import { performanceMeasure } from '../../shared/performanceMeasure'; +import { getTestOptions } from '../../shared/utils/testOptions'; +import { performanceMeasure } from '../../shared/utils/performanceMeasure'; import { StressContainer } from './StressContainer'; export const StressApp = () => { - const [numChildren, setNumChildren] = React.useState(getTestParams().numStartNodes); + const [numChildren, setNumChildren] = React.useState(Number(getTestOptions().numStartNodes)); React.useEffect(() => { - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestParams(); + const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); if (test === 'add-node') { performanceMeasure('stress', 'start'); - setNumChildren(numStartNodes + numAddNodes); + setNumChildren(Number(numStartNodes) + Number(numAddNodes)); } else if (test === 'removeNode') { performanceMeasure('stress', 'start'); - setNumChildren(numStartNodes - numRemoveNodes); + setNumChildren(Number(numStartNodes) - Number(numRemoveNodes)); } }, []); diff --git a/apps/stress-test/src/components/v8/StressContainer.tsx b/apps/stress-test/src/components/v8/StressContainer.tsx index 26ef7d3ae0c16..03d06fda61889 100644 --- a/apps/stress-test/src/components/v8/StressContainer.tsx +++ b/apps/stress-test/src/components/v8/StressContainer.tsx @@ -1,8 +1,8 @@ import { mergeStyleSets } from '@fluentui/react'; import * as React from 'react'; -import { injectGlobalCss } from '../../shared/injectStyles'; -import { getTestParams } from '../../shared/testParams'; -import { performanceMeasure } from '../../shared/performanceMeasure'; +import { injectGlobalCss } from '../../shared/css/injectStyles'; +import { getTestOptions } from '../../shared/utils/testOptions'; +import { performanceMeasure } from '../../shared/utils/performanceMeasure'; import { StressComponent } from './StressComponent'; const styles = mergeStyleSets({ @@ -21,7 +21,7 @@ export const StressContainer: React.FC = ({ numChildren = const [checked, setChecked] = React.useState(false); React.useEffect(() => { - const { test } = getTestParams(); + const { test } = getTestOptions(); if (test === 'mount') { performanceMeasure('stress', 'start'); } else if (test === 'inject-styles') { diff --git a/apps/stress-test/src/components/v9/StressApp.tsx b/apps/stress-test/src/components/v9/StressApp.tsx index 89116b36a7c47..32e02e406e22f 100644 --- a/apps/stress-test/src/components/v9/StressApp.tsx +++ b/apps/stress-test/src/components/v9/StressApp.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; import { FluentProvider, webLightTheme } from '@fluentui/react-components'; -import { getTestParams } from '../../shared/testParams'; -import { performanceMeasure } from '../../shared/performanceMeasure'; +import { getTestOptions } from '../../shared/utils/testOptions'; +import { performanceMeasure } from '../../shared/utils/performanceMeasure'; import { StressContainer } from './StressContainer'; export const StressApp = () => { - const [numChildren, setNumChildren] = React.useState(getTestParams().numStartNodes); + const [numChildren, setNumChildren] = React.useState(Number(getTestOptions().numStartNodes)); React.useEffect(() => { - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestParams(); + const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); if (test === 'add-node') { performanceMeasure('stress', 'start'); - setNumChildren(numStartNodes + numAddNodes); + setNumChildren(Number(numStartNodes) + Number(numAddNodes)); } else if (test === 'removeNode') { performanceMeasure('stress', 'start'); - setNumChildren(numStartNodes - numRemoveNodes); + setNumChildren(Number(numStartNodes) - Number(numRemoveNodes)); } }, []); diff --git a/apps/stress-test/src/components/v9/StressContainer.tsx b/apps/stress-test/src/components/v9/StressContainer.tsx index 5d5ed9b956fa6..caeb16cd5b744 100644 --- a/apps/stress-test/src/components/v9/StressContainer.tsx +++ b/apps/stress-test/src/components/v9/StressContainer.tsx @@ -1,8 +1,8 @@ import { makeStyles, shorthands } from '@fluentui/react-components'; import * as React from 'react'; -import { injectGlobalCss } from '../../shared/injectStyles'; -import { getTestParams } from '../../shared/testParams'; -import { performanceMeasure } from '../../shared/performanceMeasure'; +import { injectGlobalCss } from '../../shared/css/injectStyles'; +import { getTestOptions } from '../../shared/utils/testOptions'; +import { performanceMeasure } from '../../shared/utils/performanceMeasure'; import { StressComponent } from './StressComponent'; const useStyles = makeStyles({ @@ -21,7 +21,7 @@ export const StressContainer: React.FC = ({ numChildren = const [checked, setChecked] = React.useState(false); React.useEffect(() => { - const { test } = getTestParams(); + const { test } = getTestOptions(); if (test === 'mount') { performanceMeasure('stress', 'start'); } else if (test === 'inject-styles') { diff --git a/apps/stress-test/src/components/wc/stressApp.wc.ts b/apps/stress-test/src/components/wc/stressApp.wc.ts index 30132397f0de0..71723bb19513a 100644 --- a/apps/stress-test/src/components/wc/stressApp.wc.ts +++ b/apps/stress-test/src/components/wc/stressApp.wc.ts @@ -1,6 +1,15 @@ -import { FASTElement, customElement, attr, html, css, repeat, ValueConverter } from '@microsoft/fast-element'; -import { getTestParams } from '../../shared/testParams'; -import { performanceMeasure } from '../../shared/performanceMeasure'; +import { + FASTElement, + customElement, + attr, + html, + css, + repeat, + ValueConverter, + // observable, +} from '@microsoft/fast-element'; +import { getTestOptions } from '../../shared/utils/testOptions'; +import { performanceMeasure } from '../../shared/utils/performanceMeasure'; import { StressComponent } from './stressComponent.wc'; const styles = css` @@ -13,10 +22,11 @@ const styles = css` const template = html` ${repeat( - el => new Array(el.numchildren), + el => new Array(el.numchildren), // TODO: don't recreate the array html` ctx.parent.checked} >`, + // use a property bind 👆 (:checked=${(el, ctx) => ctx.parent.checked}) leave this one probably )} `; @@ -38,28 +48,43 @@ const numberConverter: ValueConverter = { }) export class StressApp extends FASTElement { @attr({ converter: numberConverter }) public numchildren: number = 10; - @attr({ mode: 'boolean' }) public checked: boolean = false; + @attr({ mode: 'boolean' }) public checked: boolean = false; // change to observable property + + // @observable - primary mechanism for state management + // just creates a property + + private _hasMountedOnce: boolean; + constructor() { + super(); + this._hasMountedOnce = false; + } public connectedCallback(): void { super.connectedCallback(); - const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestParams(); + // Don't assume this only runs once + // Consider if you need a disconnect + + if (!this._hasMountedOnce) { + this._hasMountedOnce = true; + const { test, numStartNodes, numAddNodes, numRemoveNodes } = getTestOptions(); - if (test === 'prop-update') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.checked = true; - }, 2000); - } else if (test === 'add-node') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.numchildren = numStartNodes + numAddNodes; - }, 2000); - } else if (test === 'remove-node') { - setTimeout(() => { - performanceMeasure('stress', 'start'); - this.numchildren = numStartNodes - numRemoveNodes; - }, 2000); + if (test === 'prop-update') { + setTimeout(() => { + performanceMeasure('stress', 'start'); + this.checked = true; + }, 2000); + } else if (test === 'add-node') { + setTimeout(() => { + performanceMeasure('stress', 'start'); + this.numchildren = Number(numStartNodes) + Number(numAddNodes); + }, 2000); + } else if (test === 'remove-node') { + setTimeout(() => { + performanceMeasure('stress', 'start'); + this.numchildren = Number(numStartNodes) - Number(numRemoveNodes); + }, 2000); + } } } } diff --git a/apps/stress-test/src/components/wc/stressComponent.wc.ts b/apps/stress-test/src/components/wc/stressComponent.wc.ts index 63a0adb9a4f94..2bd013234c467 100644 --- a/apps/stress-test/src/components/wc/stressComponent.wc.ts +++ b/apps/stress-test/src/components/wc/stressComponent.wc.ts @@ -1,7 +1,23 @@ +import { + fluentButton, + fluentDivider, + fluentCheckbox, + fluentProgressRing, + fluentNumberField, + provideFluentDesignSystem, +} from '@fluentui/web-components'; import { FASTElement, customElement, attr, html, css } from '@microsoft/fast-element'; +provideFluentDesignSystem().register( + fluentButton(), + fluentDivider(), + fluentCheckbox(), + fluentProgressRing(), + fluentNumberField(), +); + const styles = css` - .stress-component { + :host { display: flex; flex-direction: column; row-gap: 10px; @@ -12,17 +28,17 @@ const styles = css` } `; +// classes on the host are a bit of an anti-pattern +// most common use for