From bebbbb2ac363e4222c2e8f17c2503b7ddee916ae Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 28 Jan 2020 14:18:53 -0600 Subject: [PATCH] Fix legend tests --- .../vislib/components/legend/legend.test.tsx | 54 ++++++----------- .../vislib/components/legend/legend.tsx | 59 ++++++++++--------- 2 files changed, 50 insertions(+), 63 deletions(-) diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx index 159867735fa92..e66dff01b6bf2 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx @@ -35,7 +35,7 @@ jest.mock('../../../legacy_imports', () => ({ getTableAggs: jest.fn(), })); jest.mock('../../../../../data/public/actions/filters/create_filters_from_event', () => ({ - createFiltersFromEvent: jest.fn().mockReturnValue(['yes']), + createFiltersFromEvent: jest.fn().mockResolvedValue(['yes']), })); const vis = { @@ -95,16 +95,8 @@ const uiState = { setSilent: jest.fn(), }; -const flushPromises = () => { - return new Promise(resolve => { - setTimeout(() => { - resolve(); - }, 1000); - }); -}; - -const getWrapper = (props?: Partial) => - mount( +const getWrapper = async (props?: Partial) => { + const wrapper = mount( ) => ); + await (wrapper.find(VisLegend).instance() as VisLegend).refresh(); + wrapper.update(); + return wrapper; +}; + const getLegendItems = (wrapper: ReactWrapper) => wrapper.find('.visLegend__button'); describe('VisLegend Component', () => { @@ -130,8 +127,7 @@ describe('VisLegend Component', () => { describe('Legend open', () => { beforeEach(async () => { mockState.set('vis.legendOpen', true); - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); it('should match the snapshot', () => { @@ -142,32 +138,28 @@ describe('VisLegend Component', () => { describe('Legend closed', () => { beforeEach(async () => { mockState.set('vis.legendOpen', false); - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); - it('should match the snapshot', async () => { - await flushPromises(); + it('should match the snapshot', () => { expect(wrapper.html()).toMatchSnapshot(); }); }); describe('Highlighting', () => { beforeEach(async () => { - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); it('should call highlight handler when legend item is focused', async () => { - await flushPromises(); const first = getLegendItems(wrapper).first(); + first.simulate('focus'); expect(vislibVis.handler.highlight).toHaveBeenCalledTimes(1); }); it('should call highlight handler when legend item is hovered', async () => { - await flushPromises(); const first = getLegendItems(wrapper).first(); first.simulate('mouseEnter'); @@ -175,7 +167,6 @@ describe('VisLegend Component', () => { }); it('should call unHighlight handler when legend item is blurred', async () => { - await flushPromises(); let first = getLegendItems(wrapper).first(); first.simulate('focus'); first = getLegendItems(wrapper).first(); @@ -185,7 +176,6 @@ describe('VisLegend Component', () => { }); it('should call unHighlight handler when legend item is unhovered', async () => { - await flushPromises(); const first = getLegendItems(wrapper).first(); first.simulate('mouseEnter'); @@ -204,8 +194,7 @@ describe('VisLegend Component', () => { }; expect(async () => { - wrapper = getWrapper({ vis: newVis }); - await flushPromises(); + wrapper = await getWrapper({ vis: newVis }); const first = getLegendItems(wrapper).first(); first.simulate('focus'); first.simulate('blur'); @@ -215,8 +204,7 @@ describe('VisLegend Component', () => { describe('Filtering', () => { beforeEach(async () => { - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); it('should filter out when clicked', () => { @@ -242,8 +230,7 @@ describe('VisLegend Component', () => { describe('Toggles details', () => { beforeEach(async () => { - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); it('should show details when clicked', () => { @@ -256,8 +243,7 @@ describe('VisLegend Component', () => { describe('setColor', () => { beforeEach(async () => { - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); }); it('sets the color in the UI state', () => { @@ -277,8 +263,7 @@ describe('VisLegend Component', () => { describe('toggleLegend function', () => { it('click should show legend once toggled from hidden', async () => { mockState.set('vis.legendOpen', false); - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); const toggleButton = wrapper.find('.visLegend__toggle').first(); toggleButton.simulate('click'); @@ -287,8 +272,7 @@ describe('VisLegend Component', () => { it('click should hide legend once toggled from shown', async () => { mockState.set('vis.legendOpen', true); - wrapper = getWrapper(); - await flushPromises(); + wrapper = await getWrapper(); const toggleButton = wrapper.find('.visLegend__toggle').first(); toggleButton.simulate('click'); diff --git a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx index 2bb5dd4a236c1..a170af33583df 100644 --- a/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx +++ b/src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx @@ -124,31 +124,39 @@ export class VisLegend extends PureComponent { }; // Most of these functions were moved directly from the old Legend class. Not a fan of this. - getLabels = async (data: any, type: string) => { - let labels = []; - if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) { - const legendLabels = this.props.vislibVis.getLegendLabels(); - if (legendLabels) { - labels = map(legendLabels, label => { - return { label }; - }); + setLabels = (data: any, type: string): Promise => + new Promise(async resolve => { + let labels = []; + if (CUSTOM_LEGEND_VIS_TYPES.includes(type)) { + const legendLabels = this.props.vislibVis.getLegendLabels(); + if (legendLabels) { + labels = map(legendLabels, label => { + return { label }; + }); + } + } else { + if (!data) return []; + data = data.columns || data.rows || [data]; + + labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data); } - } else { - if (!data) return []; - data = data.columns || data.rows || [data]; - labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data); - } - - return await Promise.all( - labels.map(async label => ({ - ...label, - canFilter: await this.canFilter(label), - })) - ); - }; + const labelsConfig = await Promise.all( + labels.map(async label => ({ + ...label, + canFilter: await this.canFilter(label), + })) + ); + + this.setState( + { + labels: labelsConfig, + }, + resolve + ); + }); - refresh = () => { + refresh = async () => { const vislibVis = this.props.vislibVis; if (!vislibVis || !vislibVis.visConfig) { this.setState({ @@ -170,17 +178,12 @@ export class VisLegend extends PureComponent { this.setState({ open: this.props.vis.params.addLegend }); } - (async () => { - this.setState({ - labels: await this.getLabels(this.props.visData, vislibVis.visConfigArgs.type), - }); - })(); - if (vislibVis.visConfig) { this.getColor = this.props.vislibVis.visConfig.data.getColorFunc(); } this.setState({ tableAggs: getTableAggs(this.props.vis) }); + await this.setLabels(this.props.visData, vislibVis.visConfigArgs.type); }; highlight = (event: BaseSyntheticEvent) => {