Merge pull request #2330 from Turbo87/disable-form-fields

UploadFlightForm: Disable pilot selection while uploading
skylines-project · Jan 7, 2021 · 15ecf9f · 15ecf9f
2 parents 75ab4d8 + 6c4b97b
commit 15ecf9f
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 20 deletions.
diff --git a/ember/app/components/pilot-select.hbs b/ember/app/components/pilot-select.hbs
@@ -1,4 +1,10 @@
-<PowerSelect @options={{pilots}} @selected={{pilot}} @onChange={{action "onChange"}} @searchField="name" as |pilot|>
+<PowerSelect
+  @options={{pilots}}
+  @disabled={{@disabled}}
+  @selected={{pilot}}
+  @onChange={{action "onChange"}}
+  @searchField="name"
+as |pilot|>
   {{#if (eq pilot.id null)}}
     [{{t "unknown-or-other-person"}}]
   {{else}}

diff --git a/ember/app/components/upload-flight-form.hbs b/ember/app/components/upload-flight-form.hbs
@@ -1,5 +1,8 @@
 <div class="panel-body" ...attributes>
-  <form {{on "submit" (action "submit")}}>
+  <form
+    data-test-upload-form={{if uploadTask.isRunning "uploading"}}
+    {{on "submit" (action "submit")}}
+  >
     {{#if error}}
       <BsAlert @type="danger" @dismissible={{false}}>{{error}}</BsAlert>
     {{/if}}
@@ -16,8 +19,18 @@
       >
     </ValidatedBlock>
 
-    <ValidatedBlock @label={{t "pilot"}} @validation={{validations.attrs.pilotId}} @didValidate={{didValidate}}>
-      <PilotSelect @clubMembers={{clubMembers}} @pilotId={{pilotId}} @onChange={{action (mut pilotId)}} />
+    <ValidatedBlock
+      @label={{t "pilot"}}
+      @validation={{validations.attrs.pilotId}}
+      @didValidate={{didValidate}}
+      data-test-pilot
+    >
+      <PilotSelect
+        @clubMembers={{clubMembers}}
+        @pilotId={{pilotId}}
+        @disabled={{uploadTask.isRunning}}
+        @onChange={{action (mut pilotId)}}
+      />
     </ValidatedBlock>
 
     {{#if showPilotNameInput}}

diff --git a/ember/tests/acceptance/upload-test.js b/ember/tests/acceptance/upload-test.js
@@ -1,6 +1,10 @@
-import { visit, currentURL, click, triggerEvent } from '@ember/test-helpers';
+import { visit, currentURL, click, triggerEvent, settled, waitFor } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
+import { defer } from 'rsvp';
+
+import { t } from 'ember-intl/test-support';
+
 import * as MockFlight from 'skylines/mirage/vcr/flights/87296';
 import { IGC } from 'skylines/mirage/vcr/flights/94bf14k1';
 
@@ -18,7 +22,33 @@ module('Acceptance | flight upload', function (hooks) {
 
     await authenticateAs(user);
 
-    this.server.post('/api/flights/upload/', {
+    let deferred = defer();
+    this.server.post('/api/flights/upload/', deferred.promise);
+
+    this.server.post('/api/flights/upload/verify', {});
+
+    this.server.get('/api/flights/87296/json', MockFlight.JSON);
+    this.server.get('/api/flights/87296', MockFlight.EXTENDED);
+
+    await visit('/flights/upload');
+    assert.equal(currentURL(), '/flights/upload');
+    assert.dom('[data-test-files]').isEnabled();
+    assert.dom('[data-test-pilot] .ember-power-select-trigger').doesNotHaveAria('disabled');
+    assert.dom('[data-test-submit-button]').isDisabled().hasText(t('upload'));
+
+    let blob = new Blob([IGC], { type: 'text/plain' });
+    let file = new File([blob], '94bf14k1.igc', { type: blob.type });
+
+    await triggerEvent('[data-test-files]', 'change', { files: [file] });
+    assert.dom('[data-test-submit-button]').isEnabled().hasText(t('upload'));
+
+    click('[data-test-submit-button]');
+    await waitFor('[data-test-upload-form="uploading"]');
+    assert.dom('[data-test-files]').isDisabled();
+    assert.dom('[data-test-pilot] .ember-power-select-trigger').hasAria('disabled', 'true');
+    assert.dom('[data-test-submit-button]').isDisabled().hasText(t('uploading'));
+
+    deferred.resolve({
       club_members: [],
       aircraft_models: [],
       results: [
@@ -73,20 +103,7 @@ module('Acceptance | flight upload', function (hooks) {
         },
       ],
     });
-
-    this.server.post('/api/flights/upload/verify', {});
-
-    this.server.get('/api/flights/87296/json', MockFlight.JSON);
-    this.server.get('/api/flights/87296', MockFlight.EXTENDED);
-
-    await visit('/flights/upload');
-    assert.equal(currentURL(), '/flights/upload');
-
-    let blob = new Blob([IGC], { type: 'text/plain' });
-    let file = new File([blob], '94bf14k1.igc', { type: blob.type });
-
-    await triggerEvent('[data-test-files]', 'change', { files: [file] });
-    await click('[data-test-submit-button]');
+    await settled();
     assert.equal(currentURL(), '/flights/upload');
 
     await click('[data-test-publish-button]');