wip: add tests for dependency watching

Author: dominikg

packages/playground/svelte-preprocess/__tests__/svelte-preprocess.spec.ts

@@ -0,0 +1,95 @@
+import {
+	isBuild,
+	getEl,
+	getText,
+	editFileAndWaitForHmrComplete,
+	untilUpdated,
+	sleep,
+	getColor
+} from '../../testUtils';
+
+test('should render App', async () => {
+	expect(await getText('h1')).toBe(`I'm blue`);
+	expect(await getColor('h1')).toBe('blue');
+	expect(await getText('h2')).toBe(`I'm red`);
+	expect(await getColor('h2')).toBe('red');
+	expect(await getText('p')).toBe(`I'm green`);
+	expect(await getColor('p')).toBe('green');
+	expect(await getText('span')).toBe(`I'm orangered`);
+	expect(await getColor('span')).toBe('orangered');
+});
+
+test('should not have failed requests', async () => {
+	browserLogs.forEach((msg) => {
+		expect(msg).not.toMatch('404');
+	});
+});
+
+if (!isBuild) {
+	describe('hmr', () => {
+		test('should apply updates when editing App.svelte', async () => {
+			expect(await getText('span')).toBe(`I'm orangered`);
+			await editFileAndWaitForHmrComplete('src/App.svelte', (c) =>
+				c.replace(`I'm orangered`, `I'm replaced`)
+			);
+			expect(await getText('span')).toBe(`I'm replaced`);
+			expect(await getColor('span')).toBe('orangered');
+			await editFileAndWaitForHmrComplete(
+				'src/App.svelte',
+				(c) => c.replace(`color: orangered`, `color: magenta`),
+				'/src/App.svelte?svelte&type=style&lang.css'
+			);
+			expect(await getColor('span')).toBe('magenta');
+		});
+
+		test('should apply updates when editing MultiFile.html', async () => {
+			expect(await getText('h1')).toBe(`I'm blue`);
+			expect(await getText('h2')).toBe(`I'm red`);
+			await editFileAndWaitForHmrComplete(
+				'src/lib/multifile/MultiFile.html',
+				(c) => c.replace(`I'm blue`, `I'm replaced`).replace(`I'm red`, `I'm replaced too`),
+				'/src/lib/multifile/MultiFile.svelte'
+			);
+			expect(await getText('h1')).toBe(`I'm replaced`);
+			expect(await getText('h2')).toBe(`I'm replaced too`);
+		});
+
+		test('should apply updates when editing MultiFile.scss', async () => {
+			expect(await getColor('h1')).toBe('blue');
+			await editFileAndWaitForHmrComplete(
+				'src/lib/multifile/MultiFile.scss',
+				(c) => c.replace(`color: blue`, `color: magenta`),
+				'/src/lib/multifile/MultiFile.svelte?svelte&type=style&lang.css'
+			);
+			expect(await getColor('h1')).toBe('magenta');
+		});
+
+		test('should apply updates when editing _someImport.scss', async () => {
+			expect(await getColor('h2')).toBe('red');
+			await editFileAndWaitForHmrComplete(
+				'src/lib/multifile/_someImport.scss',
+				(c) => c.replace(`color: red`, `color: magenta`),
+				'/src/lib/multifile/MultiFile.svelte?svelte&type=style&lang.css'
+			);
+			expect(await getColor('h2')).toBe('magenta');
+		});
+
+		test('should apply updates when editing MultiFile.ts', async () => {
+			expect(await getText('p')).toBe(`I'm green`);
+			await editFileAndWaitForHmrComplete(
+				'src/lib/multifile/MultiFile.ts',
+				(c) => c.replace(`'green'`, `'a replaced value'`),
+				'/src/lib/multifile/MultiFile.svelte'
+			);
+			expect(await getText('p')).toBe(`I'm a replaced value`);
+		});
+
+		test('should apply updates when editing someother.css', async () => {
+			expect(await getColor('p')).toBe('green');
+			await editFileAndWaitForHmrComplete('src/lib/multifile/someother.css', (c) =>
+				c.replace(`color: green`, `color: magenta`)
+			);
+			expect(await getColor('p')).toBe('magenta');
+		});
+	});
+}

packages/playground/svelte-preprocess/src/App.svelte

@@ -1,58 +1,16 @@
 <script lang="ts">
 	import logo from './assets/svelte.png';
-	import Counter from './lib/Counter.svelte';
 	import MultiFile from './lib/multifile/MultiFile.svelte';
 </script>
 
 <main>
 	<img src={logo} alt="Svelte Logo" />
-	<h1>Hello Typescript!</h1>
-
-	<Counter />
-
 	<MultiFile />
+	<span>I'm orangered</span>
 </main>
 
 <style>
-	:root {
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-			'Open Sans', 'Helvetica Neue', sans-serif;
-	}
-
-	main {
-		text-align: center;
-		padding: 1em;
-		margin: 0 auto;
-	}
-
-	img {
-		height: 16rem;
-		width: 16rem;
-	}
-
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4rem;
-		font-weight: 100;
-		line-height: 1.1;
-		margin: 2rem auto;
-		max-width: 14rem;
-	}
-
-	p {
-		max-width: 14rem;
-		margin: 1rem auto;
-		line-height: 1.35;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			max-width: none;
-		}
-
-		p {
-			max-width: none;
-		}
+	span {
+		color: orangered;
 	}
 </style>

packages/playground/svelte-preprocess/src/lib/Counter.svelte

@@ -1,3 +1,3 @@
-<h1>i'm blue</h1>
-<h2>i'm red</h2>
-<p>i'm {foo}</p>
+<h1>I'm blue</h1>
+<h2>I'm red</h2>
+<p>I'm {foo}</p>

packages/playground/svelte-preprocess/src/lib/multifile/MultiFile.html

@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite';
-import svelte from '@sveltejs/vite-plugin-svelte';
+const { defineConfig } = require('vite');
+const svelte = require('@sveltejs/vite-plugin-svelte');
 
-// https://vitejs.dev/config/
-export default defineConfig({
-	plugins: [svelte()]
+module.exports = defineConfig(({ command, mode }) => {
+	const isProduction = mode === 'production';
+	return {
+		plugins: [svelte()],
+		build: {
+			minify: isProduction
+		}
+	};
 });

packages/playground/svelte-preprocess/vite.config.js

@@ -140,13 +140,16 @@ export async function hmrUpdateComplete(file, timeout) {
 	});
 }
 
-export async function editFileAndWaitForHmrComplete(file, replacer) {
+export async function editFileAndWaitForHmrComplete(file, replacer, fileUpdateToWaitFor?) {
 	const newContent = await editFile(file, replacer);
+	if (!fileUpdateToWaitFor) {
+		fileUpdateToWaitFor = file;
+	}
 	try {
-		await hmrUpdateComplete(file, 10000);
+		await hmrUpdateComplete(fileUpdateToWaitFor, 10000);
 	} catch (e) {
 		console.log(`retrying hmr update for ${file}`);
 		await editFile(file, () => newContent);
-		await hmrUpdateComplete(file, 5000);
+		await hmrUpdateComplete(fileUpdateToWaitFor, 5000);
 	}
 }