EL - Component

components.x-input.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  init() {
    this._super(...arguments);
    this.set('user', {
      name: 'Walter',
      email: 'White',
      password: 'Ozymandias',
      confirmPassword: 'ozymand'
   	});
  }
});

templates.application.hbs

{{x-input
    label='Name'
    value=user.name}}

{{x-input
    type='email'
    label='Email'
    value=user.email
    minlength=1}}

{{x-input
    type='password'
    label='Password'
    value=user.password
    minlength=8}}

{{x-input
    type='password'
    label='Confirm Password'
    value=user.confirmPassword
    match=user.password}}

templates.components.x-input.hbs

<h3 style='color: white; background-color: red'>{{label}} - Replace with your component</h3>

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

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.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.integration.components.x-input-test.js

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

moduleForComponent('x-input', '', {
  integration: true
});

test('{{x-input}} renders with no errors', function(assert) {
  this.render(hbs`{{x-input}}`);
  assert.equal(this.$().text().trim(), '');
});

test('component boundary element', function(assert) {
  this.set('fieldName', 'Name');
  this.render(hbs`{{x-input label=fieldName}}`);

  assert.equal(this.$('p').length, 1, 'boundary element is a <p> tag');
  assert.equal(this.$('.x-input').length, 1, 'boundary element should have the .x-input CSS class');
  assert.equal(this.$('p[data-field-name="name"]').length, 1, 'when label is "Name", we should find data-field-name="name" attribute on the boundary element');
  this.set('fieldName', 'confirmPassword');
  assert.equal(this.$('p[data-field-name="confirm-password"]').length, 1, 'when label is "confirmPassword", we should find data-field-name="confirm-password" attribute on the boundary element\nHINT: Ember adds a function "dasherize" to strings');
});

test('component contents for {{x-input label="Username"}}', function(assert) {
  this.render(hbs`{{x-input label='Username'}}`);

  assert.equal(this.$('.x-input label').length, 1, 'component should contain one <label>');
  assert.equal(this.$('.x-input input').length, 1, 'component should contain one <input>');
  assert.equal(this.$('.x-input .errors').length, 0, 'component should not contain anything with CSS class .errors');
});

test('Component initial state is correctly set up, from label and value attributes passed into it', function(assert) {
  this.set('val', 'Hello');
  this.set('fieldName', 'Username');
  this.render(hbs`{{x-input label=fieldName value=val}}`);

  assert.equal(this.$('.x-input label').text().trim(), 'Username', 'initial text of label is set properly');
  assert.equal(this.$('.x-input input').val(), 'Hello', 'Initial value of <input> is set properly');
});

test('Component updates in response to changes', function(assert) {
  this.set('val', 'Hello');
  this.set('fieldName', 'Username');
  this.render(hbs`{{x-input label=fieldName value=val}}`);

  assert.equal(this.$('.x-input label').text().trim(), 'Username', 'initial text of label is set properly');
  assert.equal(this.$('.x-input input').val(), 'Hello', 'Initial value of <input> is set properly');

  this.set('fieldName', 'Name');
  assert.equal(this.$('.x-input label').text().trim(), 'Name', '<label> text updates in response to property changes');

  this.set('val', 'Goodbye');
  assert.equal(this.$('.x-input input').val(), 'Goodbye', '<input> value updates in response to property changes');
});

test('Validation: minimum # of characters - {{x-input label="Name" value=x minlength=3}}', function(assert) {
  this.set('x', 'Hello');
  this.render(hbs`{{x-input label="Name" value=x minlength=3}}`);
  assert.equal(this.$('.x-input .errors').length, 0, 'If the value is long enough, no .errors element should be in the DOM');

  this.set('x', 'Hi');
  assert.equal(this.$('.x-input .errors').length, 1, 'If the value is too short, we should find one .errors element');
  assert.equal(this.$('.x-input .errors').text().trim(), 'Must be at least 3 characters long',
  'inside the .errors element, we must find a string "Must be at least 3 characters long"');
});

test('Validation: matching another field - {{x-input label="Name" value=x match="foo"}}', function(assert) {
  this.set('x', 'foo');
  this.render(hbs`{{x-input label="Name" value=x match="foo"}}`);
  assert.equal(this.$('.x-input .errors').length, 0, 'If the value matches correctly, no .errors should be found');

  this.set('x', 'Hi');
  assert.equal(this.$('.x-input .errors').length, 1, 'If the value doesn\'t match, we should find one .errors element');
  assert.equal(this.$('.x-input .errors').text().trim(), 'Must match "foo"',
  'If the value doesn\'t match, inside the .errors element we must find a string \'Must match "foo"\'');

  this.set('x', 'foo');
  assert.equal(this.$('.x-input .errors').length, 0, 'If the value goes back to matching correctly, no .errors should be found');  
});

tests.test-helper.js

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

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}