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