From 37a9d0cdbf9c7cd63d036b7e7c7046ed83c2b185 Mon Sep 17 00:00:00 2001 From: ppisljar Date: Tue, 28 Jan 2020 12:57:30 -0500 Subject: [PATCH] trying to fix tests --- .../vislib/components/legend/legend.test.tsx | 50 +++++++++++++------ .../vislib/components/legend/legend.tsx | 48 ++++++++++-------- 2 files changed, 64 insertions(+), 34 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 96f3c2e850a8e..159867735fa92 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 @@ -95,6 +95,14 @@ const uiState = { setSilent: jest.fn(), }; +const flushPromises = () => { + return new Promise(resolve => { + setTimeout(() => { + resolve(); + }, 1000); + }); +}; + const getWrapper = (props?: Partial) => mount( @@ -120,9 +128,10 @@ describe('VisLegend Component', () => { }); describe('Legend open', () => { - beforeEach(() => { + beforeEach(async () => { mockState.set('vis.legendOpen', true); wrapper = getWrapper(); + await flushPromises(); }); it('should match the snapshot', () => { @@ -131,36 +140,42 @@ describe('VisLegend Component', () => { }); describe('Legend closed', () => { - beforeEach(() => { + beforeEach(async () => { mockState.set('vis.legendOpen', false); wrapper = getWrapper(); + await flushPromises(); }); - it('should match the snapshot', () => { + it('should match the snapshot', async () => { + await flushPromises(); expect(wrapper.html()).toMatchSnapshot(); }); }); describe('Highlighting', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = getWrapper(); + await flushPromises(); }); - it('should call highlight handler when legend item is focused', () => { + 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', () => { + it('should call highlight handler when legend item is hovered', async () => { + await flushPromises(); const first = getLegendItems(wrapper).first(); first.simulate('mouseEnter'); expect(vislibVis.handler.highlight).toHaveBeenCalledTimes(1); }); - it('should call unHighlight handler when legend item is blurred', () => { + 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(); @@ -169,7 +184,8 @@ describe('VisLegend Component', () => { expect(vislibVis.handler.unHighlight).toHaveBeenCalledTimes(1); }); - it('should call unHighlight handler when legend item is unhovered', () => { + it('should call unHighlight handler when legend item is unhovered', async () => { + await flushPromises(); const first = getLegendItems(wrapper).first(); first.simulate('mouseEnter'); @@ -187,8 +203,9 @@ describe('VisLegend Component', () => { }, }; - expect(() => { + expect(async () => { wrapper = getWrapper({ vis: newVis }); + await flushPromises(); const first = getLegendItems(wrapper).first(); first.simulate('focus'); first.simulate('blur'); @@ -197,8 +214,9 @@ describe('VisLegend Component', () => { }); describe('Filtering', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = getWrapper(); + await flushPromises(); }); it('should filter out when clicked', () => { @@ -223,8 +241,9 @@ describe('VisLegend Component', () => { }); describe('Toggles details', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = getWrapper(); + await flushPromises(); }); it('should show details when clicked', () => { @@ -236,8 +255,9 @@ describe('VisLegend Component', () => { }); describe('setColor', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = getWrapper(); + await flushPromises(); }); it('sets the color in the UI state', () => { @@ -255,18 +275,20 @@ describe('VisLegend Component', () => { }); describe('toggleLegend function', () => { - it('click should show legend once toggled from hidden', () => { + it('click should show legend once toggled from hidden', async () => { mockState.set('vis.legendOpen', false); wrapper = getWrapper(); + await flushPromises(); const toggleButton = wrapper.find('.visLegend__toggle').first(); toggleButton.simulate('click'); expect(wrapper.exists('.visLegend__list')).toBe(true); }); - it('click should hide legend once toggled from shown', () => { + it('click should hide legend once toggled from shown', async () => { mockState.set('vis.legendOpen', true); wrapper = getWrapper(); + await flushPromises(); 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 bfd37399f95d6..2bb5dd4a236c1 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 @@ -95,11 +95,11 @@ export class VisLegend extends PureComponent { this.props.vis.API.events.filter({ data, negate }); }; - canFilter = (item: LegendItem): boolean => { + canFilter = async (item: LegendItem): Promise => { if (CUSTOM_LEGEND_VIS_TYPES.includes(this.props.vislibVis.visConfigArgs.type)) { return false; } - const filters = createFiltersFromEvent({ data: item.values }); + const filters = await createFiltersFromEvent({ data: item.values }); return Boolean(filters.length); }; @@ -124,13 +124,28 @@ export class VisLegend extends PureComponent { }; // Most of these functions were moved directly from the old Legend class. Not a fan of this. - getLabels = (data: any, type: string) => { - if (!data) return []; - data = data.columns || data.rows || [data]; + 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 }; + }); + } + } else { + if (!data) return []; + data = data.columns || data.rows || [data]; - if (type === 'pie') return getPieNames(data); + labels = type === 'pie' ? getPieNames(data) : this.getSeriesLabels(data); + } - return this.getSeriesLabels(data); + return await Promise.all( + labels.map(async label => ({ + ...label, + canFilter: await this.canFilter(label), + })) + ); }; refresh = () => { @@ -155,18 +170,11 @@ export class VisLegend extends PureComponent { this.setState({ open: this.props.vis.params.addLegend }); } - if (CUSTOM_LEGEND_VIS_TYPES.includes(vislibVis.visConfigArgs.type)) { - const legendLabels = this.props.vislibVis.getLegendLabels(); - if (legendLabels) { - this.setState({ - labels: map(legendLabels, label => { - return { label }; - }), - }); - } - } else { - this.setState({ labels: this.getLabels(this.props.visData, vislibVis.visConfigArgs.type) }); - } + (async () => { + this.setState({ + labels: await this.getLabels(this.props.visData, vislibVis.visConfigArgs.type), + }); + })(); if (vislibVis.visConfig) { this.getColor = this.props.vislibVis.visConfig.data.getColorFunc(); @@ -220,7 +228,7 @@ export class VisLegend extends PureComponent { key={item.label} anchorPosition={anchorPosition} selected={this.state.selectedLabel === item.label} - canFilter={this.canFilter(item)} + canFilter={item.canFilter} onFilter={this.filter} onSelect={this.toggleDetails} legendId={this.legendId}