Integrate Karma Infrastructure (#48)

# Pull Request

## 🤨 Rationale

Introduces karma test infrastructure for writing unit tests. Modeled after the integration in [fast foundation](https://github.com/microsoft/fast/blob/e92c9e5197e54fc5c6ec6daaf36c09d9190c7ef2/packages/web-components/fast-foundation/karma.conf.js).

This does not integrate the playwright-based FAST e2e testing framework.

## 👩‍💻 Implementation

Migrated a similar karma configuration as used in FAST with some differences:
- Using jasmine for the BDD framework instead of mocha to match Web Chapter recommendations
- Switched to Webpack 5 to align with storybook and Angular integrations. Fast is using Webpack 4 but has been working on [migrating to Webpack 5](microsoft/fast#4736).
- Does not integrate Fast's approach to code coverage due to [lack of webpack 5 support in one of the istanbul plugins](webpack-contrib/istanbul-instrumenter-loader#110).

Some other minor refactors included in this change:
- Created an eslint config at the root to lint config js files for karma, storybook, etc. Currently disabled for storybook to address in a follow-up.
- Enabled the [`importsNotUsedAsValues`](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) TypeScript compiler rule for nimble components. This is helpful as nimble components currently relies on side-effects of imports and as a result of enabling the rule it becomes explicit when an import is done for side-effects instead of just for type imports, ie `import './someFile';` (note how there are no named imports, just side-effects).

## 🧪 Testing

Included a sample test file for the Button based on existing FastFoundation tests. Does not represent what the Button tests should cover but is just used as an example to test the infrastructure. In a follow-up the example tests should be replaced with tests for Nimble Button specific features (currently just appearance configuration).

.editorconfig

@@ -1,4 +1,9 @@
+root = true
 
 [*.yml]
 indent_style = space
 indent_size = 2
+
+[*.md]
+indent_style = space
+indent_size = 4

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing
+# Contributing to Nimble
 
 ## Repository overview
 
@@ -19,19 +19,20 @@ This repository uses the following tooling. See below for more info.
 ## Getting Started
 
 From the `nimble` directory:
-   1. Make sure you have npm version 7+ installed by running `npm --version`. If you have npm version 6 or earlier, upgrade by running `npm install npm@latest -g`.
-   1. Run `npm install`
-   1. Run `npm run build`
-   1. Run `npm run storybook -w @ni/nimble-components` to view the components in Storybook
-      - Note: **you'll need to refresh your browser window to see style changes**.
+1. Make sure you have npm version 7+ installed by running `npm --version`. If you have npm version 6 or earlier, upgrade by running `npm install npm@latest -g`.
+1. Run `npm install`
+1. Run `npm run build`
+1. Run `npm run storybook -w @ni/nimble-components` to view the components in Storybook
+
+    **Note**: You will need to refresh your browser window to see style changes made in source.
 
 ## Develop New Components
 
 ### Adding a new component
 
-1. Ensure UX specs are up to date and tokens are generated. [See instructions for contributing to nimble tokens](packages/nimble-tokens/CONTRIBUTING.md).
-1. Expose any tokens in the token provider and add web component logic. [See instructions for contributing to nimble components](packages/nimble-components/CONTRIBUTING.md).
-1. Add wrappers for each framework. [See instructions for adding Angular wrappers](angular-workspace/projects/ni/nimble-angular/CONTRIBUTING.md). [See instructions for adding Blazor wrappers](packages/nimble-blazor/CONTRIBUTING.md).
+1. Ensure UX specs are up to date and tokens are generated. See instructions for [contributing to nimble tokens](packages/nimble-tokens/CONTRIBUTING.md).
+1. Expose any tokens in the token provider and add web component logic. See instructions for [contributing to nimble components](packages/nimble-components/CONTRIBUTING.md).
+1. Add wrappers for each framework. See instructions for [adding Angular wrappers](angular-workspace/projects/ni/nimble-angular/CONTRIBUTING.md). See instructions for [adding Blazor wrappers](packages/nimble-blazor/CONTRIBUTING.md).
 1. Publish and use! 🎉
 
 ## Pull Requests, Releases, and Versioning
@@ -54,7 +55,7 @@ Install packages using the workflow you would expect for npm workspaces and a sl
 
 ### NPM packages
 
-To install npm packages start from the root of the repository and use `npm install <my-package> --workspace=path/to/target`.
+To install npm packages start from the root of the repository and use `npm install <new-package> --workspace=<target-package-name>`.
 
 Example: Install `five` in an npm workspace project:
 

README.md

@@ -35,10 +35,11 @@ Consult the `README.md` for each package to learn more, including how to use it
 ### Quick Start
 
 From the `nimble` directory:
-   1. Make sure you have npm version 7+ installed by running `npm --version`. If you have npm version 6 or earlier, upgrade by running `npm install npm@latest -g`.
-   1. Run `npm install`
-   1. Run `npm run build`
-   1. Run `npm run storybook -w @ni/nimble-components` to view the components in Storybook.
-      - Note: **you'll need to refresh your browser window to see style changes**.
+1. Make sure you have npm version 7+ installed by running `npm --version`. If you have npm version 6 or earlier, upgrade by running `npm install npm@latest -g`.
+1. Run `npm install`
+1. Run `npm run build`
+1. Run `npm run storybook -w @ni/nimble-components` to view the components in Storybook
+
+    **Note**: You will need to refresh your browser window to see style changes made in source.
 
 Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) to modify the design system.

angular-workspace/projects/ni/nimble-angular/CONTRIBUTING.md

@@ -1,3 +1,3 @@
-# Contributing
+# Contributing to Nimble Angular
 
-TODO
+TODO

change/@ni-nimble-angular-f53c46fc-9904-4bb5-9fe2-3dfd11d9b908.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Docs update",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@ni-nimble-angular-schematics-1f2004f5-842e-4a01-b8c1-43332c9236a5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Docs update",
+  "packageName": "@ni/nimble-angular-schematics",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@ni-nimble-components-48a6b24a-598b-46bb-aff8-fe72909bc212.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Karma unit test infrastructure integration",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@ni-nimble-tokens-fa0ca2f7-dc0d-4be9-99e2-158d84b32c68.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Docs update",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/nimble-angular-schematics/CONTRIBUTING.md

@@ -1,3 +1,3 @@
-# Contributing
+# Contributing to Nimble Angular Schematics
 
 TODO

packages/nimble-blazor/CONTRIBUTING.md

@@ -1,3 +1,3 @@
-# Contributing
+# Contributing to Nimble Blazor
 
 TODO

packages/nimble-components/.eslintrc.js

@@ -1,23 +1,10 @@
 module.exports = {
-    extends: [
-        '@ni/eslint-config/typescript',
-        '@ni/eslint-config/typescript-requiring-type-checking'
-    ],
-    parserOptions: {
-        project: './tsconfig.json',
-        tsconfigRootDir: __dirname
-    },
-    rules: {
-        // *-default-export lines can be deleted once a fix for this issue is published and uptaken
-        // https://github.com/ni/javascript-styleguide/issues/39
-        'import/prefer-default-export': 'off',
-        'import/no-default-export': 'error'
-    },
-    overrides: [{
-        files: ['*.stories.ts'],
-        rules: {
-            'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-            'import/no-default-export': 'off'
-        }
-    }]
+    root: true,
+    extends: '@ni',
+    ignorePatterns: [
+        // TODO enable and lint storybook js
+        // '!/.storybook',
+        'node_modules',
+        'dist'
+    ]
 };