From 41207fa05e76ae2e5a10c29b465fe9ac5412562c Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 13:33:42 -0600 Subject: [PATCH 1/7] feat: pass selected value as first arg to onchange --- addon/components/select-light.js | 4 +++- tests/integration/components/select-light-test.js | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/addon/components/select-light.js b/addon/components/select-light.js index 0dbc609..9516c2b 100644 --- a/addon/components/select-light.js +++ b/addon/components/select-light.js @@ -7,10 +7,12 @@ const noop = () => {}; export default class extends Component { constructor() { super(...arguments); + const changeCallback = this.args.onChange ?? this.args.change ?? noop; this.valueKey = this.args.valueKey ?? 'value'; this.displayKey = this.args.displayKey ?? 'label'; - this.change = this.args.onChange ?? this.args.change ?? noop; + + this.change = (ev) => changeCallback(ev.target.value, ev); deprecate(`Triggering @change on is deprecated in favor of @onChange due to ember-template-lint's no-passed-in-event-handlers rule`, !this.args.change, { id: 'ember-select-light.no-passed-in-event-handlers', diff --git a/tests/integration/components/select-light-test.js b/tests/integration/components/select-light-test.js index 5e38539..7ecf739 100644 --- a/tests/integration/components/select-light-test.js +++ b/tests/integration/components/select-light-test.js @@ -187,7 +187,7 @@ module('Integration | Component | select-light', function(hooks) { this.set('myValue', null); await render(hbs` - + `); @@ -203,7 +203,7 @@ module('Integration | Component | select-light', function(hooks) { this.set('myValue', null); await render(hbs` - + `); @@ -227,7 +227,7 @@ module('Integration | Component | select-light', function(hooks) { + @onChange={{action (mut this.myValue)}} /> `); await fillIn('select', options[0]); @@ -242,7 +242,7 @@ module('Integration | Component | select-light', function(hooks) { this.setProperties({ options, value: options[1], - customAction: ({ target: { value } }) => { + customAction: (value) => { assert.step('handled action'); assert.equal(value, options[0]); }, From 19c8783774a2751d2143c7764cf97971010632a5 Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 14:02:50 -0600 Subject: [PATCH 2/7] ref: move component to use child component when yielded --- README.md | 2 +- addon/components/select-light.hbs | 22 +++++++--------------- addon/components/select-light/option.hbs | 7 +++++++ addon/components/select-light/option.js | 23 +++++++++++++++++++++++ app/components/select-light/option.js | 1 + 5 files changed, 39 insertions(+), 16 deletions(-) create mode 100644 addon/components/select-light/option.hbs create mode 100644 addon/components/select-light/option.js create mode 100644 app/components/select-light/option.js diff --git a/README.md b/README.md index d558742..5361fb4 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ ember install ember-select-light }} /> ``` -`value` and `label` will be the default object keys used unless `@valueKey="...` and/or `@displayKey="...` are used respectively, like so... +The text`value` and `label` will be the default object keys used for the HTML `option` and innerText respectively unless `@valueKey="...` and/or `@displayKey="...` are used respectively, like so... ```handlebars - {{get optionValue this.displayKey}} - - {{/each}} - {{else}} - {{#each @options as | optionValue |}} - - {{/each}} - {{/if}} + {{#each @options as | optionValue |}} + + {{/each}} {{/if}} diff --git a/addon/components/select-light/option.hbs b/addon/components/select-light/option.hbs new file mode 100644 index 0000000..531f7ac --- /dev/null +++ b/addon/components/select-light/option.hbs @@ -0,0 +1,7 @@ + diff --git a/addon/components/select-light/option.js b/addon/components/select-light/option.js new file mode 100644 index 0000000..ddae138 --- /dev/null +++ b/addon/components/select-light/option.js @@ -0,0 +1,23 @@ +import Component from '@glimmer/component'; + + +export default class SelectLightOption extends Component { + constructor() { + super(...arguments); + + this.valueKey = this.args.valueKey ?? 'value'; + this.displayKey = this.args.displayKey ?? 'label'; + } + + get value() { + return this.args.value?.[this.valueKey] ?? this.args.value; + } + + get label() { + return this.args.value?.[this.displayKey]; + } + + get selected() { + return this.args.selectedValue === this.args.value || this.args.selectedValue === this.value; + } +} diff --git a/app/components/select-light/option.js b/app/components/select-light/option.js new file mode 100644 index 0000000..33392bc --- /dev/null +++ b/app/components/select-light/option.js @@ -0,0 +1 @@ +export { default } from 'ember-select-light/components/select-light/option'; From ea80d18371158be4e1768e9f22f814d2448e7830 Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 15:02:06 -0600 Subject: [PATCH 3/7] test: add tests for yielded child component --- addon/components/select-light.hbs | 9 +++++- .../components/select-light-test.js | 29 ++++++++++++++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/addon/components/select-light.hbs b/addon/components/select-light.hbs index edab482..ba14dde 100644 --- a/addon/components/select-light.hbs +++ b/addon/components/select-light.hbs @@ -8,7 +8,14 @@ {{/if}} {{#if hasBlock}} - {{yield}} + {{yield (hash + option=( + component "select-light/option" + valueKey=this.valueKey + displayKey=this.displayKey + selectedValue=@value + ) + )}} {{else}} {{#each @options as | optionValue |}} + Platypus + + `); + + assert.dom('select option').includesText('Platypus'); + assert.dom('select option').hasValue('plat'); + }); + test('should render options from passed flat array', async function(assert) { let options = ['squid', 'octopus']; this.setProperties({options}); @@ -199,7 +210,7 @@ module('Integration | Component | select-light', function(hooks) { assert.equal(this.myValue, 'turtle'); }); - test('should fire onChange when user chooses option, mut with yield', async function(assert) { + test('should fire onChange when user chooses option, mut with yield and native option', async function(assert) { this.set('myValue', null); await render(hbs` @@ -215,6 +226,22 @@ module('Integration | Component | select-light', function(hooks) { assert.equal(this.myValue, 'turtle'); }); + test('should fire onChange when user chooses option, mut with yielded option component', async function(assert) { + this.set('myValue', null); + + await render(hbs` + + Turtle + + `); + + await fillIn('select', 'turtle'); + await triggerEvent('select', 'change'); + + assert.dom('select').hasValue('turtle'); + assert.equal(this.myValue, 'turtle'); + }); + test('should fire onChange when user chooses option, mut with flat array', async function(assert) { let options = ['clam', 'starfish']; this.setProperties({ From aa74ab674d8166ef8d2e78a41a6c7f17d54e705c Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 15:18:30 -0600 Subject: [PATCH 4/7] feat: allow object values to be used for callbacks --- addon/components/select-light.hbs | 2 + addon/components/select-light.js | 28 +++++++- addon/components/select-light/option.js | 16 +++++ .../components/select-light-test.js | 68 +++++++++++++++++++ 4 files changed, 111 insertions(+), 3 deletions(-) diff --git a/addon/components/select-light.hbs b/addon/components/select-light.hbs index ba14dde..e6b1b1e 100644 --- a/addon/components/select-light.hbs +++ b/addon/components/select-light.hbs @@ -11,6 +11,7 @@ {{yield (hash option=( component "select-light/option" + parent=this valueKey=this.valueKey displayKey=this.displayKey selectedValue=@value @@ -19,6 +20,7 @@ {{else}} {{#each @options as | optionValue |}} {}; export default class extends Component { + childComponents = new Set(); + constructor() { super(...arguments); - const changeCallback = this.args.onChange ?? this.args.change ?? noop; + this.changeCallback = this.args.onChange ?? this.args.change ?? noop; this.valueKey = this.args.valueKey ?? 'value'; this.displayKey = this.args.displayKey ?? 'label'; - this.change = (ev) => changeCallback(ev.target.value, ev); - deprecate(`Triggering @change on is deprecated in favor of @onChange due to ember-template-lint's no-passed-in-event-handlers rule`, !this.args.change, { id: 'ember-select-light.no-passed-in-event-handlers', until: '3.0.0', @@ -24,6 +25,27 @@ export default class extends Component { }); } + registerChild(option) { + this.childComponents.add(option); + } + + unregisterChild(option) { + this.childComponents.delete(option); + } + + getValue(valueStr) { + return Array.from(this.childComponents).reduce((selectedValue, childComponent) => { + return childComponent.value === valueStr ? childComponent.objValue : selectedValue + }, valueStr); + } + + @action + change(ev) { + let value = this.getValue(ev.target.value); + + return this.changeCallback(value, ev); + } + get hasDetailedOptions() { return ![ // Returns a boolean if all data is available for a { label: foo, value: bar } style list of options this.args.options?.[0][this.valueKey], diff --git a/addon/components/select-light/option.js b/addon/components/select-light/option.js index ddae138..ac67824 100644 --- a/addon/components/select-light/option.js +++ b/addon/components/select-light/option.js @@ -7,6 +7,22 @@ export default class SelectLightOption extends Component { this.valueKey = this.args.valueKey ?? 'value'; this.displayKey = this.args.displayKey ?? 'label'; + + if (this.args.parent) { + this.args.parent.registerChild(this); + } + } + + willDestroy() { + super.willDestroy(...arguments); + + if (this.args.parent) { + this.args.parent.unregisterChild(this); + } + } + + get objValue() { + return this.args.value; } get value() { diff --git a/tests/integration/components/select-light-test.js b/tests/integration/components/select-light-test.js index da3601e..8c9bbb1 100644 --- a/tests/integration/components/select-light-test.js +++ b/tests/integration/components/select-light-test.js @@ -285,4 +285,72 @@ module('Integration | Component | select-light', function(hooks) { assert.verifySteps(['handled action']); }); + + test('should allow objects to be selected onChange', async function(assert) { + const shortfin = { value: 'shortfin', label: 'Shortfin Shark' }; + const mako = { value: 'mako', label: 'Mako Shark' }; + + let options = [ + shortfin, + mako, + ]; + + this.setProperties({ + options, + value: mako, + customAction: (value) => { + assert.step('handled action'); + console.log(value) + assert.equal(value, options[0]); + }, + }); + + await render(hbs` + + `); + + await fillIn('select', shortfin.value); + + assert.verifySteps(['handled action']); + }); + + test('should allow objects to be selected onChange with yielded components', async function(assert) { + const shortfin = { value: 'shortfin', label: 'Shortfin Shark' }; + const mako = { value: 'mako', label: 'Mako Shark' }; + + let options = [ + shortfin, + mako, + ]; + + this.setProperties({ + options, + value: mako, + customAction: (value) => { + assert.step('handled action'); + console.log(value) + assert.equal(value, options[0]); + }, + }); + + await render(hbs` + + + {{#each this.options as |option|}} + {{option.label}} + {{/each}} + + `); + + assert.dom('select').hasValue(mako.value); + + await fillIn('select', shortfin.value); + + assert.verifySteps(['handled action']); + }); }); From 7281f63e9add0b565767bda239701aba7465c328 Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 17:14:56 -0600 Subject: [PATCH 5/7] feat: add support for non-string values --- addon/components/select-light.js | 2 +- addon/components/select-light/option.js | 6 ++- .../components/select-light-test.js | 37 +++++++++++++++++++ 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/addon/components/select-light.js b/addon/components/select-light.js index a6f0206..058abd1 100644 --- a/addon/components/select-light.js +++ b/addon/components/select-light.js @@ -35,7 +35,7 @@ export default class extends Component { getValue(valueStr) { return Array.from(this.childComponents).reduce((selectedValue, childComponent) => { - return childComponent.value === valueStr ? childComponent.objValue : selectedValue + return childComponent.value == valueStr ? childComponent.objValue : selectedValue }, valueStr); } diff --git a/addon/components/select-light/option.js b/addon/components/select-light/option.js index ac67824..35ae57a 100644 --- a/addon/components/select-light/option.js +++ b/addon/components/select-light/option.js @@ -26,6 +26,10 @@ export default class SelectLightOption extends Component { } get value() { + if (typeof this.args.value === 'string' || !this.args.value) { + return this.args.value; + } + return this.args.value?.[this.valueKey] ?? this.args.value; } @@ -34,6 +38,6 @@ export default class SelectLightOption extends Component { } get selected() { - return this.args.selectedValue === this.args.value || this.args.selectedValue === this.value; + return this.args.selectedValue == this.args.value || this.args.selectedValue === this.value; } } diff --git a/tests/integration/components/select-light-test.js b/tests/integration/components/select-light-test.js index 8c9bbb1..e99568e 100644 --- a/tests/integration/components/select-light-test.js +++ b/tests/integration/components/select-light-test.js @@ -353,4 +353,41 @@ module('Integration | Component | select-light', function(hooks) { assert.verifySteps(['handled action']); }); + + test('should allow objects to be selected onChange with yielded components and non-string values', async function(assert) { + const shortfin = { value: 1, label: 'Shortfin Shark' }; + const mako = { value: 2, label: 'Mako Shark' }; + + let options = [ + shortfin, + mako, + ]; + + this.setProperties({ + options, + value: mako, + customAction: (value) => { + assert.step('handled action'); + console.log(value) + assert.equal(value, options[0]); + }, + }); + + await render(hbs` + + + {{#each this.options as |option|}} + {{option.label}} + {{/each}} + + `); + + assert.dom('select').hasValue(`${mako.value}`); + + await fillIn('select', shortfin.value); + + assert.verifySteps(['handled action']); + }); }); From f38d75919cc2aadc49b57901cd66d59ce2c87e4f Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Tue, 18 Jan 2022 18:18:57 -0600 Subject: [PATCH 6/7] fix: consistent whitespace in test --- .../components/select-light-test.js | 421 +++++++++--------- 1 file changed, 209 insertions(+), 212 deletions(-) diff --git a/tests/integration/components/select-light-test.js b/tests/integration/components/select-light-test.js index e99568e..58fcf25 100644 --- a/tests/integration/components/select-light-test.js +++ b/tests/integration/components/select-light-test.js @@ -4,16 +4,16 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; module('Integration | Component | select-light', function(hooks) { - setupRenderingTest(hooks); + setupRenderingTest(hooks); - test('should be a element', async function(assert) { + await render(hbs``); assert.dom('select').exists(); - }); + }); - test('should allow classes, ids and names to be added to ', async function(assert) { + await render(hbs` `); + await render(hbs``); assert.dom('select').doesNotHaveAttribute('disabled'); - this.set('disabled', true); + this.set('disabled', true); assert.dom('select').hasAttribute('disabled'); - }); + }); - test('should support tabindex', async function(assert) { - this.set('tabindex', null); + test('should support tabindex', async function(assert) { + this.set('tabindex', null); - await render(hbs``); + await render(hbs``); - assert.dom('select').doesNotHaveAttribute('tabindex', '0'); + assert.dom('select').doesNotHaveAttribute('tabindex', '0'); - this.set('tabindex', 0); - assert.dom('select').hasAttribute('tabindex', '0'); - }); + this.set('tabindex', 0); + assert.dom('select').hasAttribute('tabindex', '0'); + }); - test('should have no options if none are specified', async function(assert) { - await render(hbs``); + test('should have no options if none are specified', async function(assert) { + await render(hbs``); assert.dom('select option').doesNotExist(); - }); + }); - test('should have a (disabled) placeholder option if specified', async function(assert) { - await render(hbs``); + test('should have a (disabled) placeholder option if specified', async function(assert) { + await render(hbs``); assert.dom('select option').includesText('Walrus'); - assert.dom('option').hasAttribute('disabled'); - }); + assert.dom('option').hasAttribute('disabled'); + }); - test('should be able to yield to passed options', async function(assert) { - await render(hbs` - - - - `); + test('should be able to yield to passed options', async function(assert) { + await render(hbs` + + + + `); - assert.dom('select option').includesText('Platypus'); - assert.dom('select option').hasValue('plat'); - }); + assert.dom('select option').includesText('Platypus'); + assert.dom('select option').hasValue('plat'); + }); test('should be able to yield to passed options with option component', async function(assert) { - await render(hbs` - - Platypus - - `); + await render(hbs` + + Platypus + + `); - assert.dom('select option').includesText('Platypus'); - assert.dom('select option').hasValue('plat'); - }); + assert.dom('select option').includesText('Platypus'); + assert.dom('select option').hasValue('plat'); + }); - test('should render options from passed flat array', async function(assert) { - let options = ['squid', 'octopus']; - this.setProperties({options}); + test('should render options from passed flat array', async function(assert) { + let options = ['squid', 'octopus']; + this.setProperties({options}); - await render(hbs``); + await render(hbs``); assert.dom('select option').exists({ count: options.length }); - }); + }); - test('should select option that matches value', async function(assert) { - let options = ['squid', 'octopus']; - let value = options[1]; - this.setProperties({ - options, - value, - }); + test('should select option that matches value', async function(assert) { + let options = ['squid', 'octopus']; + let value = options[1]; + this.setProperties({ + options, + value, + }); - await render(hbs` + await render(hbs` `); - assert.dom('select').hasValue(value); - }); + assert.dom('select').hasValue(value); + }); - test('should change select value when changing data down value', async function(assert) { - let options = ['shortfin', 'mako']; - let value = options[1]; - this.setProperties({ - options, - value, - }); + test('should change select value when changing data down value', async function(assert) { + let options = ['shortfin', 'mako']; + let value = options[1]; + this.setProperties({ + options, + value, + }); - await render(hbs` + await render(hbs` `); - this.set('value', options[0]); - assert.dom('select').hasValue(options[0]); - }); - - test('should render options correctly when passed array of objects', async function(assert) { - let options = [ - { value: 'shortfin', label: 'Shortfin Shark' }, - { value: 'mako', label: 'Mako Shark' }, - ]; - let value = options[1].value; - this.setProperties({ - options, - value, - }); - - await render(hbs` + this.set('value', options[0]); + assert.dom('select').hasValue(options[0]); + }); + + test('should render options correctly when passed array of objects', async function(assert) { + let options = [ + { value: 'shortfin', label: 'Shortfin Shark' }, + { value: 'mako', label: 'Mako Shark' }, + ]; + let value = options[1].value; + this.setProperties({ + options, + value, + }); + + await render(hbs` `); assert.dom('select option').exists({ count: options.length }); - assert.dom('select option').hasAttribute('value', options[0].value); - assert.dom('select option').includesText(options[0].label); - assert.dom('select').hasValue(value); - }); - - test('should render options with customized value and display keys when passed array of objects', async function(assert) { - let options = [ - { val: 'shortfin', description: 'Shortfin Shark' }, - { val: 'mako', description: 'Mako Shark' }, - ]; - let value = options[1].value; - this.setProperties({ - options, - value, - }); - - await render(hbs` + assert.dom('select option').hasAttribute('value', options[0].value); + assert.dom('select option').includesText(options[0].label); + assert.dom('select').hasValue(value); + }); + + test('should render options with customized value and display keys when passed array of objects', async function(assert) { + let options = [ + { val: 'shortfin', description: 'Shortfin Shark' }, + { val: 'mako', description: 'Mako Shark' }, + ]; + let value = options[1].value; + this.setProperties({ + options, + value, + }); + + await render(hbs` `); - assert.dom('select option').hasAttribute('value', options[0].val); - assert.dom('select option').includesText(options[0].description); - }); - - test('should render options correctly when value is an empty string', async function(assert) { - let options = [ - { value: '', label: 'None' }, - { value: 'mako', label: 'Mako Shark' }, - ]; - let value = options[1].value; - this.setProperties({ - options, - value, - }); - - await render(hbs` + assert.dom('select option').hasAttribute('value', options[0].val); + assert.dom('select option').includesText(options[0].description); + }); + + test('should render options correctly when value is an empty string', async function(assert) { + let options = [ + { value: '', label: 'None' }, + { value: 'mako', label: 'Mako Shark' }, + ]; + let value = options[1].value; + this.setProperties({ + options, + value, + }); + + await render(hbs` `); + @value={{this.value}} />`); assert.dom('select option').exists({ count: options.length }); - assert.dom('select option').hasAttribute('value', options[0].value); - assert.dom('select option').includesText(options[0].label); - assert.dom('select').hasValue(value); - }); + assert.dom('select option').hasAttribute('value', options[0].value); + assert.dom('select option').includesText(options[0].label); + assert.dom('select').hasValue(value); + }); - test('should fire onChange despite the deprecation warning if using @change', async function(assert) { - this.set('myValue', null); + test('should fire onChange despite the deprecation warning if using @change', async function(assert) { + this.set('myValue', null); - await render(hbs` + await render(hbs` `); - await fillIn('select', 'turtle'); - await triggerEvent('select', 'change'); + await fillIn('select', 'turtle'); + await triggerEvent('select', 'change'); - assert.dom('select').hasValue('turtle'); - assert.equal(this.myValue, 'turtle'); - }); + assert.dom('select').hasValue('turtle'); + assert.equal(this.myValue, 'turtle'); + }); - test('should fire onChange when user chooses option, mut with yield and native option', async function(assert) { - this.set('myValue', null); + test('should fire onChange when user chooses option, mut with yield and native option', async function(assert) { + this.set('myValue', null); - await render(hbs` + await render(hbs` `); - await fillIn('select', 'turtle'); - await triggerEvent('select', 'change'); + await fillIn('select', 'turtle'); + await triggerEvent('select', 'change'); - assert.dom('select').hasValue('turtle'); - assert.equal(this.myValue, 'turtle'); - }); + assert.dom('select').hasValue('turtle'); + assert.equal(this.myValue, 'turtle'); + }); - test('should fire onChange when user chooses option, mut with yielded option component', async function(assert) { - this.set('myValue', null); + test('should fire onChange when user chooses option, mut with yielded option component', async function(assert) { + this.set('myValue', null); - await render(hbs` + await render(hbs` Turtle `); - await fillIn('select', 'turtle'); - await triggerEvent('select', 'change'); + await fillIn('select', 'turtle'); + await triggerEvent('select', 'change'); - assert.dom('select').hasValue('turtle'); - assert.equal(this.myValue, 'turtle'); - }); + assert.dom('select').hasValue('turtle'); + assert.equal(this.myValue, 'turtle'); + }); - test('should fire onChange when user chooses option, mut with flat array', async function(assert) { - let options = ['clam', 'starfish']; - this.setProperties({ - options, - myValue: options[1], - value: options[1], - }); + test('should fire onChange when user chooses option, mut with flat array', async function(assert) { + let options = ['clam', 'starfish']; + this.setProperties({ + options, + myValue: options[1], + value: options[1], + }); - await render(hbs` + await render(hbs` `); - await fillIn('select', options[0]); - await triggerEvent('select', 'change'); + await fillIn('select', options[0]); + await triggerEvent('select', 'change'); - assert.dom('select').hasValue(options[0]); - assert.equal(this.myValue, options[0]); - }); + assert.dom('select').hasValue(options[0]); + assert.equal(this.myValue, options[0]); + }); - test('should fire onChange when user chooses option, custom action with flat array', async function(assert) { - let options = ['clam', 'starfish']; - this.setProperties({ - options, - value: options[1], - customAction: (value) => { + test('should fire onChange when user chooses option, custom action with flat array', async function(assert) { + let options = ['clam', 'starfish']; + this.setProperties({ + options, + value: options[1], + customAction: (value) => { assert.step('handled action'); - assert.equal(value, options[0]); - }, - }); + assert.equal(value, options[0]); + }, + }); - await render(hbs` + await render(hbs` `); - await fillIn('select', options[0]); + await fillIn('select', options[0]); assert.verifySteps(['handled action']); - }); + }); test('should allow objects to be selected onChange', async function(assert) { const shortfin = { value: 'shortfin', label: 'Shortfin Shark' }; const mako = { value: 'mako', label: 'Mako Shark' }; - let options = [ + let options = [ shortfin, mako, - ]; + ]; - this.setProperties({ - options, - value: mako, - customAction: (value) => { + this.setProperties({ + options, + value: mako, + customAction: (value) => { assert.step('handled action'); - console.log(value) - assert.equal(value, options[0]); - }, - }); + assert.equal(value, options[0]); + }, + }); - await render(hbs` + await render(hbs` `); - await fillIn('select', shortfin.value); + await fillIn('select', shortfin.value); assert.verifySteps(['handled action']); - }); + }); test('should allow objects to be selected onChange with yielded components', async function(assert) { const shortfin = { value: 'shortfin', label: 'Shortfin Shark' }; const mako = { value: 'mako', label: 'Mako Shark' }; - let options = [ + let options = [ shortfin, mako, - ]; + ]; - this.setProperties({ - options, - value: mako, - customAction: (value) => { + this.setProperties({ + options, + value: mako, + customAction: (value) => { assert.step('handled action'); - console.log(value) - assert.equal(value, options[0]); - }, - }); + assert.equal(value, options[0]); + }, + }); - await render(hbs` + await render(hbs` @@ -347,33 +345,32 @@ module('Integration | Component | select-light', function(hooks) { `); - assert.dom('select').hasValue(mako.value); + assert.dom('select').hasValue(mako.value); - await fillIn('select', shortfin.value); + await fillIn('select', shortfin.value); assert.verifySteps(['handled action']); - }); + }); test('should allow objects to be selected onChange with yielded components and non-string values', async function(assert) { const shortfin = { value: 1, label: 'Shortfin Shark' }; const mako = { value: 2, label: 'Mako Shark' }; - let options = [ + let options = [ shortfin, mako, - ]; + ]; - this.setProperties({ - options, - value: mako, - customAction: (value) => { + this.setProperties({ + options, + value: mako, + customAction: (value) => { assert.step('handled action'); - console.log(value) - assert.equal(value, options[0]); - }, - }); + assert.equal(value, options[0]); + }, + }); - await render(hbs` + await render(hbs` @@ -384,10 +381,10 @@ module('Integration | Component | select-light', function(hooks) { `); - assert.dom('select').hasValue(`${mako.value}`); + assert.dom('select').hasValue(`${mako.value}`); - await fillIn('select', shortfin.value); + await fillIn('select', shortfin.value); assert.verifySteps(['handled action']); - }); + }); }); From b242240606f41d1b9fd5d2278d369754f119cb9c Mon Sep 17 00:00:00 2001 From: Ryan Tablada Date: Wed, 19 Jan 2022 08:34:14 -0600 Subject: [PATCH 7/7] feat: support basic numeric values --- addon/components/select-light/option.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/select-light/option.js b/addon/components/select-light/option.js index 35ae57a..4cd7d23 100644 --- a/addon/components/select-light/option.js +++ b/addon/components/select-light/option.js @@ -38,6 +38,6 @@ export default class SelectLightOption extends Component { } get selected() { - return this.args.selectedValue == this.args.value || this.args.selectedValue === this.value; + return this.args.selectedValue == this.args.value || this.args.selectedValue == this.value; } }