Created
August 10, 2018 03:00
-
-
Save ultimatemonty/62428d1a35a581f241e88ed14ffce30d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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