Skip to content

Commit bebbbb2

Browse files
nickofthymenickofthyme
committed
Fix legend tests
1 parent 37a9d0c commit bebbbb2

2 files changed

Lines changed: 50 additions & 63 deletions

File tree

‎src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx‎

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ jest.mock('../../../legacy_imports', () => ({
3535
getTableAggs: jest.fn(),
3636
}));
3737
jest.mock('../../../../../data/public/actions/filters/create_filters_from_event', () => ({
38-
createFiltersFromEvent: jest.fn().mockReturnValue(['yes']),
38+
createFiltersFromEvent: jest.fn().mockResolvedValue(['yes']),
3939
}));
4040

4141
const vis = {
@@ -95,16 +95,8 @@ const uiState = {
9595
setSilent: jest.fn(),
9696
};
9797

98-
const flushPromises = () => {
99-
return new Promise(resolve => {
100-
setTimeout(() => {
101-
resolve();
102-
}, 1000);
103-
});
104-
};
105-
106-
const getWrapper = (props?: Partial<VisLegendProps>) =>
107-
mount(
98+
const getWrapper = async (props?: Partial<VisLegendProps>) => {
99+
const wrapper = mount(
108100
<I18nProvider>
109101
<VisLegend
110102
position="top"
@@ -117,6 +109,11 @@ const getWrapper = (props?: Partial<VisLegendProps>) =>
117109
</I18nProvider>
118110
);
119111

112+
await (wrapper.find(VisLegend).instance() as VisLegend).refresh();
113+
wrapper.update();
114+
return wrapper;
115+
};
116+
120117
const getLegendItems = (wrapper: ReactWrapper) => wrapper.find('.visLegend__button');
121118

122119
describe('VisLegend Component', () => {
@@ -130,8 +127,7 @@ describe('VisLegend Component', () => {
130127
describe('Legend open', () => {
131128
beforeEach(async () => {
132129
mockState.set('vis.legendOpen', true);
133-
wrapper = getWrapper();
134-
await flushPromises();
130+
wrapper = await getWrapper();
135131
});
136132

137133
it('should match the snapshot', () => {
@@ -142,40 +138,35 @@ describe('VisLegend Component', () => {
142138
describe('Legend closed', () => {
143139
beforeEach(async () => {
144140
mockState.set('vis.legendOpen', false);
145-
wrapper = getWrapper();
146-
await flushPromises();
141+
wrapper = await getWrapper();
147142
});
148143

149-
it('should match the snapshot', async () => {
150-
await flushPromises();
144+
it('should match the snapshot', () => {
151145
expect(wrapper.html()).toMatchSnapshot();
152146
});
153147
});
154148

155149
describe('Highlighting', () => {
156150
beforeEach(async () => {
157-
wrapper = getWrapper();
158-
await flushPromises();
151+
wrapper = await getWrapper();
159152
});
160153

161154
it('should call highlight handler when legend item is focused', async () => {
162-
await flushPromises();
163155
const first = getLegendItems(wrapper).first();
156+
164157
first.simulate('focus');
165158

166159
expect(vislibVis.handler.highlight).toHaveBeenCalledTimes(1);
167160
});
168161

169162
it('should call highlight handler when legend item is hovered', async () => {
170-
await flushPromises();
171163
const first = getLegendItems(wrapper).first();
172164
first.simulate('mouseEnter');
173165

174166
expect(vislibVis.handler.highlight).toHaveBeenCalledTimes(1);
175167
});
176168

177169
it('should call unHighlight handler when legend item is blurred', async () => {
178-
await flushPromises();
179170
let first = getLegendItems(wrapper).first();
180171
first.simulate('focus');
181172
first = getLegendItems(wrapper).first();
@@ -185,7 +176,6 @@ describe('VisLegend Component', () => {
185176
});
186177

187178
it('should call unHighlight handler when legend item is unhovered', async () => {
188-
await flushPromises();
189179
const first = getLegendItems(wrapper).first();
190180

191181
first.simulate('mouseEnter');
@@ -204,8 +194,7 @@ describe('VisLegend Component', () => {
204194
};
205195

206196
expect(async () => {
207-
wrapper = getWrapper({ vis: newVis });
208-
await flushPromises();
197+
wrapper = await getWrapper({ vis: newVis });
209198
const first = getLegendItems(wrapper).first();
210199
first.simulate('focus');
211200
first.simulate('blur');
@@ -215,8 +204,7 @@ describe('VisLegend Component', () => {
215204

216205
describe('Filtering', () => {
217206
beforeEach(async () => {
218-
wrapper = getWrapper();
219-
await flushPromises();
207+
wrapper = await getWrapper();
220208
});
221209

222210
it('should filter out when clicked', () => {
@@ -242,8 +230,7 @@ describe('VisLegend Component', () => {
242230

243231
describe('Toggles details', () => {
244232
beforeEach(async () => {
245-
wrapper = getWrapper();
246-
await flushPromises();
233+
wrapper = await getWrapper();
247234
});
248235

249236
it('should show details when clicked', () => {
@@ -256,8 +243,7 @@ describe('VisLegend Component', () => {
256243

257244
describe('setColor', () => {
258245
beforeEach(async () => {
259-
wrapper = getWrapper();
260-
await flushPromises();
246+
wrapper = await getWrapper();
261247
});
262248

263249
it('sets the color in the UI state', () => {
@@ -277,8 +263,7 @@ describe('VisLegend Component', () => {
277263
describe('toggleLegend function', () => {
278264
it('click should show legend once toggled from hidden', async () => {
279265
mockState.set('vis.legendOpen', false);
280-
wrapper = getWrapper();
281-
await flushPromises();
266+
wrapper = await getWrapper();
282267
const toggleButton = wrapper.find('.visLegend__toggle').first();
283268
toggleButton.simulate('click');
284269

@@ -287,8 +272,7 @@ describe('VisLegend Component', () => {
287272

288273
it('click should hide legend once toggled from shown', async () => {
289274
mockState.set('vis.legendOpen', true);
290-
wrapper = getWrapper();
291-
await flushPromises();
275+
wrapper = await getWrapper();
292276
const toggleButton = wrapper.find('.visLegend__toggle').first();
293277
toggleButton.simulate('click');
294278

‎src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -124,31 +124,39 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
124124
};
125125

126126
// Most of these functions were moved directly from the old Legend class. Not a fan of this.
127-
getLabels = async (data: any, type: string) => {
128-
let labels = [];
129-
if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
130-
const legendLabels = this.props.vislibVis.getLegendLabels();
131-
if (legendLabels) {
132-
labels = map(legendLabels, label => {
133-
return { label };
134-
});
127+
setLabels = (data: any, type: string): Promise<void> =>
128+
new Promise(async resolve => {
129+
let labels = [];
130+
if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) {
131+
const legendLabels = this.props.vislibVis.getLegendLabels();
132+
if (legendLabels) {
133+
labels = map(legendLabels, label => {
134+
return { label };
135+
});
136+
}
137+
} else {
138+
if (!data) return [];
139+
data = data.columns || data.rows || [data];
140+
141+
labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
135142
}
136-
} else {
137-
if (!data) return [];
138-
data = data.columns || data.rows || [data];
139143

140-
labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data);
141-
}
142-
143-
return await Promise.all(
144-
labels.map(async label => ({
145-
...label,
146-
canFilter: await this.canFilter(label),
147-
}))
148-
);
149-
};
144+
const labelsConfig = await Promise.all(
145+
labels.map(async label => ({
146+
...label,
147+
canFilter: await this.canFilter(label),
148+
}))
149+
);
150+
151+
this.setState(
152+
{
153+
labels: labelsConfig,
154+
},
155+
resolve
156+
);
157+
});
150158

151-
refresh = () => {
159+
refresh = async () => {
152160
const vislibVis = this.props.vislibVis;
153161
if (!vislibVis || !vislibVis.visConfig) {
154162
this.setState({
@@ -170,17 +178,12 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
170178
this.setState({ open: this.props.vis.params.addLegend });
171179
}
172180

173-
(async () => {
174-
this.setState({
175-
labels: await this.getLabels(this.props.visData, vislibVis.visConfigArgs.type),
176-
});
177-
})();
178-
179181
if (vislibVis.visConfig) {
180182
this.getColor = this.props.vislibVis.visConfig.data.getColorFunc();
181183
}
182184

183185
this.setState({ tableAggs: getTableAggs(this.props.vis) });
186+
await this.setLabels(this.props.visData, vislibVis.visConfigArgs.type);
184187
};
185188

186189
highlight = (event: BaseSyntheticEvent) => {

0 commit comments

Comments
 (0)