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.
svelte/test/runtime/samples/binding-input-text-contextu.../_config.js

126 lines
2.5 KiB

export default {
props: {
items: [
{ done: false, text: 'one' },
{ done: true, text: 'two' },
{ done: false, text: 'three' }
]
},
html: `
<div>
<input type="checkbox">
<input type="text"><p>one</p>
</div>
<div>
<input type="checkbox">
<input type="text"><p>two</p>
</div>
<div>
<input type="checkbox">
<input type="text"><p>three</p>
</div>
<p>remaining:one / done:two / remaining:three</p>
`,
ssrHtml: `
<div>
<input type="checkbox">
<input type="text" value=one><p>one</p>
</div>
<div>
<input type="checkbox" checked="">
<input type="text" value=two><p>two</p>
</div>
<div>
<input type="checkbox">
<input type="text" value=three><p>three</p>
</div>
<p>remaining:one / done:two / remaining:three</p>
`,
async test({ assert, component, target, window }) {
function set_text(i, text) {
const input = target.querySelectorAll('input[type="text"]')[i];
input.value = text;
input.dispatchEvent(new window.Event('input'));
}
function set_done(i, done) {
const input = target.querySelectorAll('input[type="checkbox"]')[i];
input.checked = done;
input.dispatchEvent(new window.Event('change'));
}
component.filter = 'remaining';
assert.htmlEqual(target.innerHTML, `
<div>
<input type="checkbox">
<input type="text"><p>one</p>
</div>
<div>
<input type="checkbox">
<input type="text"><p>three</p>
</div>
<p>remaining:one / done:two / remaining:three</p>
`);
await set_text(1, 'four');
assert.htmlEqual(target.innerHTML, `
<div>
<input type="checkbox">
<input type="text"><p>one</p>
</div>
<div>
<input type="checkbox">
<input type="text"><p>four</p>
</div>
<p>remaining:one / done:two / remaining:four</p>
`);
assert.deepEqual(component.items, [
{ done: false, text: 'one' },
{ done: true, text: 'two' },
{ done: false, text: 'four' }
]);
await set_done(0, true);
assert.htmlEqual(target.innerHTML, `
<div>
<input type="checkbox">
<input type="text"><p>four</p>
</div>
<p>done:one / done:two / remaining:four</p>
`);
assert.deepEqual(component.items, [
{ done: true, text: 'one' },
{ done: true, text: 'two' },
{ done: false, text: 'four' }
]);
component.filter = 'done';
assert.htmlEqual(target.innerHTML, `
<div>
<input type="checkbox">
<input type="text"><p>one</p>
</div>
<div>
<input type="checkbox">
<input type="text"><p>two</p>
</div>
<p>done:one / done:two / remaining:four</p>
`);
}
};