mirror of https://github.com/sveltejs/svelte
maintain context for keyed each (#5840)
parent
a41c7644e6
commit
63669330f6
@ -0,0 +1,65 @@
|
||||
export default {
|
||||
html: `
|
||||
<label><input type="checkbox" value="Vanilla"> Vanilla</label>
|
||||
<label><input type="checkbox" value="Strawberry"> Strawberry</label>
|
||||
<label><input type="checkbox" value="Chocolate"> Chocolate</label>
|
||||
<label><input type="checkbox" value="Lemon"> Lemon</label>
|
||||
<label><input type="checkbox" value="Coconut"> Coconut</label>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const [input1, input2, input3, input4, input5] = target.querySelectorAll('input');
|
||||
const event = new window.Event('change');
|
||||
|
||||
input3.checked = true;
|
||||
await input3.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="Chocolate"> Chocolate</label>
|
||||
<label><input type="checkbox" value="Vanilla"> Vanilla</label>
|
||||
<label><input type="checkbox" value="Strawberry"> Strawberry</label>
|
||||
<label><input type="checkbox" value="Lemon"> Lemon</label>
|
||||
<label><input type="checkbox" value="Coconut"> Coconut</label>
|
||||
`);
|
||||
|
||||
assert.equal(input1.checked, false);
|
||||
assert.equal(input2.checked, false);
|
||||
assert.equal(input3.checked, true);
|
||||
assert.equal(input4.checked, false);
|
||||
assert.equal(input5.checked, false);
|
||||
|
||||
input4.checked = true;
|
||||
await input4.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="Chocolate"> Chocolate</label>
|
||||
<label><input type="checkbox" value="Lemon"> Lemon</label>
|
||||
<label><input type="checkbox" value="Vanilla"> Vanilla</label>
|
||||
<label><input type="checkbox" value="Strawberry"> Strawberry</label>
|
||||
<label><input type="checkbox" value="Coconut"> Coconut</label>
|
||||
`);
|
||||
|
||||
assert.equal(input1.checked, false);
|
||||
assert.equal(input2.checked, false);
|
||||
assert.equal(input3.checked, true);
|
||||
assert.equal(input4.checked, true);
|
||||
assert.equal(input5.checked, false);
|
||||
|
||||
input3.checked = false;
|
||||
await input3.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<label><input type="checkbox" value="Lemon"> Lemon</label>
|
||||
<label><input type="checkbox" value="Chocolate"> Chocolate</label>
|
||||
<label><input type="checkbox" value="Vanilla"> Vanilla</label>
|
||||
<label><input type="checkbox" value="Strawberry"> Strawberry</label>
|
||||
<label><input type="checkbox" value="Coconut"> Coconut</label>
|
||||
`);
|
||||
|
||||
assert.equal(input1.checked, false);
|
||||
assert.equal(input2.checked, false);
|
||||
assert.equal(input3.checked, false);
|
||||
assert.equal(input4.checked, true);
|
||||
assert.equal(input5.checked, false);
|
||||
}
|
||||
};
|
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let flavours = [
|
||||
'Vanilla',
|
||||
'Strawberry',
|
||||
'Chocolate',
|
||||
'Lemon',
|
||||
'Coconut'
|
||||
];
|
||||
|
||||
let choices = [];
|
||||
|
||||
// Put choices first by sorting
|
||||
$: flavours = flavours.sort((a, b) => choices.includes(b) - choices.includes(a));
|
||||
</script>
|
||||
|
||||
{#each flavours as flavour (flavour)}
|
||||
<label>
|
||||
<input type=checkbox bind:group={choices} value={flavour}>
|
||||
{flavour}
|
||||
</label>
|
||||
{/each}
|
Loading…
Reference in new issue