|
| 1 | +import React from 'react'; |
| 2 | +import { render, screen } from '@testing-library/react'; |
| 3 | + |
| 4 | +import { CustomTooltip } from './CustomTooltip'; |
| 5 | +import { CustomTooltipProps } from './CustomTooltip.types'; |
| 6 | + |
| 7 | +const baseSeriesData = { |
| 8 | + componentType: 'series', |
| 9 | + componentSubType: 'line', |
| 10 | + componentIndex: 0, |
| 11 | + seriesType: 'line', |
| 12 | + seriesIndex: 0, |
| 13 | + seriesId: '\u0000cluster2-shard-00-00-stuvwx3456.mongodb.net:27017\u00000', |
| 14 | + dataIndex: 18, |
| 15 | + color: '#016BF8', |
| 16 | + dimensionNames: ['x', 'y'], |
| 17 | + encode: { |
| 18 | + x: [0], |
| 19 | + y: [1], |
| 20 | + }, |
| 21 | + $vars: ['seriesName', 'name', 'value'], |
| 22 | + axisDim: 'x', |
| 23 | + axisIndex: 0, |
| 24 | + axisType: 'xAxis.time', |
| 25 | + axisId: '\u0000X-Axis Label\u00000', |
| 26 | + axisValue: 1704086280000, |
| 27 | + axisValueLabel: '2024-01-01 00:18:00', |
| 28 | + marker: |
| 29 | + '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#016BF8;"></span>', |
| 30 | +}; |
| 31 | + |
| 32 | +const mockSeriesData: CustomTooltipProps['seriesData'] = [ |
| 33 | + { |
| 34 | + ...baseSeriesData, |
| 35 | + data: ['Series 1', 100], |
| 36 | + value: ['Series 1', 100], |
| 37 | + seriesName: 'Series 1', |
| 38 | + name: 'Series 1', |
| 39 | + }, |
| 40 | + { |
| 41 | + ...baseSeriesData, |
| 42 | + data: ['Series 3', 300], |
| 43 | + value: ['Series 3', 300], |
| 44 | + seriesName: 'Series 3', |
| 45 | + name: 'Series 3', |
| 46 | + }, |
| 47 | + { |
| 48 | + ...baseSeriesData, |
| 49 | + data: ['Series 2', 200], |
| 50 | + value: ['Series 2', 200], |
| 51 | + seriesName: 'Series 2', |
| 52 | + name: 'Series 2', |
| 53 | + }, |
| 54 | +]; |
| 55 | + |
| 56 | +function descendingCompareFn( |
| 57 | + valueA: string | number | Date, |
| 58 | + valueB: string | number | Date, |
| 59 | +) { |
| 60 | + if (valueA < valueB) { |
| 61 | + return -1; |
| 62 | + } |
| 63 | + |
| 64 | + if (valueA > valueB) { |
| 65 | + return 1; |
| 66 | + } |
| 67 | + |
| 68 | + return 0; |
| 69 | +} |
| 70 | + |
| 71 | +const renderCustomTooltip = (props: Partial<CustomTooltipProps> = {}) => { |
| 72 | + const defaultProps: CustomTooltipProps = { |
| 73 | + seriesData: mockSeriesData, |
| 74 | + }; |
| 75 | + |
| 76 | + return render(<CustomTooltip {...defaultProps} {...props} />); |
| 77 | +}; |
| 78 | + |
| 79 | +describe('@lg-charts/core/Tooltip/CustomTooltip', () => { |
| 80 | + test('should render properly formatted date', () => { |
| 81 | + renderCustomTooltip(); |
| 82 | + const dateElement = screen.getByText( |
| 83 | + /\d{4}\/\d{2}\/\d{2}\/\d{2}:\d{2}:\d{2}/, |
| 84 | + ); |
| 85 | + expect(dateElement).toBeInTheDocument(); |
| 86 | + }); |
| 87 | + |
| 88 | + test('should render series list sorted desc by value by default', () => { |
| 89 | + renderCustomTooltip(); |
| 90 | + |
| 91 | + const seriesElements = screen.getAllByText(/Series/); |
| 92 | + expect(seriesElements[0]).toHaveTextContent('Series 3'); |
| 93 | + expect(seriesElements[1]).toHaveTextContent('Series 2'); |
| 94 | + expect(seriesElements[2]).toHaveTextContent('Series 1'); |
| 95 | + }); |
| 96 | + |
| 97 | + test('should reorder list according to sort function', () => { |
| 98 | + renderCustomTooltip({ |
| 99 | + sort: (seriesA, seriesB) => |
| 100 | + descendingCompareFn(seriesA.value, seriesB.value), |
| 101 | + }); |
| 102 | + |
| 103 | + const seriesElements = screen.getAllByText(/Series/); |
| 104 | + expect(seriesElements[0]).toHaveTextContent('Series 1'); |
| 105 | + expect(seriesElements[1]).toHaveTextContent('Series 2'); |
| 106 | + expect(seriesElements[2]).toHaveTextContent('Series 3'); |
| 107 | + }); |
| 108 | + |
| 109 | + test('should render custom series name with seriesNameFormatter', () => { |
| 110 | + renderCustomTooltip({ |
| 111 | + seriesNameFormatter: (name: string) => `Name: ${name}`, |
| 112 | + }); |
| 113 | + |
| 114 | + expect(screen.getByText('Name: Series 1')).toBeInTheDocument(); |
| 115 | + expect(screen.getByText('Name: Series 2')).toBeInTheDocument(); |
| 116 | + expect(screen.getByText('Name: Series 3')).toBeInTheDocument(); |
| 117 | + }); |
| 118 | + |
| 119 | + test('should render custom series value with seriesValueFormatter', () => { |
| 120 | + renderCustomTooltip({ |
| 121 | + seriesValueFormatter: (value: number) => `$${value}`, |
| 122 | + }); |
| 123 | + |
| 124 | + expect(screen.getByText('$100')).toBeInTheDocument(); |
| 125 | + expect(screen.getByText('$200')).toBeInTheDocument(); |
| 126 | + expect(screen.getByText('$300')).toBeInTheDocument(); |
| 127 | + }); |
| 128 | + |
| 129 | + test('should render custom axis value with headerFormatter', () => { |
| 130 | + renderCustomTooltip({ |
| 131 | + headerFormatter: () => `Axis Value: test`, |
| 132 | + }); |
| 133 | + |
| 134 | + expect(screen.getByText('Axis Value: test')).toBeInTheDocument(); |
| 135 | + }); |
| 136 | +}); |
0 commit comments