upgrade tests to use TypeScript

Author: keithamus

test/directives.ts

@@ -0,0 +1,18 @@
+import {expect} from 'chai'
+import {html, render, directive} from '../lib/index.js'
+
+describe('directives', () => {
+  let surface: HTMLElement
+  beforeEach(() => {
+    surface = document.createElement('section')
+  })
+
+  it('handles directives differently', () => {
+    const setAsFoo = directive(() => part => {
+      part.value = 'foo'
+    })
+    const main = () => html`<div class="${setAsFoo()}"></div>`
+    render(main(), surface)
+    expect(surface.innerHTML).to.equal('<div class="foo"></div>')
+  })
+})

test/events.ts

@@ -0,0 +1,85 @@
+import {expect} from 'chai'
+import {html, render} from '../lib/index.js'
+
+describe('events', () => {
+  let surface: HTMLElement
+  beforeEach(() => {
+    surface = document.createElement('section')
+  })
+
+  describe('event listeners', () => {
+    it('handles event listeners properly', () => {
+      let i = 0
+      const main = () => html`<div onclick="${() => (i += 1)}"></div>`
+      render(main(), surface)
+      expect(surface.innerHTML).to.equal('<div></div>')
+      expect(i).to.equal(0)
+      surface.querySelector('div')?.click()
+      expect(i).to.equal(1)
+      surface.querySelector('div')?.dispatchEvent(new CustomEvent('click'))
+      expect(i).to.equal(2)
+    })
+
+    it('does not rebind event listeners multiple times', () => {
+      let i = 0
+      const main = () => html`<div onclick="${() => (i += 1)}"></div>`
+      render(main(), surface)
+      render(main(), surface)
+      render(main(), surface)
+      expect(surface.innerHTML).to.equal('<div></div>')
+      expect(i).to.equal(0)
+      surface.querySelector('div')?.click()
+      expect(i).to.equal(1)
+      surface.querySelector('div')?.dispatchEvent(new CustomEvent('click'))
+      expect(i).to.equal(2)
+    })
+
+    it('allows events to be driven by params', () => {
+      let i = 0
+      const main = (amt: number) => html`<div onclick="${() => (i += amt)}"></div>`
+      render(main(1), surface)
+      expect(surface.innerHTML).to.equal('<div></div>')
+      expect(i).to.equal(0)
+      surface.querySelector('div')?.click()
+      expect(i).to.equal(1)
+      render(main(4), surface)
+      surface.querySelector('div')?.dispatchEvent(new CustomEvent('click'))
+      expect(i).to.equal(5)
+    })
+
+    it('will unbind event listeners by passing null', () => {
+      let i = 0
+      const main = (listener: Function | null) => html`<div onclick="${listener}"></div>`
+      render(
+        main(() => (i += 1)),
+        surface
+      )
+      expect(surface.innerHTML).to.equal('<div></div>')
+      expect(i).to.equal(0)
+      surface.querySelector('div')?.click()
+      expect(i).to.equal(1)
+      render(main(null), surface)
+      surface.querySelector('div')?.click()
+      surface.querySelector('div')?.click()
+      surface.querySelector('div')?.click()
+      expect(i).to.equal(1)
+    })
+
+    it('binds event handler objects', () => {
+      const handler = {
+        i: 0,
+        handleEvent() {
+          this.i += 1
+        }
+      }
+      const main = () => html`<div onclick="${handler}"></div>`
+      render(main(), surface)
+      expect(surface.innerHTML).to.equal('<div></div>')
+      expect(handler.i).to.equal(0)
+      surface.querySelector('div')?.click()
+      expect(handler.i).to.equal(1)
+      surface.querySelector('div')?.dispatchEvent(new CustomEvent('click'))
+      expect(handler.i).to.equal(2)
+    })
+  })
+})

test/html.ts

