Kit playground - basic tests to ensure changes in vite-plugin-svelte don't break kit (#8)

* wip: add a kit project to playground for testing

* wip: first working version for kit tests

* wip: more hmr tests for kit, ensure kit process is taken down after test

* wip: add testto ensure edited content is served on page reload

* wip: update deps

* rename kit playground

Author: dominikg

.prettierrc.js

@@ -18,6 +18,13 @@ module.exports = {
 			options: {
 				requirePragma: true
 			}
+		},
+		{
+			files: '**/package.json',
+			options: {
+				useTabs: false,
+				tabWidth: 2
+			}
 		}
 	]
 };

package.json

@@ -12,7 +12,7 @@
     "test:build": "cross-env VITE_TEST_BUILD=1 jest",
     "test:build:debug": "cross-env VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 node --inspect-brk ./node_modules/.bin/jest",
     "test:ci": "run-s test:ci:serve test:ci:build",
-    "test:ci:serve": "cross-env VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/serve/jest-results.json\" ",
+    "test:ci:serve": "cross-env VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/serve/jest-results.json\"",
     "test:ci:build": "cross-env VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/build/jest-results.json\"",
     "lint": "run-p lint:script lint:style",
     "lint:script": "eslint --ignore-path .gitignore '**/*.{js,ts,svelte,html,svx,md}'",

packages/playground/kit-node/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+/.svelte
+/build
+/functions

packages/playground/kit-node/README.md

