isabella232 / ember-formulaic

Simplify form filling in acceptance tests

Ember-Formulaic

Simplify form filling with i18n translations.

Remove the tedium of formulaic form filling with Ember Test Helpers

Formulaic allows you to specify a hash of attributes to be input rather than procedurally calling Ember’s DSL methods.

Usage

First, import the test helpers:

// tests/start-app.js
import './ember-formulaic/test-helpers';

Assume the page has the following template:

{{! app/templates/login.hbs }}

<form {{action "login" on="submit"}}>
  <div class="input">
    <label for="email">{{t "login.email"}}</label>
    {{input id="email" type="text" value=email}}
  </div>

  <div class="input">
    <label for="password">{{t "login.password"}}</label>
    {{input id="password" type="password" value=password}}
  </div>

  <div class="input">
    <label for="remember-me">{{t "login.remember-me"}}</label>
    {{input id="remember-me" type="checkbox" value=remember}}
  </div>

  <div class="input">
    <label for="role">{{t "login.role"}}</label>
    <select id="role">
      <option value="admin">Admin</option>
      <option value="user">User</option>
    </select>
  </div>

  <button class="submit">{{t "login.submit"}}</button>
</form>

and the following translations:

// app/locales/en/translations.js

export default {
  'login': {
    'email': 'Email or Username',
    'password': 'Password',
    'remember-me': 'Remember Me',
    'role': 'Role',
    'submit': 'Login',
  }
};

In your acceptance test, use the fillForm method:

// test/acceptance/fill-in-form-test.js

test('fill in form', function() {
  visit('/login')

  // with the 'login' namespace
  fillForm('login', {
    email: '[email protected]',
    password: 'secret',
    remember-me: true,
    role: 'user',
  });

  // without a namespace
  fillForm({
    'login.email': '[email protected]',
    'login.password': 'secret',
    'login.remember-me': true,
    'login.role': 'user',
  });
  clickOn('form.submit');

  andThen(function() {
    equal(currentPath(), 'loggedInPath');
  });
});

Translations with embedded HTML

When translating a label with HTML:

<label for="send-emails>{{t "send-emails" email="[email protected]"}}</label>
<input id="send-emails" type="checkbox">

with the following translation file:

export default {
  'send-emails': 'Send me (<strong>{{email}}</strong>) emails',
};

fillForm and clickOn will strip out the <strong> tags when looking for label:contains("Send me ([email protected]) emails").

Missing Translations

In the case of missing translations, fillForm and clickOn will fallback to looking up label tags containing the value of the translation key.

For instance:

clickOn('A label without a translation');

will look for first look for a translation keyed by "A label without a translation", fail, then fallback to looking for label:contains("A label without a translation").

NOTE:

If you've overridden app/utils/i18n/missing-message.js to return a non-null value that doesn't begin with Missing translation, this behavior won't work.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

ember-formulaic is Copyright (c) 2015 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

ember-formulaic is maintained by Sean Doyle.

ember-formulaic is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.