mirror of https://github.com/sveltejs/svelte
fix reactivity with assigning item in each block (#4945)
parent
bf6c74fb17
commit
0f43ad40ab
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
html: `
|
||||
<span class="content">foo</span>
|
||||
<button>Test</button>
|
||||
`,
|
||||
async test({ assert, component, target, window }) {
|
||||
const button = target.querySelector("button");
|
||||
|
||||
const clickEvent = new window.MouseEvent("click");
|
||||
await button.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<span class="content">bar</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
},
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
let obj = {
|
||||
prop: "foo"
|
||||
};
|
||||
|
||||
let arr = [obj]
|
||||
</script>
|
||||
|
||||
{#each arr as o}
|
||||
<span class="content">{o.prop}</span>
|
||||
<button on:click={ () => o = { ...o, prop: "bar" } }>Test</button>
|
||||
{/each}
|
@ -0,0 +1,97 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>Add</button>
|
||||
<span class="content">1</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">3</span>
|
||||
<button>Test</button>
|
||||
`,
|
||||
async test({ assert, component, target, window }) {
|
||||
let [incrementBtn, ...buttons] = target.querySelectorAll("button");
|
||||
|
||||
const clickEvent = new window.MouseEvent("click");
|
||||
await buttons[0].dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Add</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">3</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
|
||||
await buttons[0].dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Add</button>
|
||||
<span class="content">4</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">3</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
|
||||
await buttons[2].dispatchEvent(clickEvent);
|
||||
await buttons[2].dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Add</button>
|
||||
<span class="content">4</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">12</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
|
||||
await incrementBtn.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Add</button>
|
||||
<span class="content">4</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">12</span>
|
||||
<button>Test</button>
|
||||
<span class="content">4</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
|
||||
[incrementBtn, ...buttons] = target.querySelectorAll("button");
|
||||
|
||||
await buttons[3].dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Add</button>
|
||||
<span class="content">4</span>
|
||||
<button>Test</button>
|
||||
<span class="content">2</span>
|
||||
<button>Test</button>
|
||||
<span class="content">12</span>
|
||||
<button>Test</button>
|
||||
<span class="content">8</span>
|
||||
<button>Test</button>
|
||||
`
|
||||
);
|
||||
},
|
||||
};
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
let obj = {
|
||||
prop: "foo"
|
||||
};
|
||||
|
||||
let arr = [1, 2, 3]
|
||||
</script>
|
||||
|
||||
<button on:click={() => arr = [...arr, arr.length + 1]}>Add</button>
|
||||
{#each arr as o}
|
||||
<span class="content">{o}</span>
|
||||
<button on:click={() => { o *= 2; }}>Test</button>
|
||||
{/each}
|
Loading…
Reference in new issue