@@ -0,0 +1,42 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Svelte apps are built with _adapters_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, add it to the `devDependencies` in `package.json` making sure to specify the version as `next` and update your `svelte.config.cjs` to [specify your chosen adapter](https://kit.svelte.dev/docs#configuration-adapter). The following official adapters are available:
+
+- [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
+- [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
+- [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
+- [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
+- ...more soon
+
+[See the adapter documentation for more detail](https://kit.svelte.dev/docs#adapters)

packages/playground/kit-node/__tests__/kit.spec.ts

@@ -0,0 +1,176 @@
+import {
+	editFileAndWaitForHmrComplete,
+	getColor,
+	getEl,
+	getText,
+	isBuild,
+	untilUpdated
+} from '../../testUtils';
+
+import fetch from 'node-fetch';
+
+describe('kit-node', () => {
+	describe('index route', () => {
+		it('should contain greeting', async () => {
+			// TODO is hydration testing needed here?
+			expect(await page.textContent('h1')).toMatch('Hello world!'); // after hydration
+
+			const html = await (await fetch(page.url())).text();
+			expect(html).toMatch('Hello world!'); // before hydration
+			if (isBuild) {
+				// TODO additional testing needed here once vite-plugin-svelte implements indexHtmlTransform hook
+			}
+		});
+
+		it('should have correct styles applied', async () => {
+			if (isBuild) {
+				expect(await getColor('h1')).toBe('rgb(255, 62, 0)');
+			} else {
+				// During dev, the CSS is loaded from async chunk and we may have to wait
+				// when the test runs concurrently.
+				await untilUpdated(() => getColor('h1'), 'rgb(255, 62, 0)');
+			}
+		});
+
+		it('should increase count on click', async () => {
+			const button = await getEl('button');
+			expect(await getText(button)).toBe('Clicks: 0');
+			await button.click();
+			expect(await getText(button)).toBe('Clicks: 1');
+		});
+
+		it('should not have failed requests', async () => {
+			// should have no 404s
+			browserLogs.forEach((msg) => {
+				expect(msg).not.toMatch('404');
+			});
+		});
+
+		if (!isBuild) {
+			describe('hmr', () => {
+				const updateIndexSvelte = editFileAndWaitForHmrComplete.bind(
+					null,
+					'src/routes/index.svelte'
+				);
+
+				it('should render additional html', async () => {
+					// add div 1
+					expect(await getEl('#hmr-test')).toBe(null);
+					await updateIndexSvelte((content) =>
+						content.replace(
+							'<!-- HMR-TEMPLATE-INJECT -->',
+							'<div id="hmr-test">foo</div>\n<!-- HMR-TEMPLATE-INJECT -->'
+						)
+					);
+					await expect(await getText(`#hmr-test`)).toBe('foo');
+
+					// add div 2
+					expect(await getEl('#hmr-test2')).toBe(null);
+					await updateIndexSvelte((content) =>
+						content.replace(
+							'<!-- HMR-TEMPLATE-INJECT -->',
+							'<div id="hmr-test2">bar</div>\n<!-- HMR-TEMPLATE-INJECT -->'
+						)
+					);
+					await expect(await getText(`#hmr-test`)).toBe('foo');
+					await expect(await getText(`#hmr-test2`)).toBe('bar');
+					// remove div 1
+					await updateIndexSvelte((content) =>
+						content.replace('<div id="hmr-test">foo</div>\n', '')
+					);
+					await expect(await getText(`#hmr-test`)).toBe(null);
+					await expect(await getText(`#hmr-test2`)).toBe('bar');
+				});
+
+				it('should render additional child components', async () => {
+					let buttons = await page.$$('button');
+					expect(buttons.length).toBe(1);
+					expect(await getText(buttons[0])).toBe('Clicks: 0');
+					await updateIndexSvelte((content) =>
+						content.replace(
+							'<!-- HMR-TEMPLATE-INJECT -->',
+							'<Counter id="hmr-test-counter"/>\n<!-- HMR-TEMPLATE-INJECT -->'
+						)
+					);
+					buttons = await page.$$('button');
+					expect(buttons.length).toBe(2);
+					expect(await getText(buttons[0])).toBe('Clicks: 0');
+					expect(await getText(buttons[1])).toBe('Clicks: 0');
+					await buttons[1].click();
+					expect(await getText(buttons[0])).toBe('Clicks: 0');
+					expect(await getText(buttons[1])).toBe('Clicks: 1');
+					await updateIndexSvelte((content) =>
+						content.replace('<Counter id="hmr-test-counter"/>\n', '')
+					);
+					buttons = await page.$$('button');
+					expect(buttons.length).toBe(1);
+					expect(await getText(buttons[0])).toBe('Clicks: 0');
+				});
+
+				it('should apply changed styles', async () => {
+					expect(await getColor(`h1`)).toBe('rgb(255, 62, 0)');
+					await updateIndexSvelte((content) => content.replace('color: #ff3e00', 'color: blue'));
+					expect(await getColor(`h1`)).toBe('blue');
+					await updateIndexSvelte((content) => content.replace('color: blue', 'color: green'));
+					expect(await getColor(`h1`)).toBe('green');
+				});
+
+				it('should serve changes even after page reload', async () => {
+					expect(await getColor(`h1`)).toBe('green');
+					expect(await getText(`#hmr-test2`)).toBe('bar');
+					await page.reload({ waitUntil: 'networkidle' });
+					expect(await getColor(`h1`)).toBe('green');
+					await expect(await getText(`#hmr-test2`)).toBe('bar');
+				});
+
+				describe('Counter.svelte', () => {
+					const updateCounter = editFileAndWaitForHmrComplete.bind(null, 'src/lib/Counter.svelte');
+					it('should render additional html', async () => {
+						// add div 1
+						expect(await getEl('#hmr-test3')).toBe(null);
+						await updateCounter((content) =>
+							content.replace(
+								'<!-- HMR-TEMPLATE-INJECT -->',
+								'<div id="hmr-test3">foo</div>\n<!-- HMR-TEMPLATE-INJECT -->'
+							)
+						);
+						await expect(await getText(`#hmr-test3`)).toBe('foo');
+
+						// add div 2
+						expect(await getEl('#hmr-test4')).toBe(null);
+						await updateCounter((content) =>
+							content.replace(
+								'<!-- HMR-TEMPLATE-INJECT -->',
+								'<div id="hmr-test4">bar</div>\n<!-- HMR-TEMPLATE-INJECT -->'
+							)
+						);
+						await expect(await getText(`#hmr-test3`)).toBe('foo');
+						await expect(await getText(`#hmr-test4`)).toBe('bar');
+						// remove div 1
+						await updateCounter((content) =>
+							content.replace('<div id="hmr-test3">foo</div>\n', '')
+						);
+						await expect(await getText(`#hmr-test3`)).toBe(null);
+						await expect(await getText(`#hmr-test4`)).toBe('bar');
+					});
+
+					it('should apply changed styles', async () => {
+						expect(await getColor(`button`)).toBe('rgb(255, 62, 0)');
+						await updateCounter((content) => content.replace('color: #ff3e00', 'color: blue'));
+						expect(await getColor(`button`)).toBe('blue');
+						await updateCounter((content) => content.replace('color: blue', 'color: green'));
+						expect(await getColor(`button`)).toBe('green');
+					});
+
+					it('should apply changed initial state', async () => {
+						expect(await getText('button')).toBe('Clicks: 0');
+						await updateCounter((content) => content.replace('let count = 0', 'let count = 2'));
+						expect(await getText('button')).toBe('Clicks: 2');
+						await updateCounter((content) => content.replace('let count = 2', 'let count = 0'));
+						expect(await getText('button')).toBe('Clicks: 0');
+					});
+				});
+			});
+		}
+	});
+});

packages/playground/kit-node/__tests__/serve.js

@@ -0,0 +1,59 @@
+// @ts-check
+// this is automtically detected by scripts/jestPerTestSetup.ts and will replace
+// the default e2e test serve behavior
+
+const execa = require('execa');
+const treeKill = require('tree-kill');
+/**
+ * @param {string} root
+ * @param {boolean} isProd
+ */
+exports.serve = async function serve(root, isProd) {
+	if (isProd) {
+		await execa('svelte-kit', ['build'], { stdio: 'inherit', preferLocal: true, cwd: root });
+	}
+
+	return new Promise((resolve, reject) => {
+		try {
+			const serverProcess = execa(
+				'svelte-kit',
+				[isProd ? 'start' : 'dev', '--port', isProd ? '3200' : '3201'],
+				{
+					preferLocal: true,
+					cwd: root,
+					cleanup: true
+				}
+			);
+			serverProcess.stdout.pipe(process.stdout);
+			serverProcess.stderr.pipe(process.stderr);
+
+			const resolveWhenStarted = (data) => {
+				const str = data.toString();
+				// hack, console output may contain color code gibberish
+				// skip gibberish between localhost: and port number starting with 3
+				const match = str.match(/(http:\/\/localhost:)(?:[^3]*)(\d+)/);
+				if (match) {
+					serverProcess.stdout.off('data', resolveWhenStarted);
+					const customServer = {
+						port: parseInt(match[2], 10),
+						async close() {
+							if (serverProcess) {
+								// ensure started svelte-kit process is gone including all subprocesses
+								return new Promise((resolve, reject) =>
+									treeKill(serverProcess.pid, (err) => {
+										err ? reject(err) : resolve();
+									})
+								);
+							}
+						}
+					};
+					resolve(customServer);
+				}
+			};
+
+			serverProcess.stdout.on('data', resolveWhenStarted);
+		} catch (e) {
+			reject(e);
+		}
+	});
+};

packages/playground/kit-node/jsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

packages/playground/kit-node/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "playground-kit-node",
+	"private": true,
+	"version": "0.0.0",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"start": "svelte-kit start"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-node": "^1.0.0-next.12",
+		"@sveltejs/kit": "^1.0.0-next.71",
+		"svelte": "^3.29.0",
+		"vite": "^2.1.0"
+	},
+	"type": "module",
+	"engines": {
+		"node": ">= 12.17.0"
+	}
+}

packages/playground/kit-node/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

packages/playground/kit-node/src/global.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

packages/playground/kit-node/src/lib/Counter.svelte

@@ -0,0 +1,35 @@
+<script>
+	let count = 0;
+
+	const increment = () => {
+		count += 1;
+	};
+</script>
+
+<button on:click={increment}>
+	Clicks: {count}
+</button>
+
+<!-- HMR-TEMPLATE-INJECT -->
+<style>
+	button {
+		font-family: inherit;
+		font-size: inherit;
+		padding: 1em 2em;
+		color: #ff3e00;
+		background-color: rgba(255, 62, 0, 0.1);
+		border-radius: 2em;
+		border: 2px solid rgba(255, 62, 0, 0);
+		outline: none;
+		width: 200px;
+		font-variant-numeric: tabular-nums;
+	}
+
+	button:focus {
+		border: 2px solid #ff3e00;
+	}
+
+	button:active {
+		background-color: rgba(255, 62, 0, 0.2);
+	}
+</style>