slds-input-test.js

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();
	});
});

slds-input.hbs

<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>

slds-input.js

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
}