ember-formulaic

    0.0.6 • Public • Published

    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/test-helper.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: 'ralph@thoughtbot.com',
        password: 'secret',
        remember-me: true,
        role: 'user',
      });
     
      // without a namespace
      fillForm({
        'login.email': 'ralph@thoughtbot.com',
        '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="me@example.com"}}</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 (me@example.com) 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

    Running Tests

    • ember test
    • ember test --server

    Building

    • ember build

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

    Keywords

    Install

    npm i ember-formulaic

    DownloadsWeekly Downloads

    2

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • luke_mitchell
    • tysongach
    • ralphbot
    • setphen
    • vendela
    • keiranking
    • seanpdoyle