chore: implement test in memory execution based on TS aliases (micros…

…oft#17161)

* chore(react-menu): implement in memory test execution
* fix(react-conformance): remove esModuleInterop so the package is compliant with other packages
* fix(utilities): make pkg compile in strict mode
* chore(make-styles): propagate deps to root and remove path overrides so the package can be properly consumed by ts path aliases converged packages
* chore(react-menu): add global types from dependant packages until we properly define globals type resolution for all
* chore: remove packages from path aliases that have been removed from convergence
* Change files

.gitignore

@@ -65,6 +65,7 @@ coverage
 dist
 dist-storybook
 screenshots
+.cache
 
 *.tar.gz
 

change/@fluentui-make-styles-d676c107-849e-4666-9f1a-8543ea276f74.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(make-styles): propagate deps to root and remove path overrides so the package can be properly consumed by ts path aliases converged packages",
+  "packageName": "@fluentui/make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-conformance-d1983716-7e77-4f5e-b372-01cced6fae24.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-conformance): remove esModuleInterop so the package is compliant with other packages",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-ce828c95-56eb-4e5b-a86d-668aad9f140f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-menu): implement in memory test exection",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-utilities-4903da1e-6768-4ac6-8a5e-96f518dd859a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix(utilities): make pkg compile in strict mode",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  projects: ['<rootDir>/packages/react-menu'],
+};

jest.preset.js

@@ -0,0 +1,28 @@
+// @ts-check
+
+const path = require('path');
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+
+const tsConfig = require('./tsconfig.base.json');
+
+const tsPathAliases = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
+  prefix: `<rootDir>/${path.relative(process.cwd(), __dirname)}/`,
+});
+
+/**
+ * @type {jest.InitialOptions}
+ */
+const baseConfig = {
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/lib-commonjs/', '/dist/'],
+  moduleNameMapper: { ...tsPathAliases },
+  cacheDirectory: '<rootDir>/.cache/jest',
+  clearMocks: true,
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+};
+
+module.exports = { ...baseConfig };

package.json

@@ -109,7 +109,7 @@
     "postcss-loader": "4.1.0",
     "postcss-modules": "2.0.0",
     "ts-loader": "8.0.14",
-    "ts-jest": "24.0.1",
+    "ts-jest": "24.3.0",
     "typescript": "3.7.2",
     "webpack-dev-server": "4.0.0-beta.0",
     "webpack-cli": "4.3.1",
@@ -124,6 +124,10 @@
       "packages/fluentui/*"
     ],
     "nohoist": [
+      "@fluentui/make-styles/stylis",
+      "@fluentui/make-styles/@types/stylis",
+      "@fluentui/react-bindings/stylis",
+      "@fluentui/react-northstar-fela-renderer/stylis",
       "packages/web-components/webpack",
       "packages/web-components/@storybook/**",
       "packages/web-components/typescript",

packages/make-styles/package.json

@@ -28,7 +28,7 @@
     "@fluentui/eslint-plugin": "^1.0.1",
     "@fluentui/scripts": "^1.0.0",
     "@fluentui/test-utilities": "^8.0.1",
-    "@types/stylis": "^4.0.0"
+    "@types/stylis": "4.0.0"
   },
   "dependencies": {
     "@emotion/hash": "^0.8.0",

packages/make-styles/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "outDir": "dist",
     "target": "es5",
     "module": "commonjs",
@@ -15,9 +14,6 @@
     "moduleResolution": "node",
     "preserveConstEnums": true,
     "lib": ["es5", "dom"],
-    "paths": {
-      "stylis": ["../../node_modules/@types/stylis"]
-    },
     "typeRoots": ["../../node_modules/@types", "../../typings"],
     "types": ["custom-global", "jest", "inline-style-expand-shorthand"]
   },

packages/react-conformance/src/defaultErrorMessages.tsx

@@ -2,7 +2,7 @@ import { IsConformantOptions } from './types';
 import { ComponentDoc } from 'react-docgen-typescript';
 
 import chalk from 'chalk';
-import os from 'os';
+import * as os from 'os';
 import parseDocblock from './utils/parseDocblock';
 
 import * as _ from 'lodash';

packages/react-conformance/src/isConformant.ts

@@ -4,7 +4,7 @@ import { IsConformantOptions } from './types';
 import { defaultTests } from './defaultTests';
 import { defaultErrorMessages } from './defaultErrorMessages';
 import { merge } from './utils/merge';
-import os from 'os';
+import * as os from 'os';
 import chalk from 'chalk';
 import { getComponentDoc } from './utils/getComponentDoc';
 

packages/react-conformance/tsconfig.json

