This repository has been archived by the owner on Jun 27, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
render.test.tsx
191 lines (160 loc) · 4.71 KB
/
render.test.tsx
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
// Copyright 2023 Samuel Kopp. All rights reserved. Apache-2.0 license.
/** @jsx h */
import { DOMParser } from 'dom'
import { Fragment, h, VNode } from 'preact'
import { assert, assertEquals } from 'std/assert/mod.ts'
import { z } from 'zod'
import cheetah, { Renderer } from '../mod.ts'
const Document = ({ children }: { children: VNode }) => {
return (
<html>
<head>
<title>This is a document!</title>
</head>
<body>
{children}
</body>
</html>
)
}
const Styled = () => {
return (
<Document>
<h3 class='text-sm italic' id='styled'>
styled <code class='font-mono'>h3</code> component
</h3>
</Document>
)
}
const Unstyled = () => {
return (
<Document>
<h3 id='unstyled'>
unstyled <code>h3</code> component
</h3>
</Document>
)
}
const MetaTagsWithoutWrappers = () => {
return (
<Fragment>
<title>This is a document!</title>
<meta charSet='utf-8' />
<h1>Hello world!</h1>
</Fragment>
)
}
const app = new cheetah()
const { render } = new Renderer()
app.get('/render', {
query: z.object({
type: z.union([
z.literal('styled'),
z.literal('unstyled'),
z.literal('meta-tags-without-wrappers'),
]),
}),
}, (c) => {
const type = c.req.query.type
if (type === 'meta-tags-without-wrappers') {
return render(c, <MetaTagsWithoutWrappers />)
}
render(
c,
type === 'styled' ? <Styled /> : <Unstyled />,
)
})
Deno.test('render', async (test) => {
await test.step('Twind styles are applied to the resulting HTML correctly.', async () => {
const renderResponse = await app.fetch(
new Request('http://localhost/render?type=styled'),
)
const htmlText = await renderResponse.text()
const document = new DOMParser().parseFromString(
htmlText,
'text/html',
)
assert(document)
assert([...document.getElementsByTagName('style')].length === 1)
assertEquals(
document.getElementById('styled')?.innerText,
'styled h3 component',
)
assertEquals(
renderResponse.headers.get('content-type'),
'text/html; charset=utf-8',
)
})
const renderResponse = await app.fetch(
new Request('http://localhost/render?type=unstyled'),
)
const htmlText = await renderResponse.text()
const document = new DOMParser().parseFromString(
htmlText,
'text/html',
)
assert(document)
await test.step('No empty style tag is injected if no Twind styles are utilised.', () => {
assertEquals(
[...document.getElementsByTagName('style')].length,
0,
)
assertEquals(
document.getElementById('unstyled')?.innerText,
'unstyled h3 component',
)
assertEquals(
renderResponse.headers.get('content-type'),
'text/html; charset=utf-8',
)
})
await test.step('Head meta tags are able to be injected into the HTML output properly.', () => {
const headElementsInDocument = [...document.getElementsByTagName('head')]
assert(headElementsInDocument.length === 1)
const headElementInDocument = headElementsInDocument.at(0)
assert(headElementInDocument)
assert(
[...headElementInDocument.children].find((childNode) =>
childNode.tagName === 'TITLE' &&
childNode.textContent === 'This is a document!'
),
)
})
await test.step('Even without the essential html, head and body tags in the JSX input, the JSX input is injected correctly into the appropriate places.', async () => {
const renderResponse = await app.fetch(
new Request('http://localhost/render?type=meta-tags-without-wrappers'),
)
const htmlText = await renderResponse.text()
const document = new DOMParser().parseFromString(
htmlText,
'text/html',
)
assert(document)
const { documentElement } = document
assert(documentElement)
const headElementsInDocument = documentElement.getElementsByTagName('head')
const [headElement] = headElementsInDocument
assert(headElement)
const titleElementInDocument = headElement.getElementsByTagName('title').at(
0,
)
assert(
titleElementInDocument &&
titleElementInDocument.textContent === 'This is a document!',
)
const metaTagsInDocument = documentElement.getElementsByTagName('meta')
assert(
metaTagsInDocument.find((metaTag) =>
metaTag.getAttribute('charset') === 'utf-8'
),
)
const [bodyElement] = documentElement.getElementsByTagName('body')
assert(bodyElement)
const [headingElementInBody] = [...bodyElement.children]
assert(
headingElementInBody !== undefined &&
headingElementInBody.tagName === 'H1' &&
headingElementInBody.textContent === 'Hello world!',
)
})
})