mirror of https://github.com/sveltejs/svelte
Merge pull request #720 from sveltejs/gh-711
ensure data is up to date when re-rendering yield blockspull/723/head
commit
2ab2661585
@ -0,0 +1,20 @@
|
||||
{{#if !hidden}}
|
||||
{{ yield }}
|
||||
{{/if}}
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
hidden: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.set({
|
||||
hidden: !this.get('hidden')
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -0,0 +1,63 @@
|
||||
export default {
|
||||
html: ``,
|
||||
|
||||
data: {
|
||||
letter: 'b'
|
||||
},
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
component.refs.modal.toggle();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<span>b</span>
|
||||
|
||||
<select>
|
||||
<option value='a'>a</option>
|
||||
<option value='b'>b</option>
|
||||
<option value='c'>c</option>
|
||||
</select>
|
||||
`);
|
||||
|
||||
const select = target.querySelector('select');
|
||||
const change = new window.MouseEvent('change');
|
||||
|
||||
select.options[2].selected = true;
|
||||
select.dispatchEvent(change);
|
||||
assert.equal(component.get('letter'), 'c');
|
||||
|
||||
assert.deepEqual(Array.from(select.options).map(o => o.selected), [
|
||||
false,
|
||||
false,
|
||||
true
|
||||
]);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<span>c</span>
|
||||
|
||||
<select>
|
||||
<option value='a'>a</option>
|
||||
<option value='b'>b</option>
|
||||
<option value='c'>c</option>
|
||||
</select>
|
||||
`);
|
||||
|
||||
component.refs.modal.toggle();
|
||||
component.refs.modal.toggle();
|
||||
|
||||
assert.deepEqual(Array.from(select.options).map(o => o.selected), [
|
||||
false,
|
||||
false,
|
||||
true
|
||||
]);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<span>c</span>
|
||||
|
||||
<select>
|
||||
<option value='a'>a</option>
|
||||
<option value='b'>b</option>
|
||||
<option value='c'>c</option>
|
||||
</select>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,23 @@
|
||||
<Modal ref:modal>
|
||||
<span>{{letter}}</span>
|
||||
<select bind:value='letter'>
|
||||
{{#each letters as letter}}
|
||||
<option value="{{letter}}">{{letter}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</Modal>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.html';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
letters: ['a', 'b', 'c']
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Modal
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue