Make removeMultipleOption and clearSelected async friendly (#508)

Makes the test helper function async friendly by adding wait calls

test-support/helpers/ember-power-select.js

@@ -151,6 +151,7 @@ export default function() {
     const elem = find(`${cssPath} .ember-power-select-multiple-options > li:contains(${value}) > .ember-power-select-multiple-remove-btn`).get(0);
     try {
       nativeMouseDown(elem);
+      wait();
     } catch (e) {
       console.warn('css path to remove btn not found');
       throw e;
@@ -161,6 +162,7 @@ export default function() {
     const elem = find(`${cssPath} .ember-power-select-clear-btn`).get(0);
     try {
       nativeMouseDown(elem);
+      wait();
     } catch (e) {
       console.warn('css path to clear btn not found');
       throw e;

tests/acceptance/helpers-test.js

@@ -133,6 +133,8 @@ test('selectSearch helper works even with custom components as long as the input
   });
 });
 
+moduleForAcceptance('Acceptance | helpers | removeMultipleOption');
+
 test('removeMultipleOption removes selected option', function(assert) {
   visit('/helpers-testing');
 
@@ -153,6 +155,23 @@ test('removeMultipleOption removes selected option', function(assert) {
   });
 });
 
+test('removeMultipleOption works with async onchange action', function(assert) {
+  visit('/helpers-testing');
+
+  selectChoose('#select-multiple-async', 'three');
+  selectChoose('#select-multiple-async', 'four');
+  andThen(function() {
+    assert.equal(find('#select-multiple-async .ember-power-select-multiple-option').length, 2, 'Multiple options selected');
+  });
+
+  removeMultipleOption('#select-multiple-async', 'three');
+  andThen(function() {
+    assert.equal(find('#select-multiple-async .ember-power-select-multiple-option').length, 1, 'One option removed');
+  });
+});
+
+moduleForAcceptance('Acceptance | helpers | clearSelected');
+
 test('clearSelected removes selected option', function(assert) {
   visit('/helpers-testing');
 
@@ -171,3 +190,22 @@ test('clearSelected removes selected option', function(assert) {
     assert.notOk(find('.select-choose-onopen .ember-power-select-clear-btn').text());
   });
 });
+
+test('clearSelected works with async onchange action', function (assert) {
+  visit('/helpers-testing');
+
+  andThen(function() {
+    assert.notOk(find('.select-deselect-async .ember-power-select-clear-btn').text());
+  });
+
+  selectChoose('.select-deselect-async', 'three');
+  andThen(function() {
+    assert.ok(find('.select-deselect-async .ember-power-select-clear-btn').text());
+    assert.ok(find('.select-deselect-async .ember-power-select-selected-item').text(), 'three', 'The proper value has been selected');
+  });
+
+  clearSelected('.select-deselect-async', 'three');
+  andThen(function() {
+    assert.notOk(find('.select-deselect-async .ember-power-select-clear-btn').text());
+  });
+});

tests/dummy/app/controllers/helpers-testing.js

@@ -26,6 +26,7 @@ const numbers = [
 export default Ember.Controller.extend({
   numbers,
   selectedList: [],
+  asyncSelectedList: [],
   optionz: [],
   // Actions
   actions: {
@@ -40,6 +41,11 @@ export default Ember.Controller.extend({
       Ember.run.later(() => {
         this.set('optionz', numbers);
       }, 100);
+    },
+    onChangeAsync(key, selected) {
+      Ember.run.later(() => {
+        this.set(key, selected);
+      }, 100);
     }
   }
 });

tests/dummy/app/templates/helpers-testing.hbs

@@ -23,6 +23,14 @@
   {{num}}
 {{/power-select-multiple}}
 
+{{#power-select-multiple id="select-multiple-async" options=numbers selected=asyncSelectedList onchange=(action "onChangeAsync" 'asyncSelectedList') as |num|}}
+  {{num}}
+{{/power-select-multiple}}
+
+{{#power-select class="select-deselect-async" options=numbers selected=asyncSelected onchange=(action "onChangeAsync" 'asyncSelected') allowClear=true as |num|}}
+  {{num}}
+{{/power-select}}
+
 <h3>Customized component</h3>
 
 {{#power-select class="select-custom-search"