test: cover the each.js outro path and the flip-back-while-paused case

pull/18431/head
Nic 3 days ago
parent 79dfd51c14
commit f77cebf37f

@ -0,0 +1,23 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
// #15604 — a removed each item mid-outro must not be resurrected by an ancestor pause/resume
export default test({
test({ assert, target, raf }) {
const [remove, fetch] = target.querySelectorAll('button');
raf.tick(200);
assert.equal(target.querySelectorAll('.item').length, 3);
flushSync(() => remove.click());
flushSync(() => fetch.click());
raf.tick(30);
flushSync(() => fetch.click());
raf.tick(2000);
const items = [...target.querySelectorAll('.item')].map((el) => el.textContent);
assert.deepEqual(items, ['a', 'c']);
}
});

@ -0,0 +1,19 @@
<script>
import { fade } from 'svelte/transition';
let fetching = $state(false);
let items = $state(['a', 'b', 'c']);
</script>
<button onclick={() => (items = items.filter((i) => i !== 'b'))}>remove</button>
<button onclick={() => (fetching = !fetching)}>fetch</button>
{#if fetching}
<p>loading</p>
{:else}
<div transition:fade={{ duration: 100 }}>
{#each items as item (item)}
<div class="item" transition:fade|global={{ duration: 100 }}>{item}</div>
{/each}
</div>
{/if}

@ -0,0 +1,24 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
// #15604 companion — flipping the condition back while the ancestor is paused must still revive the element
export default test({
test({ assert, target, raf }) {
const [toggle, fetch] = target.querySelectorAll('button');
raf.tick(200);
assert.ok(target.querySelector('.red'));
flushSync(() => toggle.click());
flushSync(() => fetch.click());
raf.tick(30);
flushSync(() => toggle.click());
flushSync(() => fetch.click());
raf.tick(2000);
assert.ok(target.querySelector('.red'));
}
});

@ -0,0 +1,19 @@
<script>
import { fade } from 'svelte/transition';
let fetching = $state(false);
let shown = $state(true);
</script>
<button onclick={() => (shown = !shown)}>toggle</button>
<button onclick={() => (fetching = !fetching)}>fetch</button>
{#if fetching}
<p>loading</p>
{:else}
<div transition:fade={{ duration: 100 }}>
{#if shown}
<div class="red" transition:fade|global={{ duration: 100 }}>red</div>
{/if}
</div>
{/if}
Loading…
Cancel
Save