pull/15844/head
Rich Harris 2 months ago
parent 27b46a98ce
commit 68f59c0cce

@ -1,33 +1,51 @@
import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test';
/** @type {ReturnType<typeof deferred>} */
let d;
export default test({
html: `<p>pending</p>`,
get props() {
d = deferred();
html: `
<button>reset</button>
<button>hello</button>
<button>again</button>
<p>pending</p>
`,
return {
promise: d.promise
};
},
async test({ assert, target }) {
const [reset, hello, again] = target.querySelectorAll('button');
async test({ assert, target, component }) {
d.resolve('hello');
hello.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>again</button>
<h1>hello</h1>
`
);
d = deferred();
component.promise = d.promise;
reset.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>again</button>
<h1>hello</h1>
`
);
d.resolve('hello again');
again.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello again</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>again</button>
<h1>hello again</h1>
`
);
}
});

@ -1,11 +1,15 @@
<script>
import Child from './Child.svelte';
let { promise } = $props();
let deferred = $state(Promise.withResolvers());
</script>
<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
<button onclick={() => deferred.resolve('hello')}>hello</button>
<button onclick={() => deferred.resolve('hello again')}>again</button>
<svelte:boundary>
<Child value={await promise} />
<Child value={await deferred.promise} />
{#snippet pending()}
<p>pending</p>

@ -1,32 +1,51 @@
import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test';
/** @type {ReturnType<typeof deferred>} */
let d;
export default test({
html: `<p>pending</p>`,
get props() {
d = deferred();
html: `
<button>reset</button>
<button>hello</button>
<button>wheee</button>
<p>pending</p>
`,
return {
promise: d.promise
};
},
async test({ assert, target }) {
const [reset, hello, wheee] = target.querySelectorAll('button');
async test({ assert, target, component }) {
d.resolve('hello');
hello.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>wheee</button>
<h1>hello</h1>
`
);
component.promise = (d = deferred()).promise;
reset.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>wheee</button>
<h1>hello</h1>
`
);
d.resolve('wheee');
wheee.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>wheee</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>hello</button>
<button>wheee</button>
<h1>wheee</h1>
`
);
}
});

@ -1,13 +1,17 @@
<script>
let { promise } = $props();
let deferred = $state(Promise.withResolvers());
</script>
<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
<button onclick={() => deferred.resolve('hello')}>hello</button>
<button onclick={() => deferred.resolve('wheee')}>wheee</button>
{#snippet hello(message)}
<h1>{message}</h1>
{/snippet}
<svelte:boundary>
{@render hello(await promise)}
{@render hello(await deferred.promise)}
{#snippet pending()}
<p>pending</p>

@ -1,32 +1,51 @@
import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test';
/** @type {ReturnType<typeof deferred>} */
let d;
export default test({
html: `<p>pending</p>`,
get props() {
d = deferred();
html: `
<button>reset</button>
<button>h1</button>
<button>h2</button>
<p>pending</p>
`,
return {
promise: d.promise
};
},
async test({ assert, target }) {
const [reset, h1, h2] = target.querySelectorAll('button');
async test({ assert, target, component }) {
d.resolve('h1');
h1.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>h1</button>
<button>h2</button>
<h1>hello</h1>
`
);
component.promise = (d = deferred()).promise;
reset.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>h1</button>
<button>h2</button>
<h1>hello</h1>
`
);
d.resolve('h2');
h2.click();
await tick();
assert.htmlEqual(target.innerHTML, '<h2>hello</h2>');
assert.htmlEqual(
target.innerHTML,
`
<button>reset</button>
<button>h1</button>
<button>h2</button>
<h2>hello</h2>
`
);
}
});

@ -1,9 +1,13 @@
<script>
let { promise } = $props();
let deferred = $state(Promise.withResolvers());
</script>
<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
<button onclick={() => deferred.resolve('h1')}>h1</button>
<button onclick={() => deferred.resolve('h2')}>h2</button>
<svelte:boundary>
<svelte:element this={await promise}>hello</svelte:element>
<svelte:element this={await deferred.promise}>hello</svelte:element>
{#snippet pending()}
<p>pending</p>

Loading…
Cancel
Save