make tests deterministic (#559)

* remove startGlobal in favour of sveltekit:start event

* dispatch navigation events, use in tests

* remove a page.click

* get all tests passing hopefully

* rename events

* clicknav

* changeset

* come on

* document events

* tweaks

.changeset/calm-pots-turn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Remove startGlobal option

.changeset/strong-carrots-work.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Fire custom events for start, and navigation start/end

documentation/docs/08-events.md

@@ -0,0 +1,11 @@
+---
+title: Events
+---
+
+SvelteKit emits [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on the `window` object when certain things happen:
+
+* `sveltekit:start` — fired once the app has hydrated
+* `sveltekit:navigation-start` — navigation has started
+* `sveltekit:navigation-end` — navigation has ended
+
+You probably won't need to use these, but they can be useful in the context of (for example) integration tests.

documentation/docs/12-configuration.md → documentation/docs/13-configuration.md

@@ -37,7 +37,6 @@ module.exports = {
 			force: false,
 			pages: ['*']
 		},
-		startGlobal: null,
 		target: null
 	},
 
@@ -104,12 +103,6 @@ See [Prerendering](#prerendering). An object containing zero or more of the foll
 * `force` — if `true`, a page that fails to render will _not_ cause the entire build to fail
 * `pages` — an array of pages to prerender, or start crawling from (if `crawl: true`). The `*` string includes all non-dynamic routes (i.e. pages with no `[parameters]` )
 
-#### startGlobal
-
-You probably don't need this, it's mainly useful for SvelteKit's integration tests.
-
-If specified, the client-side app will not start automatically. Instead, a global function will be created with the specified name. Calling it will start the app and return a promise that resolves (or rejects) once everything has initialised.
-
 #### target
 
 Specifies an element to mount the app to. It must be a DOM selector that identifies an element that exists in your template file. If unspecified, the app will be mounted to `document.body`.

packages/kit/src/core/build/index.js

@@ -342,9 +342,7 @@ async function build_server(
 					local,
 					template,
 					manifest,
-					target: ${s(config.kit.target)},${
-						config.kit.startGlobal ? `\n\t\t\t\t\tstart_global: ${s(config.kit.startGlobal)},` : ''
-					}
+					target: ${s(config.kit.target)},
 					entry: ${s(entry)},
 					root,
 					setup,

packages/kit/src/core/dev/index.js

@@ -193,7 +193,6 @@ class Watcher extends EventEmitter {
 							root,
 							setup,
 							only_prerender: false,
-							start_global: this.config.kit.startGlobal,
 							host: this.config.kit.host,
 							host_header: this.config.kit.hostHeader,
 							get_stack: (error) => {

packages/kit/src/core/load_config/index.spec.js

@@ -32,8 +32,7 @@ test('fills in defaults', () => {
 				force: false,
 				pages: ['*']
 			},
-			target: null,
-			startGlobal: null
+			target: null
 		},
 		preprocess: null
 	});
@@ -105,7 +104,6 @@ test('fills in partial blanks', () => {
 				force: false,
 				pages: ['*']
 			},
-			startGlobal: null,
 			target: null
 		},
 		preprocess: null

packages/kit/src/core/load_config/options.js

@@ -107,9 +107,6 @@ const options = {
 				}
 			},
 
-			// used for testing
-			startGlobal: expect_string(null),
-
 			target: expect_string(null)
 		}
 	},

packages/kit/src/core/load_config/test/index.js

