forked from developit/htm
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpreact.test.mjs
More file actions
135 lines (117 loc) · 4.71 KB
/
Copy pathpreact.test.mjs
File metadata and controls
135 lines (117 loc) · 4.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/**
* Copyright 2018 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { html, Component, render } from 'htm/preact';
describe('htm/preact', () => {
const scratch = document.createElement('div');
document.body.appendChild(scratch);
class Foo extends Component {
render({ name }, { count = 0 }) {
return html`
<div class="foo">
<h1>Name: ${name}</h1>
<p>Hello world!</p>
<button onClick=${() => this.setState({ count: ++count })}>Click Me</button>
<pre>Count: ${count}</pre>
xml-style end tags:
<${Bar} hello />
explicit end tags:
<${Bar} hello>some children (count=${count})</${Bar}>
implicit end tags: (${'<//>'})
<${Bar} hello>some children (count=${count})<//>
some text at the end
</div>
`;
}
}
const Bar = ({ hello, children }) => html`
<div>
Value of hello: ${hello + ''}
${children}
</div>
`;
const Baz = ({ myCaseSensitiveProp }) => html`<div>${myCaseSensitiveProp}</div>`;
const fullHtml = '<div class="foo"><h1>Name: jason</h1><p>Hello world!</p><button>Click Me</button><pre>Count: 0</pre>xml-style end tags:<div>Value of hello: true</div>explicit end tags:<div>Value of hello: truesome children (count=0)</div>implicit end tags: (<//>)<div>Value of hello: truesome children (count=0)</div>some text at the end</div>';
test('initial render', () => {
render(html`<${Foo} name=jason />`, scratch);
expect(scratch.innerHTML).toBe(fullHtml);
});
test('rerenders in-place', () => {
render(html`<${Foo} name=tom />`, scratch);
expect(scratch.innerHTML).toBe(fullHtml.replace('jason', 'tom'));
});
test('state update re-renders', done => {
document.querySelector('button').click();
document.querySelector('button').click();
setTimeout(() => {
expect(scratch.innerHTML).toBe(fullHtml.replace('jason', 'tom').replace(/\b0\b/g, '2'));
done();
});
});
test('preserves case', () => {
scratch.textContent = '';
render(html`<${Baz} myCaseSensitiveProp="Yay!" />`, scratch);
expect(scratch.innerHTML).toBe('<div>Yay!</div>');
});
test('object spreads', () => {
scratch.textContent = '';
const props = { a: 1, b: 2, c: 3 };
const other = { d: 4, e: 5, f: 6 };
render(html`<div ...${props} />`, scratch);
expect(scratch.innerHTML).toBe(`<div a="1" b="2" c="3"></div>`);
scratch.innerHTML = '';
render(html`<div is-before="blah" ...${props} />`, scratch);
expect(scratch.innerHTML).toBe(`<div is-before="blah" a="1" b="2" c="3"></div>`);
scratch.innerHTML = '';
render(html`<div ...${props} is-after />`, scratch);
expect(scratch.innerHTML).toBe(`<div a="1" b="2" c="3" is-after="true"></div>`);
expect(JSON.stringify(props)).toBe(`{"a":1,"b":2,"c":3}`);
scratch.innerHTML = '';
render(html`<div is-before ...${props} is-after="blah" />`, scratch);
expect(scratch.innerHTML).toBe(`<div is-before="true" a="1" b="2" c="3" is-after="blah"></div>`);
scratch.innerHTML = '';
render(html`<div ...${props} ...${other} />`, scratch);
expect(scratch.innerHTML).toBe(`<div a="1" b="2" c="3" d="4" e="5" f="6"></div>`);
scratch.innerHTML = '';
});
// describe('performance', () => {
// test('creation', () => {
// const results = [];
// const Foo = ({ name }) => html`<div class="foo">${name}</div>`;
// const statics = [
// '\n<div id=app data-loading="true">\n\t<h1>Hello World</h1>\n\t<ul class="items" id=', '>\n\t',
// '\n\t</ul>\n\t\n\t<', ' name="foo" />\n\t<', ' name="other">content</', '>\n\n</div>'
// ];
// let count = 0;
// function go(count) {
// return html(
// statics.concat(['count:', count]),
// `id${count}`,
// html(['<li data-id="','">', '</li>'], 'i'+count, 'some text #'+count),
// Foo, Foo, Foo
// );
// }
// let now = performance.now();
// const start = now;
// while ((now = performance.now()) < start+2000) {
// count++;
// if (results.push(String(go(count)))===10) results.length = 0;
// }
// const elapsed = now - start;
// const hz = count / elapsed * 1000;
// // eslint-disable-next-line no-console
// console.log(`Creation: ${hz|0}/s, average: ${elapsed/count.toFixed(4)}ms`);
// expect(elapsed).toBeGreaterThan(999);
// expect(hz).toBeGreaterThan(10);
// });
// });
});