828185db49
* add SelectDropdown * use SelectDropdown instead of HttpRequestsDropdown * use html selector instead of class name * ensure SelectDropdown still works when rendered inside a Toolbar * add tests * remove old HttpRequests component * make SelectDropdown example easier to read in Storybook * add isFullwidth prop * add SelectDropbown inside a Toolbar story * fix tests * remove actions block and call this.onChange directly * replace dropdownLabel with label * rename SelectDropdown to SelecT * add test for onChange * remove selectedItem prop since we don't need it * make Select accept options as an array of strings or objects * Revert "remove selectedItem prop since we don't need it" This reverts commit 7278516de87bb1df60482edb005137252819931e. * use Select inside TtlPicker * remove debugger * use a test selector * fix pki test selectors * improve storybook docs * fix selected value in ttl picker * ensure httprequests dropdown updates the selected item * ensure select dropdown correctly matches selectedItem * rename selectedItem to selectedValue * remove debugger lol * update selectedItem test * add valueAttribute and labelAttribute to Storybook knobs * udpate jsdocs * remove old httprequestsdropdown component * add note that onChange will receive value of select * use Select inside AuthForm * use correct test selector
78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render, fillIn } from '@ember/test-helpers';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import sinon from 'sinon';
|
|
|
|
const OPTIONS = ['foo', 'bar', 'baz'];
|
|
const LABEL = 'Boop';
|
|
|
|
module('Integration | Component | Select', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
hooks.beforeEach(function() {
|
|
this.set('options', OPTIONS);
|
|
this.set('label', LABEL);
|
|
this.set('name', 'foo');
|
|
});
|
|
|
|
test('it renders', async function(assert) {
|
|
await render(hbs`<Select @options={{options}} @label={{label}} @name={{name}}/>`);
|
|
assert.dom('[data-test-select-label]').hasText('Boop');
|
|
assert.dom('[data-test-select="foo"]').exists();
|
|
});
|
|
|
|
test('it renders when options is an array of strings', async function(assert) {
|
|
await render(hbs`<Select @options={{options}} @label={{label}} @name={{name}}/>`);
|
|
|
|
assert.dom('[data-test-select="foo"]').hasValue('foo');
|
|
assert.equal(this.element.querySelector('[data-test-select="foo"]').options.length, 3);
|
|
});
|
|
|
|
test('it renders when options is an array of objects', async function(assert) {
|
|
const objectOptions = [{ value: 'berry', label: 'Berry' }, { value: 'cherry', label: 'Cherry' }];
|
|
this.set('options', objectOptions);
|
|
await render(hbs`<Select @options={{options}} @label={{label}} @name={{name}}/>`);
|
|
|
|
assert.dom('[data-test-select="foo"]').hasValue('berry');
|
|
assert.equal(this.element.querySelector('[data-test-select="foo"]').options.length, 2);
|
|
});
|
|
|
|
test('it renders when options is an array of custom objects', async function(assert) {
|
|
const objectOptions = [{ day: 'mon', fullDay: 'Monday' }, { day: 'tues', fullDay: 'Tuesday' }];
|
|
const selectedValue = objectOptions[1].day;
|
|
this.setProperties({
|
|
options: objectOptions,
|
|
valueAttribute: 'day',
|
|
labelAttribute: 'fullDay',
|
|
selectedValue: selectedValue,
|
|
});
|
|
|
|
await render(
|
|
hbs`
|
|
<Select
|
|
@options={{options}}
|
|
@label={{label}}
|
|
@name={{name}}
|
|
@valueAttribute={{valueAttribute}}
|
|
@labelAttribute={{labelAttribute}}
|
|
@selectedValue={{selectedValue}}/>`
|
|
);
|
|
|
|
assert.dom('[data-test-select="foo"]').hasValue('tues', 'sets selectedValue by default');
|
|
assert.equal(
|
|
this.element.querySelector('[data-test-select="foo"]').options[1].textContent.trim(),
|
|
'Tuesday',
|
|
'uses the labelAttribute to determine the label'
|
|
);
|
|
});
|
|
|
|
test('it calls onChange when an item is selected', async function(assert) {
|
|
this.set('onChange', sinon.spy());
|
|
await render(hbs`<Select @options={{options}} @name={{name}} @onChange={{onChange}}/>`);
|
|
await fillIn('[data-test-select="foo"]', 'bar');
|
|
|
|
assert.ok(this.onChange.calledOnce);
|
|
});
|
|
});
|