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');
});