Skip to content

Commit 5576b77

Browse files
bartvenemanbartveneman
authored
fix test for custom browser option
2 parents 5c1cbc9 + ff43c5c commit 5576b77

File tree

7 files changed

+98
-142
lines changed

7 files changed

+98
-142
lines changed

‎test/css-in-js.html

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,32 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>CodePen - CSS-in-JS example for extract-css-core unit tests</title>
2+
<meta charset="UTF-8" />
3+
<title>CodePen - CSS-in-JS example for extract-css-core unit tests</title>
64

7-
<style>
8-
html {
9-
color: #f00;
10-
}
11-
</style>
12-
</head>
5+
<style>
6+
html {
7+
color: #f00;
8+
}
9+
</style>
1310

14-
<body translate="no">
15-
<div id="app"></div>
11+
<div id="app"></div>
1612

17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
19-
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
15+
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
2016

21-
<script id="rendered-js">
22-
const Title = styled.h1`
23-
color: blue;
24-
font-family: sans-serif;
25-
font-size: 3em;
26-
`
17+
<script id="rendered-js">
18+
const Title = styled.h1`
19+
color: blue;
20+
font-family: sans-serif;
21+
font-size: 3em;
22+
`
2723

28-
const App = () => {
29-
return React.createElement(Title, null, 'Title')
30-
}
24+
const App = () => {
25+
return React.createElement(Title, null, 'Title')
26+
}
3127

32-
ReactDOM.render(
33-
React.createElement(App, null),
34-
document.querySelector('#app')
35-
)
36-
</script>
37-
</body>
38-
</html>
28+
ReactDOM.render(
29+
React.createElement(App, null),
30+
document.querySelector('#app')
31+
)
32+
</script>

‎test/index.js

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,9 @@ test('it fetches css from a page with CSS in a server generated <link> inside th
2626
const url = '/server-link-head'
2727
server.get(url, (req, res) => {
2828
res.send(`
29-
<!doctype>
30-
<html>
31-
<head>
32-
<link rel="stylesheet" href="fixture.css" />
33-
</head>
34-
</html>
35-
`)
29+
<!doctype html>
30+
<link rel="stylesheet" href="fixture.css" />
31+
`)
3632
})
3733

3834
const actual = await extractCss(server.url + url)
@@ -44,13 +40,9 @@ test('it fetches css from a page with CSS in server generated <style> inside the
4440
const url = '/server-style-head'
4541
server.get(url, (req, res) => {
4642
res.send(`
47-
<!doctype>
48-
<html>
49-
<head>
50-
<style>${expected.trim()}</style>
51-
</head>
52-
</html>
53-
`)
43+
<!doctype html>
44+
<style>${expected.trim()}</style>
45+
`)
5446
})
5547

5648
const actual = await extractCss(server.url + url)
@@ -104,6 +96,7 @@ test('it combines server generated <link> and <style> tags with client side crea
10496

10597
t.snapshot(actual)
10698
t.true(actual.includes('counter-increment: 2;'))
99+
t.true(actual.includes('counter-increment: 3;'))
107100
})
108101

