>) => html``
+ render(main([{name: 'One'}, {name: 'Two'}, {name: 'Three'}]), surface)
+ expect(surface.innerHTML).to.equal('')
+ render(main([{name: 'Two'}, {name: 'Three'}, {name: 'Four'}]), surface)
+ expect(surface.innerHTML).to.equal('')
+ })
+})
diff --git a/test/karma.config.cjs b/test/karma.config.cjs
index 6cca49c..23a869a 100644
--- a/test/karma.config.cjs
+++ b/test/karma.config.cjs
@@ -1,4 +1,5 @@
-const resolve = require('@rollup/plugin-node-resolve').default
+process.env.CHROME_BIN = require('chromium').path
+
module.exports = function (config) {
config.set({
basePath: '..',
@@ -6,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,
diff --git a/test/render.ts b/test/render.ts
new file mode 100644
index 0000000..519e1e1
--- /dev/null
+++ b/test/render.ts
@@ -0,0 +1,79 @@
+import {expect} from 'chai'
+import {html, render, TemplateResult} from '../lib/index.js'
+import type {TemplateResult} from '../lib/index.js'
+
+describe('render', () => {
+ let surface: HTMLElement
+ beforeEach(() => {
+ surface = document.createElement('section')
+ })
+
+ afterEach(() => {
+ TemplateResult.setCSPTrustedTypesPolicy(null)
+ })
+
+ it('memoizes by TemplateResult#template, updating old templates with new values', () => {
+ const main = (x: string | null = null) => html``
+ render(main('foo'), surface)
+ expect(surface.innerHTML).to.equal('')
+ render(main('bar'), surface)
+ expect(surface.innerHTML).to.equal('')
+ })
+
+ describe('nesting', () => {
+ it('supports nested html calls', () => {
+ const main = (child: TemplateResult) => html`${child}
`
+ const child = (message: string) => html`${message}`
+ render(main(child('Hello')), surface)
+ expect(surface.innerHTML).to.equal('Hello
')
+ })
+
+ it('updates nodes from repeat calls', () => {
+ const main = (child: TemplateResult) => html`${child}
`
+ const child = (message: string) => html`${message}`
+ render(main(child('Hello')), surface)
+ expect(surface.innerHTML).to.equal('Hello
')
+ render(main(child('Goodbye')), surface)
+ expect(surface.innerHTML).to.equal('Goodbye
')
+ })
+
+ it('can nest document fragments and text nodes', () => {
+ const main = (frag: DocumentFragment) => html`${frag}`
+ const fragment = document.createDocumentFragment()
+ fragment.append(new Text('Hello World'))
+ render(main(fragment), surface)
+ expect(surface.innerHTML).to.equal('Hello World')
+ fragment.append(document.createTextNode('Hello Universe!'))
+ render(main(fragment), surface)
+ expect(surface.innerHTML).to.equal('Hello Universe!')
+ })
+
+ it('renders DocumentFragments nested in sub templates nested in arrays', () => {
+ const sub = () => {
+ const frag = document.createDocumentFragment()
+ frag.appendChild(document.createElement('div'))
+ return html`${frag}`
+ }
+ const main = () => html`${[sub(), sub()]}
`
+ render(main(), surface)
+ expect(surface.innerHTML).to.contain('')
+ })
+ })
+
+ describe('trusted types', () => {
+ it('respects a Trusted Types Policy if it is set', () => {
+ let policyCalled = false
+ const rewrittenFragment = ''
+ TemplateResult.setCSPTrustedTypesPolicy({
+ createHTML: (_html: string) => {
+ policyCalled = true
+ return rewrittenFragment
+ }
+ })
+ const main = (x: string | null = null) => html``
+ render(main('foo'), surface)
+ expect(surface.innerHTML).to.equal(rewrittenFragment)
+ expect(policyCalled).to.be.true
+ })
+ })
+})
diff --git a/test/trusted-types.ts b/test/trusted-types.ts
new file mode 100644
index 0000000..3045d1f
--- /dev/null
+++ b/test/trusted-types.ts
@@ -0,0 +1,19 @@
+import {expect} from 'chai'
+import {TemplateResult} from '../lib/index.js'
+
+describe('trusted types', () => {
+ after(() => {
+ TemplateResult.setCSPTrustedTypesPolicy(null)
+ })
+
+ it('can set a CSP Trusted Types policy', () => {
+ const dummyPolicy = {
+ createHTML: (htmlText: string) => {
+ return htmlText
+ }
+ }
+ expect(TemplateResult.cspTrustedTypesPolicy).to.equal(null)
+ TemplateResult.setCSPTrustedTypesPolicy(dummyPolicy)
+ expect(TemplateResult.cspTrustedTypesPolicy).to.equal(dummyPolicy)
+ })
+})
diff --git a/test/unsafe-html.ts b/test/unsafe-html.ts
new file mode 100644
index 0000000..997ff8a
--- /dev/null
+++ b/test/unsafe-html.ts
@@ -0,0 +1,54 @@
+import {expect} from 'chai'
+import {html, render, TemplateResult, unsafeHTML} from '../lib/index.js'
+
+describe('unsafeHTML', () => {
+ beforeEach(() => {
+ TemplateResult.setCSPTrustedTypesPolicy(null)
+ })
+ afterEach(() => {
+ TemplateResult.setCSPTrustedTypesPolicy(null)
+ })
+ it('renders basic text', async () => {
+ const surface = document.createElement('section')
+ render(html`${unsafeHTML('Hello World')}
`, surface)
+ expect(surface.innerHTML).to.equal('Hello World
')
+ })
+ it('disallows use inside of an attribute', () => {
+ const surface = document.createElement('section')
+ render(html``, surface)
+ expect(surface.innerHTML).to.equal('')
+ })
+ it('renders the given value as HTML', async () => {
+ const surface = document.createElement('section')
+ render(html`${unsafeHTML('Hello World')}
`, surface)
+ expect(surface.innerHTML).to.equal('Hello World
')
+ })
+ it('renders multiple children', async () => {
+ const surface = document.createElement('section')
+ render(html`${unsafeHTML('HelloWorld')}
`, surface)
+ expect(surface.innerHTML).to.equal('HelloWorld
')
+ })
+ it('updates correctly', async () => {
+ const surface = document.createElement('section')
+ const fn = (name: string) => html`${unsafeHTML(`Hello${name}`)}
`
+ render(fn('World'), surface)
+ expect(surface.innerHTML).to.equal('HelloWorld
')
+ render(fn('Universe'), surface)
+ render(fn('Universe'), surface)
+ expect(surface.innerHTML).to.equal('')
+ })
+ it('respects trusted types', async () => {
+ let policyCalled = false
+ const rewrittenFragment = 'This has been rewritten by Trusted Types.
'
+ TemplateResult.setCSPTrustedTypesPolicy({
+ createHTML: (_html: string) => {
+ policyCalled = true
+ return rewrittenFragment
+ }
+ })
+ const surface = document.createElement('section')
+ render(html`${unsafeHTML('HelloWorld')}
`, surface)
+ expect(surface.innerHTML).to.equal(rewrittenFragment)
+ expect(policyCalled).to.be.true
+ })
+})
diff --git a/test/until.ts b/test/until.ts
index d0c0b6e..9c02989 100644
--- a/test/until.ts
+++ b/test/until.ts
@@ -1,36 +1,37 @@
-import {html, render, until} from '..'
+import {expect} from 'chai'
+import {html, render, until} from '../lib/index.js'
describe('until', () => {
it('renders a Promise when it resolves', async () => {
- let resolve
+ let resolve: Function
const promise = new Promise(res => (resolve = res))
const surface = document.createElement('section')
render(html`${until(promise)}
`, surface)
expect(surface.innerHTML).to.equal('')
- resolve('foo')
+ resolve!('foo')
await promise
expect(surface.innerHTML).to.equal('foo
')
})
it('renders non-promise values until promises have resolved', async () => {
- let resolve
+ let resolve: Function
const promise = new Promise(res => (resolve = res))
const surface = document.createElement('section')
render(html`${until(promise, 'loading...')}
`, surface)
expect(surface.innerHTML).to.equal('loading...
')
- resolve('foo')
+ resolve!('foo')
await promise
expect(surface.innerHTML).to.equal('foo
')
})
it('renders values only once', async () => {
- let resolve
+ let resolve: Function
const promise = new Promise(res => (resolve = res))
const surface = document.createElement('section')
const exec = () => render(html`${until(promise, 'loading...')}
`, surface)
exec()
expect(surface.innerHTML).to.equal('loading...
')
- resolve('foo')
+ resolve!('foo')
await promise
exec()
expect(surface.innerHTML).to.equal('foo
')
@@ -39,52 +40,53 @@ describe('until', () => {
})
it('can re-render content as it changes', async () => {
- let resolve
+ let resolve: Function
const promise = new Promise(res => (resolve = res))
const surface = document.createElement('section')
- const exec = a => render(html`${until(promise, a)}
`, surface)
+ const exec = (a: string) => render(html`${until(promise, a)}
`, surface)
exec('loading...')
expect(surface.innerHTML).to.equal('loading...
')
exec('still loading...')
expect(surface.innerHTML).to.equal('still loading...
')
exec('taking forever...')
expect(surface.innerHTML).to.equal('taking forever...
')
- resolve('foo')
+ resolve!('foo')
await promise
expect(surface.innerHTML).to.equal('foo
')
})
it('will not render promises behind already resolved ones', async () => {
- let resolveFoo, resolveBar
+ let resolveFoo: Function
+ let resolveBar: Function
const promiseFoo = new Promise(res => (resolveFoo = res))
const promiseBar = new Promise(res => (resolveBar = res))
const surface = document.createElement('section')
const exec = () => render(html`${until(promiseFoo, promiseBar)}
`, surface)
exec()
expect(surface.innerHTML).to.equal('')
- resolveFoo('foo')
+ resolveFoo!('foo')
await promiseFoo
expect(surface.innerHTML).to.equal('foo
')
- resolveBar('bar')
+ resolveBar!('bar')
await promiseBar
expect(surface.innerHTML).to.equal('foo
')
})
it('supports boolean attributes', async () => {
- let resolve
+ let resolve: Function
const promise = new Promise(res => (resolve = res))
const surface = document.createElement('section')
- const exec = a => render(html``, surface)
+ const exec = (a: boolean) => render(html``, surface)
exec(false)
expect(surface.innerHTML).to.equal('')
exec(true)
expect(surface.innerHTML).to.equal('')
exec(false)
expect(surface.innerHTML).to.equal('')
- resolve(true)
+ resolve!(true)
await promise
expect(surface.innerHTML).to.equal('')
- resolve(false)
+ resolve!(false)
expect(surface.innerHTML).to.equal('')
})
})
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 0000000..2ab0489
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,10 @@
+{
+ "exclude": ["test"],
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "declaration": true,
+ "declarationMap": true,
+ "outDir": "./lib",
+ "noEmit": false
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8b03941..4218d19 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,15 @@
{
- "include": ["src"],
+ "include": ["src", "test"],
"compilerOptions": {
"baseUrl": ".",
- "declaration": true,
- "declarationMap": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"lib": ["es2020", "dom", "dom.iterable"],
"module": "ESNext",
"moduleResolution": "node",
- "noEmit": false,
- "outDir": "./lib",
+ "noEmit": true,
"sourceMap": true,
"strict": true,
- "target": "ES2017"
+ "target": "ES2019"
}
}