[HELLO]: disable btn while uploading.

app/controllers/start/hello.js

@@ -10,6 +10,13 @@ const {
 } = Ember;
 
 export default Controller.extend(OnboardingControllerMixin, {
+  /**
+   * disables continue button while uploading
+   * @prop uploadingImage
+   * @default false
+   */
+  uploadingImage: false,
+
   firstNameIsEmpty: computed.empty('model.firstName'),
   lastNameIsEmpty: computed.empty('model.lastName'),
   usersNameIsEmpty: computed.or('firstNameIsEmpty', 'lastNameIsEmpty'),
@@ -23,15 +30,18 @@ export default Controller.extend(OnboardingControllerMixin, {
     model.save().then(() => {
       this._stopLoadingBar();
       get(this, 'flashMessages').clearMessages().success('Photo uploaded successfully');
+      set(this, 'uploadingImage', false);
     });
   },
 
   uploadErrored() {
+    set(this, 'uploadingImage', false);
     this._stopLoadingBar();
     get(this, 'flashMessages').clearMessages().danger('Upload failed');
   },
 
   uploadStarted() {
+    set(this, 'uploadingImage', true);
     this._startLoadingBar();
   },
 

app/templates/start/hello.hbs

@@ -31,5 +31,5 @@
 
 <div class="start__footer">
   <p>Nice to finally meet you.</p>
-  <button class="{{if usersNameIsEmpty "clear" "default"}}" disabled={{usersNameIsEmpty}} {{action 'continue'}}>Let's go!</button>
+  <button class="{{if usersNameIsEmpty "clear" "default"}}" disabled={{or usersNameIsEmpty uploadingImage}} {{action 'continue'}}>Let's go!</button>
 </div>

tests/acceptance/onboarding-test.js

@@ -276,3 +276,34 @@ test('The footer is hidden when onboarding', function(assert) {
     assert.ok(onboardingPage.footer.isHidden, 'no footer visible');
   });
 });
+
+test('it allows editing of users image and disabled btn while uploading', function(assert) {
+  assert.expect(5);
+  let done = assert.async();
+
+  let user = server.create('user', { username: 'test_user', state: 'signed_up' });
+
+  authenticateSession(this.application, { user_id: user.id });
+
+  let droppedImageString = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+  indexPage.visit();
+
+  andThen(() => {
+    assert.equal(currentURL(), '/start/hello');
+    onboardingPage.firstName('Josh');
+    onboardingPage.lastName('Smith');
+  });
+
+  andThen(() => {
+    assert.equal(onboardingPage.startButton.isDisabled, undefined, 'start button is not disabled after filling in user names');
+    onboardingPage.imageDrop.dropFile(droppedImageString);
+    assert.equal(onboardingPage.startButton.isDisabled, 'disabled', 'start button is disabled while uploading image');
+  });
+
+  andThen(() => {
+    assert.equal(onboardingPage.imageDrop.backgroundImageData(), `url(${droppedImageString})`);
+    assert.equal(onboardingPage.startButton.isDisabled, undefined, 'start button is not disabled after filling in user names and uploading of image is done');
+    done();
+  });
+});

tests/pages/onboarding.js

@@ -4,11 +4,14 @@ import {
   collection,
   create,
   fillable,
+  findElement,
   hasClass,
   text,
   triggerable,
   visitable
 } from 'ember-cli-page-object';
+import fillInFileInput from '../helpers/fill-in-file-input';
+import removeDoubleQuotes from '../helpers/remove-double-quotes';
 import skillsTypeahead from './components/skills-typeahead';
 import navMenu from './components/navigation-menu';
 
@@ -33,6 +36,20 @@ export default create({
     isDisabled: attribute('disabled')
   },
 
+  imageDrop: {
+    scope: '.image-drop',
+
+    backgroundImageData() {
+      let $el = findElement(this);
+      let backgroundImageData = $el.css('background-image');
+      return removeDoubleQuotes(backgroundImageData);
+    },
+
+    dropFile(content) {
+      fillInFileInput(`${this.scope} input[type=file]`, { name: 'file.png', content });
+    }
+  },
+
   roleColumns: collection({
     itemScope: '.expertise__column',