progress bar component

app/components/progress-bar.hbs

@@ -2,7 +2,7 @@
   <input
     {{focus-when this.isEditable}}
     aria-label='progress slider for IN-Progress tasks'
-    data-test-task-progress-bar
+    data-test-progress-bar
     class='progress-bar__input-slider'
     id='progress-bar-input'
     type='range'
@@ -15,7 +15,7 @@
     disabled={{not this.isEditable}}
   />
   <button
-    data-text-progress-bar-button
+    data-test-progress-bar-button
     {{on 'click' this.turnEditModeOn}}
     class='progress-bar__button
       {{unless this.isEditable "progress-bar__edit-hover"}}'

app/components/progress-bar.js

@@ -41,5 +41,5 @@ export default class ProgressBarComponent extends Component {
   debouncedChange = debounce(async (e) => {
     await this.args.onChange(e);
     this.isEditable = false;
-  }, 1000);
+  }, 750);
 }

app/components/task-details.hbs

@@ -2,7 +2,12 @@
   <div class='task-details__title-container'>
     <p class='task-details__title'>{{@task.title}}</p>
     <div class='task-card__progress-bar-container'>
-      <div class='task-card__progress-bar-container__progress-bar'>
+      <div
+        class='{{unless
+            @progressBarDev
+            "task-card__progress-bar-container__progress-bar"
+          }}'
+      >
         {{#if @progressBarDev}}
           {{#if (eq @task.status 'IN_PROGRESS')}}
             <ProgressBar
@@ -24,7 +29,6 @@
             max='100'
             step='10'
             {{on 'change' @onPercentageChange}}
-            {{on 'change' (fn @onTaskUpdate @task.id)}}
             disabled={{@isProgressBarDisabled}}
           />
           {{@percentCompleted}}%

app/styles/progress-bar.css

@@ -1,3 +1,6 @@
+:root {
+  --progress-bar-color: rgba(0, 128, 0, 0.9);
+}
 .progress-bar-container {
   display: flex;
   gap: 4px;
@@ -15,8 +18,9 @@
 }
 
 .progress-bar__edit-icon {
-  width: 85%;
-  height: 85%;
+  width: 95%;
+  height: 95%;
+  margin-bottom: 2px;
 }
 .progress-bar__input-slider {
   -webkit-appearance: none;

package.json

@@ -41,7 +41,6 @@
   "devDependencies": {
     "@ember/jquery": "^2.0.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/render-modifiers": "^2.1.0",
     "@ember/test-helpers": "^2.2.1",
     "@fortawesome/ember-fontawesome": "^0.2.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",

tests/integration/components/progress-bar-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { find, render, fillIn, click } from '@ember/test-helpers';
+import { find, render, fillIn, click, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | progress-bar', function (hooks) {
@@ -15,16 +15,23 @@ module('Integration | Component | progress-bar', function (hooks) {
   test('it has edit button', async function (assert) {
     await render(hbs`<ProgressBar />`);
 
-    assert.dom('[data-text-progress-bar-button]').exists();
+    assert.dom('[data-test-progress-bar-button]').exists();
   });
 
   test('verify edit button click', async function (assert) {
-    await render(hbs`<ProgressBar />`);
-
-    const editButton = find('[data-text-progress-bar-button]');
+    this.setProperties({
+      percentageCompleted: '10',
+      onUpdate: (value) => {
+        this.percentageCompleted = value;
+      },
+    });
+    await render(
+      hbs`<ProgressBar @value={{this.percentageCompleted}} @onUpdate={{this.onUpdate}} />`
+    );
+    const editButton = find('[data-test-progress-bar-button]');
 
     await click(editButton);
-    assert.dom(editButton).containsText('%');
+    assert.dom(editButton).containsText('10');
   });
 
   test('verify update success', async function (assert) {
@@ -38,42 +45,42 @@ module('Integration | Component | progress-bar', function (hooks) {
       hbs`<ProgressBar @value={{this.percentageCompleted}} @onUpdate={{this.onUpdate}} />`
     );
 
-    const editButton = find('[data-text-progress-bar-button]');
+    const editButton = find('[data-test-progress-bar-button]');
 
     await click(editButton);
 
     const progressBarInput = find('[data-test-progress-bar]');
 
     await fillIn(progressBarInput, '50');
 
-    assert.dom('[data-text-progress-bar-button]').exists();
+    assert.dom('[data-test-progress-bar-button]').exists();
     assert.equal(progressBarInput.value, '50', "The value should be '50'.");
   });
 
   test('verify update error', async function (assert) {
     this.setProperties({
       percentageCompleted: '10',
-      onUpdate: () => {
+      onChange: () => {
         this.percentageCompleted = '10';
       },
     });
     await render(
-      hbs`<ProgressBar @value={{this.percentageCompleted}} @onUpdate={{this.onUpdate}} />`
+      hbs`<ProgressBar @value={{this.percentageCompleted}} @onChange={{this.onChange}} />`
     );
 
-    const editButton = find('[data-text-progress-bar-button]');
+    const editButton = find('[data-test-progress-bar-button]');
 
     await click(editButton);
-    const progressBarInput = find('[data-test-progress-bar]');
+    let progressBarInput = find('[data-test-progress-bar]');
 
     await fillIn(progressBarInput, '50');
 
-    assert.dom('[data-text-progress-bar-button]').exists();
-    assert.notEqual(
-      progressBarInput.value,
-      '50',
-      "The value should not be '50'."
-    );
-    assert.equal(progressBarInput.value, '10', "The value should be '10'.");
+    assert.dom('[data-test-progress-bar-button]').exists();
+
+    await waitFor(editButton);
+
+    await click(editButton);
+
+    assert.dom('[data-test-progress-bar-button]').hasText('10');
   });
 });

yarn.lock

@@ -1253,6 +1253,15 @@
     broccoli-funnel "^3.0.8"
     semver "^7.3.8"
 
+"@embroider/addon-shim@^1.8.4":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@embroider/addon-shim/-/addon-shim-1.8.6.tgz#b676991b4fa32c3a98dc7db7dc6cd655029c3f09"
+  integrity sha512-siC9kP78uucEbpDcVyxjkwa76pcs5rVzDVpWO4PDc9EAXRX+pzmUuSTLAK3GztUwx7/PWhz1BenAivqdSvSgfg==
+  dependencies:
+    "@embroider/shared-internals" "^2.2.3"
+    broccoli-funnel "^3.0.8"
+    semver "^7.3.8"
+
 "@embroider/macros@^0.41.0":
   version "0.41.0"
   resolved "https://registry.yarnpkg.com/@embroider/macros/-/macros-0.41.0.tgz#3e78b6f388d7229906abf4c75edfff8bb0208aca"
@@ -1320,6 +1329,20 @@
     semver "^7.3.5"
     typescript-memoize "^1.0.1"
 
+"@embroider/shared-internals@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@embroider/shared-internals/-/shared-internals-2.2.3.tgz#2c7ffaa42066906bfc30c766450c199d9602cdd9"
+  integrity sha512-4RXJ07TqkQN4FpLBnQ92TZWW4wGAH7CRG37F1iE99rjxoD3IkoKe1IeyNr0Q85lws+2awx4/cEpaUsSwUYiJSg==
+  dependencies:
+    babel-import-util "^1.1.0"
+    ember-rfc176-data "^0.3.17"
+    fs-extra "^9.1.0"
+    js-string-escape "^1.0.1"
+    lodash "^4.17.21"
+    resolve-package-path "^4.0.1"
+    semver "^7.3.5"
+    typescript-memoize "^1.0.1"
+
 "@embroider/util@^0.39.1 || ^0.40.0 || ^0.41.0 || ^1.0.0", "@embroider/util@^1.0.0", "@embroider/util@^1.9.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@embroider/util/-/util-1.10.0.tgz#8320d73651e7f5d48dac1b71fb9e6d21cac7c803"
@@ -5751,6 +5774,15 @@ ember-modifier@^3.1.0, ember-modifier@^3.2.0, ember-modifier@^3.2.7:
     ember-cli-typescript "^5.0.0"
     ember-compatibility-helpers "^1.2.5"
 
+ember-modifier@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-4.1.0.tgz#cb91efbf8ca4ff4a1a859767afa42dddba5a2bbd"
+  integrity sha512-YFCNpEYj6jdyy3EjslRb2ehNiDvaOrXTilR9+ngq+iUqSHYto2zKV0rleiA1XJQ27ELM1q8RihT29U6Lq5EyqQ==
+  dependencies:
+    "@embroider/addon-shim" "^1.8.4"
+    ember-cli-normalize-entity-name "^1.0.0"
+    ember-cli-string-utils "^1.1.0"
+
 ember-named-blocks-polyfill@^0.2.4:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/ember-named-blocks-polyfill/-/ember-named-blocks-polyfill-0.2.5.tgz#d5841406277026a221f479c815cfbac6cdcaeecb"