fix(slider): value-changed event is not fired (#174)

Refinitiv · Feb 14, 2022 · 687f244 · 687f244
1 parent fb05273
commit 687f244
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 0 deletions.
diff --git a/packages/elements/src/slider/__test__/slider.test.js b/packages/elements/src/slider/__test__/slider.test.js
@@ -1358,6 +1358,120 @@ describe('slider/Slider', () => {
         expect(toEventFiredCount, 'Event "to-changed" should not fired').to.equal(0);
         expect(slider.to).to.equal('90');
       });
+
+      it('Event value-changed should fires when value property was set via api and drag the slider back to previous value', async () => {
+        expect(el.value).to.equal('0');
+        el.value = 10;
+        await elementUpdated();
+        expect(el.value).to.equal('10');
+
+
+        let callCountValue = 0;
+        el.addEventListener('value-changed', () => {
+          callCountValue += 1;
+        });
+
+        // Drag 'value' position 10 to 0
+        const dragValuePositionStart = tabSliderPosition(0);
+        const dragValuePositionFirst = tabSliderPosition(10);
+        // Drag start
+        setTimeout(() => el.slider.dispatchEvent(new MouseEvent('mousedown', { clientX: dragValuePositionFirst, clientY: 0 })));
+        await oneEvent(el.slider, 'mousedown');
+        expect(el.dragging).to.be.true;
+        expect(el.value).to.equal(calculateValue(el, dragValuePositionFirst).toString());
+
+        // Dragging
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mousemove', { clientX: dragValuePositionStart, clientY: 0 })));
+        await oneEvent(window, 'mousemove');
+
+        // Darg end
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mouseup', { clientX: dragValuePositionStart, clientY: 0 })));
+        await oneEvent(window, 'mouseup');
+        expect(el.dragging).to.be.false;
+        expect(el.value).to.equal(calculateValue(el, dragValuePositionStart).toString());
+
+        // Check call fire event
+        expect(callCountValue).to.equal(1);
+      });
+
+      it('Event from-changed should fires when from property was set via api and drag the slider back to previous value', async () => {
+        el.range = true;
+        await elementUpdated(el);
+        expect(el.from).to.equal('0');
+        expect(el.to).to.equal('100');
+
+        el.from = 10;
+        await elementUpdated();
+        expect(el.from).to.equal('10');
+
+        let callCountValue = 0;
+        el.addEventListener('from-changed', () => {
+          callCountValue += 1;
+        });
+
+        // Drag 'from' position 10 to 0
+        const dragPositionStart = tabSliderPosition(0);
+        const dragPosition10 = tabSliderPosition(10);
+
+        // Drag start
+        setTimeout(() => el.slider.dispatchEvent(new MouseEvent('mousedown', { clientX: dragPosition10, clientY: 0 })));
+        await oneEvent(el.slider, 'mousedown');
+        expect(el.dragging).to.be.true;
+        expect(el.from).to.equal(calculateValue(el, dragPosition10).toString());
+
+        // Dragging
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mousemove', { clientX: dragPositionStart, clientY: 0 })));
+        await oneEvent(window, 'mousemove');
+
+        // Darg end
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mouseup', { clientX: dragPositionStart, clientY: 0 })));
+        await oneEvent(window, 'mouseup');
+        expect(el.dragging).to.be.false;
+        expect(el.from).to.equal(calculateValue(el, dragPositionStart).toString());
+
+        // Check call fire event
+        expect(callCountValue).to.equal(1);
+      });
+
+      it('Event to-changed should fires when to property was set via api and drag the slider back to previous value', async () => {
+        el.range = true;
+        await elementUpdated(el);
+        expect(el.from).to.equal('0');
+        expect(el.to).to.equal('100');
+
+        el.to = 80;
+        await elementUpdated();
+        expect(el.to).to.equal('80');
+
+        let callCountValue = 0;
+        el.addEventListener('to-changed', () => {
+          callCountValue += 1;
+        });
+
+        // Drag 'to' position 80 to 100
+        const dragPositionEnd = tabSliderPosition(100);
+        const dragPosition80 = tabSliderPosition(80);
+
+        // Drag start
+        setTimeout(() => el.slider.dispatchEvent(new MouseEvent('mousedown', { clientX: dragPosition80, clientY: 0 })));
+        await oneEvent(el.slider, 'mousedown');
+        expect(el.dragging).to.be.true;
+        expect(el.to).to.equal(calculateValue(el, dragPosition80).toString());
+
+        // Dragging
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mousemove', { clientX: dragPositionEnd, clientY: 0 })));
+        await oneEvent(window, 'mousemove');
+
+        // Darg end
+        setTimeout(() => window.dispatchEvent(new MouseEvent('mouseup', { clientX: dragPositionEnd, clientY: 0 })));
+        await oneEvent(window, 'mouseup');
+        expect(el.dragging).to.be.false;
+        expect(el.to).to.equal(calculateValue(el, dragPositionEnd).toString());
+
+        // Check call fire event
+        expect(callCountValue).to.equal(1);
+      });
+
     });
   });
 });
diff --git a/packages/elements/src/slider/index.ts b/packages/elements/src/slider/index.ts
@@ -917,6 +917,11 @@ export class Slider extends ControlElement {
         }
       }
     }
+
+    if (!this.dragging) {
+      // Update internal `valuePrevious` when `value` was programatically set by user.
+      this.valuePrevious = this.value;
+    }
   }
 
   /**
@@ -945,6 +950,10 @@ export class Slider extends ControlElement {
         }
       }
     }
+
+    if (!this.dragging) {
+      this.fromPrevious = this.from;
+    }
   }
 
   /**
@@ -1031,6 +1040,9 @@ export class Slider extends ControlElement {
         }
       }
     }
+    if (!this.dragging) {
+      this.toPrevious = this.to;
+    }
   }
 
   /**