Actually-useful tests

This commit is contained in:
Tony Garnock-Jones 2024-06-04 12:05:28 +02:00
parent 44fe1ff7b5
commit a8fd5aa2fe
1 changed files with 15 additions and 18 deletions

View File

@ -4,6 +4,10 @@
import { template } from '../src/html';
import './test-utils';
function compareHTML(nodes: ChildNode[], expected: string) {
expect(nodes.map((n: any) => n.outerHTML).join('')).toEqual(expected);
}
describe('basic templating', () => {
it('should produce a node', () => {
const x = document.createElement('x');
@ -12,36 +16,29 @@ describe('basic templating', () => {
});
it('should substitute a string', () => {
const x = document.createElement('x');
const y = 'abc';
x.appendChild(document.createTextNode('abc'));
expect('' + template()`<x>${y}</x>`).toEqual('' + [x]);
compareHTML(template()`<x>${y}</x>`, '<x>abc</x>');
});
it('should substitute a node', () => {
const x = document.createElement('x');
const z = document.createElement('z');
z.appendChild(document.createTextNode('q'));
x.appendChild(z);
const y = template()`<z>q</z>`;
expect('' + template()`<x>${y}</x>`).toEqual('' + [x]);
compareHTML(template()`<x>${y}</x>`, '<x><z>q</z></x>');
});
it('should substitute an array of strings', () => {
const x = document.createElement('x');
const y = ['abc', 'def'];
x.appendChild(document.createTextNode('abcdef'));
expect('' + template()`<x>${y}</x>`).toEqual('' + [x]);
compareHTML(template()`<x>${y}</x>`, '<x>abcdef</x>');
});
it('should substitute an array of strings and nodes', () => {
const x = document.createElement('x');
const y = ['abc', template()`<z>q</z>`, 'def'];
const z = document.createElement('z');
z.appendChild(document.createTextNode('q'));
x.appendChild(document.createTextNode('abc'));
x.appendChild(z);
x.appendChild(document.createTextNode('def'));
expect('' + template()`<x>${y}</x>`).toEqual('' + [x]);
compareHTML(template()`<x>${y}</x>`, '<x>abc<z>q</z>def</x>');
});
it('should substitute into attributes', () => {
const v = () => 'aaa';
const ps = [() => '123', () => '234'];
compareHTML(template()`<q><x t="${v()}">${ps.map(p => p())}</x></q>`,
'<q><x t="aaa">123234</x></q>');
});
});