mirror of https://github.com/sveltejs/svelte
clean up event handlers on re-mount (#4493)
parent
7d1e4e82ff
commit
b4b57c39a2
@ -0,0 +1,42 @@
|
||||
export default {
|
||||
async test({ assert, component, target, window }) {
|
||||
// set first
|
||||
await component.lists.update(() => [
|
||||
{ text: "item1" },
|
||||
{ text: "item2" },
|
||||
{ text: "item3" }
|
||||
]);
|
||||
|
||||
await component.lists.update(() => [
|
||||
{ text: "item3" },
|
||||
{ text: "item2" },
|
||||
{ text: "item1" }
|
||||
]);
|
||||
|
||||
await component.lists.update(() => [
|
||||
{ text: "item1" },
|
||||
{ text: "item2" },
|
||||
{ text: "item3" }
|
||||
]);
|
||||
|
||||
assert.equal(component.updated, 4);
|
||||
|
||||
const [item1, item2] = target.childNodes;
|
||||
const [item1Btn1, item1Btn2] = item1.querySelectorAll('button');
|
||||
const [item2Btn1, item2Btn2] = item2.querySelectorAll('button');
|
||||
|
||||
const clickEvent = new window.MouseEvent('click');
|
||||
|
||||
await item1Btn1.dispatchEvent(clickEvent);
|
||||
assert.equal(component.getNormalCount(), 1);
|
||||
|
||||
await item1Btn2.dispatchEvent(clickEvent);
|
||||
assert.equal(component.getModifierCount(), 1);
|
||||
|
||||
await item2Btn1.dispatchEvent(clickEvent);
|
||||
assert.equal(component.getNormalCount(), 2);
|
||||
|
||||
await item2Btn2.dispatchEvent(clickEvent);
|
||||
assert.equal(component.getModifierCount(), 2);
|
||||
}
|
||||
};
|
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import {afterUpdate} from 'svelte'
|
||||
import {writable} from 'svelte/store'
|
||||
|
||||
const normal = writable(0);
|
||||
const modifier = writable(0);
|
||||
export let updated = 0;
|
||||
export const lists = writable([]);
|
||||
|
||||
const click = (e, type) => {
|
||||
if(type === 'normal'){
|
||||
$normal ++;
|
||||
}else{
|
||||
$modifier ++;
|
||||
}
|
||||
}
|
||||
afterUpdate(() => updated++);
|
||||
|
||||
export function getNormalCount() {
|
||||
return $normal;
|
||||
}
|
||||
export function getModifierCount() {
|
||||
return $modifier;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each $lists as item (item.text)}
|
||||
<div>
|
||||
{item.text}
|
||||
<button on:click={(e)=>click(e,'normal')}>
|
||||
Normal
|
||||
</button>
|
||||
<button on:click|preventDefault={(e)=> click(e,'modifier')}>
|
||||
Modifier
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
Loading…
Reference in new issue