Integration | Component | signup form

components.signup-form.js

import Em from 'ember';

const birthdayRE = /\d{4}-\d{2}-\d{2}/;

export default Em.Component.extend({

  classNames: ['col-md-12', 'section-post-comment'],
  title: 'Sign-up',

  /**
   * Because components are singletons, we should re-create the field values any
   * time that the form is re-inserted on the page
   */
  willInsertElement() {
    this._super(...arguments);
    Em.run.once(() => {
      this.set('formValues', Em.Object.create({
        email: '',
        username: '',
        firstName: '',
        lastName: '',
        birthday: '',
        gender: 'unspecified',
        // These are just the field values.
        createPassword: '',
        confirmPassword: ''
      }));
    });
  },


  /**
   * Computed property which reflects whether the form has been completely filled out.
   * //TODO: Better validation would be nice. IE: Email
   */
  submitIsDisabled: Em.computed('formValues.createPassword', 'formValues.confirmPassword', 'formValues.username',
    'formValues.firstName', 'formValues.lastName', 'formValues.email',
    function() {

      if (!this.get('formValues.username') || this.get('formValues.username.length') < 4) {
        return true;
      }
      if (this.get('formValues.confirmPassword') !== this.get('formValues.createPassword') || this.get('formValues.confirmPassword') < 4 ) {
        return true;
      }

    }),


  /**
   * Send submitted form data out to handler.
   * Triggered from action fired on submit.
   *
   * @returns {void}
   * @private
   */
  _sendSubmitForm() {
    // Send the formValues out to be handled by external container.
    this.sendAction('handleSubmitForm', this.get('formValues'));
  },


  actions: {
    onSubmitForm() {
      this._sendSubmitForm(...arguments);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'App Lee Name Dah'
});

routes.join.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  actions: {
  	onSubmitForm(newUser) {
    	alert(`Signup for ${newUser.username}`);
    }
  }
});

templates.application.hbs

<h1>Welcome to <small><strong>{{appName}}</strong></small></h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.signup-form.hbs

{{yield}}
<!-- HEADLINE -->
<div class="headline-row">
    <h1 class="section-title caticon sbx"><i>C</i><span class="sport"></span><span class="title">{{title}}</span></h1>
</div>


<div class="row">
    <div class="col-md-8">
        <form class="signup-form form-horizontal" name="create-account" {{action 'onSubmitForm' on='submit'}}>
          {{!
            //==========================================================
            // Users can sign up for an account using this form.
            // Below is a list of inputs html names and Ember
            // property accessible through the component.
            // Acceptance: /tests/acceptance/welcome-test.js
            //
            // When all fields are filled in properly the CP
            // formIsReady should equal true
            //
            // form[name="create-account"]         onsubmit='signUpUser'
            //     input[name="email"]             email
            //     input[name="first-name"]        firstName
            //     input[name="last-name"]         lastName
            //     input[name="username"]          username
            //     input[name="password"]          password
            //     input[name="confirm-password"]  confirmPassword
            //==========================================================
          }}
            <div class="form-group">
                <label class="col-sm-2 control-label">Email: </label>
                <div class="col-sm-10">
                  {{input type="email" name="email" placeholder="Email" class="form-control" value=formValues.email}}
                </div>
            </div>

            <div class="form-group">
                <label for="firstName" class="col-sm-2 control-label">First name: </label>
                <div class="col-sm-10">
                  {{input type="text" name="first-name" placeholder="First Name" class="form-control" value=formValues.firstName}}
                </div>
            </div>

            <div class="form-group">
                <label for="lastName" class="col-sm-2 control-label">Last name: </label>
                <div class="col-sm-10">
                  {{input type="text" name="last-name" placeholder="Last Name" class="form-control" value=formValues.lastName}}
                </div>
            </div>


            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">Username: </label>
                <div class="col-sm-10">
                  {{input type="text" name="username" placeholder="Username" class="form-control" value=formValues.username}}
                </div>
            </div>

            <div class="form-group">
                <label for="create-password" class="col-sm-2 control-label">Password: </label>
                <div class="col-sm-10">
                  {{input type="password" name="create-password" placeholder="Password" class="form-control" value=formValues.createPassword}}
                </div>
            </div>


            <div class="form-group">
                <label for="confirm-password" class="col-sm-2 control-label">Repeat Password: </label>
                <div class="col-sm-10">
                  {{input type="password" name="confirm-password" placeholder="Confirm Password" class="form-control" value=formValues.confirmPassword}}
                </div>
            </div>


            <div class="form-group">
                <div class="col-sm-4">
                  {{#if submitIsDisabled}}
                      <button type="submit" disabled class="btn btn-primary" >Submit</button>
                  {{else}}
                      <button type="submit" class="btn btn-primary" {{action 'onSubmitForm' on='click'}}>Submit</button>
                  {{/if}}
                </div>
            </div>

        </form>
    </div>

    <div class="col-md-4"></div>
</div>

templates.join.hbs

{{signup-form handleSubmitForm='handleSubmitForm'}}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.integration.components.signup-form-test.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import Em from 'ember';


moduleForComponent('signup-form', 'Integration | Component | signup form', {
  integration: true
});


test('it renders the title properly', function(assert) {
  this.render(hbs`{{signup-form}}`);
  assert.notEqual(this.$().text().trim(), '');

  // Template block usage:
  this.render(hbs`
    {{#signup-form title='Test title wakka wakka'}}
      ------------------------><---------------------
    {{/signup-form}}
  `);

  assert.equal(this.$('.headline-row .title').text().trim(), 'Test title wakka wakka');
});


/**
 * Test that when values are placed into the form that submission
 * then becomes possible and upon a submission the values from 
 * the form are sent via the "onSubmitForm" action.
 */
test('it triggers the onSubmitForm action upon submission', function(assert) {

  assert.expect(3);

  let expected = {
    email: 'lah-dah@tah-dun.dah-dha',
    username: 'zippyZappShaDoop',
    firstName: 'Zip',
    lastName: 'PeeZapShaDoop',
    password: '1Two3Floor',
  };

  this.set('actions', Em.Object.create());
  this.set('onSubmitForm', (actual = {}) => {
    let actualParsed = {
      email: actual.get('email'),
      username: actual.get('username'),
      firstName: actual.get('firstName'),
      lastName: actual.get('lastName'),
      password: actual.get('createPassword'),
    };

    assert.deepEqual(actualParsed, expected, 'Passes correct data to onFormSubmit handlers');
  });


  /* 'formValues' on this 'test' scope will be passed into
   * the inline hbs which renders the {{signup-form}}. Under
   * normal situations this data would be filled in through
   * inputs by the user, but for testing purposes it will be
   * manipulated using this.set('formValues.<something>') so 
   * we can see that the values are acurately passed out in 
   * the action 'handleSubmitForm' triggered in the component
   * when the forms submit is triggered.
   */
  this.set('formValues', Em.Object.create());

  this.render(hbs`{{signup-form handleSubmitForm=onSubmitForm formValues=formValues}}`);

  assert.equal(this.$('button[type=submit]').attr('disabled'), 'disabled', 'Form should not be ready before filled out');

  // Fill out the form
  this.set('formValues.email', expected.email);
  this.set('formValues.username', expected.username);
  this.set('formValues.firstName', expected.firstName);
  this.set('formValues.lastName', expected.lastName);
  this.set('formValues.createPassword', expected.password);
  this.set('formValues.confirmPassword', expected.password);
 
  assert.equal(this.$('button[type=submit]').attr('disabled'), undefined, 'Form should be ready with all fields filled out correctly');

  this.$('button[type=submit]').click();

});

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.9.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  }
}