|
| 1 | +import { mount } from 'enzyme' |
| 2 | +// @ts-ignore |
| 3 | +import { Radar, RadarSvgProps } from '../src' |
| 4 | +import { RadarSliceTooltipProps } from '../dist/types' |
| 5 | + |
| 6 | +type TestDatum = { |
| 7 | + A: number |
| 8 | + B: number |
| 9 | + category: string |
| 10 | +} |
| 11 | + |
| 12 | +const baseProps: RadarSvgProps<TestDatum> = { |
| 13 | + width: 500, |
| 14 | + height: 300, |
| 15 | + data: [ |
| 16 | + { A: 10, B: 20, category: 'first' }, |
| 17 | + { A: 20, B: 30, category: 'second' }, |
| 18 | + { A: 30, B: 10, category: 'third' }, |
| 19 | + ], |
| 20 | + keys: ['A', 'B'], |
| 21 | + indexBy: 'category', |
| 22 | + animate: false, |
| 23 | +} |
| 24 | + |
| 25 | +it('should render a basic radar chart', () => { |
| 26 | + const wrapper = mount(<Radar<TestDatum> {...baseProps} />) |
| 27 | + |
| 28 | + const shapes = wrapper.find('RadarShapes') |
| 29 | + expect(shapes).toHaveLength(2) |
| 30 | + |
| 31 | + const shape0 = shapes.at(0) |
| 32 | + expect(shape0.prop('item')).toBe('A') |
| 33 | + const shape0path = shape0.find('path') |
| 34 | + expect(shape0path.prop('fill')).toBe('rgba(232, 193, 160, 1)') |
| 35 | + |
| 36 | + const shape1 = shapes.at(1) |
| 37 | + expect(shape1.prop('item')).toBe('B') |
| 38 | + const shape1path = shape1.find('path') |
| 39 | + expect(shape1path.prop('fill')).toBe('rgba(244, 117, 96, 1)') |
| 40 | +}) |
| 41 | + |
| 42 | +describe('tooltip', () => { |
| 43 | + it('should show a tooltip with index and corresponding values', () => { |
| 44 | + const wrapper = mount(<Radar<TestDatum> {...baseProps} />) |
| 45 | + |
| 46 | + const slices = wrapper.find('RadarSlice') |
| 47 | + expect(slices).toHaveLength(3) |
| 48 | + |
| 49 | + const slice0 = slices.at(0) |
| 50 | + expect(slice0.prop('index')).toBe('first') |
| 51 | + |
| 52 | + slice0.find('path').simulate('mouseenter') |
| 53 | + let tooltip = wrapper.find('RadarSliceTooltip') |
| 54 | + expect(tooltip.text()).toBe(['first', 'B', 20, 'A', 10].join('')) |
| 55 | + |
| 56 | + const slice1 = slices.at(1) |
| 57 | + expect(slice1.prop('index')).toBe('second') |
| 58 | + |
| 59 | + slice1.find('path').simulate('mouseenter') |
| 60 | + tooltip = wrapper.find('RadarSliceTooltip') |
| 61 | + expect(tooltip.text()).toBe(['second', 'B', 30, 'A', 20].join('')) |
| 62 | + |
| 63 | + const slice2 = slices.at(2) |
| 64 | + expect(slice2.prop('index')).toBe('third') |
| 65 | + |
| 66 | + slice2.find('path').simulate('mouseenter') |
| 67 | + tooltip = wrapper.find('RadarSliceTooltip') |
| 68 | + expect(tooltip.text()).toBe(['third', 'A', 30, 'B', 10].join('')) |
| 69 | + }) |
| 70 | + |
| 71 | + it('should support a custom slice tooltip', () => { |
| 72 | + const CustomSliceTooltip = ({ index, data }: RadarSliceTooltipProps) => ( |
| 73 | + <div> |
| 74 | + {index}: {data.map(d => `${d.id} -> ${d.value} (${d.color})`).join(', ')} |
| 75 | + </div> |
| 76 | + ) |
| 77 | + |
| 78 | + const wrapper = mount(<Radar<TestDatum> {...baseProps} sliceTooltip={CustomSliceTooltip} />) |
| 79 | + |
| 80 | + wrapper.find('RadarSlice').at(1).find('path').simulate('mouseenter') |
| 81 | + |
| 82 | + const tooltip = wrapper.find('CustomSliceTooltip') |
| 83 | + expect(tooltip.exists()).toBe(true) |
| 84 | + expect(tooltip.text()).toBe('second: B -> 30 (#f47560), A -> 20 (#e8c1a0)') |
| 85 | + }) |
| 86 | +}) |
| 87 | + |
| 88 | +describe('style', () => { |
| 89 | + it('custom colors array', () => { |
| 90 | + const colors = ['rgba(255, 0, 0, 1)', 'rgba(0, 0, 255, 1)'] |
| 91 | + const wrapper = mount(<Radar {...baseProps} colors={colors} />) |
| 92 | + |
| 93 | + expect(wrapper.find('RadarShapes').at(0).find('path').prop('fill')).toBe(colors[0]) |
| 94 | + expect(wrapper.find('RadarShapes').at(1).find('path').prop('fill')).toBe(colors[1]) |
| 95 | + }) |
| 96 | + |
| 97 | + it('custom colors function', () => { |
| 98 | + const colorMapping = { |
| 99 | + A: 'rgba(255, 0, 0, 1)', |
| 100 | + B: 'rgba(0, 0, 255, 1)', |
| 101 | + } |
| 102 | + const wrapper = mount( |
| 103 | + <Radar<TestDatum> |
| 104 | + {...baseProps} |
| 105 | + colors={d => colorMapping[d.key as keyof typeof colorMapping]} |
| 106 | + /> |
| 107 | + ) |
| 108 | + |
| 109 | + expect(wrapper.find('RadarShapes').at(0).find('path').prop('fill')).toBe(colorMapping.A) |
| 110 | + expect(wrapper.find('RadarShapes').at(1).find('path').prop('fill')).toBe(colorMapping.B) |
| 111 | + }) |
| 112 | +}) |
| 113 | + |
| 114 | +describe('accessibility', () => { |
| 115 | + it('should forward root aria properties to the SVG element', () => { |
| 116 | + const wrapper = mount( |
| 117 | + <Radar<TestDatum> |
| 118 | + {...baseProps} |
| 119 | + ariaLabel="AriaLabel" |
| 120 | + ariaLabelledBy="AriaLabelledBy" |
| 121 | + ariaDescribedBy="AriaDescribedBy" |
| 122 | + /> |
| 123 | + ) |
| 124 | + |
| 125 | + const svg = wrapper.find('svg') |
| 126 | + |
| 127 | + expect(svg.prop('aria-label')).toBe('AriaLabel') |
| 128 | + expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy') |
| 129 | + expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy') |
| 130 | + }) |
| 131 | +}) |
0 commit comments