Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
187 additions
and 0 deletions.
- +8 −0 app/components/alert-banner.js
- +15 −0 app/controllers/index.js
- +5 −0 app/models/alert.js
- +8 −0 app/routes/index.js
- +20 −0 app/styles/app.sass
- +1 −0 app/templates/components/alert-banner.hbs
- +19 −0 app/templates/index.hbs
- +79 −0 tests/unit/controllers/index-test.js
- +11 −0 tests/unit/models/alert-test.js
- +21 −0 tests/unit/routes/index-test.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'), | ||
}); |
@@ -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', []); | ||
} | ||
}); |
@@ -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'); | ||
}); |