projectwallace · bartveneman · Feb 16, 2020 · Feb 16, 2020 · Feb 16, 2020
diff --git a/test/css-in-js.html b/test/css-in-js.html
@@ -7,11 +7,6 @@
 			content="width=device-width,initial-scale=1,shrink-to-fit=no"
 		/>
 		<title>React App</title>
-		<style>
-			body {
-				color: red;
-			}
-		</style>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/test/fixture.css b/test/fixture.css
@@ -1,3 +1 @@
-body {
-	color: teal;
-}
+.fixture { color: red; }
diff --git a/test/index.js b/test/index.js
@@ -8,121 +8,60 @@ const extractCss = require('..')
 let server
 const fixture = readFileSync(resolve(__dirname, 'fixture.css'), 'utf8')
 
+function staticFile(req, res) {
+	const fileContents = readFileSync(resolve(__dirname, req.path.slice(1)), 'utf8')
+	res.send(fileContents)
+}
+
 test.before(async () => {
 	server = await createTestServer()
 
-	server.get('/fixture.css', (req, res) => {
-		res.send(fixture)
-	})
+	server.get('/fixture.css', staticFile)
 })
 
 test.after(async () => {
 	await server.close()
 })
 
-test('it fetches css from a page with CSS in a server generated <link> inside the <head>', async t => {
-	const url = '/server-link-head'
-	server.get(url, (req, res) => {
-		res.send(`
-			<!doctype html>
-			<html>
-				<head>
-					<link rel="stylesheet" href="fixture.css" />
-				</head>
-			</html>
-		`)
-	})
-
-	const actual = await extractCss(server.url + url)
+test('it finds css in a <link> tag - HTML', async t => {
+	server.get('/link-tag-html.html', staticFile)
+	const actual = await extractCss(server.url + '/link-tag-html.html')
 	const expected = fixture
-
 	t.is(actual, expected)
 })
 
-test('it fetches css from a page with CSS in server generated <style> inside the <head>', async t => {
-	const url = '/server-style-head'
-	server.get(url, (req, res) => {
-		res.send(`
-			<!doctype html>
-			<style>${fixture}</style>
-		`)
-	})
-
-	const actual = await extractCss(server.url + url)
-	const expected = 'body { color: teal; }'
-
-	t.is(actual, expected)
-})
-
-test('it finds JS generated <link /> CSS', async t => {
-	const path = '/js-generated-link'
-	const cssInJsExampleHtml = readFileSync(
-		resolve(__dirname, 'js-create-link-element.html'),
-		'utf8'
-	)
-
-	server.get(path, (req, res) => {
-		res.send(cssInJsExampleHtml)
-	})
-
-	const actual = await extractCss(server.url + path)
+test('it finds css in a <link> tag - JS', async t => {
+	server.get('/link-tag-js.html', staticFile)
+	const actual = await extractCss(server.url + '/link-tag-js.html')
 	const expected = fixture
-
 	t.is(actual, expected)
 })
 
-test('it finds JS generated <style /> CSS', async t => {
-	const url = '/js-generated-js-style-tag'
-	const cssInJsExampleHtml = readFileSync(
-		resolve(__dirname, 'js-create-style-element.html'),
-		'utf8'
-	)
-	server.get(url, (req, res) => {
-		res.send(cssInJsExampleHtml)
-	})
-
-	const actual = await extractCss(server.url + url, {waitUntil: 'load'})
-	const expected = 'body { color: teal; }'
-
+test('it finds css in a <style> tag - HTML', async t => {
+	server.get('/style-tag-html.html', staticFile)
+	const actual = await extractCss(server.url + '/style-tag-html.html')
+	const expected = '.fixture { color: red; }'
 	t.is(actual, expected)
 })
 
-test('it finds css-in-js, like Styled Components', async t => {
-	const url = '/css-in-js'
-	const cssInJsExampleHtml = readFileSync(
-		resolve(__dirname, 'css-in-js.html'),
-		'utf8'
-	)
-	server.get(url, (req, res) => {
-		res.send(cssInJsExampleHtml)
-	})
-
-	const actual = await extractCss(server.url + url, {waitUntil: 'load'})
-	const expected = 'body { color: red; }.bcMPWx { color: blue; }'
-
+test('it finds css in a <style> tag - JS', async t => {
+	server.get('/style-tag-js.html', staticFile)
+	const actual = await extractCss(server.url + '/style-tag-js.html')
+	const expected = '.fixture { color: red; }'
 	t.is(actual, expected)
 })
 
-test('it combines server generated <link> and <style> tags with client side created <link> and <style> tags', async t => {
-	const path = '/kitchen-sink'
-	const kitchenSinkExample = readFileSync(
-		resolve(__dirname, 'kitchen-sink.html'),
-		'utf8'
-	)
-	server.get(path, (req, res) => {
-		res.send(kitchenSinkExample)
-	})
-
-	const actual = await extractCss(server.url + path)
-
-	t.true(actual.includes('content: "js-style";'))
-	t.true(actual.includes('content: "server-style";'))
-	t.true(actual.includes('body {'))
-	t.true(actual.includes('color: teal;'))
-	t.snapshot(actual)
+test('it finds css-in-js', async t => {
+	server.get('/css-in-js.html', staticFile)
+	const actual = await extractCss(server.url + '/css-in-js.html')
+	const expected = '.bcMPWx { color: blue; }'
+	t.is(actual, expected)
 })
 
 test('it rejects if the url has an HTTP error status', async t => {
+	server.get('/404-page', (req, res) => {
+		res.status(404).send()
+	})
 	const urlWith404 = server.url + '/404-page'
 	await t.throwsAsync(extractCss(urlWith404), {
 		message: `There was an error retrieving CSS from ${urlWith404}.\n\tHTTP status code: 404 (Not Found)`

diff --git a/test/inline-style-html.html b/test/inline-style-html.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<h1 style="color: red; font-size: 12px;">Inline style in HTML</h1>
+</body>
+</html>
diff --git a/test/inline-style-js.html b/test/inline-style-js.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<h1>Inline styles with JS</h1>
+
+	<script>
+		var element = document.querySelector('h1')
+
+		// Set multiple styles in a single statement
+		element.style.cssText = 'color: red; font-size: 12px;';
+
+		// Or ... this overrides ignore the previous line
+		// element.setAttribute('style', 'border-color: blue; border-width: 1px;');
+
+		// Set a single style property
+		element.style.borderStyle = 'solid';
+	</script>
+</body>
+</html>
diff --git a/test/js-create-link-element.html b/test/js-create-link-element.html
diff --git a/test/js-create-style-element.html b/test/js-create-style-element.html
diff --git a/test/kitchen-sink.html b/test/kitchen-sink.html
diff --git a/test/link-tag-html.html b/test/link-tag-html.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+	<link rel="stylesheet" href="/fixture.css">
+</head>
+<body>
+	<h1 class="fixture">&lt;link> tag in HTML</h1>
+</body>
+</html>
diff --git a/test/link-tag-js.html b/test/link-tag-js.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+	<title>Document</title>
+	</head>
+
+	<body>
+		<h1 class="fixture">&lt;link> tag in JS</h1>
+		<script>
+			var style = document.createElement('link')
+			style.href = 'fixture.css'
+			style.rel = 'stylesheet'
+			document.head.appendChild(style)
+		</script>
+	</body>
+</html>
diff --git a/test/style-tag-html.html b/test/style-tag-html.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+	<style>
+		.fixture { color: red; }
+	</style>
+</head>
+<body>
+	<h1 class="fixture">&lt;style> tag in HTML</h1>
+</body>
+</html>
diff --git a/test/style-tag-js.html b/test/style-tag-js.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	<h1 class="fixture">&lt;style> tag in JS</h1>
+	<script>
+		var style = document.createElement('style')
+		style.textContent = '.fixture { color: red; }'
+		document.body.appendChild(style)
+	</script>
+</body>
+</html>