update test to not rely on props

pull/16197/head
Rich Harris 6 months ago
parent 4f450330d4
commit a469c39cc2

@ -1,7 +1,7 @@
<script> <script>
let { promise, num } = $props(); let { promise, num } = $props();
let value = $derived((await promise) * num); let value = $derived(num + (await promise));
$effect(() => { $effect(() => {
console.log(`$effect ${value} ${num}`); console.log(`$effect ${value} ${num}`);

@ -1,24 +1,19 @@
import { flushSync, tick } from 'svelte'; import { flushSync, tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { ok, test } from '../../test';
import { test } from '../../test';
/** @type {ReturnType<typeof deferred>} */
let d;
export default test({ export default test({
html: `<p>pending</p>`, html: `
<button>resolve a</button>
get props() { <button>resolve b</button>
d = deferred(); <button>reset</button>
<button>increment</button>
<p>pending</p>
`,
return { async test({ assert, target, logs }) {
promise: d.promise, const [resolve_a, resolve_b, reset, increment] = target.querySelectorAll('button');
num: 1
};
},
async test({ assert, target, component, logs }) { flushSync(() => resolve_a.click());
d.resolve(42);
await Promise.resolve(); await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
@ -26,38 +21,36 @@ export default test({
await Promise.resolve(); await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
flushSync(); flushSync();
assert.htmlEqual(target.innerHTML, '<p>42</p>');
component.num = 2; const p = target.querySelector('p');
await Promise.resolve(); ok(p);
await Promise.resolve(); assert.htmlEqual(p.innerHTML, '1a');
flushSync(() => increment.click());
await Promise.resolve(); await Promise.resolve();
await tick(); await tick();
assert.htmlEqual(target.innerHTML, '<p>84</p>'); assert.htmlEqual(p.innerHTML, '2a');
d = deferred(); flushSync(() => reset.click());
component.promise = d.promise; assert.htmlEqual(p.innerHTML, '2a');
await tick();
assert.htmlEqual(target.innerHTML, '<p>84</p>');
d.resolve(43); flushSync(() => resolve_b.click());
await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
await tick(); await tick();
assert.htmlEqual(target.innerHTML, '<p>86</p>'); assert.htmlEqual(p.innerHTML, '2b');
assert.deepEqual(logs, [ assert.deepEqual(logs, [
'outside boundary 1', 'outside boundary 1',
'$effect.pre 42 1', '$effect.pre 1a 1',
'template 42 1', 'template 1a 1',
'$effect 42 1', '$effect 1a 1',
'$effect.pre 84 2', '$effect.pre 2a 2',
'template 84 2', 'template 2a 2',
'outside boundary 2', 'outside boundary 2',
'$effect 84 2', '$effect 2a 2',
'$effect.pre 86 2', '$effect.pre 2b 2',
'template 86 2', 'template 2b 2',
'$effect 86 2' '$effect 2b 2'
]); ]);
} }
}); });

@ -1,11 +1,17 @@
<script> <script>
import Child from './Child.svelte'; import Child from './Child.svelte';
let { promise, num } = $props(); let deferred = $state(Promise.withResolvers());
let num = $state(1);
</script> </script>
<button onclick={() => deferred.resolve('a')}>resolve a</button>
<button onclick={() => deferred.resolve('b')}>resolve b</button>
<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
<button onclick={() => num += 1}>increment</button>
<svelte:boundary> <svelte:boundary>
<Child {promise} {num} /> <Child promise={deferred.promise} {num} />
{#snippet pending()} {#snippet pending()}
<p>pending</p> <p>pending</p>

Loading…
Cancel
Save