replace skip_if_ssr and skip_if_hydrate with modes (#10956)

Author: Rich-Harris

packages/svelte/tests/runtime-browser/assert.js

@@ -111,9 +111,9 @@ function normalize_children(node) {
  * @template Props
  * @param {{
  *	skip?: boolean;
- *	skip_if_ssr?: boolean | 'permanent';
- *	skip_if_hydrate?: boolean | 'permanent';
  *	solo?: boolean;
+ *  mode?: Array<'server' | 'client' | 'hydrate'>;
+ *  skip_mode?: Array<'server' | 'client' | 'hydrate'>;
  *	html?: string;
  *	ssrHtml?: string;
  *	props?: Props;

packages/svelte/tests/runtime-browser/samples/dynamic-element-custom-element/_config.js

@@ -1,8 +1,8 @@
 import { test } from '../../assert';
 
 export default test({
-	skip_if_ssr: 'permanent',
-	skip_if_hydrate: 'permanent',
+	mode: ['client'],
+
 	props: {
 		tag: /** @type {string | null} */ ('my-custom-element'),
 		name: /** @type {string | null | undefined} */ (null)

packages/svelte/tests/runtime-browser/samples/html-tag-script/_config.js

@@ -4,6 +4,5 @@ export default test({
 	// Test that @html does not execute scripts when instantiated in the client.
 	// Needs to be in this test suite because JSDOM does not quite get this right.
 	html: `<div></div><script>document.body.innerHTML = 'this should not be executed'</script>`,
-	skip_if_ssr: 'permanent',
-	skip_if_hydrate: 'permanent'
+	mode: ['client']
 });

packages/svelte/tests/runtime-browser/test-ssr.ts

@@ -46,7 +46,8 @@ export async function run_ssr_test(
 }
 
 const { run } = suite<ReturnType<typeof import('./assert').test>>(async (config, test_dir) => {
-	if (config.skip_if_ssr) return;
+	if (config.mode && !config.mode.includes('server')) return;
+	if (config.skip_mode?.includes('server')) return;
 	await run_ssr_test(config, test_dir);
 });
 

packages/svelte/tests/runtime-browser/test.ts

@@ -28,7 +28,11 @@ const { run: run_browser_tests } = suite_with_variants<
 >(
 	['dom', 'hydrate'],
 	(variant, config) => {
-		if (variant === 'hydrate' && config.skip_if_hydrate) return true;
+		if (variant === 'hydrate') {
+			if (config.mode && !config.mode.includes('hydrate')) return 'no-test';
+			if (config.skip_mode?.includes('hydrate')) return true;
+		}
+
 		return false;
 	},
 	() => {},

packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-node-context/_config.js

@@ -1,7 +1,7 @@
 import { ok, test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // unnecessary to test this in ssr mode
+	mode: ['client', 'hydrate'],
 
 	html: '<button>10</button>',
 

packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: true,
+	skip_mode: ['server'],
 
 	get props() {
 		return { value: 'hello!' };

packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: true,
+	skip_mode: ['server'],
 
 	get props() {
 		return { value: 'hello!' };

packages/svelte/tests/runtime-legacy/samples/attribute-casing-custom-element/_config.js

@@ -1,8 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
-	skip_if_hydrate: 'permanent',
+	mode: ['client'],
 	html: `
 		<my-custom-element>Hello World!</my-custom-element>
 	`

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js

@@ -9,11 +9,11 @@ export default test({
 			<text wordWrap="true"></text>
 		</page>
 	`,
-	skip_if_hydrate: true,
 
 	compileOptions: {
 		namespace: 'foreign'
 	},
+
 	test({ assert, target }) {
 		// @ts-ignore
 		const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;

packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js

@@ -8,7 +8,6 @@ export default test({
 			<button textWrap="true" text="button">
 		</page>
 	`,
-	skip_if_hydrate: true,
 
 	test({ assert, target }) {
 		// @ts-ignore

packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js

@@ -3,8 +3,6 @@ import { test } from '../../test';
 export default test({
 	skip: true, // TODO: needs fixing
 
-	skip_if_ssr: true,
-	skip_if_hydrate: true,
 	html: `
 		<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
 	`

packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js

@@ -3,8 +3,6 @@ import { test } from '../../test';
 export default test({
 	skip: true, // TODO: needs fixing
 
-	skip_if_ssr: true,
-
 	html: `
 		<span>3</span>
 		<span>2</span>

packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: true,
+	skip_mode: ['server'],
 
 	get props() {
 		return { value: 'hello!' };

packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js

@@ -5,7 +5,7 @@ import { flushSync } from 'svelte';
 let tasks = [];
 
 export default test({
-	skip_if_ssr: 'permanent', // unnecessary to test this in ssr mode
+	mode: ['client', 'hydrate'], // unnecessary to test this in ssr mode
 
 	get props() {
 		tasks = [

packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js

@@ -1,7 +1,7 @@
 import { ok, test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 
 	html: `
 		<p>selected: b</p>

packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-3/_config.js

@@ -1,7 +1,7 @@
 import { ok, test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 
 	html: `
 		<p>selected: a</p>

packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined/_config.js

@@ -1,7 +1,7 @@
 import { ok, test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 
 	html: `
 		<p>selected: a</p>

packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js

@@ -2,7 +2,7 @@ import { ok, test } from '../../test';
 
 // test select binding behavior when a selected option is removed
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 
 	html: `<p>selected: a</p><select><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>`,
 

packages/svelte/tests/runtime-legacy/samples/binding-store-each/_config.js

@@ -1,7 +1,7 @@
 import { ok, test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 	html: `
 		<input type="checkbox">
 		<input type="checkbox">

packages/svelte/tests/runtime-legacy/samples/binding-this-component-computed-key/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 
 	html: `
 		<div>foo</div>

packages/svelte/tests/runtime-legacy/samples/binding-this-component-each-block-value/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 	html: `
 	<div>foo</div>
 	<div>first has foo: true</div>

packages/svelte/tests/runtime-legacy/samples/binding-this-component-each-block/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 
 	html: `
 		<div>foo</div>

packages/svelte/tests/runtime-legacy/samples/binding-this-component-reactive/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 
 	html: `
 		<div>foo</div>

packages/svelte/tests/runtime-legacy/samples/binding-this-element-reactive-b/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 	get props() {
 		return { visible: true };
 	},

packages/svelte/tests/runtime-legacy/samples/binding-this-element-reactive/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // there's no class instance to retrieve in SSR mode
+	mode: ['client', 'hydrate'], // there's no class instance to retrieve in SSR mode
 
 	html: '<div>has div: true</div>'
 });

packages/svelte/tests/runtime-legacy/samples/binding-this-store/_config.js

@@ -1,6 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // doesn't work in SSR
+	mode: ['client', 'hydrate'], // doesn't work in SSR
 	html: '<div>object</div>'
 });

packages/svelte/tests/runtime-legacy/samples/component-binding-blowback-b/_config.js

@@ -2,7 +2,7 @@ import { ok, test } from '../../test';
 import { flushSync } from 'svelte';
 
 export default test({
-	skip_if_ssr: 'permanent', // relies on onMount firing, which does not happen in SSR mode
+	mode: ['client', 'hydrate'], // relies on onMount firing, which does not happen in SSR mode
 
 	get props() {
 		return { count: 3 };

packages/svelte/tests/runtime-legacy/samples/component-binding-blowback-c/_config.js

@@ -2,7 +2,7 @@ import { ok, test } from '../../test';
 import { flushSync } from 'svelte';
 
 export default test({
-	skip_if_ssr: 'permanent', // relies on onMount firing, which does not happen in SSR mode
+	mode: ['client', 'hydrate'], // relies on onMount firing, which does not happen in SSR mode
 
 	get props() {
 		return { count: 3 };

packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/_config.js

@@ -1,10 +1,11 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
-	skip_if_hydrate: 'permanent',
+	mode: ['client'],
+
 	compileOptions: {
 		dev: true
 	},
+
 	error: 'this={...} of <svelte:component> should specify a Svelte component.'
 });

packages/svelte/tests/runtime-legacy/samples/component-not-constructor/_config.js

@@ -1,8 +1,8 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
-	skip_if_hydrate: 'permanent',
+	mode: ['client'],
+
 	get props() {
 		return { selected: false };
 	},

packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js

@@ -1,7 +1,8 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: true,
+	skip_mode: ['server'],
+
 	html: `
 		<div><div>Value in child component: </div></div>
 	`

packages/svelte/tests/runtime-legacy/samples/deconflict-value/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 
 	html: `
 		<p>Reactive: foo</p>

packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation-2/_config.js

@@ -9,7 +9,7 @@ let originalSpanGetBoundingClientRect;
 let originalParagraphGetBoundingClientRect;
 
 export default test({
-	skip_if_ssr: 'permanent', // no animations in SSR
+	mode: ['client', 'hydrate'], // no animations in SSR
 	get props() {
 		return {
 			things: [

packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this/_config.js

@@ -1,12 +1,15 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_hydrate: 'permanent', // SSR errors on render already
+	mode: ['client', 'server'], // SSR errors on render already
+
 	compileOptions: {
 		dev: true
 	},
+
 	get props() {
 		return { tag: 123 };
 	},
+
 	error: '<svelte:element> expects "this" attribute to be a string.'
 });

packages/svelte/tests/runtime-legacy/samples/module-context-bind/_config.js

@@ -1,6 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent',
+	mode: ['client', 'hydrate'],
 	html: '<div>object</div>'
 });

packages/svelte/tests/runtime-legacy/samples/onmount-fires-when-ready-nested/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // uses oncreate
+	mode: ['client', 'hydrate'], // uses oncreate
 
 	html: '<div><p>true</p>\n<p>true</p></div>'
 });

packages/svelte/tests/runtime-legacy/samples/onmount-fires-when-ready/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // uses oncreate
+	mode: ['client', 'hydrate'], // uses oncreate
 
 	html: '<div><p>true</p></div>',
 

packages/svelte/tests/runtime-legacy/samples/pre-tag/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_hydrate: 'permanent', // output is correct, but test suite chokes on the extra ssr comment which is harmless
+	mode: ['client', 'server'], // output is correct, but test suite chokes on the extra ssr comment which is harmless
 	withoutNormalizeHtml: true,
 	html: get_html(false),
 	ssrHtml: get_html(true)

packages/svelte/tests/runtime-legacy/samples/preserve-comments/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // a separate SSR test exists
+	mode: ['client', 'hydrate'], // a separate SSR test exists
 
 	compileOptions: {
 		preserveComments: true

packages/svelte/tests/runtime-legacy/samples/set-in-oncreate/_config.js

@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_if_ssr: 'permanent', // uses oncreate
+	mode: ['client', 'hydrate'], // uses oncreate
 
 	html: '<p>2</p>'
 });