Build a component that renders a list of fruits using template iteration.
The starter component class already declares the array fruits = ['Apple', 'Banana', 'Cherry', 'Mango']; — do not change it. Your job is in the template: inside the existing <ul> element with the class fruits, render one <li> element per fruit using the for:each directive. The items must appear in the same order as the array, and each <li> text must be exactly the fruit name (for example, Apple).
Examples:
Rendered output:
<ul class="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Mango</li>
</ul>
The tests check:
- A <ul> element with class "fruits" exists
- It contains exactly 4 <li> elements
- The items appear in order: Apple, Banana, Cherry, Mango