[RFC][NI] Minor fix in uni-select (#188)

* Minor fix in uni-select

* Switched context

* Add additional testing

addon/components/uni-select.js

@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import { A } from '@ember/array';
-import { isNone } from '@ember/utils';
+import { isNone, isPresent } from '@ember/utils';
 import layout from '../templates/components/uni-select';
 
 export default Component.extend({
@@ -19,7 +19,7 @@ export default Component.extend({
   didReceiveAttrs() {
     this._super(...arguments);
 
-    if (isNone(this.get('useAlias'))) {
+    if (!this.get('useAlias')) {
       return;
     }
 
@@ -36,7 +36,7 @@ export default Component.extend({
 
   actions: {
     changeSelected({ target }) {
-      if (!isNone(this.get('useAlias'))) {
+      if (this.get('useAlias')) {
         this._changeAliasValue(target.value);
       }
 
@@ -45,13 +45,13 @@ export default Component.extend({
   },
 
   _changeAliasValue(key) {
-    let option = A(this.get('options')).findBy('key', key);
-    this.set('aliasValue', option.alias);
+    let { alias } = A(this.get('options')).findBy('key', key);
+    this.set('aliasValue', alias);
   },
 
   _getFirstAvailableValue() {
     let option = A(this.get('options')).find(({ disabled }) => isNone(disabled));
 
-    return !isNone(option) ? option.key : null;
+    return isPresent(option) ? option.key : null;
   }
 });

addon/templates/components/uni-select.hbs

@@ -1,21 +1,21 @@
 <select class="uni-select" onchange={{action "changeSelected"}}>
   {{#if (and placeholder (not selected))}}
-    <option value="" disabled selected='selected'>
+    <option value="" disabled selected="selected">
       {{placeholder}}
     </option>
   {{/if}}
   {{#each options as |option|}}
-    <option disabled={{option.disabled}} selected={{if (eq option.key selected) 'selected'}} value={{option.key}} class="uni-select__option">
+    <option disabled={{option.disabled}} selected={{if (eq option.key selected) "selected"}} value={{option.key}} class="uni-select__option">
       {{#if hasBlock}}
         {{yield option}}
-      {{else}}    
+      {{else}}
         {{option.value}}
       {{/if}}
     </option>
   {{/each}}
 </select>
 
-{{#if useAlias }}
+{{#if useAlias}}
   <div class="uni-select">
     {{#if (and placeholder (not aliasValue))}}
       {{placeholder}}

tests/integration/components/uni-select-test.js

@@ -1,73 +1,111 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { find, findAll } from 'ember-native-dom-helpers';
 
 moduleForComponent('uni-select', 'Integration | Component | uni select', {
-  integration: true
+  integration: true,
+  beforeEach() {
+    this.set('options', [
+      { key: 'pt', value: 'Portugal' },
+      { key: 'it', value: 'Italy' },
+      { key: 'nl', value: 'Nederlands' },
+      { key: 'en', value: 'England' }
+    ]);
+    this.set('disabledOptions', [
+      { key: 1, value: 'Uno', disabled: true },
+      { key: 2, value: 'Dos', disabled: true },
+      { key: 3, value: 'Tres', disabled: false },
+      { key: 4, value: 'Cuatro' }
+    ]);
+    this.set('aliasOptions', [
+      { key: 1, value: 'long explanation for one', alias: 'one' },
+      { key: 2, value: 'long explanation for two', alias: 'two' }
+    ]);
+    this.set('placeholder', 'Pick me!');
+  }
 });
 
-test('it renders', function(assert) {
+test('It renders', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`{{uni-select options=options}}`);
+
+  assert.ok(find('.uni-select'), 'It renders the select');
+  assert.ok(findAll('.uni-select__option').length, 4, 'It renders the four options');
+});
+
+test('It renders with placeholder', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`{{uni-select options=options placeholder=placeholder}}`);
+
+  assert.ok(find('.uni-select'), 'It renders the select');
+  assert.ok(findAll('.uni-select__option').length, 5, 'It renders the four options and the placeholder');
+});
+
+test('It ignores the placeholder when there is a selected option', function(assert) {
   assert.expect(1);
 
-  let options = [
-    { key: 'pt', value: 'Portugal' },
-    { key: 'it', value: 'Italy' },
-    { key: 'nl', value: 'Nederlands' },
-    { key: 'en', value: 'England' }
-  ];
-  this.set('options', options);
+  this.set('selected', this.get('options.firstObject.key'));
+  this.render(hbs`{{uni-select options=options selected=selected placeholder=placeholder}}`);
 
-  this.render(hbs`{{uni-select options=options}}`);
+  assert.ok(findAll('.uni-select__option').length, 4, 'It renders the four options and ignores the placeholder');
+});
+
+test('It renders disabled options', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`{{uni-select options=disabledOptions placeholder=placeholder}}`);
+
+  assert.ok(findAll('.uni-select__option:disabled').length, 2, 'It renders the two disabled options');
+});
+
+test('It renders the yielded content', function(assert) {
+  assert.expect(this.get('options.length'));
+
+  this.render(hbs`
+    {{#uni-select options=options as |option|}}
+      {{option.key}}
+    {{/uni-select}}
+  `);
+
+  let options = findAll('.uni-select__option');
 
-  assert.notEqual(this.$().text().trim(), '');
+  this.get('options').forEach(({ key }, index) => {
+    assert.ok(options[index].textContent.trim(), key, 'It renders the option key as the yielded content');
+  });
 });
 
-test('it renders placeholder - useAlias', function(assert) {
+test('It renders placeholder using the useAlias flag', function(assert) {
   assert.expect(2);
 
-  let options = [
-    { key: 1, value: 'long explanation for one', alias: 'one' },
-    { key: 2, value: 'long explanation for two', alias: 'two' }
-  ];
-  this.set('options', options);
   this.set('useAlias', true);
-  this.set('placeholder', 'Pick me!');
 
-  this.render(hbs`{{uni-select options=options useAlias=useAlias placeholder=placeholder}}`);
+  this.render(hbs`{{uni-select options=aliasOptions useAlias=useAlias placeholder=placeholder}}`);
 
   assert.equal(this.$('select.uni-select').val(), null);
-  assert.equal(this.$('div.uni-select').text().trim(), 'Pick me!');
+  assert.equal(find('div.uni-select').textContent.trim(), 'Pick me!');
 });
 
-test('it renders right value with no placeholder - useAlias', function(assert) {
+test('It renders the first available value when a placeholder is not provided and the useAlias flag is set to true', function(assert) {
   assert.expect(2);
 
-  let options = [
-    { key: 1, value: 'long explanation for one', alias: 'one' },
-    { key: 2, value: 'long explanation for two', alias: 'two' }
-  ];
-  this.set('options', options);
   this.set('useAlias', true);
 
-  this.render(hbs`{{uni-select options=options useAlias=useAlias}}`);
+  this.render(hbs`{{uni-select options=aliasOptions useAlias=useAlias}}`);
 
   assert.equal(this.$('select.uni-select').val(), 1);
-  assert.equal(this.$('div.uni-select').text().trim(), 'one');
+  assert.equal(find('div.uni-select').textContent.trim(), 'one');
 });
 
-test('it renders selected alias - useAlias', function(assert) {
+test('It renders the alias of the selected option', function(assert) {
   assert.expect(2);
 
-  let options = [
-    { key: 1, value: 'long explanation for one', alias: 'one' },
-    { key: 2, value: 'long explanation for two', alias: 'two' }
-  ];
-  this.set('options', options);
   this.set('useAlias', true);
-  this.set('placeholder', 'Pick me!');
   this.set('selected', 2);
 
-  this.render(hbs`{{uni-select options=options useAlias=useAlias selected=selected placeholder=placeholder}}`);
+  this.render(hbs`{{uni-select options=aliasOptions useAlias=useAlias selected=selected placeholder=placeholder}}`);
 
   assert.equal(this.$('select.uni-select').val(), 2);
-  assert.equal(this.$('div.uni-select').text().trim(), 'two');
+  assert.equal(find('div.uni-select').textContent.trim(), 'two');
 });