export default {
	html: `<div>000</div>`,
	async test({ assert, component, target, window }) {
		let div = target.querySelector("div");
		component.value = 2;
		assert.htmlEqual(target.innerHTML, `<div>200</div>`);
		assert.notStrictEqual(div, target.querySelector("div"));

		div = target.querySelector("div");

		component.anotherValue = 5;
		assert.htmlEqual(target.innerHTML, `<div>250</div>`);
		assert.notStrictEqual(div, target.querySelector("div"));

		div = target.querySelector("div");

		component.thirdValue = 9;
		assert.htmlEqual(target.innerHTML, `<div>259</div>`);
		assert.strictEqual(div, target.querySelector("div"));

		// make dirty while maintain the value of `value + anotherValue`
		// should update the content, but not recreate the elements
		await component.$set({ value: 4, anotherValue: 3 });

		assert.htmlEqual(target.innerHTML, `<div>439</div>`);
		assert.strictEqual(div, target.querySelector("div"));
	}
};