import { test } from '../../test';

export default test({
	get props() {
		return {
			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);
	}
});
