export default { props: { items: [ { done: false, text: 'one' }, { done: true, text: 'two' }, { done: false, text: 'three' } ] }, html: `

one

two

three

remaining:one / done:two / remaining:three

`, ssrHtml: `

one

two

three

remaining:one / done:two / remaining:three

`, 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, `

one

three

remaining:one / done:two / remaining:three

`); await set_text(1, 'four'); assert.htmlEqual(target.innerHTML, `

one

four

remaining:one / done:two / remaining:four

`); 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, `

four

done:one / done:two / remaining:four

`); assert.deepEqual(component.items, [ { done: true, text: 'one' }, { done: true, text: 'two' }, { done: false, text: 'four' } ]); component.filter = 'done'; assert.htmlEqual(target.innerHTML, `

one

two

done:one / done:two / remaining:four

`); } };