Add karma for testing (#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>
+    `);
+  });
+
+});