@@ -1,3 +1,4 @@
+import {expect} from 'chai'
 import {html} from '../lib/index.js'
 
 describe('html', () => {

test/iterables.ts

@@ -0,0 +1,98 @@
+import {expect} from 'chai'
+import {html, render, TemplateResult} from '../lib/index.js'
+
+describe('iterables', () => {
+  let surface: HTMLElement
+  beforeEach(() => {
+    surface = document.createElement('section')
+  })
+
+  it('supports arrays of strings in nodes', () => {
+    const main = (list: string[]) => html`<div>${list}</div>`
+    render(main(['one', 'two', 'three']), surface)
+    expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+    render(main(['four', 'five', 'six']), surface)
+    expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+  })
+
+  it('supports iterables of Sub Templates with text nodes', () => {
+    const main = (list: Iterable<TemplateResult>) => html`<div>${list}</div>`
+    let fragments = ['one', 'two', 'three'].map(text => html`${text}`)
+    render(main(fragments), surface)
+    expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+    fragments = ['four', 'five', 'six'].map(text => html`${text}`)
+    render(main(fragments), surface)
+    expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+  })
+
+  it('supports iterables of fragments with text nodes', () => {
+    const main = (list: Iterable<DocumentFragment>) => html`<div>${list}</div>`
+    let fragments = ['one', 'two', 'three'].map(text => {
+      const fragment = document.createDocumentFragment()
+      fragment.append(new Text(text))
+      return fragment
+    })
+    render(main(fragments), surface)
+    expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+    fragments = ['four', 'five', 'six'].map(text => {
+      const fragment = document.createDocumentFragment()
+      fragment.append(new Text(text))
+      return fragment
+    })
+    render(main(fragments), surface)
+    expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+  })
+
+  it('supports other strings iterables in nodes', () => {
+    const main = (list: Iterable<string>) => html`<div>${list}</div>`
+    render(main(new Set(['one', 'two', 'three'])), surface)
+    expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+    render(
+      main(
+        new Map([
+          [4, 'four'],
+          [5, 'five'],
+          [6, 'six']
+        ]).values()
+      ),
+      surface
+    )
+    expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+  })
+
+  it('supports iterables of strings in attributes', () => {
+    const main = (list: Iterable<string>) => html`<div class="${list}"></div>`
+    render(main(['one', 'two', 'three']), surface)
+    expect(surface.innerHTML).to.equal('<div class="one two three"></div>')
+    render(main(new Set(['four', 'five', 'six'])), surface)
+    expect(surface.innerHTML).to.equal('<div class="four five six"></div>')
+  })
+
+  it('supports nested iterables of document fragments', () => {
+    // prettier-ignore
+    const main = (list: DocumentFragment[]) => html`<ul>${list}</ul>`
+    render(
+      main(
+        ['One', 'Two'].map(text => {
+          const f = document.createDocumentFragment()
+          const li = document.createElement('li')
+          li.textContent = text
+          f.append(li)
+          return f
+        })
+      ),
+      surface
+    )
+    expect(surface.innerHTML).to.equal('<ul><li>One</li><li>Two</li></ul>')
+  })
+
+  it('supports nested iterables of templates', () => {
+    const child = (item: Record<string, unknown>) => html`<li>${item.name}</li>`
+    // prettier-ignore
+    const main = (list: Array<Record<string, unknown>>) => html`<ul>${list.map(child)}</ul>`
+    render(main([{name: 'One'}, {name: 'Two'}, {name: 'Three'}]), surface)
+    expect(surface.innerHTML).to.equal('<ul><li>One</li><li>Two</li><li>Three</li></ul>')
+    render(main([{name: 'Two'}, {name: 'Three'}, {name: 'Four'}]), surface)
+    expect(surface.innerHTML).to.equal('<ul><li>Two</li><li>Three</li><li>Four</li></ul>')
+  })
+})

test/karma.config.cjs

@@ -1,5 +1,3 @@
-const resolve = require('@rollup/plugin-node-resolve').default
-
 process.env.CHROME_BIN = require('chromium').path
 
 module.exports = function (config) {
@@ -9,18 +7,13 @@ module.exports = function (config) {
     files: [
       {pattern: 'lib/*.js', type: 'module', included: false},
       {pattern: 'node_modules/**', type: 'module', included: false},
-      {pattern: 'test/*', type: 'module', included: true, watched: false}
+      {pattern: 'test/*.ts', type: 'module', included: true, watched: false}
     ],
     preprocessors: {
-      'test/*.ts': ['rollup']
+      'test/*.ts': ['esbuild']
     },
-    rollupPreprocessor: {
-      plugins: [resolve()],
-      output: {
-        format: 'iife',
-        name: 'test',
-        sourcemap: 'inline'
-      }
+    esbuild: {
+      target: 'es2019'
     },
     reporters: ['mocha'],
     port: 9876,