-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathtest.js
121 lines (102 loc) · 2.07 KB
/
test.js
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
import test from 'node:test'
import assert from 'node:assert'
import { Tonic } from './index.js'
const sleep = t => new Promise(resolve => setTimeout(resolve, t))
class TimeStamp extends Tonic {
render () {
return this.html`
<time>
Tue Jan 26 22:18:05 CET 2021
</time>
`
}
}
class HelloWorld extends Tonic {
stylesheet () {
return `
hello-world {
border: ${this.props.border};
}
`
}
async click () {
//
// Won't do anything on the server,
// will work if rendered in the browser.
//
}
async render () {
await sleep(200)
const {
greetings,
lang
} = this.props
return this.html`
<h1>
${greetings[lang]}
<time-stamp></time-stamp>
</h1>
`
}
}
class MainComponent extends Tonic {
constructor (props) {
super()
this.props = props
}
render () {
const greetings = { en: 'Hello' }
return this.html`
<header>
${String(this.props.timestamp)}
</header>
<main>
<hello-world
id="hello"
lang="en"
border="1px solid red"
greetings="${greetings}"
>
</hello-world>
</main>
<footer>
</footer>
`
}
}
Tonic.add(TimeStamp)
Tonic.add(HelloWorld)
Tonic.add(MainComponent)
const c = new MainComponent({
timestamp: 1611695921286
})
test('Simple ssr rendering', async (t) => {
const expected = `<html><head><style>
hello-world {
border: 1px solid red;
}
</style></head><body><header>
1611695921286
</header>
<main>
<hello-world id="hello" lang="en" border="1px solid red" greetings="__ssr__tonic0__">
<h1>
Hello
<time-stamp>
<time>
Tue Jan 26 22:18:05 CET 2021
</time>
</time-stamp>
</h1>
</hello-world>
</main>
<footer>
</footer>
</body></html>`
const actual = await c.preRender()
assert.strictEqual(
actual.replace(/\s\s+/g, ' '),
expected.replace(/\s\s+/g, ' '),
'Renders correctly'
)
})