feat: officially expose testing helpers (#5958)

* feat: officially expose testing helpers * Change files * docs: improve testing helper code docs * test: trying to fix react wrapper tests * Change files * update typescript to 4.7.0-beta * fix type error in router configuration * fixing foundation compile error * all packages passing build * add export paths to fast-element * fixing reat-wrapper testing infrastructure * fixing test in fast-website * fixing color-explorer test * fixing figma-plugin tests * fixing dev server * fixing fast-website dev * fixing error generating docs * add description for utility * Change files Co-authored-by: Rob Eisenberg <[email protected]> Co-authored-by: EisenbergEffect <[email protected]> Co-authored-by: nicholasrice <[email protected]>
microsoft · May 10, 2022 · e8ebe88 · e8ebe88
1 parent caaa685
commit e8ebe88
Show file tree

Hide file tree

Showing 94 changed files with 698 additions and 1,278 deletions.
diff --git a/build/get-package-json.js b/build/get-package-json.js
@@ -0,0 +1,25 @@
+const path = require("path");
+const fs = require("fs");
+
+/**
+ * Resolves the directory of the package.json for a given dependency.
+ * @param {string} name - the package name
+ * @returns
+ *
+ * @description
+ * NodeJS exports fields prevent arbitrarily resolving files in a package
+ * that are not explicitly enumerated in the exports field of the package.
+ * This function provides a mechanism to resolve the package 'root' by package name,
+ * allowing file-system retrieval by relative path for arbitrary files outside of
+ * Node's module system.
+ */
+exports.getPackageJsonDir = name => {
+    const entry = require.resolve(name).toString();
+    let dir = path.parse(entry).dir;
+
+    while (!fs.existsSync(path.resolve(dir, "package.json"))) {
+        dir = path.parse(dir).dir;
+    }
+
+    return dir;
+};
diff --git a/change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json b/change/@microsoft-fast-animation-efc14f99-1d56-4d8c-b2e6-043b5956c2cd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-animation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json b/change/@microsoft-fast-colors-f2f14417-861b-44a9-82a9-e7de4bbd6f8d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-colors",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json b/change/@microsoft-fast-element-aa287070-7fbe-4d0f-ae38-a5896cc6647f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json b/change/@microsoft-fast-foundation-55555b76-e6a2-4b30-8b77-7f61b3bcdd36.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "feat: officially expose testing helpers",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json b/change/@microsoft-fast-react-wrapper-37b603eb-bb2c-48ee-9ed4-d9ee5f901f0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "test: updating to latest foundation helpers",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json b/change/@microsoft-fast-router-2ba6bca0-ca84-447c-9115-82409fad661f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-router",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json b/change/@microsoft-fast-web-utilities-61d860c2-ecab-49a6-9474-10d04397cd24.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Upgrade TypeScript",
+  "packageName": "@microsoft/fast-web-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"

diff --git a/examples/todo-app-tutorial/package.json b/examples/todo-app-tutorial/package.json
@@ -21,7 +21,7 @@
     "http-server": "^14.1.0",
     "rimraf": "^3.0.2",
     "ts-loader": "^7.0.1",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"

diff --git a/package.json b/package.json
@@ -135,7 +135,7 @@
     "node-gyp": "^9.0.0",
     "trim-newlines": "^4.0.2",
     "trim": "^0.0.3",
-    "typescript": "^4.6.2",
+    "typescript": "^4.7.0-beta",
     "ua-parser-js": "^0.7.28",
     "ws": "^7.4.6",
     "xmlhttprequest-ssl": "^1.6.2"
@@ -163,7 +163,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
     "ts-node": "^8.8.2",
-    "typescript": "^4.6.2",
+    "typescript": "^4.7.0-beta",
     "yargs": "^16.2.0"
   },
   "dependencies": {

diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json
@@ -32,22 +32,22 @@
     "@types/node": "^15.0.1",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.1",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
     "eslint-config-prettier": "^6.10.1",
-    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
     "prettier": "2.0.2",
     "raw-loader": "^4.0.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "style-loader": "^1.1.2",
-    "ts-loader": "^6.2.1",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.0",
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@fluentui/web-components": "^2.2.1",

diff --git a/packages/tooling/fast-figma-plugin-msft/webpack.config.js b/packages/tooling/fast-figma-plugin-msft/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = (env, args) => {
     const isProduction = args.mode === "production";
 
     return {
-        devtool: isProduction ? "none" : "inline-source-map",
+        devtool: isProduction ? undefined : "inline-source-map",
         entry: {
             main: path.resolve(appDir, "main.ts"),
             ui: path.resolve(appDir, "ui.tsx"),
@@ -60,7 +60,7 @@ module.exports = (env, args) => {
                 inlineSource: "(js)$",
                 template: path.resolve(appDir, "index.html"),
             }),
-            new HtmlWebpackInlineSourcePlugin(),
+            new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
             new BundleAnalyzerPlugin({
                 // Remove this to inspect bundle sizes.
                 analyzerMode: "disabled",

diff --git a/packages/utilities/fast-animation/package.json b/packages/utilities/fast-animation/package.json
@@ -97,7 +97,7 @@
     "style-loader": "^0.13.2",
     "ts-jest": "^27.0.0",
     "ts-loader": "^8.0.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^4.44.0",
     "webpack-bundle-analyzer": "^3.5.2",
     "webpack-cli": "^3.2.1",

diff --git a/packages/utilities/fast-benchmarks/package.json b/packages/utilities/fast-benchmarks/package.json
@@ -29,7 +29,7 @@
     "html-webpack-plugin": "^5.3.1",
     "prettier": "2.0.2",
     "ts-loader": "^8.1.0",
-    "typescript": "^4.6.2",
+    "typescript": "4.7.0-beta",
     "webpack": "^5.30.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.0.0-beta.1"

diff --git a/packages/utilities/fast-colors/package.json b/packages/utilities/fast-colors/package.json
@@ -42,6 +42,6 @@
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
     "eslint-config-prettier": "^6.10.1",
     "prettier": "2.0.2",
-    "typescript": "^4.6.2"
+    "typescript": "4.7.0-beta"
   }
 }
diff --git a/packages/utilities/fast-react-wrapper/.eslintrc.json b/packages/utilities/fast-react-wrapper/.eslintrc.json
@@ -1,9 +1,3 @@
 {
-    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
-    "rules": {
-        "import/extensions": [
-            "error",
-            "always"
-        ]
-    }
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"]
 }
diff --git a/packages/utilities/fast-react-wrapper/karma.conf.cjs b/packages/utilities/fast-react-wrapper/karma.conf.cjs
@@ -1,5 +1,4 @@
 const path = require("path");
-
 const basePath = path.resolve(__dirname);
 
 const commonChromeFlags = [
@@ -44,17 +43,17 @@ module.exports = function (config) {
             require("karma-chrome-launcher"),
             require("karma-firefox-launcher"),
         ],
-        files: [`dist/esm/__test__/${setup}.js`],
+        files: [`dist/esm/__test__/${setup}.cjs`],
         preprocessors: {
-            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+            [`dist/esm/__test__/${setup}.cjs`]: ["webpack", "sourcemap"],
         },
         webpackMiddleware: {
             // webpack-dev-middleware configuration
             // i. e.
             stats: "errors-only",
         },
         webpack: {
-            mode: "none",
+            mode: "development",
             resolve: {
                 extensions: [".js"],
                 modules: ["dist", "node_modules"],
@@ -65,12 +64,8 @@ module.exports = function (config) {
                 hints: false,
             },
             optimization: {
-                namedModules: false,
-                namedChunks: false,
-                nodeEnv: false,
                 usedExports: true,
                 flagIncludedChunks: false,
-                occurrenceOrder: false,
                 sideEffects: true,
                 concatenateModules: true,
                 splitChunks: {
@@ -89,14 +84,8 @@ module.exports = function (config) {
                     },
                     {
                         test: /\.js$/,
-                        use: [
-                            {
-                                loader: "source-map-loader",
-                                options: {
-                                    enforce: "pre",
-                                },
-                            },
-                        ],
+                        use: ["source-map-loader"],
+                        enforce: "pre",
                     },
                 ],
             },
@@ -125,7 +114,7 @@ module.exports = function (config) {
                 timeout: 5000,
             },
         },
-        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests,
     };
 
     if (config.coverage) {

diff --git a/packages/utilities/fast-react-wrapper/package.json b/packages/utilities/fast-react-wrapper/package.json
@@ -65,7 +65,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "react": "^16.9.0",
@@ -78,12 +78,13 @@
     "rollup-plugin-transform-tagged-template": "^0.0.3",
     "rollup-plugin-typescript2": "^0.27.0",
     "source-map": "^0.7.3",
-    "source-map-loader": "^0.2.4",
-    "ts-loader": "^7.0.2",
+    "source-map-loader": "^3.0.1",
+    "ts-loader": "^9.3.0",
     "ts-node": "^8.9.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.6.2",
-    "webpack": "^4.44.0"
+    "typescript": "4.7.0-beta",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@microsoft/fast-element": "^1.10.1",

diff --git a/...act-wrapper/src/__test__/setup-browser.ts → ...ct-wrapper/src/__test__/setup-browser.cts b/...act-wrapper/src/__test__/setup-browser.ts → ...ct-wrapper/src/__test__/setup-browser.cts
diff --git a/packages/utilities/fast-react-wrapper/src/index.spec.tsx b/packages/utilities/fast-react-wrapper/src/index.spec.tsx
@@ -1,10 +1,10 @@
 import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
-import { uniqueElementName } from '@microsoft/fast-foundation/dist/esm/test-utilities/fixture';
+import { uniqueElementName } from '@microsoft/fast-foundation/testing';
 import { expect } from "chai";
 import { DesignSystem, FoundationElement } from "@microsoft/fast-foundation";
-import { provideReactWrapper } from './index';
+import { provideReactWrapper } from './index.js';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 type CustomElementProperties = {

diff --git a/packages/utilities/fast-react-wrapper/tsconfig.json b/packages/utilities/fast-react-wrapper/tsconfig.json
@@ -6,6 +6,7 @@
         "experimentalDecorators": true,
         "target": "es2015",
         "module": "ESNext",
+        "moduleResolution": "Node16",
         "importHelpers": true,
         "jsx": "react",
         "types": [

diff --git a/packages/utilities/fast-web-utilities/package.json b/packages/utilities/fast-web-utilities/package.json
@@ -66,7 +66,7 @@
     "mocha": "^7.1.2",
     "prettier": "2.0.2",
     "ts-loader": "^4.0.1",
-    "typescript": "^4.6.2"
+    "typescript": "4.7.0-beta"
   },
   "dependencies": {
     "exenv-es6": "^1.1.1"

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
@@ -32,13 +32,13 @@ export class AdoptedStyleSheetsStrategy implements StyleStrategy {
 
 // @public
 export const Aspect: Readonly<{
-    none: number;
-    attribute: number;
-    booleanAttribute: number;
-    property: number;
-    content: number;
-    tokenList: number;
-    event: number;
+    none: 0;
+    attribute: 1;
+    booleanAttribute: 2;
+    property: 3;
+    content: 4;
+    tokenList: 5;
+    event: 6;
     assign(directive: Aspected, value: string): void;
 }>;
 
@@ -283,7 +283,7 @@ export const DOM: Readonly<{
 }>;
 
 // @public
-export const elements: (selector?: string | undefined) => ElementsFilter;
+export const elements: (selector?: string) => ElementsFilter;
 
 // @public
 export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
@@ -359,7 +359,7 @@ export const FASTElement: (new () => HTMLElement & FASTElement) & {
         new (): HTMLElement;
         prototype: HTMLElement;
     }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
-    define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
+    define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
 };
 
 // @public
@@ -405,7 +405,7 @@ export interface HTMLDirective {
 export const HTMLDirective: Readonly<{
     getForInstance: (object: any) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
     getByType: (key: Function) => HTMLDirectiveDefinition<Constructable<HTMLDirective>> | undefined;
-    define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition | undefined): TType;
+    define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition): TType;
 }>;
 
 // @public
@@ -512,7 +512,7 @@ export const Observable: Readonly<{
     notify(source: unknown, args: any): void;
     defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
     getAccessors: (target: {}) => Accessor[];
-    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber | undefined, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
+    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
     isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Binding<TSource_1, TReturn_1, ExecutionContext<any>>): boolean;
 }>;