@@ -33,7 +33,6 @@ suite('load default config', async () => {
 			hostHeader: null,
 			paths: { base: '', assets: '/.' },
 			prerender: { crawl: true, enabled: true, force: false, pages: ['*'] },
-			startGlobal: null,
 			target: null
 		},
 		preprocess: null

packages/kit/src/runtime/client/renderer.js

@@ -160,6 +160,8 @@ export class Renderer {
 
 	/** @param {import('./types').NavigationTarget} selected */
 	notify(selected) {
+		dispatchEvent(new CustomEvent('sveltekit:navigation-start'));
+
 		this.stores.navigating.set({
 			from: this.current.page,
 			to: selected.page
@@ -194,7 +196,9 @@ export class Renderer {
 			this.current = hydrated.state;
 
 			this.root.$set(hydrated.props);
-			this.stores.navigating.set(null);
+			await this.stores.navigating.set(null);
+
+			dispatchEvent(new CustomEvent('sveltekit:navigation-end'));
 		}
 	}
 

packages/kit/src/runtime/client/start.js

@@ -39,6 +39,8 @@ export async function start({ paths, target, host, session, error, status }) {
 	set_paths(paths);
 
 	await router.init(renderer);
+
+	dispatchEvent(new CustomEvent('sveltekit:start'));
 }
 
 if (import.meta.env.VITE_SVELTEKIT_SERVICE_WORKER) {

packages/kit/src/runtime/server/page.js

@@ -314,7 +314,7 @@ async function get_response({ request, options, $session, route, status = 200, e
 		: `
 		<script type="module">
 			import { start } from ${s(options.entry)};
-			${options.start_global ? `window.${options.start_global} = () => ` : ''}start({
+			start({
 				target: ${options.target ? `document.querySelector(${s(options.target)})` : 'document.body'},
 				host: ${host ? s(host) : 'location.host'},
 				paths: ${s(options.paths)},

packages/kit/test/apps/basics/src/routes/accessibility/__tests__.js

@@ -3,9 +3,8 @@ import * as assert from 'uvu/assert';
 /** @type {import('../../../../../types').TestMaker} */
 export default function (test) {
 	// TODO unskip this
-	test.skip('resets focus', '/accessibility/a', async ({ page }) => {
-		await Promise.all([page.waitForNavigation(), page.click('[href="/accessibility/b"]')]);
-		await page.waitForTimeout(50);
+	test.skip('resets focus', '/accessibility/a', async ({ page, clicknav }) => {
+		await clicknav('[href="/accessibility/b"]');
 		assert.equal(await page.innerHTML('h1'), 'b');
 		await page.waitForTimeout(50);
 		assert.equal(await page.evaluate(() => document.activeElement.nodeName), 'BODY');
@@ -14,17 +13,17 @@ export default function (test) {
 		assert.equal(await page.evaluate(() => document.activeElement.nodeName), 'A');
 		assert.equal(await page.evaluate(() => document.activeElement.textContent), 'a');
 
-		await Promise.all([page.waitForNavigation(), page.click('[href="/accessibility/a"]')]);
-		await page.waitForTimeout(50);
+		await clicknav('[href="/accessibility/a"]');
 		assert.equal(await page.innerHTML('h1'), 'a');
+		await page.waitForTimeout(50);
 		assert.equal(await page.evaluate(() => document.activeElement.nodeName), 'BODY');
 		await page.keyboard.press('Tab');
 		await page.waitForTimeout(50);
 		assert.equal(await page.evaluate(() => document.activeElement.nodeName), 'A');
 		assert.equal(await page.evaluate(() => document.activeElement.textContent), 'a');
 	});
 
-	test('announces client-side navigation', '/accessibility/a', async ({ page, js }) => {
+	test('announces client-side navigation', '/accessibility/a', async ({ page, clicknav, js }) => {
 		const has_live_region = (await page.innerHTML('body')).includes('aria-live');
 
 		if (js) {
@@ -33,8 +32,7 @@ export default function (test) {
 			// live region should exist, but be empty
 			assert.equal(await page.innerHTML('[aria-live]'), '');
 
-			await Promise.all([page.waitForNavigation(), page.click('[href="/accessibility/b"]')]);
-			await page.waitForTimeout(50);
+			await clicknav('[href="/accessibility/b"]');
 			assert.equal(await page.innerHTML('[aria-live]'), 'Navigated to b'); // TODO i18n
 		} else {
 			assert.ok(!has_live_region);

packages/kit/test/apps/basics/src/routes/delete-route/__tests__.js

@@ -5,8 +5,6 @@ export default function (test) {
 	test('calls a delete handler', '/delete-route', async ({ page, js }) => {
 		if (js) {
 			await page.click('.del');
-			await page.waitForSelector('h1');
-
 			assert.equal(await page.innerHTML('h1'), 'deleted 42');
 		}
 	});

packages/kit/test/apps/basics/src/routes/preload/__tests__.js

@@ -2,8 +2,8 @@ import * as assert from 'uvu/assert';
 
 /** @type {import('../../../../../types').TestMaker} */
 export default function test(test) {
-	test('errors on preload', '/preload', async ({ page }) => {
-		await Promise.all([page.waitForNavigation(), page.click('[href="/preload/uses-preload"]')]);
+	test('errors on preload', '/preload', async ({ page, clicknav }) => {
+		await clicknav('[href="/preload/uses-preload"]');
 
 		assert.equal(await page.textContent('h1'), '500');
 		assert.equal(await page.textContent('footer'), 'Custom layout');

packages/kit/test/apps/basics/src/routes/redirect/__tests__.js

@@ -2,21 +2,17 @@ import * as assert from 'uvu/assert';
 
 /** @type {import('../../../../../types').TestMaker} */
 export default function (test, is_dev) {
-	test('redirect', '/redirect', async ({ base, page, js }) => {
-		await Promise.all([page.waitForNavigation(), page.click('[href="/redirect/a"]')]);
-
-		if (js) await page.waitForTimeout(50);
+	test('redirect', '/redirect', async ({ base, page, clicknav }) => {
+		await clicknav('[href="/redirect/a"]');
 
 		assert.equal(await page.url(), `${base}/redirect/b`);
 		assert.equal(await page.textContent('h1'), 'b');
 	});
 
-	test('prevents redirect loops', '/redirect', async ({ base, page, js }) => {
-		await page.click('[href="/redirect/loopy/a"]');
+	test('prevents redirect loops', '/redirect', async ({ base, page, clicknav, js }) => {
+		await clicknav('[href="/redirect/loopy/a"]');
 
 		if (js) {
-			await page.waitForTimeout(50);
-
 			assert.equal(await page.url(), `${base}/redirect/loopy/b`);
 			assert.equal(await page.textContent('h1'), '500');
 			assert.equal(
@@ -29,13 +25,8 @@ export default function (test, is_dev) {
 		}
 	});
 
-	test('errors on missing status', '/redirect', async ({ base, page, js }) => {
-		await Promise.all([
-			page.waitForNavigation(),
-			page.click('[href="/redirect/missing-status/a"]')
-		]);
-
-		if (js) await page.waitForTimeout(50);
+	test('errors on missing status', '/redirect', async ({ base, page, clicknav }) => {
+		await clicknav('[href="/redirect/missing-status/a"]');
 
 		assert.equal(await page.url(), `${base}/redirect/missing-status/a`);
 		assert.equal(await page.textContent('h1'), '500');
@@ -45,13 +36,8 @@ export default function (test, is_dev) {
 		);
 	});
 
-	test('errors on invalid status', '/redirect', async ({ base, page, js }) => {
-		await Promise.all([
-			page.waitForNavigation(),
-			page.click('[href="/redirect/missing-status/b"]')
-		]);
-
-		if (js) await page.waitForTimeout(50);
+	test('errors on invalid status', '/redirect', async ({ base, page, clicknav }) => {
+		await clicknav('[href="/redirect/missing-status/b"]');
 
 		assert.equal(await page.url(), `${base}/redirect/missing-status/b`);
 		assert.equal(await page.textContent('h1'), '500');