@@ -14,7 +14,6 @@
     "strict": true,
     "moduleResolution": "node",
     "preserveConstEnums": true,
-    "esModuleInterop": true,
     "lib": ["es2017", "dom"],
     "types": ["jest", "node"]
   },

packages/react-menu/jest.config.js

@@ -1,9 +1,20 @@
-const { createConfig, resolveMergeStylesSerializer } = require('@fluentui/scripts/jest/jest-resources');
-const path = require('path');
+// @ts-check
 
-const config = createConfig({
-  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
-  snapshotSerializers: [resolveMergeStylesSerializer()],
-});
-
-module.exports = config;
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-menu',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
+};

packages/react-menu/package.json

@@ -21,9 +21,9 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start-test": "echo \"This is DEPRECATED instead use 'test --watch'\" && just-scripts jest-watch",
+    "test": "jest",
+    "update-snapshots": "echo \"This is DEPRECATED instead use 'test -u'\" && just-scripts jest -u"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.0.1",

packages/react-menu/tsconfig.json

@@ -10,7 +10,7 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
   },
   "include": ["src"]
 }

packages/utilities/etc/utilities.api.md

@@ -53,7 +53,7 @@ export function asAsync<TProps>(options: IAsAsyncOptions<TProps>): React.Forward
 export function assertNever(x: never): never;
 
 // @public
