From 01ecd3f069267b25cfa5563dc36160730ca59dd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 31 Jan 2017 17:18:46 -0500 Subject: [PATCH 1/3] fix restyle call for finance trace legend edits --- src/components/legend/draw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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'; From c66753b3c3dc738a4e2c80396a071474972a3f44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Wed, 1 Feb 2017 13:56:23 -0500 Subject: [PATCH 2/3] add editable: true legend item test case for finance traces --- test/jasmine/tests/finance_test.js | 76 ++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js index f6e292cf4dc..b1b99c05128 100644 --- a/test/jasmine/tests/finance_test.js +++ b/test/jasmine/tests/finance_test.js @@ -963,3 +963,79 @@ describe('finance charts updates:', function() { }); }); }); + +describe('finance charts *special* handlers:', function() { + + afterEach(destroyGraphDiv); + + it('`editable: true` handles should work', function(done) { + + 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')); + + editNode.remove(); + } + + Plotly.plot(createGraphDiv(), [ + 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]); + resolve(gd); + }); + + 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]); + resolve(gd); + }); + + 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]); + resolve(gd); + }); + + 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]); + resolve(gd); + }); + + editText(2, '3'); + }); + }) + .then(done); + }); + +}); From 690b9f78ccb60d5dfb4464c6492de7276857360d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Thu, 2 Feb 2017 16:35:36 -0500 Subject: [PATCH 3/3] delay resolve() instead of manually clearing edit div in finance legend item edit test case. --- test/jasmine/tests/finance_test.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js index b1b99c05128..207b5ddb4c7 100644 --- a/test/jasmine/tests/finance_test.js +++ b/test/jasmine/tests/finance_test.js @@ -968,7 +968,9 @@ describe('finance charts *special* handlers:', function() { afterEach(destroyGraphDiv); - it('`editable: true` handles should work', function(done) { + it('`editable: true` handlers should work', function(done) { + + var gd = createGraphDiv(); function editText(itemNumber, newText) { var textNode = d3.selectAll('text.legendtext') @@ -981,11 +983,17 @@ describe('finance charts *special* handlers:', function() { editNode.textContent = newText; editNode.dispatchEvent(new window.FocusEvent('focus')); editNode.dispatchEvent(new window.FocusEvent('blur')); + } - editNode.remove(); + // 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(createGraphDiv(), [ + Plotly.plot(gd, [ Lib.extendDeep({}, mock0, { type: 'ohlc' }), Lib.extendDeep({}, mock0, { type: 'candlestick' }) ], {}, { @@ -996,7 +1004,7 @@ describe('finance charts *special* handlers:', function() { gd.once('plotly_restyle', function(eventData) { expect(eventData[0]['increasing.name']).toEqual('0'); expect(eventData[1]).toEqual([0]); - resolve(gd); + delayedResolve(resolve); }); editText(0, '0'); @@ -1007,7 +1015,7 @@ describe('finance charts *special* handlers:', function() { gd.once('plotly_restyle', function(eventData) { expect(eventData[0]['decreasing.name']).toEqual('1'); expect(eventData[1]).toEqual([0]); - resolve(gd); + delayedResolve(resolve); }); editText(1, '1'); @@ -1018,7 +1026,7 @@ describe('finance charts *special* handlers:', function() { gd.once('plotly_restyle', function(eventData) { expect(eventData[0]['decreasing.name']).toEqual('2'); expect(eventData[1]).toEqual([1]); - resolve(gd); + delayedResolve(resolve); }); editText(3, '2'); @@ -1029,7 +1037,7 @@ describe('finance charts *special* handlers:', function() { gd.once('plotly_restyle', function(eventData) { expect(eventData[0]['increasing.name']).toEqual('3'); expect(eventData[1]).toEqual([1]); - resolve(gd); + delayedResolve(resolve); }); editText(2, '3');