Merge pull request #434 from Aryex82/fix/sidebar-layout

Fix: multiple spinner and task details breaking on update

app/components/task/holder.hbs

@@ -2,7 +2,7 @@
   <Task-Details
     @task={{@task}}
     @disabled={{@disabled}}
-    @onTaskUpdate={{@onTaskUpdate}}
+    @onTaskUpdate={{this.onUpdate}}
     @onPercentageChange={{this.onPercentageChange}}
     @percentCompleted={{this.percentCompleted}}
     @progressBarClass={{this.progressBarClass}}
@@ -20,25 +20,23 @@
       />
     {{/if}}
 
-    {{#if (not-eq @task.status this.TASK_KEYS.VERIFIED)}}
+    {{#if (not-eq this.status this.TASK_KEYS.VERIFIED)}}
       <div class='task-update-container'>
         <label id='task-update-label' for='task-update'><b>Status:</b></label>
         <select
+          data-test-task-status-select
           id='task-update'
           {{on 'change' this.onStatusChange}}
-          {{on 'change' (fn @onTaskUpdate @task.id)}}
+          {{on 'change' (fn this.onUpdate @task.id)}}
         >
           {{#each this.availabletaskStatusList as |taskStatus|}}
             {{#if (not-eq taskStatus.key this.TASK_KEYS.ALL)}}
-              {{#if (eq taskStatus.key @task.status)}}
-                <option value={{taskStatus.key}} selected>
-                  {{taskStatus.displayLabel}}
-                </option>
-              {{else}}
-                <option value={{taskStatus.key}}>
-                  {{taskStatus.displayLabel}}
-                </option>
-              {{/if}}
+              <option
+                value={{taskStatus.key}}
+                selected={{eq taskStatus.key this.status}}
+              >
+                {{taskStatus.displayLabel}}
+              </option>
             {{/if}}
           {{/each}}
         </select>
@@ -52,8 +50,8 @@
       {{on 'click' this.toggleExtensionForm}}
     >Extension Status</button>
 
-    {{#if @isLoading}}
-      <div class='task-card__loader-container'>
+    {{#if this.isLoading}}
+      <div data-test-task-spinner class='task-card__loader-container'>
         <Spinner />
       </div>
     {{/if}}

app/components/task/holder.js

@@ -6,7 +6,9 @@ import { TASK_PERCENTAGE } from '../../constants/tasks';
 
 export default class TasksHolderComponent extends Component {
   @tracked percentCompleted = this.args.task.percentCompleted;
+  @tracked status = this.args.task.status;
   @tracked extensionFormOpened = false;
+  @tracked isLoading = false;
 
   TASK_KEYS = TASK_KEYS;
   availabletaskStatusList = TASK_STATUS_LIST;
@@ -71,15 +73,27 @@ export default class TasksHolderComponent extends Component {
   @action
   onPercentageChange(e) {
     const { value } = e.target;
+    this.percentCompleted = value;
     this.args.onTaskChange('percentCompleted', value);
     if (value === TASK_PERCENTAGE.completedPercentage) {
       this.percentCompleted = this.args.task.percentCompleted;
     }
   }
 
+  @action
+  async onUpdate(taskId) {
+    this.isLoading = true;
+    await this.args.onTaskUpdate(taskId, () => {
+      this.percentCompleted = this.args.task.percentCompleted;
+      this.status = this.args.task.status;
+    });
+    this.isLoading = false;
+  }
+
   @action
   onStatusChange(e) {
     const { value } = e.target;
+    this.status = value;
     this.args.onTaskChange('status', value);
   }
 

app/components/tasks.hbs

@@ -21,7 +21,6 @@
           @onTaskChange={{@onTaskChange}}
           @onStausChange={{this.onStatusChange}}
           @onTaskUpdate={{@onTaskUpdate}}
-          @isLoading={{@isLoading}}
           @userSelectedTask={{@userSelectedTask}}
           @disabled={{@disabled}}
         />

app/controllers/tasks.js

@@ -31,7 +31,6 @@ export default class TasksController extends Controller {
   @tracked showDropDown = true;
   @tracked taskFields = {};
   @tracked allTasks = this.model;
-  @tracked isLoading = false;
   @tracked userSelectedTask = this.DEFAULT_TASK_TYPE;
   @tracked showModal = false;
   @tracked tempTaskId = ''; // this Id will be used to update task which are completed 100%
@@ -139,12 +138,10 @@ export default class TasksController extends Controller {
     this.taskFields[key] = value;
   }
 
-  @action async updateTask(taskId) {
-    this.isLoading = true;
+  @action async updateTask(taskId, error) {
     this.disabled = true;
     this.buttonRequired = false;
     const taskData = this.taskFields;
-    this.isLoading = true;
     const cleanBody = this.constructReqBody(taskData);
 
     if (taskData.status || taskData.percentCompleted) {
@@ -191,6 +188,7 @@ export default class TasksController extends Controller {
             toastNotificationTimeoutOptions
           );
           this.disabled = false;
+          error();
         }
       } catch (err) {
         this.toast.error(
@@ -199,8 +197,8 @@ export default class TasksController extends Controller {
           toastNotificationTimeoutOptions
         );
         console.error('Error : ', err);
+        error();
       } finally {
-        this.isLoading = false;
         this.disabled = false;
       }
     }
@@ -258,16 +256,15 @@ export default class TasksController extends Controller {
     }
   }
 
-  @action async handleUpdateTask(taskId) {
+  @action async handleUpdateTask(taskId, error) {
     const taskData = this.taskFields;
     if (taskData.percentCompleted === TASK_PERCENTAGE.completedPercentage) {
       this.message = TASK_MESSAGES.MARK_DONE;
       this.showModal = true;
       this.buttonRequired = true;
       this.tempTaskId = taskId;
-      return;
     } else {
-      this.updateTask(taskId);
+      return this.updateTask(taskId, error);
     }
   }
 }

tests/integration/components/tasks-test.js

@@ -1,7 +1,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { find, render, waitUntil, fillIn } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { tasks } from 'website-my/tests/fixtures/tasks';
+import { TASK_KEYS } from 'website-my/constants/tasks';
 
 module('Integration | Component | tasks', function (hooks) {
   setupRenderingTest(hooks);
@@ -38,4 +40,44 @@ module('Integration | Component | tasks', function (hooks) {
 
     assert.dom('[data-test-fetchSection]').exists();
   });
+
+  test('Spinner should be visible only on the current updating card', async function (assert) {
+    tasks[0].status = 'IN_PROGRESS';
+    this.setProperties({
+      onTaskChange: () => {},
+      onTaskUpdate: () => {},
+      showFetchButton: false,
+      handleUpdateTask: async () => new Promise((res) => setTimeout(res, 1000)),
+      handleAssignment: () => {},
+      findingTask: false,
+      dev: true,
+      tasksToShow: tasks,
+    });
+
+    await render(hbs`
+      <Tasks
+        @tasksToShow={{this.tasksToShow}}
+        @onTaskChange={{this.onTaskChange}}
+        @onTaskUpdate={{this.handleUpdateTask}}
+        @noInProgressTask={{this.showFetchButton}}
+        @handleAssignment={{this.handleAssignment}}
+        @findingTask={{this.findingTask}}
+        @dev={{this.dev}}
+      />
+    `);
+
+    assert.dom('[data-test-task-spinner]').doesNotExist();
+
+    await fillIn('[data-test-task-status-select]', TASK_KEYS.COMPLETED);
+
+    assert.dom('[data-test-task-spinner]').exists({ count: 1 });
+
+    await waitUntil(
+      () => {
+        return !find('[data-test-task-spinner]');
+      },
+      { timeout: 1000 }
+    );
+    assert.dom('[data-test-task-spinner]').doesNotExist();
+  });
 });

tests/integration/components/tasks/holder-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { tasks, overDueTask } from 'website-my/tests/fixtures/tasks';
 import { TASK_KEYS, TASK_STATUS_LIST } from 'website-my/constants/tasks';
-import { find, render, waitUntil } from '@ember/test-helpers';
+import { find, render, waitUntil, fillIn, select } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | Tasks Holder', function (hooks) {
@@ -145,4 +145,68 @@ module('Integration | Component | Tasks Holder', function (hooks) {
       border: '2px solid rgb(255, 0, 0)',
     });
   });
+
+  test('Verify values of input slider upon api failures', async function (assert) {
+    const testTask = tasksData[3];
+    testTask.percentCompleted = '50';
+    testTask.status = TASK_KEYS.IN_PROGRESS;
+
+    this.set('task', testTask);
+    this.set('mock', () => {});
+    this.set('onTaskUpdate', (taskId, error) => {
+      error();
+    });
+    this.set('isLoading', false);
+    this.set('disabled', false);
+    this.set('defaultType', DEFAULT_TASK_TYPE);
+
+    await render(hbs`<Task::Holder 
+    @task={{this.task}} 
+    @onTaskChange={{this.mock}} 
+    @onStausChange={{this.mock}} 
+    @onTaskUpdate={{this.onTaskUpdate}} 
+    @isLoading={{this.isLoading}} 
+    @userSelectedTask={{this.defaultType}} 
+    @disabled={{this.disabled}}
+  />`);
+
+    assert.dom('[data-test-task-progress-bar]').hasValue('50');
+
+    await fillIn('[data-test-task-progress-bar]', '25');
+
+    assert.dom('[data-test-task-progress-bar]').hasValue('50');
+  });
+
+  test('Verify values of task status upon api failures', async function (assert) {
+    const testTask = tasksData[3];
+    testTask.status = TASK_KEYS.IN_PROGRESS;
+
+    this.set('task', testTask);
+    this.set('mock', () => {});
+    this.set('onTaskUpdate', (taskId, error) => {
+      error();
+    });
+    this.set('isLoading', false);
+    this.set('disabled', false);
+    this.set('defaultType', DEFAULT_TASK_TYPE);
+
+    await render(hbs`<Task::Holder
+    @task={{this.task}}
+    @onTaskChange={{this.mock}}
+    @onStausChange={{this.mock}}
+    @onTaskUpdate={{this.onTaskUpdate}}
+    @userSelectedTask={{this.defaultType}}
+    @disabled={{this.disabled}}
+  />`);
+
+    assert
+      .dom('[data-test-task-status-select]')
+      .hasValue(TASK_KEYS.IN_PROGRESS);
+
+    await select('[data-test-task-status-select]', TASK_KEYS.COMPLETED);
+
+    assert
+      .dom('[data-test-task-status-select]')
+      .hasValue(TASK_KEYS.IN_PROGRESS);
+  });
 });