diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 0fbab3a3e13..c7970bd9ec6 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -384,7 +384,7 @@ function drawTexts(g, gd) { var transforms = legendItem.trace.transforms, direction = transforms[transforms.length - 1].direction; - astr = direction + '.legenditem.name'; + astr = direction + '.name'; } else astr = 'name'; diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js index f6e292cf4dc..207b5ddb4c7 100644 --- a/test/jasmine/tests/finance_test.js +++ b/test/jasmine/tests/finance_test.js @@ -963,3 +963,87 @@ describe('finance charts updates:', function() { }); }); }); + +describe('finance charts *special* handlers:', function() { + + afterEach(destroyGraphDiv); + + it('`editable: true` handlers should work', function(done) { + + var gd = createGraphDiv(); + + function editText(itemNumber, newText) { + var textNode = d3.selectAll('text.legendtext') + .filter(function(_, i) { return i === itemNumber; }).node(); + textNode.dispatchEvent(new window.MouseEvent('click')); + + var editNode = d3.select('.plugin-editable.editable').node(); + editNode.dispatchEvent(new window.FocusEvent('focus')); + + editNode.textContent = newText; + editNode.dispatchEvent(new window.FocusEvent('focus')); + editNode.dispatchEvent(new window.FocusEvent('blur')); + } + + // makeEditable in svg_text_utils clears the edit
in + // a 0-second transition, so push the resolve call at the back + // of the rendering queue to make sure the edit
is properly + // cleared after each mocked text edits. + function delayedResolve(resolve) { + setTimeout(function() { return resolve(gd); }, 0); + } + + Plotly.plot(gd, [ + Lib.extendDeep({}, mock0, { type: 'ohlc' }), + Lib.extendDeep({}, mock0, { type: 'candlestick' }) + ], {}, { + editable: true + }) + .then(function(gd) { + return new Promise(function(resolve) { + gd.once('plotly_restyle', function(eventData) { + expect(eventData[0]['increasing.name']).toEqual('0'); + expect(eventData[1]).toEqual([0]); + delayedResolve(resolve); + }); + + editText(0, '0'); + }); + }) + .then(function(gd) { + return new Promise(function(resolve) { + gd.once('plotly_restyle', function(eventData) { + expect(eventData[0]['decreasing.name']).toEqual('1'); + expect(eventData[1]).toEqual([0]); + delayedResolve(resolve); + }); + + editText(1, '1'); + }); + }) + .then(function(gd) { + return new Promise(function(resolve) { + gd.once('plotly_restyle', function(eventData) { + expect(eventData[0]['decreasing.name']).toEqual('2'); + expect(eventData[1]).toEqual([1]); + delayedResolve(resolve); + }); + + editText(3, '2'); + }); + }) + .then(function(gd) { + return new Promise(function(resolve) { + gd.once('plotly_restyle', function(eventData) { + expect(eventData[0]['increasing.name']).toEqual('3'); + expect(eventData[1]).toEqual([1]); + delayedResolve(resolve); + }); + + editText(2, '3'); + }); + }) + .then(done); + }); + +});