Skip to content

Instantly share code, notes, and snippets.

@mike-north
Created March 24, 2017 18:58
Show Gist options
  • Save mike-north/c27996124e413d2a8ca921f7b7adcdba to your computer and use it in GitHub Desktop.
Save mike-north/c27996124e413d2a8ca921f7b7adcdba to your computer and use it in GitHub Desktop.
EL - Component
import Ember from 'ember';
export default Ember.Component.extend({
});
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'
});
}
});
{{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}}
<h3 style='color: white; background-color: red'>{{label}} - Replace with your component</h3>
import Ember from 'ember';
export default function destroyApp(application) {
Ember.run(application, 'destroy');
}
import Resolver from '../../resolver';
import config from '../../config/environment';
const resolver = Resolver.create();
resolver.namespace = {
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix
};
export default resolver;
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;
}
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');
});
import resolver from './helpers/resolver';
import {
setResolver
} from 'ember-qunit';
setResolver(resolver);
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment