update test to not rely on props

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

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

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

@ -1,11 +1,17 @@
<script>
import Child from './Child.svelte';
let { promise, num } = $props();
let deferred = $state(Promise.withResolvers());
let num = $state(1);
</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>
<Child {promise} {num} />
<Child promise={deferred.promise} {num} />
{#snippet pending()}
<p>pending</p>

Loading…
Cancel
Save