export default {
	html: `
		<div>
			Hello World
			<input />
			<input />
		</div>
		<div>
			Sapper App
			<input />
			<input />
		</div>
	`,

	ssrHtml: `
		<div>
			Hello World
			<input value="Hello"/>
			<input value="World"/>
		</div>
		<div>
			Sapper App
			<input value="Sapper"/>
			<input value="App"/>
		</div>
	`,
	async test({ assert, target, window }) {
		const [input1, input2, input3, input4] = target.querySelectorAll("input");
		input1.value = "Awesome";
		await input1.dispatchEvent(new window.Event("input"));

		assert.htmlEqual(
			target.innerHTML,
			`
				<div>
					Awesome World
					<input />
					<input />
				</div>
				<div>
					Sapper App
					<input />
					<input />
				</div>
      `
		);

		input2.value = "Svelte";
		await input2.dispatchEvent(new window.Event("input"));

		assert.htmlEqual(
			target.innerHTML,
			`
				<div>
					Awesome Svelte
					<input />
					<input />
				</div>
				<div>
					Sapper App
					<input />
					<input />
				</div>
			`
		);

		input3.value = "Foo";
		await input3.dispatchEvent(new window.Event("input"));

		assert.htmlEqual(
			target.innerHTML,
			`
				<div>
					Awesome Svelte
					<input />
					<input />
				</div>
				<div>
					Foo App
					<input />
					<input />
				</div>
			`
		);

		input4.value = "Bar";
		await input4.dispatchEvent(new window.Event("input"));

		assert.htmlEqual(
			target.innerHTML,
			`
				<div>
					Awesome Svelte
					<input />
					<input />
				</div>
				<div>
					Foo Bar
					<input />
					<input />
				</div>
			`
		);
	},
};