mirror of https://github.com/sveltejs/svelte
parent
60f8653417
commit
858dc357a1
@ -0,0 +1,56 @@
|
|||||||
|
import { flushSync, tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<h1>a</h1>
|
||||||
|
<button>a</button>
|
||||||
|
<button>b</button>
|
||||||
|
<button>c</button>
|
||||||
|
<button>ok</button>
|
||||||
|
<p>a</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
const [a, b, c, ok] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => b.click());
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<h1>c</h1>
|
||||||
|
<button>a</button>
|
||||||
|
<button>b</button>
|
||||||
|
<button>c</button>
|
||||||
|
<button>ok</button>
|
||||||
|
<p>c</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => ok.click());
|
||||||
|
|
||||||
|
flushSync(() => b.click());
|
||||||
|
await Promise.resolve();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<h1>b</h1>
|
||||||
|
<button>a</button>
|
||||||
|
<button>b</button>
|
||||||
|
<button>c</button>
|
||||||
|
<button>ok</button>
|
||||||
|
<p>b</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,43 @@
|
|||||||
|
<script lang=ts>
|
||||||
|
let route = $state('a');
|
||||||
|
let ok = $state(false);
|
||||||
|
|
||||||
|
function goto(r) {
|
||||||
|
return Promise.resolve().then(() => {
|
||||||
|
route = r;
|
||||||
|
throw new Error('nope');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>{route}</h1>
|
||||||
|
<button onclick={() => route = 'a'}>a</button>
|
||||||
|
<button onclick={() => route = 'b'}>b</button>
|
||||||
|
<button onclick={() => route = 'c'}>c</button>
|
||||||
|
<button onclick={() => ok = true}>ok</button>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
{#if route === 'a'}
|
||||||
|
<p>a</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if route === 'b'}
|
||||||
|
{#if ok}
|
||||||
|
<p>b</p>
|
||||||
|
{:else}
|
||||||
|
{await goto('c')}
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if route === 'c'}
|
||||||
|
<p>c</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>pending...</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{#snippet failed(error, reset)}
|
||||||
|
<button onclick={reset}>retry</button>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
Loading…
Reference in new issue