const tasks = [ { description : 'put your left leg in' , done : false } , { description : 'your left leg out' , done : false } , { description : 'in, out, in, out' , done : false } , { description : 'shake it all about' , done : false } ] ; export default { skip_if_ssr : true , props : { tasks , selected : tasks [ 0 ] } , html : `
		<select>
			<option value='[object Object]'>put your left leg in</option>
			<option value='[object Object]'>your left leg out</option>
			<option value='[object Object]'>in, out, in, out</option>
			<option value='[object Object]'>shake it all about</option>
		</select>

		<label>
			<input type='checkbox'> put your left leg in
		</label>

		<h2>Pending tasks</h2>
		<p>put your left leg in</p>
		<p>your left leg out</p>
		<p>in, out, in, out</p>
		<p>shake it all about</p>
	` , async test ( { assert , component , target , window } ) { const input = target . querySelector ( 'input' ) ; const select = target . querySelector ( 'select' ) ; const options = target . querySelectorAll ( 'option' ) ; const change = new window . Event ( 'change' ) ; input . checked = true ; await input . dispatchEvent ( change ) ; assert . ok ( component . tasks [ 0 ] . done ) ; assert . htmlEqual ( target . innerHTML , `
			<select>
				<option value='[object Object]'>put your left leg in</option>
				<option value='[object Object]'>your left leg out</option>
				<option value='[object Object]'>in, out, in, out</option>
				<option value='[object Object]'>shake it all about</option>
			</select>

			<label>
				<input type='checkbox'> put your left leg in
			</label>

			<h2>Pending tasks</h2>
			<p>your left leg out</p>
			<p>in, out, in, out</p>
			<p>shake it all about</p>
		` ) ; options [ 1 ] . selected = true ; await select . dispatchEvent ( change ) ; assert . equal ( component . selected , tasks [ 1 ] ) ; assert . ok ( ! input . checked ) ; input . checked = true ; await input . dispatchEvent ( change ) ; assert . ok ( component . tasks [ 1 ] . done ) ; assert . htmlEqual ( target . innerHTML , `
			<select>
				<option value='[object Object]'>put your left leg in</option>
				<option value='[object Object]'>your left leg out</option>
				<option value='[object Object]'>in, out, in, out</option>
				<option value='[object Object]'>shake it all about</option>
			</select>

			<label>
				<input type='checkbox'> your left leg out
			</label>

			<h2>Pending tasks</h2>
			<p>in, out, in, out</p>
			<p>shake it all about</p>
		` ) ; } } ;