|
6 | 6 | */ |
7 | 7 |
|
8 | 8 | import React from 'react'; |
9 | | -import { VerticalAlignment, HorizontalAlignment } from '@elastic/charts'; |
| 9 | +import { Position } from '@elastic/charts'; |
10 | 10 | import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test/jest'; |
11 | 11 | import { LegendLocationSettings, LegendLocationSettingsProps } from './legend_location_settings'; |
12 | 12 |
|
13 | 13 | describe('Legend Location Settings', () => { |
14 | 14 | let props: LegendLocationSettingsProps; |
15 | 15 | beforeEach(() => { |
16 | 16 | props = { |
17 | | - location: 'inside', |
18 | 17 | onLocationChange: jest.fn(), |
| 18 | + onPositionChange: jest.fn(), |
19 | 19 | }; |
20 | 20 | }); |
21 | 21 |
|
22 | | - it('should have selected the given location', () => { |
| 22 | + it('should have default the Position to right when no position is given', () => { |
| 23 | + const component = shallow(<LegendLocationSettings {...props} />); |
| 24 | + expect( |
| 25 | + component.find('[data-test-subj="lens-legend-position-btn"]').prop('idSelected') |
| 26 | + ).toEqual(Position.Right); |
| 27 | + }); |
| 28 | + |
| 29 | + it('should have called the onPositionChange function on ButtonGroup change', () => { |
23 | 30 | const component = shallow(<LegendLocationSettings {...props} />); |
| 31 | + component.find('[data-test-subj="lens-legend-position-btn"]').simulate('change'); |
| 32 | + expect(props.onPositionChange).toHaveBeenCalled(); |
| 33 | + }); |
| 34 | + |
| 35 | + it('should disable the position group if isDisabled prop is true', () => { |
| 36 | + const component = shallow(<LegendLocationSettings {...props} isDisabled />); |
| 37 | + expect( |
| 38 | + component.find('[data-test-subj="lens-legend-position-btn"]').prop('isDisabled') |
| 39 | + ).toEqual(true); |
| 40 | + }); |
| 41 | + |
| 42 | + it('should hide the position button group if location inside is given', () => { |
| 43 | + const newProps = { |
| 44 | + ...props, |
| 45 | + location: 'inside', |
| 46 | + } as LegendLocationSettingsProps; |
| 47 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
| 48 | + expect(component.find('[data-test-subj="lens-legend-position-btn"]').length).toEqual(0); |
| 49 | + }); |
| 50 | + |
| 51 | + it('should render the location settings if location inside is given', () => { |
| 52 | + const newProps = { |
| 53 | + ...props, |
| 54 | + location: 'inside', |
| 55 | + } as LegendLocationSettingsProps; |
| 56 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
| 57 | + expect(component.find('[data-test-subj="lens-legend-location-btn"]').length).toEqual(1); |
| 58 | + }); |
| 59 | + |
| 60 | + it('should have selected the given location', () => { |
| 61 | + const newProps = { |
| 62 | + ...props, |
| 63 | + location: 'inside', |
| 64 | + } as LegendLocationSettingsProps; |
| 65 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
24 | 66 | expect( |
25 | 67 | component.find('[data-test-subj="lens-legend-location-btn"]').prop('idSelected') |
26 | 68 | ).toEqual('xy_location_inside'); |
27 | 69 | }); |
28 | 70 |
|
29 | 71 | it('should have called the onLocationChange function on ButtonGroup change', () => { |
30 | | - const component = shallow(<LegendLocationSettings {...props} />); |
| 72 | + const newProps = { |
| 73 | + ...props, |
| 74 | + location: 'inside', |
| 75 | + } as LegendLocationSettingsProps; |
| 76 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
31 | 77 | component |
32 | 78 | .find('[data-test-subj="lens-legend-location-btn"]') |
33 | 79 | .simulate('change', 'xy_location_outside'); |
34 | 80 | expect(props.onLocationChange).toHaveBeenCalled(); |
35 | 81 | }); |
36 | 82 |
|
37 | | - it('should have default the Vertical alignment to top when no value is given', () => { |
38 | | - const component = shallow(<LegendLocationSettings {...props} />); |
39 | | - expect( |
40 | | - component.find('[data-test-subj="lens-legend-inside-valign-btn"]').prop('idSelected') |
41 | | - ).toEqual(VerticalAlignment.Top); |
42 | | - }); |
43 | | - |
44 | | - it('should have default the Horizontal alignment to right when no value is given', () => { |
45 | | - const component = shallow(<LegendLocationSettings {...props} />); |
| 83 | + it('should default the alignment to top right when no value is given', () => { |
| 84 | + const newProps = { |
| 85 | + ...props, |
| 86 | + location: 'inside', |
| 87 | + } as LegendLocationSettingsProps; |
| 88 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
46 | 89 | expect( |
47 | | - component.find('[data-test-subj="lens-legend-inside-halign-btn"]').prop('idSelected') |
48 | | - ).toEqual(HorizontalAlignment.Right); |
| 90 | + component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('idSelected') |
| 91 | + ).toEqual('xy_location_alignment_top_right'); |
49 | 92 | }); |
50 | 93 |
|
51 | 94 | it('should have called the onAlignmentChange function on ButtonGroup change', () => { |
52 | | - const newProps = { ...props, onAlignmentChange: jest.fn() }; |
| 95 | + const newProps = { |
| 96 | + ...props, |
| 97 | + onAlignmentChange: jest.fn(), |
| 98 | + location: 'inside', |
| 99 | + } as LegendLocationSettingsProps; |
53 | 100 | const component = shallow(<LegendLocationSettings {...newProps} />); |
54 | | - component.find('[data-test-subj="lens-legend-inside-halign-btn"]').simulate('change'); |
| 101 | + component |
| 102 | + .find('[data-test-subj="lens-legend-inside-alignment-btn"]') |
| 103 | + .simulate('change', 'xy_location_alignment_top_left'); |
55 | 104 | expect(newProps.onAlignmentChange).toHaveBeenCalled(); |
56 | 105 | }); |
57 | 106 |
|
58 | | - it('should have default the columns slider to 1 when no value is given', () => { |
59 | | - const component = mount(<LegendLocationSettings {...props} />); |
| 107 | + it('should have default the columns input to 1 when no value is given', () => { |
| 108 | + const newProps = { |
| 109 | + ...props, |
| 110 | + location: 'inside', |
| 111 | + } as LegendLocationSettingsProps; |
| 112 | + const component = mount(<LegendLocationSettings {...newProps} />); |
60 | 113 | expect( |
61 | | - component.find('[data-test-subj="lens-legend-location-columns-slider"]').at(0).prop('value') |
| 114 | + component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value') |
62 | 115 | ).toEqual(1); |
63 | 116 | }); |
64 | 117 |
|
65 | 118 | it('should disable the components when is Disabled is true', () => { |
66 | | - const component = shallow(<LegendLocationSettings {...props} isDisabled={true} />); |
| 119 | + const newProps = { |
| 120 | + ...props, |
| 121 | + location: 'inside', |
| 122 | + isDisabled: true, |
| 123 | + } as LegendLocationSettingsProps; |
| 124 | + const component = shallow(<LegendLocationSettings {...newProps} />); |
67 | 125 | expect( |
68 | 126 | component.find('[data-test-subj="lens-legend-location-btn"]').prop('isDisabled') |
69 | 127 | ).toEqual(true); |
70 | 128 | expect( |
71 | | - component.find('[data-test-subj="lens-legend-inside-valign-btn"]').prop('isDisabled') |
72 | | - ).toEqual(true); |
73 | | - expect( |
74 | | - component.find('[data-test-subj="lens-legend-inside-halign-btn"]').prop('isDisabled') |
| 129 | + component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('isDisabled') |
75 | 130 | ).toEqual(true); |
76 | 131 | }); |
77 | 132 | }); |
0 commit comments