Skip to content

Commit 8d70f62

Browse files
bartvenemanbartveneman
authored
improve test file structure (#21)
1 parent 8daed2f commit 8d70f62

12 files changed

+125
-155
lines changed

‎test/css-in-js.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
content="width=device-width,initial-scale=1,shrink-to-fit=no"
88
/>
99
<title>React App</title>
10-
<style>
11-
body {
12-
color: red;
13-
}
14-
</style>
1510
</head>
1611
<body>
1712
<noscript>You need to enable JavaScript to run this app.</noscript>

‎test/fixture.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
body {
2-
color: teal;
3-
}
1+
.fixture { color: red; }

‎test/index.js

Lines changed: 28 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,121 +8,60 @@ const extractCss = require('..')
88
let server
99
const fixture = readFileSync(resolve(__dirname, 'fixture.css'), 'utf8')
1010

11+
function staticFile(req, res) {
12+
const fileContents = readFileSync(resolve(__dirname, req.path.slice(1)), 'utf8')
13+
res.send(fileContents)
14+
}
15+
1116
test.before(async () => {
1217
server = await createTestServer()
1318

14-
server.get('/fixture.css', (req, res) => {
15-
res.send(fixture)
16-
})
19+
server.get('/fixture.css', staticFile)
1720
})
1821

1922
test.after(async () => {
2023
await server.close()
2124
})
2225

23-
test('it fetches css from a page with CSS in a server generated <link> inside the <head>', async t => {
24-
const url = '/server-link-head'
25-
server.get(url, (req, res) => {
26-
res.send(`
27-
<!doctype html>
28-
<html>
29-
<head>
30-
<link rel="stylesheet" href="fixture.css" />
31-
</head>
32-
</html>
33-
`)
34-
})
35-
36-
const actual = await extractCss(server.url + url)
26+
test('it finds css in a <link> tag - HTML', async t => {
27+
server.get('/link-tag-html.html', staticFile)
28+
const actual = await extractCss(server.url + '/link-tag-html.html')
3729
const expected = fixture
38-
3930
t.is(actual, expected)
4031
})
4132

42-
test('it fetches css from a page with CSS in server generated <style> inside the <head>', async t => {
43-
const url = '/server-style-head'
44-
server.get(url, (req, res) => {
45-
res.send(`
46-
<!doctype html>
47-
<style>${fixture}</style>
48-
`)
49-
})
50-
51-
const actual = await extractCss(server.url + url)
52-
const expected = 'body { color: teal; }'
53-
54-
t.is(actual, expected)
55-
})
56-
57-
test('it finds JS generated <link /> CSS', async t => {
58-
const path = '/js-generated-link'
59-
const cssInJsExampleHtml = readFileSync(
60-
resolve(__dirname, 'js-create-link-element.html'),
61-
'utf8'
62-
)
63-
64-
server.get(path, (req, res) => {
65-
res.send(cssInJsExampleHtml)
66-
})
67-
68-
const actual = await extractCss(server.url + path)
33+
test('it finds css in a <link> tag - JS', async t => {
34+
server.get('/link-tag-js.html', staticFile)
35+
const actual = await extractCss(server.url + '/link-tag-js.html')
6936
const expected = fixture
70-
7137
t.is(actual, expected)
7238
})
7339

74-
test('it finds JS generated <style /> CSS', async t => {
75-
const url = '/js-generated-js-style-tag'
76-
const cssInJsExampleHtml = readFileSync(
77-
resolve(__dirname, 'js-create-style-element.html'),
78-
'utf8'
79-
)
80-
server.get(url, (req, res) => {
81-
res.send(cssInJsExampleHtml)
82-
})
83-
84-
const actual = await extractCss(server.url + url, {waitUntil: 'load'})
85-
const expected = 'body { color: teal; }'
86-
40+
test('it finds css in a <style> tag - HTML', async t => {
41+
server.get('/style-tag-html.html', staticFile)
42+
const actual = await extractCss(server.url + '/style-tag-html.html')
43+
const expected = '.fixture { color: red; }'
8744
t.is(actual, expected)
8845
})
8946

90-
test('it finds css-in-js, like Styled Components', async t => {
91-
const url = '/css-in-js'
92-
const cssInJsExampleHtml = readFileSync(
93-
resolve(__dirname, 'css-in-js.html'),
94-
'utf8'
95-
)
96-
server.get(url, (req, res) => {
97-
res.send(cssInJsExampleHtml)
98-
})
99-
100-
const actual = await extractCss(server.url + url, {waitUntil: 'load'})
101-
const expected = 'body { color: red; }.bcMPWx { color: blue; }'
102-
47+
test('it finds css in a <style> tag - JS', async t => {
48+
server.get('/style-tag-js.html', staticFile)
49+
const actual = await extractCss(server.url + '/style-tag-js.html')
50+
const expected = '.fixture { color: red; }'
10351
t.is(actual, expected)
10452
})
10553

106-
test('it combines server generated <link> and <style> tags with client side created <link> and <style> tags', async t => {
107-
const path = '/kitchen-sink'
108-
const kitchenSinkExample = readFileSync(
109-
resolve(__dirname, 'kitchen-sink.html'),
110-
'utf8'
111-
)
112-
server.get(path, (req, res) => {
113-
res.send(kitchenSinkExample)
114-
})
115-
116-
const actual = await extractCss(server.url + path)
117-
118-
t.true(actual.includes('content: "js-style";'))
119-
t.true(actual.includes('content: "server-style";'))
120-
t.true(actual.includes('body {'))
121-
t.true(actual.includes('color: teal;'))
122-
t.snapshot(actual)
54+
test('it finds css-in-js', async t => {
55+
server.get('/css-in-js.html', staticFile)
56+
const actual = await extractCss(server.url + '/css-in-js.html')
57+
const expected = '.bcMPWx { color: blue; }'
58+
t.is(actual, expected)
12359
})
12460

12561
test('it rejects if the url has an HTTP error status', async t => {
62+
server.get('/404-page', (req, res) => {
63+
res.status(404).send()
64+
})
12665
const urlWith404 = server.url + '/404-page'
12766
await t.throwsAsync(extractCss(urlWith404), {
12867
message: `There was an error retrieving CSS from ${urlWith404}.\n\tHTTP status code: 404 (Not Found)`

‎test/inline-style-html.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<h1 style="color: red; font-size: 12px;">Inline style in HTML</h1>
10+
</body>
11+
</html>

‎test/inline-style-js.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<h1>Inline styles with JS</h1>
10+
11+
<script>
12+
var element = document.querySelector('h1')
13+
14+
// Set multiple styles in a single statement
15+
element.style.cssText = 'color: red; font-size: 12px;';
16+
17+
// Or ... this overrides ignore the previous line
18+
// element.setAttribute('style', 'border-color: blue; border-width: 1px;');
19+
20+
// Set a single style property
21+
element.style.borderStyle = 'solid';
22+
</script>
23+
</body>
24+
</html>

‎test/js-create-link-element.html

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎test/js-create-style-element.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎test/kitchen-sink.html

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎test/link-tag-html.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/fixture.css">
8+
</head>
9+
<body>
10+
<h1 class="fixture">&lt;link> tag in HTML</h1>
11+
</body>
12+
</html>

‎test/link-tag-js.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<h1 class="fixture">&lt;link> tag in JS</h1>
12+
<script>
13+
var style = document.createElement('link')
14+
style.href = 'fixture.css'
15+
style.rel = 'stylesheet'
16+
document.head.appendChild(style)
17+
</script>
18+
</body>
19+
</html>

‎test/style-tag-html.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<style>
8+
.fixture { color: red; }
9+
</style>
10+
</head>
11+
<body>
12+
<h1 class="fixture">&lt;style> tag in HTML</h1>
13+
</body>
14+
</html>

‎test/style-tag-js.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
<h1 class="fixture">&lt;style> tag in JS</h1>
10+
<script>
11+
var style = document.createElement('style')
12+
style.textContent = '.fixture { color: red; }'
13+
document.body.appendChild(style)
14+
</script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)