mirror of https://github.com/sveltejs/svelte
parent
e8fb7f1a46
commit
c2f4787dfa
@ -0,0 +1,27 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 & 3</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 & 3</button>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
const items = $state([
|
||||
{ name: 'test', id: 1, color: 'red' },
|
||||
{ name: 'test 2', id: 2 },
|
||||
{ name: 'test 3', id: 3 },
|
||||
]);
|
||||
const onclick = () => {
|
||||
const from = 0;
|
||||
const to = 2;
|
||||
items.splice(to, 0, items.splice(from, 1)[0]);
|
||||
};
|
||||
</script>
|
||||
|
||||
{#snippet renderItem(item)}
|
||||
<li>
|
||||
{item.name} ({item.id})
|
||||
{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
|
||||
</li>
|
||||
{/snippet}
|
||||
|
||||
<ul>
|
||||
{#each items as item (item.id)}
|
||||
{@render renderItem(item)}
|
||||
{/each}
|
||||
</ul>
|
||||
<button {onclick}>Swap items 1 & 3</button>
|
@ -0,0 +1,27 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<ul><li>test (1)</li> <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 & 3</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<ul><li>test (1)</li><span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 & 3</button>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
const items = $state([
|
||||
{ name: 'test', id: 1, color: 'red' },
|
||||
{ name: 'test 2', id: 2 },
|
||||
{ name: 'test 3', id: 3 },
|
||||
]);
|
||||
const onclick = () => {
|
||||
const from = 0;
|
||||
const to = 2;
|
||||
items.splice(to, 0, items.splice(from, 1)[0]);
|
||||
};
|
||||
</script>
|
||||
|
||||
{#snippet renderItem(item)}
|
||||
<li>
|
||||
{item.name} ({item.id})
|
||||
</li>
|
||||
{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
|
||||
{/snippet}
|
||||
|
||||
<ul>
|
||||
{#each items as item (item.id)}
|
||||
{@render renderItem(item)}
|
||||
{/each}
|
||||
</ul>
|
||||
<button {onclick}>Swap items 1 & 3</button>
|
@ -0,0 +1,42 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>Add new message</button><p>first</p><p>message 1</p>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
/**
|
||||
* @type {{ click: () => void; }}
|
||||
*/
|
||||
let btn1;
|
||||
|
||||
[btn1] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
|
||||
);
|
||||
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
btn1.click();
|
||||
});
|
||||
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p><p>message 3</p>`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
let messages = $state([{id: 1, content: "message 1"}]);
|
||||
|
||||
function add() {
|
||||
const newId = messages.length + 1
|
||||
messages.push({id: 0, tmpId: newId, content: `message ${newId}`})
|
||||
|
||||
queueMicrotask(() => {
|
||||
const msg = messages.find((m) => m.tmpId === newId && m.id === 0)
|
||||
msg.tmpId = ""
|
||||
msg.id = newId
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={add}>Add new message</button>
|
||||
|
||||
{#each messages as msg, i (`${msg.id}_${msg.tmpId ?? ""}`)}
|
||||
{#if i === 0}
|
||||
<p>first</p>
|
||||
{/if}
|
||||
<p>{msg.content}</p>
|
||||
{/each}
|
Loading…
Reference in new issue