Add karma for testing (#2)

.gitignore

@@ -1,5 +1,6 @@
 /node_modules/
 /lib/
+/test/
 
 # top level source
 my-element.js

README.md

@@ -28,6 +28,16 @@ npm run build:watch
 
 Both the TypeScript compiler and lit-analyzer are configured to be very strict. You may want to change `tsconfig.json` to make them less strict.
 
+## Testing
+
+This sample uses Karma, Chai, Mocha, and the open-wc test helpers for testing. See the [open-wc testing documentation](https://open-wc.org/testing/testing.html) for more information.
+
+Tests can be run with the `test` script:
+
+```bash
+npm test
+```
+
 ## Dev Server
 
 This sample uses [ES dev server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) for previewing the project without additional build steps. ES dev server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers.

karma.conf.cjs

@@ -0,0 +1,24 @@
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = config => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      frameworks: ['mocha', 'chai'],
+      client: {
+        mocha: {ui: 'tdd'}
+      },
+      files: [
+        {
+          pattern: config.grep ? config.grep : 'test/**/*_test.js',
+          type: 'module'
+        },
+      ],
+      // See the karma-esm docs for all options
+      esm: {
+        nodeResolve: true,
+      },
+    }),
+  );
+  return config;
+};

package.json

@@ -9,10 +9,15 @@
     "build": "lit-analyzer && tsc",
     "build:watch": "tsc --watch",
     "serve": "es-dev-server --app-index demo/index.html --node-resolve --watch --open",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "karma start karma.conf.cjs",
+    "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
+    "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
+    "test:prune-snapshots": "karma start karma.conf.cjs --prune-snapshots"
   },
   "keywords": [
-    "web component", "lit-element", "typescript"
+    "web component",
+    "lit-element",
+    "typescript"
   ],
   "author": "The Polymer Authors",
   "license": "BSD-3-Clause",
@@ -20,8 +25,18 @@
     "lit-element": "^2.2.1"
   },
   "devDependencies": {
+    "@open-wc/testing": "^2.4.2",
+    "@open-wc/testing-karma": "^3.2.19",
+    "@types/chai": "^4.2.7",
+    "@types/mocha": "^5.2.7",
+    "chai": "^4.2.0",
+    "deepmerge": "^4.2.2",
     "es-dev-server": "^1.23.1",
+    "karma": "^4.4.1",
+    "karma-chai": "^0.1.0",
+    "karma-mocha": "^1.3.0",
     "lit-analyzer": "^1.1.9",
+    "mocha": "^6.2.2",
     "typescript": "^3.7.2"
   }
 }

src/my-element.ts

@@ -15,7 +15,7 @@
 import { LitElement, html, customElement, property, css } from 'lit-element';
 
 @customElement('my-element')
-class MyElement extends LitElement {
+export class MyElement extends LitElement {
 
   static styles = css`
     :host {
@@ -36,7 +36,7 @@ class MyElement extends LitElement {
     return html`
       <h1>Hello, ${this.name}!</h1>
       <button @click=${this._onClick}>Click Count: ${this.count}</button>
-      <div class="slot"><slot></slot></div>
+      <slot></slot>
     `;
   }
 

src/test/my-element_test.ts

@@ -0,0 +1,43 @@
+import {MyElement} from '../my-element.js';
+import {fixture, html} from '@open-wc/testing';
+
+const assert = chai.assert;
+
+suite('my-element', () => {
+
+  test('is defined', () => {
+    const el = document.createElement('my-element');
+    assert.instanceOf(el, MyElement);
+  });
+
+  test('renders with default values', async () => {
+    const el = await fixture(html`<my-element></my-element>`);
+    assert.shadowDom.equal(el, `
+      <h1>Hello, World!</h1>
+      <button>Click Count: 0</button>
+      <slot></slot>
+    `);
+  });
+
+  test('renders with a set name', async () => {
+    const el = await fixture(html`<my-element name="Test"></my-element>`);
+    assert.shadowDom.equal(el, `
+      <h1>Hello, Test!</h1>
+      <button>Click Count: 0</button>
+      <slot></slot>
+    `);
+  });
+
+  test('handles a click', async () => {
+    const el = await fixture(html`<my-element></my-element>`) as MyElement;
+    const button = el.shadowRoot!.querySelector('button')!;
+    button.click();
+    await el.updateComplete;
+    assert.shadowDom.equal(el, `
+      <h1>Hello, World!</h1>
+      <button>Click Count: 1</button>
+      <slot></slot>
+    `);
+  });
+
+});

tsconfig.json

@@ -14,6 +14,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "plugins": [