show-products-test.js

import Ember from "ember";
import { test, moduleForComponent } from "ember-qunit";

moduleForComponent("show-products");

test('should not show products for the first time', function() {
 var component = this.subject();

 equal(component.get('showingProducts'), false);
});

test('should show products when clicked on link', function() {
 var component = this.subject();
 
 Ember.run(function() {
  component.send('toggleElement');
 })
 
 equal(component.get('showingProducts'), true)
});

test('shows one product', function() {
 var component = this.subject();
 
 Ember.run(function() {
  component.set('products', [ 'Remote Control']);
  component.send('toggleElement');
 });
 
 equal(this.$().find('ul li').length, 1)
 
});

test('shows multiple products', function() {
 var component = this.subject();
 
 Ember.run(function() {
  component.set('products', [ 'Remote Control', 'AAA Battery']);
  component.send('toggleElement');
 });
 
 equal(this.$().find('ul li').length, 2)
 
})

show-products.hbs

<p class="intro smaller">Products <a href="#">See all</a></p>
 <div class="products">
  {{#if showingProducts}}
   <ul>
    {{#each products}}
     <li>{{.}}</li>
    {{/each}}
   </ul>
  {{/if}}
 </div>

show-products.js

import Ember from "ember";

export default Ember.Component.extend({
 showingProducts: false,

 toggleElement: function() {
  this.toggleProperty('showingProducts');
 }

});

template.hbs

{{show-products products=products}}