Add test for repeated bind:group case

pull/4774/head
Th0rN13 5 years ago
parent 0c51aa70de
commit 00b97b91b2

@ -124,6 +124,7 @@ export function xlink_attr(node, attribute, value) {
node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
} }
// To force uncheck repeated group, need to store old value
let oldValue: Set<unknown> = new Set(); let oldValue: Set<unknown> = new Set();
export function get_binding_group_value(group) { export function get_binding_group_value(group) {

@ -0,0 +1,113 @@
const values = [
{ name: 'Alpha' },
{ name: 'Beta' },
{ name: 'Gamma' }
];
export default {
props: {
values,
selected: [values[1]]
},
html: `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<p>Beta</p>`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);
assert.equal(inputs[1].checked, true);
assert.equal(inputs[2].checked, false);
assert.equal(inputs[3].checked, true);
const event = new window.Event('change');
inputs[0].checked = true;
await inputs[0].dispatchEvent(event);
assert.htmlEqual(target.innerHTML, `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<p>Alpha, Beta</p>
`);
inputs[1].checked = false;
await inputs[1].dispatchEvent(event);
assert.htmlEqual(target.innerHTML, `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<p>Alpha</p>
`);
component.selected = [values[0], values[1]];
assert.equal(inputs[0].checked, true);
assert.equal(inputs[1].checked, true);
assert.equal(inputs[0].checked, true);
assert.equal(inputs[1].checked, true);
assert.htmlEqual(target.innerHTML, `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<p>Alpha, Beta</p>
`);
}
};

@ -0,0 +1,22 @@
<script>
export let selected;
export let values;
</script>
<label>
<input type="checkbox" value="{values[0]}" bind:group={selected} /> {values[0].name}
</label>
<label>
<input type="checkbox" value="{values[1]}" bind:group={selected} /> {values[1].name}
</label>
<label>
<input type="checkbox" value="{values[0]}" bind:group={selected} /> {values[0].name}
</label>
<label>
<input type="checkbox" value="{values[1]}" bind:group={selected} /> {values[1].name}
</label>
<p>{selected.map( function ( value ) { return value.name; }).join( ', ' ) }</p>
Loading…
Cancel
Save