From 6df1839bdc0be04492b14bb9fbf1a6c2d1b23a62 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 21 Apr 2024 18:34:49 -0400 Subject: [PATCH] update tests --- .../svelte/tests/runtime-legacy/shared.ts | 54 ++++++++++++++----- .../samples/each-bind-this-member/_config.js | 6 +++ .../samples/each-bind-this-member/main.svelte | 2 +- .../_config.js | 3 +- .../_config.js | 3 +- .../_config.js | 3 +- .../_config.js | 3 +- .../_config.js | 3 +- .../_config.js | 35 +++++++----- .../samples/props-quoted/_config.js | 3 +- .../runtime-runes/samples/props/_config.js | 6 ++- .../samples/transition-evaluation/_config.js | 7 ++- 12 files changed, 92 insertions(+), 36 deletions(-) diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts index a0d00ec1c5..50f72bf826 100644 --- a/packages/svelte/tests/runtime-legacy/shared.ts +++ b/packages/svelte/tests/runtime-legacy/shared.ts @@ -3,7 +3,7 @@ import { setImmediate } from 'node:timers/promises'; import glob from 'tiny-glob/sync.js'; import * as $ from 'svelte/internal/client'; import { createClassComponent } from 'svelte/legacy'; -import { flushSync } from 'svelte'; +import { flushSync, hydrate, mount, unmount } from 'svelte'; import { render } from 'svelte/server'; import { afterAll, assert, beforeAll } from 'vitest'; import { compile_directory } from '../helpers.js'; @@ -119,7 +119,7 @@ export function runtime_suite(runes: boolean) { return common_setup(cwd, runes, config); }, async (config, cwd, variant, common) => { - await run_test_variant(cwd, config, variant, common); + await run_test_variant(cwd, config, variant, common, runes); } ); } @@ -147,7 +147,8 @@ async function run_test_variant( cwd: string, config: RuntimeTest, variant: 'dom' | 'hydrate' | 'ssr', - compileOptions: CompileOptions + compileOptions: CompileOptions, + runes: boolean ) { let unintended_error = false; @@ -256,15 +257,35 @@ async function run_test_variant( } }; - const instance = createClassComponent({ - component: mod.default, - props: config.props, - target, - immutable: config.immutable, - intro: config.intro, - recover: config.recover ?? false, - hydrate: variant === 'hydrate' - }); + let instance: any; + let props: any; + + if (runes) { + props = $.proxy({ ...(config.props || {}) }); + + // TODO get rid + props.$set = (new_props: Record) => { + Object.assign(props, new_props); + }; + + const render = variant === 'hydrate' ? hydrate : mount; + instance = render(mod.default, { + target, + props, + intro: config.intro, + recover: config.recover ?? false + }); + } else { + instance = createClassComponent({ + component: mod.default, + props: config.props, + target, + immutable: config.immutable, + intro: config.intro, + recover: config.recover ?? false, + hydrate: variant === 'hydrate' + }); + } // eslint-disable-next-line no-console console.warn = warn; @@ -303,7 +324,7 @@ async function run_test_variant( htmlEqualWithOptions: assert_html_equal_with_options }, variant, - component: instance, + component: runes ? props : instance, mod, target, snapshot, @@ -318,7 +339,12 @@ async function run_test_variant( assert.fail('Expected a runtime error'); } } finally { - instance.$destroy(); + if (runes) { + unmount(instance); + } else { + instance.$destroy(); + } + assert_html_equal( target.innerHTML, '', diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js index 4b5596cb3a..51458e901d 100644 --- a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js @@ -1,6 +1,12 @@ import { test } from '../../test'; export default test({ + get props() { + return { + items: [{ src: 'https://ds' }] + }; + }, + async test({ assert, target, component }) { assert.equal(target.querySelector('img'), component.items[0].img); } diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte index 7d46ea90f0..2926ba615b 100644 --- a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte @@ -1,5 +1,5 @@ {#each items as item, i} diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js index 2667fff13c..fcfcd1be26 100644 --- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; import { log } from './log.js'; @@ -32,7 +33,7 @@ export default test({ log.length = 0; - component.n += 1; + flushSync(() => (component.n += 1)); assert.deepEqual(log, [ 'parent: $effect.pre 1', diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js index e528189597..26218a2ce7 100644 --- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; import { log } from './log.js'; @@ -27,7 +28,7 @@ export default test({ log.length = 0; - component.n += 1; + flushSync(() => (component.n += 1)); assert.deepEqual(log, [ 'parent: render 1', diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js index 62a4b85546..5bf03853d7 100644 --- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; import { log } from './log.js'; @@ -32,7 +33,7 @@ export default test({ log.length = 0; - component.n += 1; + flushSync(() => (component.n += 1)); assert.deepEqual(log, [ 'parent: $effect.pre 1', diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js index bc62b4f2c9..75c85bb298 100644 --- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-5/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; import { log } from './log.js'; @@ -14,7 +15,7 @@ export default test({ assert.deepEqual(log, ['$effect.pre 0', 'another $effect.pre 1', 'render n0', 'render i1']); log.length = 0; - component.n += 1; + flushSync(() => (component.n += 1)); assert.deepEqual(log, ['$effect.pre 1', 'another $effect.pre 2', 'render n1', 'render i2']); } diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js index 0c7118df75..d6781f5c9d 100644 --- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; import { log } from './log.js'; @@ -28,7 +29,7 @@ export default test({ log.length = 0; - component.n += 1; + flushSync(() => (component.n += 1)); assert.deepEqual(log, [ 'parent: $effect.pre 1', diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js index 0919bdfca9..68402956d5 100644 --- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from '../../../../src/index-client.js'; import { test } from '../../test'; // Tests that default values only fire lazily when the prop is undefined, and every time @@ -8,22 +9,32 @@ export default test({ p2: 0, p3: 0 }, + html: `

props: 0 0 0 0 1 1 1 1

log: nested.fallback_value,fallback_fn`, + async test({ assert, target, component }) { - component.p0 = undefined; - component.p1 = undefined; - component.p2 = undefined; - component.p3 = undefined; - // Nuance: these are already undefined in the props, but we're setting them to undefined again, - // which calls the fallback value again, even if it will result in the same value. There's no way - // to prevent this, and in practise it won't matter - and you shouldn't use accessors in runes mode anyway. - component.p4 = undefined; - component.p5 = undefined; - component.p6 = undefined; - component.p7 = undefined; + flushSync(() => { + component.p0 = undefined; + component.p1 = undefined; + component.p2 = undefined; + component.p3 = undefined; + }); + + assert.htmlEqual( + target.innerHTML, + `

props: 1 1 1 1 1 1 1 1

log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn` + ); + + flushSync(() => { + component.p4 = undefined; + component.p5 = undefined; + component.p6 = undefined; + component.p7 = undefined; + }); + assert.htmlEqual( target.innerHTML, - `

props: 1 1 1 1 1 1 1 1

log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn` + `

props: 1 1 1 1 1 1 1 1

log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn` ); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js b/packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js index c2cc143e5c..7058097317 100644 --- a/packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/props-quoted/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from 'svelte'; import { test } from '../../test'; export default test({ @@ -8,7 +9,7 @@ export default test({ html: `hello`, async test({ assert, target, component }) { - component['kebab-case'] = 'goodbye'; + flushSync(() => (component['kebab-case'] = 'goodbye')); assert.htmlEqual(target.innerHTML, `goodbye`); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/props/_config.js b/packages/svelte/tests/runtime-runes/samples/props/_config.js index 751d89e35b..d1b9d721c0 100644 --- a/packages/svelte/tests/runtime-runes/samples/props/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/props/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from '../../../../src/index-client.js'; import { test } from '../../test'; export default test({ @@ -9,10 +10,13 @@ export default test({ default2: undefined }; }, + html: `x 1 2 3 z`, async test({ assert, target, component }) { - component.foo = 'y'; + flushSync(() => { + component.foo = 'y'; + }); assert.htmlEqual(target.innerHTML, `y 1 2 3 z`); // rest props don't generate accessors, so we need to use $set diff --git a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js index f07ed3e0a6..982cd3a9eb 100644 --- a/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/transition-evaluation/_config.js @@ -1,3 +1,4 @@ +import { flushSync } from '../../../../src/index-client.js'; import { test } from '../../test'; export default test({ @@ -5,8 +6,10 @@ export default test({ const div = /** @type {HTMLDivElement & { foo?: number }} */ (target.querySelector('div')); assert.equal(div.foo, undefined); - component.foo = 2; - component.visible = false; + flushSync(() => { + component.foo = 2; + component.visible = false; + }); assert.equal(div.foo, 2); } });