11var Plotly = require ( '@lib/index' ) ;
22var createGraphDiv = require ( '../assets/create_graph_div' ) ;
33var destroyGraphDiv = require ( '../assets/destroy_graph_div' ) ;
4+ var mouseEvent = require ( '../assets/mouse_event' ) ;
45
56describe ( 'config argument' , function ( ) {
67
7- var gd ;
8+ describe ( 'showLink attribute' , function ( ) {
89
9- beforeEach ( function ( done ) {
10- gd = createGraphDiv ( ) ;
11- done ( ) ;
12- } ) ;
10+ var gd ;
1311
14- afterEach ( destroyGraphDiv ) ;
12+ beforeEach ( function ( done ) {
13+ gd = createGraphDiv ( ) ;
14+ done ( ) ;
15+ } ) ;
1516
16- describe ( 'showLink attribute' , function ( ) {
17+ afterEach ( destroyGraphDiv ) ;
1718
1819 it ( 'should not display the edit link by default' , function ( ) {
1920 Plotly . plot ( gd , [ ] , { } ) ;
@@ -39,4 +40,76 @@ describe('config argument', function() {
3940 expect ( bBox . height ) . toBeGreaterThan ( 0 ) ;
4041 } ) ;
4142 } ) ;
43+
44+
45+ describe ( 'editable attribute' , function ( ) {
46+
47+ var gd ;
48+
49+ beforeEach ( function ( done ) {
50+ gd = createGraphDiv ( ) ;
51+
52+ Plotly . plot ( gd , [
53+ { x : [ 1 , 2 , 3 ] , y : [ 1 , 2 , 3 ] } ,
54+ { x : [ 1 , 2 , 3 ] , y : [ 3 , 2 , 1 ] }
55+ ] , {
56+ width : 600 ,
57+ height : 400
58+ } , { editable : true } )
59+ . then ( done ) ;
60+ } ) ;
61+
62+ afterEach ( destroyGraphDiv ) ;
63+
64+ function checkIfEditable ( elClass , text ) {
65+ var label = document . getElementsByClassName ( elClass ) [ 0 ] ;
66+
67+ expect ( label . textContent ) . toBe ( text ) ;
68+
69+ var labelBox = label . getBoundingClientRect ( ) ,
70+ labelX = labelBox . left + labelBox . width / 2 ,
71+ labelY = labelBox . top + labelBox . height / 2 ;
72+
73+ mouseEvent ( 'click' , labelX , labelY ) ;
74+
75+ var editBox = document . getElementsByClassName ( 'plugin-editable editable' ) [ 0 ] ;
76+ expect ( editBox ) . toBeDefined ( ) ;
77+ expect ( editBox . textContent ) . toBe ( text ) ;
78+ expect ( editBox . getAttribute ( 'contenteditable' ) ) . toBe ( 'true' ) ;
79+ }
80+
81+ it ( 'should make titles editable' , function ( ) {
82+ checkIfEditable ( 'gtitle' , 'Click to enter Plot title' ) ;
83+ } ) ;
84+
85+ it ( 'should make x axes labels editable' , function ( ) {
86+ checkIfEditable ( 'g-xtitle' , 'Click to enter X axis title' ) ;
87+ } ) ;
88+
89+ it ( 'should make y axes labels editable' , function ( ) {
90+ checkIfEditable ( 'g-ytitle' , 'Click to enter Y axis title' ) ;
91+ } ) ;
92+
93+ it ( 'should make legend labels editable' , function ( ) {
94+ checkIfEditable ( 'legendtext' , 'trace 0' ) ;
95+ } ) ;
96+
97+ it ( 'should make legends draggable' , function ( ) {
98+
99+ var legend = document . getElementsByClassName ( 'legend' ) [ 0 ] ,
100+ legendBox = legend . getBoundingClientRect ( ) ,
101+ legendX = legendBox . left + legendBox . width / 2 ,
102+ legendY = legendBox . top + legendBox . height / 2 ;
103+
104+ mouseEvent ( 'mousedown' , legendX , legendY ) ;
105+ mouseEvent ( 'mousemove' , legendX - 20 , legendY + 20 ) ;
106+ mouseEvent ( 'mouseup' , legendX - 20 , legendY + 20 ) ;
107+
108+ var movedlegendBox = legend . getBoundingClientRect ( ) ;
109+
110+ expect ( movedlegendBox . left ) . not . toBe ( legendBox . left ) ;
111+ expect ( movedlegendBox . top ) . not . toBe ( legendBox . top ) ;
112+
113+ } ) ;
114+ } ) ;
42115} ) ;
0 commit comments