109102
test('it rejects if the url has an HTTP error status', async t => {
@@ -119,20 +112,24 @@ test('it rejects on an invalid url', async t => {
119112

120113
test('it accepts a browser override for usage with other browsers', async t => {
121114
const path = '/browser-override'
122-
const kitchenSinkExample = readFileSync(
123-
resolve(__dirname, 'kitchen-sink.html'),
124-
'utf8'
125-
)
126115
server.get(path, (req, res) => {
127-
res.send(kitchenSinkExample)
116+
res.send(`
117+
<!doctype html>
118+
<style>
119+
body::before {
120+
content: ${req.headers['user-agent']};
121+
}
122+
</style>
123+
`)
128124
})
129125
const customBrowser = await puppeteerCore.launch({
130-
executablePath: chromium.path
126+
executablePath: chromium.path,
127+
args: ["--user-agent='Extract CSS Core'"]
131128
})
132129
const actual = await extractCss(server.url + path, {customBrowser})
133130

134131
t.snapshot(actual)
135-
t.true(actual.includes('counter-increment: 2;'))
132+
t.true(actual.includes("content: 'Extract CSS Core';"))
136133
})
137134

138135
test('it rejects on an invalid customBrowser option', async t => {

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
<!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-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Document</title>
8-
</head>
9-
<body>
10-
<h1>Title</h1>
2+
<meta charset="UTF-8" />
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
5+
<title>Document</title>
116

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>
7+
<h1>Title</h1>
8+
9+
<script>
10+
var style = document.createElement('link')
11+
style.href = 'fixture.css'
12+
style.rel = 'stylesheet'
13+
document.head.appendChild(style)
14+
</script>

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

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
<!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-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Document</title>
8-
</head>
9-
<body>
10-
<h1>Title</h1>
2+
<meta charset="UTF-8" />
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
5+
<title>Document</title>
116

12-
<script>
13-
var style = document.createElement('style')
14-
style.textContent = 'body { color: teal; }'
15-
document.body.appendChild(style)
16-
</script>
17-
</body>
18-
</html>
7+
<h1>Title</h1>
8+
9+
<script>
10+
var style = document.createElement('style')
11+
style.textContent = 'body { color: teal; }'
12+
document.body.appendChild(style)
13+
</script>

‎test/kitchen-sink.html

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
11
<!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-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Document</title>
2+
<meta charset="UTF-8" />
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
5+
<title>Document</title>
86

9-
<!-- Server generated link -->
10-
<link rel="stylesheet" href="fixture.css" />
7+
<!-- Server generated link -->
8+
<link rel="stylesheet" href="fixture.css" />
119

12-
<!-- Server generated style -->
13-
<style>
14-
.server-style {
15-
counter-increment: 2;
16-
}
17-
</style>
18-
</head>
19-
<body>
20-
<h1>Title</h1>
10+
<!-- Server generated style -->
11+
<style>
12+
.server-style {
13+
counter-increment: 2;
14+
}
15+
</style>
2116

22-
<script>
23-
// Client generated style
24-
var style = document.createElement('style')
25-
style.textContent = '.js-style { counter-increment: 3; }'
26-
document.body.appendChild(style)
17+
<h1>Title</h1>
2718

28-
// Client generated link
29-
var style = document.createElement('link')
30-
style.href = 'fixture.css'
31-
style.rel = 'stylesheet'
32-
document.head.appendChild(style)
33-
</script>
34-
</body>
35-
</html>
19+
<script>
20+
// Client generated style
21+
var style = document.createElement('style')
22+
style.textContent = '.js-style { counter-increment: 3; }'
23+
document.body.appendChild(style)
24+
25+
// Client generated link
26+
var style = document.createElement('link')
27+
style.href = 'fixture.css'
28+
style.rel = 'stylesheet'
29+
document.head.appendChild(style)
30+
</script>

‎test/snapshots/index.js.md

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,15 @@ The actual snapshot is saved in `index.js.snap`.
44

55
Generated by [AVA](https://ava.li).
66

7-
## it combines server generated <link> and <style> tags with client side created <link> and <style> tags
8-
9-
> Snapshot 1
10-
11-
`body {␊
12-
color: teal;␊
13-
}␊
14-
body {␊
15-
color: teal;␊
16-
}␊
17-
.server-style {␊
18-
counter-increment: 2;␊
19-
}.js-style { counter-increment: 3; }`
20-
21-
## it finds CSS-in-JS (styled components)
7+
## it accepts a browser override for usage with other browsers
228

239
> Snapshot 1
2410
25-
`body {␊
26-
color: teal;␊
27-
}␊
28-
body {␊
29-
color: teal;␊
30-
}␊
31-
.server-style {␊
32-
counter-increment: 2;␊
33-
}.js-style { counter-increment: 3; }`
11+
`body::before {␊
12+
content: 'Extract CSS Core';␊
13+
}`
3414

35-
## it accepts a browser override for usage with other browsers
15+
## it combines server generated <link> and <style> tags with client side created <link> and <style> tags
3616

3717
> Snapshot 1
3818
@@ -43,5 +23,5 @@ Generated by [AVA](https://ava.li).
4323
color: teal;␊
4424
}␊
4525
.server-style {␊
46-
counter-increment: 2;␊
47-
}.js-style { counter-increment: 3; }`
26+
counter-increment: 2;␊
27+
}.js-style { counter-increment: 3; }`

‎test/snapshots/index.js.snap

-11 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)