export default {
	props: {
		cats: [
			{
				name: 'cat 0',
				checked: false
			},
			{
				name: 'cat 1',
				checked: false
			}
		]
	},

	html: `
		<input type="checkbox">
		<input type="checkbox">
	`,

	test({ assert, component, target, window }) {
		const { cats } = component;
		const newCats = cats.slice();
		newCats.push({
			name: 'cat ' + cats.length,
			checked: false
		});
		component.cats = newCats;

		let inputs = target.querySelectorAll('input');
		assert.equal(inputs.length, 3);

		const event = new window.Event('change');
		inputs[0].checked = true;
		inputs[0].dispatchEvent(event);

		inputs = target.querySelectorAll('input');
		assert.equal(inputs.length, 3);
	}
};