export default {
	async test({ assert, component, target, raf }) {
		const t = target.querySelector('#t');

		await (component.condition = false);

		let time = 0;
		raf.tick((time += 25));

		assert.htmlEqual(
			target.innerHTML,
			`
			<div id="t" foo="0.75">TRUE</div>
			<div id="f">FALSE</div>
		`
		);

		// toggling back in the middle of the out transition
		// will reuse the previous element
		await (component.condition = true);

		assert.htmlEqual(
			target.innerHTML,
			`
			<div id="f">FALSE</div>
			<div id="t" foo="1">TRUE</div>
		`
		);
		assert.equal(target.querySelector('#t'), t);

		raf.tick((time += 25));

		assert.htmlEqual(
			target.innerHTML,
			`
			<div id="f" foo="0.75">FALSE</div>
			<div id="t" foo="1">TRUE</div>
		`
		);

		raf.tick((time += 75));

		assert.htmlEqual(
			target.innerHTML,
			`
			<div id="t" foo="1">TRUE</div>
		`
		);
	}
};