Merge pull request #1660 from code-corps/remove-wait-helpers

Remove wait helpers and replace with async/await where needed

Author: joshsmith

app/components/signup-email-input.js

@@ -2,7 +2,14 @@ import Component from '@ember/component';
 import { not, empty, and, alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { once, debounce, cancel } from '@ember/runloop';
-import { set, observer, get, computed } from '@ember/object';
+import { set, get, computed } from '@ember/object';
+import Ember from 'ember';
+
+const {
+  testing
+} = Ember;
+
+const DEBOUNCE_TIMER = testing ? 0 : 500;
 
 export default Component.extend({
   cachedEmail: '',
@@ -50,10 +57,6 @@ export default Component.extend({
     });
   },
 
-  emailChanged: observer('email', function() {
-    once(this, '_check');
-  }),
-
   sendRequest(email) {
     return get(this, 'ajax').request('/users/email_available', {
       method: 'GET',
@@ -65,6 +68,7 @@ export default Component.extend({
 
   actions: {
     keyDown() {
+      once(this, '_check');
       if (get(this, 'isNotSameEmail')) {
         set(this, 'isChecking', true);
       }
@@ -78,7 +82,7 @@ export default Component.extend({
       cancel(get(this, 'timer'));
       let deferredAction = debounce(this, function() {
         this.checkAvailable();
-      }, 500);
+      }, DEBOUNCE_TIMER);
       set(this, 'timer', deferredAction);
     } else if (get(this, 'isSameEmail') && get(this, 'isNotEmpty')) {
       this.sendAction('emailValidated', get(this, 'canSubmit'));

app/components/signup-form.js

@@ -61,9 +61,9 @@ export default Component.extend({
     };
 
     let promise = get(this, 'user').save().then(() => {
-      get(this, 'signIn')(credentials);
+      return get(this, 'signIn')(credentials);
     }).catch((error) => {
-      get(this, 'handleErrors')(error);
+      return get(this, 'handleErrors')(error);
     });
 
     yield promise;

app/components/signup-username-input.js

@@ -1,8 +1,15 @@
 import Component from '@ember/component';
-import { not, equal, empty, and, alias } from '@ember/object/computed';
+import { computed, get, set } from '@ember/object';
+import { alias, and, empty, not } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
-import { observer } from '@ember/object';
 import { once, debounce, cancel } from '@ember/runloop';
+import Ember from 'ember';
+
+const {
+  testing
+} = Ember;
+
+const DEBOUNCE_TIMER = testing ? 0 : 500;
 
 /**
   `signup-username-input` composes the username input on the signup page. It
@@ -173,15 +180,8 @@ export default Component.extend({
     @property isSameUsername
     @type Boolean
    */
-  isSameUsername: equal('cachedUsername', 'username'),
-
-  /**
-    Checks the username whenever it is changed.
-
-    @method usernameChanged
-   */
-  usernameChanged: observer('username', function() {
-    once(this, '_check');
+  isSameUsername: computed('cachedUsername', 'username', function() {
+    return get(this, 'cachedUsername') === get(this, 'username');
   }),
 
   /**
@@ -191,18 +191,18 @@ export default Component.extend({
     @method checkAvailable
    */
   checkAvailable() {
-    let username = this.get('username');
+    let username = get(this, 'username');
     this.sendRequest(username).then((result) => {
       let { available, valid } = result;
       let validation = valid && available;
 
-      this.set('cachedUsername', this.get('username'));
-      this.set('hasCheckedOnce', true);
-      this.set('isChecking', false);
-      this.set('isAvailableOnServer', available);
-      this.set('isValid', valid);
+      set(this, 'cachedUsername', get(this, 'username'));
+      set(this, 'hasCheckedOnce', true);
+      set(this, 'isChecking', false);
+      set(this, 'isAvailableOnServer', available);
+      set(this, 'isValid', valid);
 
-      this.set('canSubmit', validation);
+      set(this, 'canSubmit', validation);
       this.sendAction('usernameValidated', validation);
     });
   },
@@ -214,7 +214,7 @@ export default Component.extend({
     @return Promise
    */
   sendRequest(username) {
-    return this.get('ajax').request('/users/username_available', {
+    return get(this, 'ajax').request('/users/username_available', {
       method: 'GET',
       data: {
         username
@@ -231,27 +231,28 @@ export default Component.extend({
       @method keyDown
      */
     keyDown() {
-      if (this.get('isNotSameUsername')) {
-        this.set('isChecking', true);
+      once(this, '_check');
+      if (get(this, 'isNotSameUsername')) {
+        set(this, 'isChecking', true);
       }
     }
   },
 
   _check() {
-    this.set('isChecking', true);
+    set(this, 'isChecking', true);
 
-    if (this.get('canCheck')) {
-      cancel(this.get('timer'));
+    if (get(this, 'canCheck')) {
+      cancel(get(this, 'timer'));
       let deferredAction = debounce(this, function() {
         this.checkAvailable();
-      }, 500);
-      this.set('timer', deferredAction);
-    } else if (this.get('isSameUsername') && this.get('isNotEmpty')) {
-      this.sendAction('usernameValidated', this.get('canSubmit'));
-      this.set('isChecking', false);
+      }, DEBOUNCE_TIMER);
+      set(this, 'timer', deferredAction);
+    } else if (get(this, 'isSameUsername') && get(this, 'isNotEmpty')) {
+      this.sendAction('usernameValidated', get(this, 'canSubmit'));
+      set(this, 'isChecking', false);
     } else {
       this.sendAction('usernameValidated', false);
-      this.set('isChecking', false);
+      set(this, 'isChecking', false);
     }
   }
 });

tests/acceptance/project-checkout-test.js

@@ -148,9 +148,11 @@ test('Allows signing up and donating', function(assert) {
 
   andThen(() => {
     assert.equal(currentRouteName(), 'signup', 'User was redirected to signup.');
+    signupPage.form.username('joeuser');
+    signupPage.form.keydownUsername();
     signupPage.form.email(email);
+    signupPage.form.keydownEmail();
     signupPage.form.password('password');
-    signupPage.form.username('joeuser');
     signupPage.form.save();
   });
 

tests/acceptance/project-donate-test.js

@@ -95,9 +95,11 @@ test('Requires user to register before getting to checkout', function(assert) {
 
   andThen(() => {
     assert.equal(currentRouteName(), 'signup', 'User was redirected to signup.');
+    signupPage.form.username('joeuser');
+    signupPage.form.keydownUsername();
     signupPage.form.email(email);
+    signupPage.form.keydownEmail();
     signupPage.form.password('password');
-    signupPage.form.username('joeuser');
     signupPage.form.save();
   });
 
@@ -142,9 +144,11 @@ test('Requires user to register before getting to checkout, with custom amount',
 
   andThen(() => {
     assert.equal(currentRouteName(), 'signup', 'User was redirected to signup.');
+    signupPage.form.username('joeuser');
+    signupPage.form.keydownUsername();
     signupPage.form.email(email);
+    signupPage.form.keydownEmail();
     signupPage.form.password('password');
-    signupPage.form.username('joeuser');
     signupPage.form.save();
   });
 

tests/acceptance/signup-test.js

@@ -26,7 +26,13 @@ test('Successful signup', function(assert) {
   signupPage.visit();
 
   andThen(function() {
-    signupPage.form.username('username').email('[email protected]').password('password').save();
+    signupPage.form
+      .username('username')
+      .keydownUsername()
+      .email('[email protected]')
+      .keydownEmail()
+      .password('password')
+      .save();
   });
 
   let signUpDone = assert.async();

tests/integration/components/category-item-test.js

@@ -4,7 +4,6 @@ import { run } from '@ember/runloop';
 import RSVP from 'rsvp';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
 import stubService from 'code-corps-ember/tests/helpers/stub-service';
 import {
   getFlashMessageCount,
@@ -96,9 +95,7 @@ let selectedCategory = {
   description: 'You want to help society.'
 };
 
-test('it works for selecting unselected categories', function(assert) {
-  let done = assert.async();
-
+test('it works for selecting unselected categories', async function(assert) {
   assert.expect(5);
 
   stubService(this, 'user-categories', mockUserCategoriesService);
@@ -111,17 +108,12 @@ test('it works for selecting unselected categories', function(assert) {
   assert.equal(page.description.text, 'You want to help technology.', 'Correct description is rendered.');
   assert.equal(page.button.text, 'Technology', 'Button text is rendered correctly');
 
-  page.button.click();
+  await page.button.click();
 
-  wait().then(() => {
-    assert.ok(page.icon.classContains('technology--selected'), 'is selected');
-    done();
-  });
+  assert.ok(page.icon.classContains('technology--selected'), 'is selected');
 });
 
 test('it works for removing selected categories', function(assert) {
-  let done = assert.async();
-
   assert.expect(3);
 
   stubService(this, 'user-categories', mockUserCategoriesService);
@@ -134,15 +126,10 @@ test('it works for removing selected categories', function(assert) {
 
   page.button.click();
 
-  wait().then(() => {
-    assert.ok(page.icon.classContains('society'), 'is unselected');
-    done();
-  });
+  assert.ok(page.icon.classContains('society'), 'is unselected');
 });
 
 test('it creates a flash message on an error when adding', function(assert) {
-  let done = assert.async();
-
   assert.expect(4);
 
   stubService(this, 'user-categories', mockUserCategoriesServiceForErrors);
@@ -152,25 +139,17 @@ test('it creates a flash message on an error when adding', function(assert) {
 
   page.button.click();
 
-  wait().then(() => {
-    assert.ok(page.button.unchecked, 'Operation failed. Button is rendered as unchecked.');
-
-    assert.equal(getFlashMessageCount(this), 1, 'One message is shown');
+  assert.ok(page.button.unchecked, 'Operation failed. Button is rendered as unchecked.');
 
-    let flash = getFlashMessageAt(0, this);
-    let actualOptions = getProperties(flash, 'fixed', 'sticky', 'timeout', 'type');
-    let expectedOptions = { fixed: true, sticky: false, timeout: 5000, type: 'danger' };
-    assert.deepEqual(actualOptions, expectedOptions, 'Proper message was set');
-
-    assert.ok(flash.message.indexOf(unselectedCategory.name) !== -1, 'Message text includes the category name');
-
-    done();
-  });
+  assert.equal(getFlashMessageCount(this), 1, 'One message is shown');
+  let flash = getFlashMessageAt(0, this);
+  let actualOptions = getProperties(flash, 'fixed', 'sticky', 'timeout', 'type');
+  let expectedOptions = { fixed: true, sticky: false, timeout: 5000, type: 'danger' };
+  assert.deepEqual(actualOptions, expectedOptions, 'Proper message was set');
+  assert.ok(flash.message.indexOf(unselectedCategory.name) !== -1, 'Message text includes the category name');
 });
 
 test('it creates a flash message on an error when removing', function(assert) {
-  let done = assert.async();
-
   assert.expect(4);
 
   stubService(this, 'user-categories', mockUserCategoriesServiceForErrors);
@@ -180,58 +159,46 @@ test('it creates a flash message on an error when removing', function(assert) {
 
   page.button.click();
 
-  wait().then(() => {
-    assert.ok(page.button.checked, 'Operation failed. Button is rendered as checked.');
-
-    assert.equal(getFlashMessageCount(this), 1, 'One message is shown.');
+  assert.ok(page.button.checked, 'Operation failed. Button is rendered as checked.');
 
-    let flash = getFlashMessageAt(0, this);
-    let actualOptions = getProperties(flash, 'fixed', 'sticky', 'timeout', 'type');
-    let expectedOptions = { fixed: true, sticky: false, timeout: 5000, type: 'danger' };
-    assert.deepEqual(actualOptions, expectedOptions, 'Proper message was set');
-
-    assert.ok(flash.message.indexOf(selectedCategory.name) !== -1, 'Message text includes the category name');
-
-    done();
-  });
+  assert.equal(getFlashMessageCount(this), 1, 'One message is shown.');
+  let flash = getFlashMessageAt(0, this);
+  let actualOptions = getProperties(flash, 'fixed', 'sticky', 'timeout', 'type');
+  let expectedOptions = { fixed: true, sticky: false, timeout: 5000, type: 'danger' };
+  assert.deepEqual(actualOptions, expectedOptions, 'Proper message was set');
+  assert.ok(flash.message.indexOf(selectedCategory.name) !== -1, 'Message text includes the category name');
 });
 
-test('it sets and unsets loading state when adding', function(assert) {
-  let done = assert.async();
-
+test('it sets and unsets loading state when adding', async function(assert) {
   assert.expect(2);
 
   stubService(this, 'user-categories', mockUserCategoriesService);
   this.set('category', unselectedCategory);
 
   renderPage();
 
-  page.button.click();
+  let result = page.button.click();
 
   assert.ok(page.button.spinning, 'Button is rendering as busy.');
 
-  wait().then(() => {
-    assert.ok(page.button.checked, 'Operation worked. Button is rendered as checked.');
-    done();
-  });
-});
+  await result;
 
-test('it sets and unsets loading state when removing', function(assert) {
-  let done = assert.async();
+  assert.ok(page.button.checked, 'Operation worked. Button is rendered as checked.');
+});
 
+test('it sets and unsets loading state when removing', async function(assert) {
   assert.expect(2);
 
   stubService(this, 'user-categories', mockUserCategoriesService);
   this.set('category', selectedCategory);
 
   renderPage();
 
-  page.button.click();
+  let result = page.button.click();
 
   assert.ok(page.button.spinning, 'Button is rendering as busy.');
 
-  wait().then(() => {
-    assert.ok(page.button.unchecked, 'Operation worked. Button is rendered as unchecked.');
-    done();
-  });
+  await result;
+
+  assert.ok(page.button.unchecked, 'Operation worked. Button is rendered as unchecked.');
 });