Test updateevent for sliders

Author: rreusser

src/components/sliders/defaults.js

@@ -76,12 +76,20 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
     coerce('transition.duration');
     coerce('transition.easing');
 
-    if(!Array.isArray(sliderOut.updateevent)) {
-        sliderOut.updateevent = [sliderOut.updateevent];
+    if(sliderOut.updateevent) {
+        if(!Array.isArray(sliderOut.updateevent)) {
+            sliderOut.updateevent = [sliderOut.updateevent];
+        }
+    } else {
+        sliderOut.updateevent = [];
     }
 
-    if(!Array.isArray(sliderOut.udpatevalue)) {
-        sliderOut.udpatevalue = [sliderOut.updatevalue];
+    if(sliderOut.updatevalue) {
+        if(!Array.isArray(sliderOut.updatevalue)) {
+            sliderOut.updatevalue = [sliderOut.updatevalue];
+        }
+    } else {
+        sliderOut.updatevalue = [];
     }
 
     Lib.coerceFont(coerce, 'font', layoutOut.font);

src/components/sliders/draw.js

@@ -292,6 +292,10 @@ function removeListeners(gd, sliderGroup, sliderOpts) {
 }
 
 function attachListeners(gd, sliderGroup, sliderOpts) {
+    if(!sliderOpts.updateevent || !sliderOpts.updateevent.length) {
+        return;
+    }
+
     var listeners = sliderOpts._input.listeners = [];
     var eventNames = sliderOpts._input.eventNames = [];
 
@@ -304,7 +308,7 @@ function attachListeners(gd, sliderGroup, sliderOpts) {
 
             // If it's *currently* invoking a command an event is received,
             // then we'll ignore the event in order to avoid complicated
-            // invinite loops.
+            // infinite loops.
             if(sliderOpts._invokingCommand) return;
 
             setActiveByLabel(gd, sliderGroup, sliderOpts, value, false, true);
@@ -313,7 +317,7 @@ function attachListeners(gd, sliderGroup, sliderOpts) {
 
     for(var i = 0; i < sliderOpts.updateevent.length; i++) {
         var updateEventName = sliderOpts.updateevent[i];
-        var updatevalue = sliderOpts.updatevalue;
+        var updatevalue = (sliderOpts.updatevalue || [])[i];
 
         var updatelistener = makeListener(updateEventName, updatevalue);
 

test/jasmine/tests/sliders_test.js

@@ -252,5 +252,80 @@ describe('update sliders interactions', function() {
     function assertNodeCount(query, cnt) {
         expect(d3.selectAll(query).size()).toEqual(cnt);
     }
+});
+
+describe('updateevent and updatevalue', function() {
+    'use strict';
+
+    var mock = require('@mocks/sliders.json');
+
+    var gd;
+
+    beforeEach(function(done) {
+        gd = createGraphDiv();
+
+        var mockCopy = Lib.extendDeep({}, mock);
+
+        mockCopy.layout.sliders[0].updateevent = 'plotly_someevent';
+        mockCopy.layout.sliders[0].updateevent = 'plotly_someevent';
+
+        Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    it('updates a slider when an event is triggered', function(done) {
+        Plotly.relayout(gd, {
+            'sliders[0].updateevent': 'plotly_someevent',
+            'sliders[0].updatevalue': 'value'
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+            gd.emit('plotly_someevent', {value: 'green'});
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(3);
+        }).catch(fail).then(done);
+    });
+
+    it('updates a slider when updatevalue unspecified', function(done) {
+        Plotly.relayout(gd, {
+            'sliders[0].updateevent': 'plotly_someevent'
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+            gd.emit('plotly_someevent', 'green');
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(3);
+        }).catch(fail).then(done);
+    });
 
+    it('updates a slider when any of multiple updateevents occurs', function(done) {
+        Plotly.relayout(gd, {
+            'sliders[0].updateevent': ['plotly_someevent', 'plotly_anotherevent']
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+            gd.emit('plotly_someevent', 'green');
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(3);
+            gd.emit('plotly_anotherevent', 'yellow');
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+        }).catch(fail).then(done);
+    });
+
+    it('matches update events with update values', function(done) {
+        Plotly.relayout(gd, {
+            'sliders[0].updateevent': ['plotly_someevent', 'plotly_anotherevent'],
+            'sliders[0].updatevalue': ['foo', 'bar']
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+            gd.emit('plotly_someevent', {foo: 'green'});
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(3);
+            gd.emit('plotly_anotherevent', {bar: 'yellow'});
+        }).then(function() {
+            expect(gd._fullLayout.sliders[0].active).toEqual(2);
+        }).catch(fail).then(done);
+    });
 });