add env var form tests

app/components/add-env-var.coffee

@@ -7,13 +7,18 @@ AddEnvVarComponent = Ember.Component.extend
   store: Ember.inject.service()
 
   isValid: () ->
-    true
+    if Ember.isBlank(@get('name'))
+      this.set('nameIsBlank', true)
+      false
+    else
+      true
 
   reset: ->
     @setProperties(name: null, value: null, public: null)
 
   actions:
     save: ->
+      console.log('SUBMITTED')
       return if @get('isSaving')
       @set('isSaving', true)
 
@@ -34,5 +39,8 @@ AddEnvVarComponent = Ember.Component.extend
       else
         @set('isSaving', false)
 
+    nameChanged: ->
+      this.set('nameIsBlank', false)
+
 
 `export default AddEnvVarComponent`

app/templates/components/add-env-var.hbs

@@ -1,6 +1,9 @@
 <form {{action "save" on="submit"}}>
+  {{#if nameIsBlank }}
+    <p class="form-error">Name cannot be blank</p>
+  {{/if}}
   <div class="form-elem">
-    {{input value=name class="env-name" placeholder="Name"}}
+    {{input value=name class="env-name" on="key-press" action="nameChanged" placeholder="Name"}}
   </div>
   <div class="form-elem">
     {{input value=value class="env-value" placeholder="Value"}}

ember-cli-build.js

@@ -37,7 +37,6 @@ module.exports = function(defaults) {
   app.import('vendor/ansiparse.js');
   app.import('vendor/log.js');
   app.import('vendor/customerio.js');
-  app.import('vendor/charmscout.js');
   app.import('bower_components/moment/moment.js');
 
   return app.toTree();

tests/integration/components/add-env-var-test.js

@@ -0,0 +1,62 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+
+moduleForComponent('add-env-var', 'Integration | Component | add env-var', {
+  integration: true
+});
+
+test('it adds an env var on submit', function(assert) {
+  assert.expect(5);
+
+  var store = this.container.lookup('store:main');
+  assert.equal(store.all('envVar').get('length'), 0, 'precond: store should be empty');
+
+  var repo;
+  Ember.run(function() {
+    repo  = store.push('repo', {id: 1, slug: 'travis-ci/travis-web'});
+  });
+
+  this.set('repo', repo);
+
+  this.render(hbs`{{add-env-var repo=repo}}`);
+
+  this.$('.env-name').val('FOO');
+  var e = jQuery.Event("keyup");
+  e.which = 50;
+  this.$('.env-name').trigger(e);
+
+  this.$('.env-value').val('bar');
+  var e = jQuery.Event("keyup");
+  e.which = 50;
+  this.$('.env-value').trigger(e);
+
+  this.$('.form-submit').click();
+
+  assert.equal(store.all('envVar').get('length'), 1, 'env var should be added to store');
+
+  var envVar = store.all('envVar').objectAt(0);
+
+  assert.equal(envVar.get('name'), 'FOO', 'name should be set for the env var');
+  assert.equal(envVar.get('value'), 'bar', 'value should be set for the env var');
+  assert.equal(envVar.get('repo.slug'), 'travis-ci/travis-web', 'repo should be set for the env var');
+});
+
+test('it shows an error if no name is present', function(assert) {
+  assert.expect(3);
+
+  this.render(hbs`{{add-env-var repo=repo}}`);
+
+  this.$('.env-name').val();
+  assert.ok(Ember.isBlank(this.$('.env-name').val()), 'precond: name input should be empty');
+
+  this.$('.form-submit').click();
+
+  assert.ok(this.$('.form-error').length, 'the error message should be displayed');
+
+  var e = jQuery.Event("keypress");
+  e.which = 50;
+  this.$('.env-name').trigger(e);
+
+  assert.ok(!this.$('.form-error').length, 'the error message should be removed after value is changed');
+});

tests/unit/components/add-env-var-test.coffee

@@ -0,0 +1,17 @@
+`import { test, moduleForComponent } from 'ember-qunit'`
+
+moduleForComponent 'env-var', {
+  # specify the other units that are required for this test
+  # needs: ['component:foo', 'helper:bar']
+}
+
+test 'it renders', (assert) ->
+  assert.expect 2
+
+  # creates the component instance
+  component = @subject()
+  assert.equal component._state, 'preRender'
+
+  # renders the component to the page
+  @render()
+  assert.equal component._state, 'inDOM'