Permalink
Browse files

Add simple alert banner component and demo

  • Loading branch information...
alisdair committed Jun 20, 2015
1 parent c9e6ef4 commit 0bcdd3985a680f6e81c907b794af12ccd9b2dff8
@@ -0,0 +1,8 @@
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['alert-banner'],
alert: null,
text: Ember.computed.alias('alert.text'),
});
@@ -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);
}
}
});
@@ -0,0 +1,5 @@
import Ember from 'ember';
export default Ember.Object.extend({
text: null
});
@@ -0,0 +1,8 @@
import Ember from 'ember';
export default Ember.Route.extend({
setupController(controller/*, model*/) {
this._super.apply(this, arguments);
controller.set('alerts', []);
}
});
@@ -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
@@ -0,0 +1 @@
{{text}}
@@ -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>
@@ -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"');
});
@@ -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);
});
@@ -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');
});

0 comments on commit 0bcdd39

Please sign in to comment.