Add simple alert banner component and demo

app/components/alert-banner.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['alert-banner'],
+
+  alert: null,
+  text: Ember.computed.alias('alert.text'),
+});

app/controllers/index.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import Alert from '../models/alert';
+
+export default Ember.Controller.extend({
+  alerts: [],
+  alertText: 'Alert banner text',
+  createDisabled: Ember.computed.empty('alertText'),
+
+  actions: {
+    createAlert() {
+      let alert = Alert.create({ text: this.get('alertText') });
+      this.get('alerts').pushObject(alert);
+    }
+  }
+});

app/models/alert.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Object.extend({
+  text: null
+});

app/routes/index.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  setupController(controller/*, model*/) {
+    this._super.apply(this, arguments);
+    controller.set('alerts', []);
+  }
+});

app/styles/app.sass

@@ -9,3 +9,23 @@ $spacing: 20px
 
 h1
   margin-top: 0
+
+.alert-banner-container
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  margin: auto
+  width: 50%
+  min-width: 150px
+  z-index: 2
+
+.alert-banner
+  background: #eee
+  border: 1px solid #ddd
+  padding: $spacing / 2
+  margin: $spacing / 2 auto
+  text-align: center
+
+.form-group
+  margin: $spacing / 2 0

app/templates/components/alert-banner.hbs

@@ -0,0 +1 @@
+{{text}}

app/templates/index.hbs

@@ -0,0 +1,19 @@
+<div class="alert-banner-container">
+  {{#each alerts as |alert|}}
+    {{alert-banner alert=alert}}
+  {{/each}}
+</div>
+
+<h2>Alert Banner</h2>
+
+<form>
+  <div class="form-group">
+    {{input placeholder="Alert text" value=alertText}}
+  </div>
+
+  <div class="form-group">
+    <button {{action 'createAlert'}} disabled={{createDisabled}}>
+      Create alert
+    </button>
+  </div>
+</form>

tests/unit/controllers/index-test.js

@@ -0,0 +1,79 @@
+import { moduleFor, test } from 'ember-qunit';
+import Ember from 'ember';
+
+moduleFor('controller:index', 'Unit | Controller | index',  {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('alerts is an array', function(assert) {
+  assert.expect(1);
+  var controller = this.subject();
+  assert.equal(Ember.typeOf(controller.get('alerts')), 'array');
+});
+
+test('has default alert text', function(assert) {
+  assert.expect(1);
+  var controller = this.subject();
+  assert.equal(controller.get('alertText'), 'Alert banner text');
+});
+
+test('creating alerts is disabled when alert text is empty', function(assert) {
+  assert.expect(4);
+  var controller = this.subject();
+
+  assert.equal(controller.get('createDisabled'), false,
+              'create is enabled by default');
+
+  Ember.run(() => controller.set('alertText', null));
+
+  assert.equal(controller.get('createDisabled'), true,
+              'create is disabled when alertText is null');
+
+  Ember.run(() => controller.set('alertText', ''));
+
+  assert.equal(controller.get('createDisabled'), true,
+              'create is disabled when alertText is empty string');
+
+  Ember.run(() => controller.set('alertText', 'x'));
+
+  assert.equal(controller.get('createDisabled'), false,
+              'create is enabled when alertText is one character');
+});
+
+test('createAlert action creates an alert with the text', function(assert) {
+  assert.expect(2);
+  var controller = this.subject();
+
+  Ember.run(() => {
+    controller.set('alerts', []);
+    controller.set('alertText', 'Test text');
+    controller.send('createAlert');
+  });
+
+  let alerts = controller.get('alerts');
+  assert.equal(alerts.length, 1, 'controller has one alert');
+  assert.equal(alerts[0].get('text'), 'Test text', 'alert has specified text');
+});
+
+test('createAlert can create multiple alerts', function(assert) {
+  assert.expect(3);
+  var controller = this.subject();
+
+  Ember.run(() => {
+    controller.set('alerts', []);
+    controller.set('alertText', 'First alert');
+    controller.send('createAlert');
+    controller.set('alertText', 'Another alert');
+    controller.send('createAlert');
+  });
+
+  let alerts = controller.get('alerts');
+  assert.equal(alerts.length, 2, 'controller has two alerts');
+
+  assert.equal(alerts[0].get('text'), 'First alert',
+               'first alert has text "First alert"');
+
+  assert.equal(alerts[1].get('text'), 'Another alert',
+               'first alert has text "Another alert"');
+});

tests/unit/models/alert-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('model:alert', 'Unit | Model | alert', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  var model = this.subject();
+  assert.ok(!!model);
+});

tests/unit/routes/index-test.js

@@ -0,0 +1,21 @@
+import { moduleFor, test } from 'ember-qunit';
+import Ember from 'ember';
+
+moduleFor('route:index', 'Unit | Route | index',  {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('resets alerts array on controller', function(assert) {
+  assert.expect(2);
+  var route = this.subject();
+  var controller = Ember.Object.create({
+    alerts: ['One alert']
+  });
+
+  Ember.run(() => route.setupController(controller));
+
+  let alerts = controller.get('alerts');
+  assert.equal(Ember.typeOf(alerts), 'array', 'alerts is an array');
+  assert.equal(alerts.length, 0, 'alerts array is empty');
+});