Skip to content

Commit 2d583eb

Browse files
nickofthymenickofthyme
committed
Add tests to replace angular tests
1 parent e779982 commit 2d583eb

9 files changed

Lines changed: 445 additions & 33 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -365,8 +365,8 @@
365365
"dedent": "^0.7.0",
366366
"delete-empty": "^2.0.0",
367367
"enzyme": "^3.10.0",
368-
"enzyme-adapter-react-16": "^1.14.0",
369-
"enzyme-adapter-utils": "^1.12.0",
368+
"enzyme-adapter-react-16": "^1.15.1",
369+
"enzyme-adapter-utils": "^1.12.1",
370370
"enzyme-to-json": "^3.3.4",
371371
"eslint": "^6.5.1",
372372
"eslint-config-prettier": "^6.4.0",

‎src/legacy/ui/public/vis/vis_types/__tests__/vislib_vis_legend.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logsta
2727
describe('visualize_legend directive', function () {
2828
let $rootScope;
2929
let $compile;
30-
let $timeout;
3130
let $el;
3231
let Vis;
3332
let indexPattern;
@@ -37,7 +36,6 @@ describe('visualize_legend directive', function () {
3736
beforeEach(ngMock.inject(function (Private, $injector) {
3837
$rootScope = $injector.get('$rootScope');
3938
$compile = $injector.get('$compile');
40-
$timeout = $injector.get('$timeout');
4139
fixtures = require('fixtures/fake_hierarchical_data');
4240
Vis = Private(VisProvider);
4341
indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
@@ -128,15 +126,11 @@ describe('visualize_legend directive', function () {
128126
$rootScope.open = true;
129127
$rootScope.toggleLegend();
130128
$rootScope.$digest();
131-
$timeout.flush();
132-
$timeout.verifyNoPendingTasks();
133129
let legendOpen = $rootScope.uiState.get('vis.legendOpen');
134130
expect(legendOpen).to.equal(false);
135131

136132
$rootScope.toggleLegend();
137133
$rootScope.$digest();
138-
$timeout.flush();
139-
$timeout.verifyNoPendingTasks();
140134
legendOpen = $rootScope.uiState.get('vis.legendOpen');
141135
expect(legendOpen).to.equal(true);
142136
});

‎src/legacy/ui/public/vis/vis_types/_vislib_vis_legend.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,6 @@ $visLegendLineHeight: $euiSize;
8080
}
8181

8282
.visLegend__value {
83-
cursor: pointer;
84-
padding: $euiSizeXS;
8583
display: flex;
8684
flex-shrink: 0;
8785
position: relative; /* 1 */
@@ -93,6 +91,11 @@ $visLegendLineHeight: $euiSize;
9391
&.disabled {
9492
opacity: 0.5;
9593
}
94+
95+
&--item {
96+
cursor: pointer;
97+
padding: $euiSizeXS;
98+
}
9699
}
97100

98101
.visLegend__valueTitle {

‎src/legacy/ui/public/vis/vis_types/vislib_vis_legend/__snapshots__/vislib_vis_legend.test.tsx.snap‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/legacy/ui/public/vis/vis_types/vislib_vis_legend/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { wrapInI18nContext } from 'ui/i18n';
2222
// @ts-ignore
2323
import { uiModules } from '../../../modules';
2424
import { VisLegend } from './vislib_vis_legend';
25+
2526
export { CUSTOM_LEGEND_VIS_TYPES } from './models';
2627

2728
uiModules.get('kibana').directive('vislibLegend', function(reactDirective: any) {

‎src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.test.tsx‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React from 'react';
21+
import { mount, ReactWrapper } from 'enzyme';
22+
23+
import { VisLegend, VisLegendComponentProps } from '../vislib_vis_legend/vislib_vis_legend';
24+
import { legendColors } from './models';
25+
import { act } from 'react-hooks-testing-library';
26+
27+
jest.mock('@elastic/eui', () => ({
28+
...jest.requireActual('@elastic/eui'),
29+
htmlIdGenerator: jest.fn().mockReturnValue(() => 'legendId'),
30+
}));
31+
32+
jest.mock('../../../visualize/loader/pipeline_helpers/utilities', () => ({
33+
getTableAggs: jest.fn(),
34+
}));
35+
jest.mock('../../vis_filters', () => ({
36+
createFiltersFromEvent: jest.fn().mockReturnValue(['yes']),
37+
}));
38+
39+
const vis = {
40+
params: {
41+
addLegend: true,
42+
},
43+
API: {
44+
events: {
45+
filter: jest.fn(),
46+
},
47+
},
48+
vislibVis: {
49+
handler: {
50+
highlight: jest.fn(),
51+
unHighlight: jest.fn(),
52+
},
53+
getLegendLabels: jest.fn(),
54+
visConfigArgs: {
55+
type: 'area',
56+
},
57+
visConfig: {
58+
data: {
59+
getColorFunc: jest.fn().mockReturnValue(() => 'red'),
60+
},
61+
},
62+
},
63+
};
64+
65+
const visData = {
66+
series: [
67+
{
68+
label: 'A',
69+
values: [
70+
{
71+
seriesRaw: 'valuesA',
72+
},
73+
],
74+
},
75+
{
76+
label: 'B',
77+
values: [
78+
{
79+
seriesRaw: 'valuesB',
80+
},
81+
],
82+
},
83+
],
84+
};
85+
86+
const mockState = new Map();
87+
const uiState = {
88+
get: jest
89+
.fn()
90+
.mockImplementation((key, fallback) => (mockState.has(key) ? mockState.get(key) : fallback)),
91+
set: jest.fn().mockImplementation((key, value) => mockState.set(key, value)),
92+
emit: jest.fn(),
93+
setSilent: jest.fn(),
94+
};
95+
96+
const getWrapper = (props?: Partial<VisLegendComponentProps>) =>
97+
mount(<VisLegend vis={vis} visData={visData} uiState={uiState} refreshLegend={0} {...props} />);
98+
99+
const getLegendItems = (wrapper: ReactWrapper) => wrapper.find('.visLegend__value--item');
100+
101+
describe('VisLegend Component', () => {
102+
let wrapper: ReactWrapper;
103+
104+
afterEach(() => {
105+
mockState.clear();
106+
jest.clearAllMocks();
107+
});
108+
109+
describe('Legend open', () => {
110+
beforeEach(() => {
111+
mockState.set('vis.legendOpen', true);
112+
wrapper = getWrapper();
113+
});
114+
115+
it('should match the snapshot', () => {
116+
expect(wrapper.html()).toMatchSnapshot();
117+
});
118+
});
119+
120+
describe('Legend closed', () => {
121+
beforeEach(() => {
122+
mockState.set('vis.legendOpen', false);
123+
wrapper = getWrapper();
124+
});
125+
126+
it('should match the snapshot', () => {
127+
expect(wrapper.html()).toMatchSnapshot();
128+
});
129+
});
130+
131+
describe('Highlighting', () => {
132+
beforeEach(() => {
133+
wrapper = getWrapper();
134+
});
135+
136+
it('should call highlight handler when legend item is focused', () => {
137+
const first = getLegendItems(wrapper).first();
138+
first.simulate('focus');
139+
140+
expect(vis.vislibVis.handler.highlight).toHaveBeenCalledTimes(1);
141+
});
142+
143+
it('should call highlight handler when legend item is hovered', () => {
144+
const first = getLegendItems(wrapper).first();
145+
first.simulate('mouseEnter');
146+
147+
expect(vis.vislibVis.handler.highlight).toHaveBeenCalledTimes(1);
148+
});
149+
150+
it('should call unHighlight handler when legend item is blurred', () => {
151+
let first = getLegendItems(wrapper).first();
152+
first.simulate('focus');
153+
first = getLegendItems(wrapper).first();
154+
first.simulate('blur');
155+
156+
expect(vis.vislibVis.handler.unHighlight).toHaveBeenCalledTimes(1);
157+
});
158+
159+
it('should call unHighlight handler when legend item is unhovered', () => {
160+
const first = getLegendItems(wrapper).first();
161+
162+
act(() => {
163+
first.simulate('mouseEnter');
164+
first.simulate('mouseLeave');
165+
});
166+
167+
expect(vis.vislibVis.handler.unHighlight).toHaveBeenCalledTimes(1);
168+
});
169+
170+
it('should work with no handlers set', () => {
171+
const newVis = {
172+
...vis,
173+
vislibVis: {
174+
...vis.vislibVis,
175+
handler: null,
176+
},
177+
};
178+
179+
expect(() => {
180+
wrapper = getWrapper({ vis: newVis });
181+
const first = getLegendItems(wrapper).first();
182+
first.simulate('focus');
183+
first.simulate('blur');
184+
}).not.toThrow();
185+
});
186+
});
187+
188+
describe('Filtering', () => {
189+
beforeEach(() => {
190+
wrapper = getWrapper();
191+
});
192+
193+
it('should filter out when clicked', () => {
194+
const first = getLegendItems(wrapper).first();
195+
first.simulate('click');
196+
const filterOut = wrapper.find('.visLegend__filterIn').first();
197+
filterOut.simulate('click');
198+
199+
expect(vis.API.events.filter).toHaveBeenCalledWith({ data: ['valuesA'], negate: false });
200+
expect(vis.API.events.filter).toHaveBeenCalledTimes(1);
201+
});
202+
203+
it('should filter in when clicked', () => {
204+
const first = getLegendItems(wrapper).first();
205+
first.simulate('click');
206+
const filterOut = wrapper.find('.visLegend__filterOut').first();
207+
filterOut.simulate('click');
208+
209+
expect(vis.API.events.filter).toHaveBeenCalledWith({ data: ['valuesA'], negate: true });
210+
expect(vis.API.events.filter).toHaveBeenCalledTimes(1);
211+
});
212+
});
213+
214+
describe('Toggles details', () => {
215+
beforeEach(() => {
216+
wrapper = getWrapper();
217+
});
218+
219+
it('should show details when clicked', () => {
220+
let first = getLegendItems(wrapper).first();
221+
first.simulate('click');
222+
first = getLegendItems(wrapper).first();
223+
224+
expect(first.exists('.visLegend__valueDetails')).toBe(true);
225+
});
226+
227+
it('should hide details when escape is pressed', () => {
228+
let first = getLegendItems(wrapper).first();
229+
first.simulate('click');
230+
first = getLegendItems(wrapper).first();
231+
232+
expect(first.exists('.visLegend__valueDetails')).toBe(true);
233+
234+
first.simulate('keyDown', { keyCode: 27 });
235+
first = getLegendItems(wrapper).first();
236+
237+
expect(first.exists('.visLegend__valueDetails')).toBe(false);
238+
});
239+
240+
it('clicking different item should hide details', () => {
241+
let first = getLegendItems(wrapper).first();
242+
let last = getLegendItems(wrapper).last();
243+
first.simulate('click');
244+
245+
first = getLegendItems(wrapper).first();
246+
247+
expect(first.exists('.visLegend__valueDetails')).toBe(true);
248+
249+
last.simulate('click');
250+
251+
first = getLegendItems(wrapper).first();
252+
last = getLegendItems(wrapper).last();
253+
254+
expect(first.exists('.visLegend__valueDetails')).toBe(false);
255+
expect(last.exists('.visLegend__valueDetails')).toBe(true);
256+
});
257+
});
258+
259+
describe('setColor', () => {
260+
beforeEach(() => {
261+
wrapper = getWrapper();
262+
});
263+
264+
it('sets the color in the UI state', () => {
265+
let first = getLegendItems(wrapper).first();
266+
first.simulate('click');
267+
268+
first = getLegendItems(wrapper).first();
269+
const firstColor = first.find('.visLegend__valueColorPickerDot').first();
270+
firstColor.simulate('click');
271+
272+
const colors = mockState.get('vis.colors');
273+
274+
expect(colors.A).toBe(legendColors[0]);
275+
});
276+
});
277+
278+
describe('toggleLegend function', () => {
279+
it('click should show legend once toggled from hidden', () => {
280+
mockState.set('vis.legendOpen', false);
281+
wrapper = getWrapper();
282+
const toggleButton = wrapper.find('.visLegend__toggle').first();
283+
toggleButton.simulate('click');
284+
285+
expect(wrapper.exists('.visLegend__list')).toBe(true);
286+
});
287+
288+
it('click should hide legend once toggled from shown', () => {
289+
mockState.set('vis.legendOpen', true);
290+
wrapper = getWrapper();
291+
const toggleButton = wrapper.find('.visLegend__toggle').first();
292+
toggleButton.simulate('click');
293+
294+
expect(wrapper.exists('.visLegend__list')).toBe(false);
295+
});
296+
});
297+
});

0 commit comments

Comments
 (0)