Extract builds-item as a component to not use itemController

app/components/builds-item.coffee

@@ -0,0 +1,12 @@
+`import Ember from 'ember'`
+`import { gravatarImage } from 'travis/utils/urls'`
+
+BuildsItemComponent = Ember.Component.extend
+  classNameBindings: ['build.state']
+  classNames: ['tile', 'tile--small', 'tile--build', 'row']
+
+  urlAuthorGravatarImage: (->
+    gravatarImage(@get('build.commit.authorEmail'), 40)
+  ).property('build.commit.authorEmail')
+
+`export default BuildsItemComponent`

app/controllers/builds-item.coffee

@@ -1,20 +0,0 @@
-`import Ember from 'ember'`
-`import { colorForState } from 'travis/utils/helpers'`
-`import GithubUrlProperties from 'travis/mixins/github-url-properties'`
-`import { gravatarImage } from 'travis/utils/urls'`
-
-Controller = Ember.ObjectController.extend(GithubUrlProperties,
-  needs: ['builds']
-  isPullRequestsListBinding: 'controllers.builds.isPullRequestsList'
-  buildBinding: 'model'
-
-  color: (->
-    colorForState(@get('build.state'))
-  ).property('build.state')
-
-  urlAuthorGravatarImage: (->
-    gravatarImage(@get('build.commit.committerEmail'), 40)
-  ).property('build.commit.authorEmail')
-)
-
-`export default Controller`

app/controllers/builds.coffee

@@ -1,8 +1,6 @@
 `import Ember from 'ember'`
 
 Controller = Ember.ArrayController.extend
-  isPullRequestsList: false
-
   sortAscending: false
   sortProperties: ['number']
 

app/routes/pull-requests.coffee

@@ -2,16 +2,6 @@
 
 Route = AbstractBuildsRoute.extend(
   contentType: 'pull_requests'
-
-  # TODO: it would be better to have separate controller for branches and PRs list
-  setupController: (controller, model) ->
-    @_super(controller, model)
-
-    this.controllerFor('builds').set('isPullRequestsList', true)
-
-  deactivate: ->
-    @_super.apply(this, arguments)
-    this.controllerFor('builds').set('isPullRequestsList', false)
 )
 
 `export default Route`

app/templates/builds.hbs

@@ -1,56 +1,7 @@
 {{#if content.isLoaded}}
 {{!-- <table id="builds" class="list"> --}}
-  {{#each build in controller itemController="buildsItem"}}
+  {{#each controller as |build|}}
-    <div {{bind-attr class="build.state :tile :tile--small :tile--build :row"}}>
+    {{builds-item build=build}}
-      <div class="tile-status">
-        <span {{bind-attr class=":icon :icon-status build.state"}}></span>
-        <span {{bind-attr class=":request-kind build.eventType :icon"}}></span>
-      </div>
-      <div class="column tile-main medium-6">
-        <h2>
-          {{#if isPullRequestsList}}
-            <small>PR #{{build.pullRequestNumber}}</small>
-            {{#link-to "build" build.repo build}}
-              {{{format-message build.pullRequestTitle short="true" repoBinding=build.repo}}}
-            {{/link-to}}
-          {{else}}
-            <small>{{build.commit.branch}}</small>
-            {{#link-to "build" build.repo build}}
-              {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
-            {{/link-to}}
-          {{/if}}
-        </h2>
-        <p class="tile-author"><img {{bind-attr src="build.urlAuthorGravatarImage"}} alt="">{{build.commit.committerName}} committed</p>
-      </div>
-      <div class="column tile-additional medium-6 end">
-        <div class="column small-6">
-          <p class="build-status">
-            {{#if build.id}}
-              {{#link-to "build" build.repo build}}
-                <span class="icon icon-hash"></span>
-                {{build.number}} {{build.state}}
-              {{/link-to}}
-            {{/if}}
-          </p>
-          <p class="">
-            <a {{bind-attr href="build.urlGithubCommit"}}>
-              <span class="icon icon-github"></span>
-              {{format-sha build.commit.sha}}
-            </a>
-          </p>
-        </div>
-        <div class="column small-6">
-          <p class="" {{bind-attr title="build.duration"}}>
-            <span class="icon icon-clock"></span>
-            {{format-duration build.duration}}
-          </p>
-          <p class="" {{bind-attr title="build.formattedFinishedAt"}}>
-            <span class="icon icon-cal"></span>
-            {{format-time build.finishedAt}}
-          </p>
-        </div>
-      </div>
-    </div>
   {{/each}}
   {{#if displayShowMoreButton}}
     <p>

app/templates/components/builds-item.hbs

@@ -0,0 +1,48 @@
+<div class="tile-status">
+  <span {{bind-attr class=":icon :icon-status build.state"}}></span>
+  <span {{bind-attr class=":request-kind build.eventType :icon"}}></span>
+</div>
+<div class="column tile-main medium-6">
+  <h2>
+    {{#if build.isPullRequest}}
+      <small>PR #{{build.pullRequestNumber}}</small>
+      {{#link-to "build" build.repo build}}
+        {{{format-message build.pullRequestTitle short="true" repoBinding=build.repo}}}
+      {{/link-to}}
+    {{else}}
+      <small>{{build.commit.branch}}</small>
+      {{#link-to "build" build.repo build}}
+        {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
+      {{/link-to}}
+    {{/if}}
+  </h2>
+  <p class="tile-author"><img {{bind-attr src="urlAuthorGravatarImage"}} alt="">{{build.commit.committerName}} committed</p>
+</div>
+<div class="column tile-additional medium-6 end">
+  <div class="column small-6">
+    <p class="build-status">
+      {{#if build.id}}
+        {{#link-to "build" build.repo build}}
+          <span class="icon icon-hash"></span>
+          {{build.number}} {{build.state}}
+        {{/link-to}}
+      {{/if}}
+    </p>
+    <p class="">
+      <a {{bind-attr href="build.urlGithubCommit"}}>
+        <span class="icon icon-github"></span>
+        {{format-sha build.commit.sha}}
+      </a>
+    </p>
+  </div>
+  <div class="column small-6">
+    <p class="" {{bind-attr title="build.duration"}}>
+      <span class="icon icon-clock"></span>
+      {{format-duration build.duration}}
+    </p>
+    <p class="" {{bind-attr title="build.formattedFinishedAt"}}>
+      <span class="icon icon-cal"></span>
+      {{format-time build.finishedAt}}
+    </p>
+  </div>
+</div>

tests/unit/components/builds-item-test.coffee

@@ -0,0 +1,17 @@
+`import { test, moduleForComponent } from 'ember-qunit'`
+
+moduleForComponent 'builds-item', {
+  # specify the other units that are required for this test
+  # needs: ['component:foo', 'helper:bar']
+}
+
+test 'it renders', (assert) ->
+  assert.expect 2
+
+  # creates the component instance
+  component = @subject()
+  assert.equal component._state, 'preRender'
+
+  # renders the component to the page
+  @render()
+  assert.equal component._state, 'inDOM'

tests/unit/components/jobs-item-test.coffee

@@ -29,7 +29,7 @@ test 'it renders', ->
   ok component.$('.job-os').hasClass('linux'), 'OS class should be added for OS icon'
   equal component.$('.job-duration').text().trim(), '1 min 40 sec', 'duration should be displayed'
 
-test 'ouputs info on not set properties', ->
+test 'outputs info on not set properties', ->
   job = Ember.Object.create()
 
   component = @subject(job: job)