Extract build-messages component

app/components/build-messages.js

@@ -0,0 +1,14 @@
+import Ember from "ember";
+
+export default Ember.Component.extend({
+  tagName: 'span',
+  classNames: ['build-msgs'],
+  actions: {
+    showErrors () {
+      this.get('buildErrors').forEach((error) => {
+        console.error(error);
+      });
+      this.get('notify').info('Errors were dumped to console');
+    }
+  }
+});

app/gist/controller.js

@@ -161,13 +161,6 @@ export default Ember.Controller.extend({
       }
     },
 
-    showErrors () {
-      this.get('buildErrors').forEach((error) => {
-        console.error(error);
-      });
-      this.notify.info('Errors were dumped to console');
-    },
-
     fork (gist) {
       gist.fork().then((response) => {
         this.transitionToRoute('gist.edit', response.id);

app/gist/template.hbs

@@ -45,18 +45,10 @@
 
   <div class="col-md-4 output">
     <div class="header">
-      <span class="build-msgs">
-      {{#if isBuilding}}
-      Building...
-      {{else}}
-        Output
-        ({{#if buildErrors}}
-          <a {{action 'showErrors'}}>{{buildErrors.length}} build errors</a>
-        {{else}}
-          build ok.
-        {{/if}})
-      {{/if}}
-      </span>
+      {{build-messages notify=notify
+                       isBuilding=isBuilding
+                       buildErrors=buildErrors
+      }}
     </div>
     {{run-or-live-reload liveReloadChanged="liveReloadChanged" runNow="runNow"}}
     <div class="url-bar">

app/templates/components/build-messages.hbs

@@ -0,0 +1,10 @@
+{{#if isBuilding}}
+    Building...
+{{else}}
+    Output
+    ({{#if buildErrors}}
+        <a {{action 'showErrors'}}>{{buildErrors.length}} build errors</a>
+    {{else}}
+        build ok.
+    {{/if}})
+{{/if}}

tests/integration/components/build-messages-test.js

@@ -0,0 +1,53 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('build-messages', 'Integration | Component | build messages', {
+  integration: true,
+  beforeEach() {
+    this.cacheConsole = console.error;
+  },
+  afterEach() {
+    console.error = this.cacheConsole;
+  }
+});
+
+test('it shows the number of build messages', function(assert) {
+  assert.expect(2);
+
+  this.set('buildErrors', []);
+  this.set('isBuilding', false);
+  this.set('notify', {
+    info() {}
+  });
+
+  this.render(hbs`{{build-messages buildErrors=buildErrors isBuilding=isBuilding notify=notify}}`);
+
+  assert.equal(this.$('span').text().replace(/\s+/g, " ").trim(), 'Output ( build ok. )', 'shows build ok when no buildErrors');
+
+  this.set('buildErrors', ['error1', 'error2']);
+
+  assert.equal(this.$('span').text().replace(/\s+/g, " ").trim(), 'Output ( 2 build errors )', 'shows number of build errors');
+});
+
+test('it calls notify.info() when clicking on build errors', function(assert) {
+  assert.expect(1);
+
+  let notifyObject = Ember.Object.create({
+    called: false,
+    info() {
+      this.set('called', true);
+    }
+  });
+
+  console.error = () => {};
+  this.set('buildErrors', ['error1', 'error2']);
+  this.set('isBuilding', false);
+  this.set('notify', notifyObject);
+
+  this.render(hbs`{{build-messages buildErrors=buildErrors isBuilding=isBuilding notify=notify}}`);
+
+  this.$('span a').click();
+
+  assert.ok(notifyObject.get('called'), "notify.info() was called");
+});