chore: add async-merge-blocking-pending test from #18983 (#18989)

#18983 adds two new tests. One of them passes on `main`, so we can merge
it independently. The other only passes on `pt-1`, so I'll add it to
that branch
pull/18846/merge
Rich Harris 2 days ago committed by GitHub
parent d9acd2da90
commit 4d2ad8a189
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,34 @@
import { tick } from 'svelte';
import { test } from '../../test';
const buttons = '<button>x</button><button>toggle</button><button>pop</button>';
export default test({
async test({ assert, target }) {
await tick();
const [x, toggle, pop] = target.querySelectorAll('button');
// X is deferred on its own await
x.click();
await tick();
// Y is deferred on the await inside the new branch
toggle.click();
await tick();
// Z hides that branch again, merges into Y, which merges into X
toggle.click();
await tick();
assert.htmlEqual(target.innerHTML, `<p>n = 0</p><p>x = 0</p>${buttons}`);
// the branch's await resolves while it is hidden
pop.click();
await tick();
// W shows the branch again and merges into X
toggle.click();
await tick();
// nothing is pending any more, so X commits
pop.click();
await tick();
assert.htmlEqual(target.innerHTML, `<p>n = 4</p><p>x = 1</p><p>cond: e</p>${buttons}`);
}
});

@ -0,0 +1,29 @@
<script>
let n = $state(0);
let x = $state(0);
let cond = $state(false);
let pend = false;
const deferred = [];
function delay(value) {
if (!pend) return value;
return new Promise((resolve) => deferred.push(() => resolve(value)));
}
</script>
<svelte:boundary>
<p>n = {n}</p>
<p>x = {await delay(x)}</p>
{#if cond}
<p>cond: {await delay('e')}</p>
{/if}
{#snippet pending()}
<p>loading</p>
{/snippet}
</svelte:boundary>
<button onclick={() => { pend = true; n++; x = 1; }}>x</button>
<button onclick={() => { n++; cond = !cond; }}>toggle</button>
<button onclick={() => deferred.pop()()}>pop</button>
Loading…
Cancel
Save