export default {
	get props() {
		return { words: ['foo', 'bar', 'baz'] };
	},

	html: `
		<p>foo</p>
		<p>bar</p>
		<p>baz</p>
	`,

	test({ assert, component, target }) {
		const [p1, p2, p3] = target.querySelectorAll('p');

		component.words = ['foo', 'baz'];

		assert.htmlEqual(
			target.innerHTML,
			`
			<p>foo</p>
			<p>baz</p>
		`
		);

		const [p4, p5] = target.querySelectorAll('p');

		assert.ok(!target.contains(p2), '<p> element should be removed');

		assert.equal(p1, p4, 'first <p> element should be retained');
		assert.equal(p3, p5, 'last <p> element should be retained');
	}
};