export default {
	props: {
		items: [
			{ description: 'one', completed: true },
			{ description: 'two', completed: false },
			{ description: 'three', completed: false }
		]
	},

	html: `
		<div>
			<input type="checkbox"><p>one</p>
		</div>
		<div>
			<input type="checkbox"><p>two</p>
		</div>
		<div>
			<input type="checkbox"><p>three</p>
		</div>
		<p>1 completed</p>
	`,

	ssrHtml: `
		<div>
			<input type="checkbox" checked><p>one</p>
		</div>
		<div>
			<input type="checkbox"><p>two</p>
		</div>
		<div>
			<input type="checkbox"><p>three</p>
		</div>
		<p>1 completed</p>
	`,

	async test({ assert, component, target, window }) {
		const inputs = [ ...target.querySelectorAll('input') ];

		assert.ok(inputs[0].checked);
		assert.ok(!inputs[1].checked);
		assert.ok(!inputs[2].checked);

		const event = new window.Event('change');

		inputs[1].checked = true;
		await inputs[1].dispatchEvent(event);

		assert.equal(component.numCompleted, 2);
		assert.htmlEqual(target.innerHTML, `
			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
			<p>2 completed</p>
		`);

		const items = component.items;
		items[2].completed = true;

		component.items = items;
		assert.ok(inputs[2].checked);
		assert.htmlEqual(target.innerHTML, `
			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
			<p>3 completed</p>
		`);
	}
};