export default { props : { items : [ { done : false , text : 'one' } , { done : true , text : 'two' } , { done : false , text : 'three' } ] } , html : `
		<div>
			<input type="checkbox">
			<input type="text"><p>one</p>
		</div>
		<div>
			<input type="checkbox">
			<input type="text"><p>two</p>
		</div>
		<div>
			<input type="checkbox">
			<input type="text"><p>three</p>
		</div>

		<p>remaining:one / done:two / remaining:three</p>
	` , ssrHtml : `
		<div>
			<input type="checkbox">
			<input type="text" value=one><p>one</p>
		</div>
		<div>
			<input type="checkbox" checked="">
			<input type="text" value=two><p>two</p>
		</div>
		<div>
			<input type="checkbox">
			<input type="text" value=three><p>three</p>
		</div>

		<p>remaining:one / done:two / remaining:three</p>
	` , async test ( { assert , component , target , window } ) { function set_text ( i , text ) { const input = target . querySelectorAll ( 'input[type="text"]' ) [ i ] ; input . value = text ; input . dispatchEvent ( new window . Event ( 'input' ) ) ; } function set_done ( i , done ) { const input = target . querySelectorAll ( 'input[type="checkbox"]' ) [ i ] ; input . checked = done ; input . dispatchEvent ( new window . Event ( 'change' ) ) ; } component . filter = 'remaining' ; assert . htmlEqual ( target . innerHTML , `
			<div>
				<input type="checkbox">
				<input type="text"><p>one</p>
			</div>
			<div>
				<input type="checkbox">
				<input type="text"><p>three</p>
			</div>

			<p>remaining:one / done:two / remaining:three</p>
		` ) ; await set_text ( 1 , 'four' ) ; assert . htmlEqual ( target . innerHTML , `
			<div>
				<input type="checkbox">
				<input type="text"><p>one</p>
			</div>
			<div>
				<input type="checkbox">
				<input type="text"><p>four</p>
			</div>

			<p>remaining:one / done:two / remaining:four</p>
		` ) ; assert . deepEqual ( component . items , [ { done : false , text : 'one' } , { done : true , text : 'two' } , { done : false , text : 'four' } ] ) ; await set_done ( 0 , true ) ; assert . htmlEqual ( target . innerHTML , `
			<div>
				<input type="checkbox">
				<input type="text"><p>four</p>
			</div>

			<p>done:one / done:two / remaining:four</p>
		` ) ; assert . deepEqual ( component . items , [ { done : true , text : 'one' } , { done : true , text : 'two' } , { done : false , text : 'four' } ] ) ; component . filter = 'done' ; assert . htmlEqual ( target . innerHTML , `
			<div>
				<input type="checkbox">
				<input type="text"><p>one</p>
			</div>
			<div>
				<input type="checkbox">
				<input type="text"><p>two</p>
			</div>

			<p>done:one / done:two / remaining:four</p>
		` ) ; } } ;