@@ -284,6 +284,95 @@ describe('Tooltip Plugin', () => {
284
284
} ) ;
285
285
} ) ;
286
286
287
+ describe ( 'for PieChart (Donut)' , ( ) => {
288
+ let chartContainer : HTMLElement ;
289
+ let tooltip : HTMLElement | null ;
290
+ const listeners : { [ key : string ] : EventListener } = { } ;
291
+
292
+ beforeAll ( ( ) => {
293
+ // Create container DIV.
294
+ chartContainer = document . createElement ( 'div' ) ;
295
+ chartContainer . id = 'chart' ;
296
+ chartContainer . style . height = '100px' ;
297
+ chartContainer . style . width = '500px' ;
298
+ ( chartContainer as any ) . addEventListener = (
299
+ type : string ,
300
+ listener : EventListener
301
+ ) => {
302
+ listeners [ type ] = listener ;
303
+ } ;
304
+ document . body . innerHTML = '' ;
305
+ document . body . appendChild ( chartContainer ) ;
306
+ } ) ;
307
+
308
+ it ( 'should initialize with a Tooltip plugin' , ( ) => {
309
+ const chart = new PieChart (
310
+ chartContainer ,
311
+ {
312
+ series : [ 20 , 10 , 30 , 40 ]
313
+ } ,
314
+ {
315
+ donut : true ,
316
+ donutWidth : 60 ,
317
+ startAngle : 270 ,
318
+ showLabel : true ,
319
+ plugins : [ ChartistPluginTooltip ]
320
+ }
321
+ ) ;
322
+
323
+ chart . initialize ( ) ;
324
+
325
+ expect ( chartContainer ?. innerHTML ) . not . toEqual ( '' ) ;
326
+ } ) ;
327
+
328
+ it ( 'should generate the tooltip element' , ( ) => {
329
+ tooltip = document . body . querySelector ( '.chartist-tooltip' ) ;
330
+ expect ( tooltip ) . not . toBeNull ( ) ;
331
+ } ) ;
332
+
333
+ it ( 'should append the tooltip to the body by default' , ( ) => {
334
+ expect ( tooltip ?. parentElement ) . toBe ( document . body ) ;
335
+ } ) ;
336
+
337
+ it ( 'should hide the tooltip' , ( ) => {
338
+ expect ( tooltip ?. classList ) . not . toContain ( 'tooltip-show' ) ;
339
+ } ) ;
340
+
341
+ it ( 'should not show tooltip on mouse enter' , ( ) => {
342
+ listeners . mouseover ( {
343
+ target : chartContainer as EventTarget
344
+ } as MouseEvent ) ;
345
+ expect ( tooltip ?. classList ) . not . toContain ( 'tooltip-show' ) ;
346
+ } ) ;
347
+
348
+ it ( 'should show tooltip with mouse over a point' , ( ) => {
349
+ listeners . mouseover ( {
350
+ target : chartContainer . querySelector ( '.ct-slice-donut' ) as EventTarget ,
351
+ pageX : 150 ,
352
+ pageY : 160
353
+ } as MouseEvent ) ;
354
+ expect ( tooltip ?. classList ) . toContain ( 'tooltip-show' ) ;
355
+ } ) ;
356
+
357
+ it ( 'should generate tooltip content' , ( ) => {
358
+ expect ( tooltip ?. innerHTML ) . toEqual (
359
+ '<span class="chartist-tooltip-value">20</span>'
360
+ ) ;
361
+ } ) ;
362
+
363
+ it ( 'should set tooltip position' , ( ) => {
364
+ expect ( tooltip ?. style . left ) . toBe ( '150px' ) ;
365
+ expect ( tooltip ?. style . top ) . toBe ( '140px' ) ;
366
+ } ) ;
367
+
368
+ it ( 'should hide tooltip on mouse leave' , ( ) => {
369
+ listeners . mouseout ( {
370
+ target : chartContainer . querySelector ( '.ct-slice-donut' ) as EventTarget
371
+ } as MouseEvent ) ;
372
+ expect ( tooltip ?. classList ) . not . toContain ( 'tooltip-show' ) ;
373
+ } ) ;
374
+ } ) ;
375
+
287
376
describe ( 'with custom options' , ( ) => {
288
377
let chartContainer : HTMLElement ;
289
378
let tooltip : HTMLElement | null ;
0 commit comments