test: Increase build test suite coverage

preactjs · Mar 22, 2022 · 9dbc936 · 9dbc936
1 parent 92db132
commit 9dbc936
Show file tree

Hide file tree

Showing 46 changed files with 486 additions and 189 deletions.
diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
diff --git a/packages/cli/tests/create.test.js b/packages/cli/tests/create.test.js
@@ -1,4 +1,4 @@
-const { readFileSync } = require('fs');
+const { readFile } = require('fs').promises;
 const { relative, resolve } = require('path');
 const { create } = require('./lib/cli');
 const { expand } = require('./lib/utils');
@@ -19,7 +19,7 @@ describe('preact create', () => {
 		let dir = await create('netlify');
 
 		const templateFilePath = resolve(__dirname, dir, 'src', 'template.html');
-		const template = readFileSync(templateFilePath).toString('utf8');
+		const template = await readFile(templateFilePath, 'utf8');
 
 		expect(template.includes('twitter:card')).toEqual(true);
 	});
@@ -28,12 +28,13 @@ describe('preact create', () => {
 		let dir = await create('simple');
 
 		const templateFilePath = resolve(__dirname, dir, 'src', 'template.html');
-		const template = readFileSync(templateFilePath).toString('utf8');
+		const template = await readFile(templateFilePath, 'utf8');
 
 		expect(template.includes('apple-touch-icon')).toEqual(true);
 	});
 
 	it('should fail given an invalid name', async () => {
+		// @ts-ignore
 		const exit = jest.spyOn(process, 'exit').mockImplementation(() => {});
 		await create('simple', '*()@!#!$-Invalid-Name');
 

diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
@@ -54,23 +54,6 @@ exports.sass = `
 </body>
 `;
 
-exports.sideEffectCss = `
-<head>
-	<meta charset="utf-8">
-	<title>side-effect-css<\\/title>
-	<meta name="viewport" content="width=device-width,initial-scale=1">
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<link rel="apple-touch-icon" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
-	<link rel="manifest" href="\\/manifest\\.json">
-	<style>h1{background:#673ab8}<\\/style>
-	<link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"only x\\" onload=\\"this.media='all'\\">
-	<noscript>
-		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
-	</noscript>
-<\\/head>
-`;
-
 exports.prerender = {};
 
 exports.prerender.heads = {};
@@ -127,10 +110,10 @@ exports.prerender.heads.custom = `
 
 exports.preload = {};
 
-exports.preload.head = `
+exports.preload.true = `
 <head>
 	<meta charset=\\"utf-8\\">
-	<title>preact-prerender<\\/title>
+	<title>preact-preload-chunks<\\/title>
 	<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
 	<meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
 	<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
@@ -147,6 +130,23 @@ exports.preload.head = `
 </head>
 `;
 
+exports.preload.false = `
+<head>
+	<meta charset=\\"utf-8\\">
+	<title>preact-preload-chunks<\\/title>
+	<meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
+	<meta name=\\"mobile-web-app-capable\\" content=\\"yes\\">
+	<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
+	<link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\">
+	<link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\">
+	<style>html{padding:0}<\\/style>
+	<link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"only x\\" onload=\\"this.media='all'\\">
+	<noscript>
+		<link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\">
+	</noscript>
+</head>
+`;
+
 exports.prerender.home = `
 <body>
 	<div id="app">
@@ -197,7 +197,7 @@ exports.template = `
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>preact-webpack</title>
+		<title>preact-custom-template</title>
 		<meta name="example-meta" content="Hello World">
 		<link rel="manifest" href="/manifest.json">
 	</head>
@@ -253,3 +253,26 @@ exports.pushManifest = `
 	}
 }
 `;
+
+exports.publicPath = `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>preact-public-path</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="apple-touch-icon" href="/example-path/assets/icons/apple-touch-icon.png">
+		<link rel="manifest" href="/example-path/manifest.json">
+		<link href="/example-path/bundle.\\w{5}.css" rel="stylesheet">
+		<style></style>
+	</head>
+	<body>
+		<h1>Public path test</h1>
+		<script type="__PREACT_CLI_DATA__">%7B%22preRenderData%22:%7B%22url%22:%22/%22%7D%7D</script>
+		<script defer="defer" src="/example-path/bundle.\\w{5}.js"></script>
+		<script nomodule="" src="/example-path/polyfills.\\w{5}.js"></script>
+	</body>
+</html>
+`;
diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js
@@ -7,10 +7,12 @@ const shell = require('shelljs');
 const root = join(__dirname, '../../../..');
 
 async function linkPackage(name, from, to) {
-	await symlink(
-		join(from, 'node_modules', name),
-		join(to, 'node_modules', name)
-	);
+	try {
+		await symlink(
+			join(from, 'node_modules', name),
+			join(to, 'node_modules', name)
+		);
+	} catch {}
 }
 
 const argv = {
@@ -23,7 +25,7 @@ const argv = {
 };
 
 exports.create = async function (template, name) {
-	let dest = tmpDir();
+	let dest = await tmpDir();
 	name = name || `test-${template}`;
 
 	await cmd.create(template, dest, { name, cwd: '.' });
@@ -42,7 +44,7 @@ exports.build = async function (cwd, options, installNodeModules = false) {
 	}
 
 	let opts = Object.assign({}, { cwd }, argv, options);
-	return await cmd.build(argv.src, opts);
+	return await cmd.build(opts.src, opts);
 };
 
 exports.watch = function (cwd, port, host = '127.0.0.1') {

diff --git a/packages/cli/tests/lib/output.js b/packages/cli/tests/lib/output.js
@@ -1,25 +1,27 @@
-const { existsSync, mkdirSync } = require('fs');
+const { access, mkdir } = require('fs').promises;
 const copy = require('ncp');
 const { resolve } = require('path');
 const { promisify } = require('util');
 
 const output = resolve(__dirname, '../output');
 const subjects = resolve(__dirname, '../subjects');
 
-function tmpDir() {
+async function tmpDir() {
 	let str = Math.random()
 		.toString(36)
 		.replace(/[^a-z]+/g, '')
 		.substr(0, 12);
-	if (!existsSync(output)) {
-		mkdirSync(output, { recursive: true });
+	try {
+		await access(output);
+	} catch {
+		await mkdir(output, { recursive: true });
 	}
 	return resolve(output, str);
 }
 
 async function subject(name) {
 	let src = resolve(subjects, name);
-	let dest = tmpDir();
+	let dest = await tmpDir();
 	await promisify(copy)(src, dest);
 	return dest;
 }

diff --git a/packages/cli/tests/subjects/css-auto-modules/components/index.js b/packages/cli/tests/subjects/css-auto-modules/components/index.js
@@ -0,0 +1,4 @@
+import { h } from 'preact';
+import styles from './style.css';
+
+export default () => <h3 class={styles.text}>This is a fancy component!</h3>;
diff --git a/packages/cli/tests/subjects/css-auto-modules/components/style.css b/packages/cli/tests/subjects/css-auto-modules/components/style.css
@@ -0,0 +1,3 @@
+.text {
+	color: blue;
+}
diff --git a/packages/cli/tests/subjects/css-auto-modules/global.css b/packages/cli/tests/subjects/css-auto-modules/global.css
@@ -0,0 +1,3 @@
+h1 {
+	color: red;
+}
diff --git a/packages/cli/tests/subjects/css-auto-modules/index.js b/packages/cli/tests/subjects/css-auto-modules/index.js
@@ -0,0 +1,14 @@
+import { h } from 'preact';
+import Component from './components';
+import Route from './routes';
+import './global.css';
+
+export default () => {
+	return (
+		<div>
+			<h1>This is an app with some fancy styles!</h1>
+			<Route />
+			<Component />
+		</div>
+	);
+};
diff --git a/packages/cli/tests/subjects/css-auto-modules/package.json b/packages/cli/tests/subjects/css-auto-modules/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-auto-css-modules"
+}
diff --git a/packages/cli/tests/subjects/css-auto-modules/routes/index.js b/packages/cli/tests/subjects/css-auto-modules/routes/index.js
@@ -0,0 +1,4 @@
+import { h } from 'preact';
+import styles from './style.css';
+
+export default () => <h2 class={styles.text}>This is a fancy route!</h2>;
diff --git a/packages/cli/tests/subjects/css-auto-modules/routes/style.css b/packages/cli/tests/subjects/css-auto-modules/routes/style.css
@@ -0,0 +1,3 @@
+.text {
+	color: red;
+}
diff --git a/packages/cli/tests/subjects/css-imports/index.js b/packages/cli/tests/subjects/css-imports/index.js
@@ -0,0 +1,2 @@
+import './styles/a.css';
+import './style.css';
diff --git a/packages/cli/tests/subjects/css-imports/package.json b/packages/cli/tests/subjects/css-imports/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-css-imports"
+}
diff --git a/packages/cli/tests/subjects/css-imports/style.css b/packages/cli/tests/subjects/css-imports/style.css
@@ -0,0 +1,5 @@
+@import '~fake-module/style.css';
+
+h1 {
+	background: peachpuff;
+}
diff --git a/packages/cli/tests/subjects/css-imports/styles/a.css b/packages/cli/tests/subjects/css-imports/styles/a.css
@@ -0,0 +1,5 @@
+@import 'b.css';
+
+body {
+	background: url('./img.jpg');
+}
diff --git a/packages/cli/tests/subjects/css-imports/styles/b.css b/packages/cli/tests/subjects/css-imports/styles/b.css
@@ -0,0 +1,3 @@
+h1 {
+	color: #f00;
+}
diff --git a/packages/cli/tests/subjects/css-imports/styles/img.jpg b/packages/cli/tests/subjects/css-imports/styles/img.jpg
diff --git a/packages/cli/tests/subjects/css-inline/index.js b/packages/cli/tests/subjects/css-inline/index.js
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+import './style.css';
+
+export default () => <h1>Test CSS inlining</h1>;
diff --git a/packages/cli/tests/subjects/css-inline/package.json b/packages/cli/tests/subjects/css-inline/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-css-inline"
+}
diff --git a/packages/cli/tests/subjects/css-inline/style.css b/packages/cli/tests/subjects/css-inline/style.css
@@ -0,0 +1,7 @@
+h1 {
+	color: red;
+}
+
+div {
+	background: blue;
+}
diff --git a/...sts/subjects/sass/components/app/index.js → ...subjects/css-sass/components/app/index.js b/...sts/subjects/sass/components/app/index.js → ...subjects/css-sass/components/app/index.js
diff --git a/...s/subjects/sass/components/app/style.scss → ...bjects/css-sass/components/app/style.scss b/...s/subjects/sass/components/app/style.scss → ...bjects/css-sass/components/app/style.scss
diff --git a/packages/cli/tests/subjects/sass/index.js → ...ages/cli/tests/subjects/css-sass/index.js b/packages/cli/tests/subjects/sass/index.js → ...ages/cli/tests/subjects/css-sass/index.js
diff --git a/packages/cli/tests/subjects/css-sass/package.json b/packages/cli/tests/subjects/css-sass/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-css-sass"
+}
diff --git a/packages/cli/tests/subjects/css-side-effect/index.js b/packages/cli/tests/subjects/css-side-effect/index.js
@@ -0,0 +1 @@
+import './style.css';
diff --git a/...sts/subjects/side-effect-css/package.json → ...sts/subjects/css-side-effect/package.json b/...sts/subjects/side-effect-css/package.json → ...sts/subjects/css-side-effect/package.json
@@ -1,5 +1,5 @@
 {
   "private": true,
-  "name": "side-effect-css",
+  "name": "preact-css-side-effect-import",
   "sideEffects": false
 }
diff --git a/.../tests/subjects/side-effect-css/style.css → .../tests/subjects/css-side-effect/style.css b/.../tests/subjects/side-effect-css/style.css → .../tests/subjects/css-side-effect/style.css
diff --git a/packages/cli/tests/subjects/custom-babelrc/package.json b/packages/cli/tests/subjects/custom-babelrc/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-babelrc"
+  "name": "preact-custom-babelrc"
 }
diff --git a/packages/cli/tests/subjects/custom-template/package.json b/packages/cli/tests/subjects/custom-template/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-webpack"
+  "name": "preact-custom-template"
 }
diff --git a/packages/cli/tests/subjects/custom-webpack/package.json b/packages/cli/tests/subjects/custom-webpack/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-webpack"
+  "name": "preact-custom-webpack"
 }
diff --git a/packages/cli/tests/subjects/minimal/index.js b/packages/cli/tests/subjects/minimal/index.js
@@ -0,0 +1,4 @@
+import { h } from 'preact';
+import './style.css';
+
+export default () => <h1>Minimal App</h1>;
diff --git a/packages/cli/tests/subjects/minimal/package.json b/packages/cli/tests/subjects/minimal/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-minimal"
+}
diff --git a/packages/cli/tests/subjects/minimal/style.css b/packages/cli/tests/subjects/minimal/style.css
@@ -0,0 +1,3 @@
+h1 {
+	color: red;
+}
diff --git a/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json b/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-prerender"
+  "name": "preact-multiple-prerender-with-provider"
 }
diff --git a/packages/cli/tests/subjects/multiple-prerendering/package.json b/packages/cli/tests/subjects/multiple-prerendering/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-prerender"
+  "name": "preact-multiple-prerender"
 }
diff --git a/packages/cli/tests/subjects/preload-chunks/package.json b/packages/cli/tests/subjects/preload-chunks/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-prerender"
+  "name": "preact-preload-chunks"
 }
diff --git a/packages/cli/tests/subjects/prerendering-hydration/package.json b/packages/cli/tests/subjects/prerendering-hydration/package.json
@@ -1,4 +1,4 @@
 {
   "private": true,
-  "name": "preact-babelrc"
+  "name": "preact-prerendering-hydration"
 }
diff --git a/packages/cli/tests/subjects/progressive-hydration-preact8/package.json b/packages/cli/tests/subjects/progressive-hydration-preact8/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "preact-prerender",
+  "name": "preact-prerendering-hydration-preact8",
   "dependencies": {
     "preact": "8.5.3",
     "preact-render-to-string": "4.1.0"

diff --git a/packages/cli/tests/subjects/public-path/index.js b/packages/cli/tests/subjects/public-path/index.js
@@ -0,0 +1,4 @@
+import { h } from 'preact';
+import './style.css';
+
+export default () => <h1>Public path test</h1>;
diff --git a/packages/cli/tests/subjects/public-path/package.json b/packages/cli/tests/subjects/public-path/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-public-path"
+}
diff --git a/packages/cli/tests/subjects/public-path/preact.config.js b/packages/cli/tests/subjects/public-path/preact.config.js
@@ -0,0 +1,3 @@
+module.exports = function (config) {
+	config.output.publicPath = '/example-path/';
+};
diff --git a/packages/cli/tests/subjects/public-path/style.css b/packages/cli/tests/subjects/public-path/style.css
diff --git a/packages/cli/tests/subjects/sass/package.json b/packages/cli/tests/subjects/sass/package.json
diff --git a/packages/cli/tests/subjects/side-effect-css/index.js b/packages/cli/tests/subjects/side-effect-css/index.js
diff --git a/packages/cli/tests/subjects/static-root/package.json b/packages/cli/tests/subjects/static-root/package.json
@@ -1,4 +1,4 @@
 {
     "private": true,
-    "name": "preact-prerender"
+    "name": "preact-static-root"
 }