update tests

pull/11277/head
Rich Harris 1 year ago
parent 1ab235d242
commit 6df1839bdc

@ -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<string, any>) => {
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,
'',

@ -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);
}

@ -1,5 +1,5 @@
<script>
let { items = $bindable([{ src: 'https://ds' }]) } = $props();
let { items } = $props();
</script>
{#each items as item, i}

@ -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',

@ -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',

@ -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',

@ -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']);
}

@ -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',

@ -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: `<p>props: 0 0 0 0 1 1 1 1</p><p>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,
`<p>props: 1 1 1 1 1 1 1 1</p><p>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,
`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
`<p>props: 1 1 1 1 1 1 1 1</p><p>log: nested.fallback_value,fallback_fn,nested.fallback_value,fallback_fn`
);
}
});

@ -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`);
}
});

@ -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

@ -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);
}
});

Loading…
Cancel
Save