mirror of https://github.com/sveltejs/svelte
#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 branchpull/18846/merge
parent
d9acd2da90
commit
4d2ad8a189
@ -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…
Reference in new issue