export default { props : { selected : [ 'two' , 'three' ] } , html : `
		<select multiple>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>

		<p>selected: two, three</p>
	` , async test ( { assert , component , target , window } ) { const select = target . querySelector ( 'select' ) ; const options = [ ... target . querySelectorAll ( 'option' ) ] ; const change = new window . Event ( 'change' ) ; options [ 1 ] . selected = false ; await select . dispatchEvent ( change ) ; assert . deepEqual ( component . selected , [ 'three' ] ) ; assert . htmlEqual ( target . innerHTML , `
			<select multiple>
				<option value="one">one</option>
				<option value="two">two</option>
				<option value="three">three</option>
			</select>

			<p>selected: three</p>
		` ) ; options [ 0 ] . selected = true ; await select . dispatchEvent ( change ) ; assert . deepEqual ( component . selected , [ 'one' , 'three' ] ) ; assert . htmlEqual ( target . innerHTML , `
			<select multiple>
				<option value="one">one</option>
				<option value="two">two</option>
				<option value="three">three</option>
			</select>

			<p>selected: one, three</p>
		` ) ; component . selected = [ 'one' , 'two' ] ; assert . ok ( options [ 0 ] . selected ) ; assert . ok ( options [ 1 ] . selected ) ; assert . ok ( ! options [ 2 ] . selected ) ; assert . htmlEqual ( target . innerHTML , `
			<select multiple>
				<option value="one">one</option>
				<option value="two">two</option>
				<option value="three">three</option>
			</select>

			<p>selected: one, two</p>
		` ) ; } } ;