Skip to content

Instantly share code, notes, and snippets.

@ultimatemonty
Created August 10, 2018 03:00
Show Gist options
  • Save ultimatemonty/62428d1a35a581f241e88ed14ffce30d to your computer and use it in GitHub Desktop.
Save ultimatemonty/62428d1a35a581f241e88ed14ffce30d to your computer and use it in GitHub Desktop.
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { fillIn, render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { find } from 'ember-native-dom-helpers';
module('Integration | Component | slds-input', function(hooks) {
setupRenderingTest(hooks);
test('it renders for the happy path', async function(assert) {
assert.expect(7);
this.set('externalAction', (e) => {
assert.equal(e.target.value, 'test value 2', 'it calls the onChange action');
});
this.set('label', 'test label');
this.set('value', 'test value');
await render(hbs`<SldsInput @label={{label}} @value={{value}} @onChange={{action externalAction}} />`);
const input = find('input');
const label = find('label');
assert.ok(label, 'it has a label element');
assert.ok(input, 'it has an input element');
assert.equal(label.textContent.trim(), 'test label', 'the label has the right text');
assert.equal(label.getAttribute('for'), input.getAttribute('id'), 'the label\'s for attr matches the id of the input');
assert.equal(input.value, 'test value', 'the input has the right value');
assert.dom('div.slds-form-element__help').doesNotExist();
await fillIn(input, 'test value 2');
});
test('SPLATTRIBUTES', async function(assert) {
this.set('externalAction', () => {});
assert.expect(4);
await render(hbs`<SldsInput @onChange={{action externalAction}} type="number" min="0" max="100" step="1" />`);
const attrsToAssert = [ 'type', 'min', 'max', 'step' ];
// in all modern browsers and IE11 element.getAttribute() will return null if the attribute does not exist
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute#Notes
const input = find('input');
attrsToAssert.forEach(attr => {
assert.ok(input.getAttribute(attr), `the ${attr} attribute exists`);
});
});
test('it handles errors', async function(assert) {
this.set('externalAction', () => {});
this.set('error', {
message: 'This is a test'
});
await render(hbs`<SldsInput @onChange={{action externalAction}} @error={{error}} />`);
assert.dom('div.slds-form-element__help').exists();
});
});
<SldsFormElement as |FormElement|>
<label class="slds-form-element__label" for={{inputId}}>{{@label}}</label>
<div class="slds-form-element__control">
<input id={{inputId}} class="slds-input" value={{@value}} oninput={{action @onChange}} ...attributes />
</div>
{{#if error}}
<FormElement.errorComponent id={{errorId}} message={{error.message}} />
{{/if}}
</SldsFormElement>
import Component from '@ember/component';
import { assert } from '@ember/debug';
import { computed } from '@ember-decorators/object';
import { notEmpty } from '@ember-decorators/object/computed';
import { tagName } from '@ember-decorators/component';
import { guidFor } from '@ember/object/internals';
/**
* slds-input
* Renders an SLDS compliant input element with the companion label
* See https://latest-216.lightningdesignsystem.com/components/input/
*
* @param {String} label - the label of the input
* @param {String} value - the value of the input
* @param {Function} onChange - the function to call when the value of the input changes
*/
@tagName('')
export default class SldsInput extends Component {
constructor() {
super(...arguments);
assert(!this.onChange, 'onChange is a required parameter');
this.setProperties({
value: this.value || null,
label: this.label || '',
error: this.error || null
});
}
@computed()
get inputId() {
const guid = guidFor(this);
return `${guid}-input`;
}
@computed()
get errorId() {
return `${this.get('inputId')}-error`;
}
@notEmpty('error') hasError
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment