mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.3 KiB
91 lines
2.3 KiB
const tasks = [
|
|
{ description: 'put your left leg in', done: false },
|
|
{ description: 'your left leg out', done: false },
|
|
{ description: 'in, out, in, out', done: false },
|
|
{ description: 'shake it all about', done: false }
|
|
];
|
|
|
|
export default {
|
|
skip_if_ssr: true,
|
|
|
|
props: {
|
|
tasks,
|
|
selected: tasks[0]
|
|
},
|
|
|
|
html: `
|
|
<select>
|
|
<option value='[object Object]'>put your left leg in</option>
|
|
<option value='[object Object]'>your left leg out</option>
|
|
<option value='[object Object]'>in, out, in, out</option>
|
|
<option value='[object Object]'>shake it all about</option>
|
|
</select>
|
|
|
|
<label>
|
|
<input type='checkbox'> put your left leg in
|
|
</label>
|
|
|
|
<h2>Pending tasks</h2>
|
|
<p>put your left leg in</p>
|
|
<p>your left leg out</p>
|
|
<p>in, out, in, out</p>
|
|
<p>shake it all about</p>
|
|
`,
|
|
|
|
async test({ assert, component, target, window }) {
|
|
const input = target.querySelector('input');
|
|
const select = target.querySelector('select');
|
|
const options = target.querySelectorAll('option');
|
|
|
|
const change = new window.Event('change');
|
|
|
|
input.checked = true;
|
|
await input.dispatchEvent(change);
|
|
|
|
assert.ok(component.tasks[0].done);
|
|
assert.htmlEqual(target.innerHTML, `
|
|
<select>
|
|
<option value='[object Object]'>put your left leg in</option>
|
|
<option value='[object Object]'>your left leg out</option>
|
|
<option value='[object Object]'>in, out, in, out</option>
|
|
<option value='[object Object]'>shake it all about</option>
|
|
</select>
|
|
|
|
<label>
|
|
<input type='checkbox'> put your left leg in
|
|
</label>
|
|
|
|
<h2>Pending tasks</h2>
|
|
<p>your left leg out</p>
|
|
<p>in, out, in, out</p>
|
|
<p>shake it all about</p>
|
|
`);
|
|
|
|
options[1].selected = true;
|
|
await select.dispatchEvent(change);
|
|
assert.equal(component.selected, tasks[1]);
|
|
assert.ok(!input.checked);
|
|
|
|
input.checked = true;
|
|
await input.dispatchEvent(change);
|
|
|
|
assert.ok(component.tasks[1].done);
|
|
assert.htmlEqual(target.innerHTML, `
|
|
<select>
|
|
<option value='[object Object]'>put your left leg in</option>
|
|
<option value='[object Object]'>your left leg out</option>
|
|
<option value='[object Object]'>in, out, in, out</option>
|
|
<option value='[object Object]'>shake it all about</option>
|
|
</select>
|
|
|
|
<label>
|
|
<input type='checkbox'> your left leg out
|
|
</label>
|
|
|
|
<h2>Pending tasks</h2>
|
|
<p>in, out, in, out</p>
|
|
<p>shake it all about</p>
|
|
`);
|
|
}
|
|
};
|