-export function assign(target: any, ...args: any[]): any;
+export function assign(this: any, target: any, ...args: any[]): any;
 
 // @public
 export class Async {

packages/utilities/src/AutoScroll.ts

@@ -22,9 +22,9 @@ export class AutoScroll {
   private _events: EventGroup;
   private _scrollableParent: HTMLElement | null;
   private _scrollRect: IRectangle | undefined;
-  private _scrollVelocity: number;
-  private _isVerticalScroll: boolean;
-  private _timeoutId: number;
+  private _scrollVelocity!: number;
+  private _isVerticalScroll!: boolean;
+  private _timeoutId!: number;
 
   constructor(element: HTMLElement) {
     this._events = new EventGroup(this);

packages/utilities/src/BaseComponent.test.tsx

@@ -7,7 +7,7 @@ describe('BaseComponent', () => {
   it('can resolve refs', () => {
     // eslint-disable-next-line deprecation/deprecation
     class Foo extends BaseComponent<{}, {}> {
-      public root: HTMLElement;
+      public root!: HTMLElement;
 
       public render(): JSX.Element {
         // eslint-disable-next-line deprecation/deprecation

packages/utilities/src/BaseComponent.ts

@@ -29,13 +29,13 @@ export class BaseComponent<TProps extends IBaseProps = {}, TState = {}> extends
    * implementing a passthrough (higher-order component), you would set this to false and pass through
    * the props to the inner component, allowing it to resolve the componentRef.
    */
-  protected _skipComponentRefResolution: boolean;
+  protected _skipComponentRefResolution!: boolean;
 
-  private __async: Async;
-  private __events: EventGroup;
-  private __disposables: IDisposable[] | null;
-  private __resolves: { [name: string]: (ref: React.ReactNode) => React.ReactNode };
-  private __className: string;
+  private __async!: Async;
+  private __events!: EventGroup;
+  private __disposables!: IDisposable[] | null;
+  private __resolves!: { [name: string]: (ref: React.ReactNode) => React.ReactNode };
+  private __className!: string;
 
   /**
    * BaseComponent constructor

packages/utilities/src/EventGroup.ts

@@ -53,7 +53,7 @@ export class EventGroup {
   private _parent: any;
   private _eventRecords: IEventRecord[];
   private _id: number = EventGroup._uniqueId++;
-  private _isDisposed: boolean;
+  private _isDisposed!: boolean;
 
   /** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.
    *  Events raised here by default have bubbling set to false and cancelable set to true.
@@ -80,6 +80,8 @@ export class EventGroup {
         target.fireEvent('on' + eventName, evObj);
       }
     } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore  -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331
       while (target && retVal !== false) {
         let events = <IEventRecordsByName>target.__events__;
         let eventRecords = events ? events[eventName] : null;
@@ -89,6 +91,8 @@ export class EventGroup {
             if (eventRecords.hasOwnProperty(id)) {
               let eventRecordList = <IEventRecord[]>eventRecords[id];
 
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore  -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331
               for (let listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {
                 let record = eventRecordList[listIndex];
 
@@ -206,6 +210,8 @@ export class EventGroup {
           let result;
           try {
             result = callback.apply(parent, args);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore  -- FIXME: strictBindCallApply error - https://github.com/microsoft/fluentui/issues/17331
             if (result === false && args[0]) {
               let e = args[0];
 

packages/utilities/src/appendFunction.test.ts

@@ -22,7 +22,7 @@ describe('appendFunction', () => {
   });
 
   it('preserves the parent', () => {
-    function add(): void {
+    function add(this: { counter: number }): void {
       this.counter++;
     }
 

packages/utilities/src/initializeComponentRef.ts

@@ -16,19 +16,22 @@ export function initializeComponentRef<TProps extends IBaseProps, TState>(obj: R
   });
 }
 
-function _onMount(): void {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function _onMount(this: any): void {
   _setComponentRef(this.props.componentRef, this);
 }
 
-function _onUpdate(prevProps: IBaseProps): void {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function _onUpdate(this: any, prevProps: IBaseProps): void {
   if (prevProps.componentRef !== this.props.componentRef) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _setComponentRef((prevProps as any).componentRef, null);
     _setComponentRef(this.props.componentRef, this);
   }
 }
 
-function _onUnmount(): void {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function _onUnmount(this: any): void {
   _setComponentRef(this.props.componentRef, null);
 }
 

packages/utilities/src/object.ts

@@ -33,7 +33,7 @@ export function shallowCompare<TA extends any, TB extends any>(a: TA, b: TB): bo
  * @returns Resulting merged target.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function assign(target: any, ...args: any[]): any {
+export function assign(this: any, target: any, ...args: any[]): any {
   return filteredAssign.apply(this, [null, target].concat(args));
 }
 

packages/utilities/src/selection/Selection.ts

@@ -25,24 +25,24 @@ export type ISelectionOptionsWithRequiredGetKey<TItem> = ISelectionOptions<TItem
  */
 export class Selection<TItem = IObjectWithKey> implements ISelection<TItem> {
   /** Number of items selected. Do not modify. */
-  public count: number;
-  public readonly mode: SelectionMode;
+  public count!: number;
+  public readonly mode!: SelectionMode;
 
-  private _getKey: (item: TItem, index?: number) => string | number;
-  private _canSelectItem: (item: TItem, index?: number) => boolean;
+  private _getKey!: (item: TItem, index?: number) => string | number;
+  private _canSelectItem!: (item: TItem, index?: number) => boolean;
 
   private _changeEventSuppressionCount: number;
-  private _items: TItem[];
-  private _selectedItems: TItem[] | null;
+  private _items!: TItem[];
+  private _selectedItems!: TItem[] | null;
   private _selectedIndices: number[] | undefined;
-  private _isAllSelected: boolean;
-  private _exemptedIndices: { [index: string]: boolean };
+  private _isAllSelected!: boolean;
+  private _exemptedIndices!: { [index: string]: boolean };
   private _exemptedCount: number;
-  private _keyToIndexMap: { [key: string]: number };
+  private _keyToIndexMap!: { [key: string]: number };
   private _anchoredIndex: number;
   private _onSelectionChanged: (() => void) | undefined;
-  private _hasChanged: boolean;
-  private _unselectableIndices: { [index: string]: boolean };
+  private _hasChanged!: boolean;
+  private _unselectableIndices!: { [index: string]: boolean };
   private _unselectableCount: number;
   private _isModal: boolean;
 

packages/utilities/tsconfig.json

@@ -7,11 +7,11 @@
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
+    "strict": true,
+    "strictFunctionTypes": false,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "noImplicitAny": true,
     "noUnusedLocals": true,
-    "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
     "preserveConstEnums": true,

tsconfig.base.json

@@ -12,13 +12,17 @@
     "typeRoots": ["node_modules/@types", "./typings"],
     "baseUrl": ".",
     "paths": {
-      "@fluentui/set-version": ["packages/set-version/src/index.ts"],
       "@fluentui/react-conformance": ["packages/react-conformance/src/index.ts"],
+      "@fluentui/react-context-selector": ["packages/react-context-selector/src/index.ts"],
       "@fluentui/react-utilities": ["packages/react-utilities/src/index.ts"],
       "@fluentui/react-make-styles": ["packages/react-make-styles/src/index.ts"],
+      "@fluentui/make-styles": ["packages/make-styles/src/index.ts"],
+      "@fluentui/react-provider": ["packages/react-provider/src/index.ts"],
+      "@fluentui/react-theme": ["packages/react-theme/src/index.ts"],
+      "@fluentui/react-theme-provider": ["packages/react-theme-provider/src/index.ts"],
       "@fluentui/keyboard-key": ["packages/keyboard-key/src/index.ts"],
-      "@fluentui/react-menu": ["packages/react-menu/src/index.ts"],
-      "@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"]
+      "@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"],
+      "@fluentui/react-menu": ["packages/react-menu/src/index.ts"]
     }
   },
   "exclude": ["node_modules"]