Ember.js Component Test (for code review)

signup-form-test.js

import Ember from 'ember';
import {
  moduleForComponent,
  test
} from 'ember-qunit';

moduleForComponent('signup-form', 'SignupFormComponent', {
  // specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar']
  needs: [
    'service:validations',
    'ember-validations@validator:local/presence',
    'ember-validations@validator:local/format'
  ]
});

test('it renders', function() {
  expect(2);

  var component;

  // creates the component instance
  Ember.run(() => {
    component = this.subject();
  });
  equal(component._state, 'preRender');

  // appends the component to the page
  this.append();
  equal(component._state, 'inDOM');
});


function setupComponent(test, signupProperties={}) {
  var component;
  var signup = new Ember.Object();
  signup.setProperties(signupProperties);

  // wrap test.subject() in Ember.run as validations mixin causes async behaviors
  // on initialization
  Ember.run(function() {
    component = test.subject();
    component.set('model', signup);
    test.append();
  });
  return component;
}

test('displays no errors on load', function() {
  expect(1);
  var component = setupComponent(this);
  equal(component.$('.form-control-errors').length, 0);
});

test('displays missing team name error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="teamName"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "can't be blank");
  });
});

test('displays missing full name error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="fullName"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "can't be blank");
  });
});

test('displays incomplete full name error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="fullName"]').val('Fred');
    component.$('input[name="fullName"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "must include first and last name");
  });
});

test('displays missing email error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="email"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "can't be blank");
  });
});

test('displays invalid email error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="email"]').val('test');
    component.$('input[name="email"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "must be a valid e-mail");
  });
});

test('displays no error for valid e-mail', function() {
  expect(1);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="email"]').val('[email protected]');
    component.$('input[name="email"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 0);
  });
});

test('displays missing password error', function() {
  expect(2);
  var component = setupComponent(this);

  Ember.run(() => {
    component.$('input[name="password"]').blur();
  });
  Ember.run(() => {
    equal(component.$('.form-control-errors').length, 1);
    equal(component.$('.form-control-errors').text().trim(), "can't be blank");
  });
});

test('triggers external action when valid form is submitted', function() {
  expect(1);
  var component = setupComponent(this, {
    teamName: 'Test',
    fullName: 'Test User',
    email: '[email protected]',
    password: 'testing'
  });

  var targetObject = {
    externalAction: function() {
      ok(true, 'external Action was called!');
    }
  };

  component.set('submit', 'externalAction');
  component.set('targetObject', targetObject);

  component.$('form').trigger('submit');
});

test('shows alert when invalid form is submitted', function() {
  expect(1);
  var component = setupComponent(this);
  var expectedText = "Please check the errors above and try again.";

  window.alert = function(text) {
    equal(text, expectedText, 'expected ' + text + ' to be ' + expectedText);
  };

  // catch error thrown from failed validation promise
  try {
    component.$('form').trigger('submit');
  } catch(error) {}
});

signup-form.js

import Ember from 'ember';
import LazyValidationsMixin from '../mixins/lazy-validations';

export default Ember.Component.extend(LazyValidationsMixin, {

  model: null,

  validations: {
    'model.teamName': { presence: true },
    'model.fullName': {
      presence: true,
      format: {
        with: /^(.*\s\S.*)+$/,
        allowBlank: true,
        message: 'must include first and last name'
      }
    },
    'model.email': {
      presence: true,
      format: {
        with: /^[^@\s]+@[^@\s]+\.[^@\s]+$/,
        allowBlank: true,
        message: 'must be a valid e-mail'
      }
    },
    'model.password': { presence: true }
  },

  actions: {
    submit: function() {
      return this.validate().then(() => {
        this.sendAction('submit');
      }, (error) => {
        alert('Please check the errors above and try again.');
        throw error;
      });
    }
  },

  submitButtonText: function() {
    if (this.get('model.isSaving')) {
      return 'Saving...';
    } else {
      return 'Signup';
    }
  }.property('model.isSaving'),

  submitDisabled: function() {
    return this.get('model.isSaving');
  }.property('model.isSaving')

});