Skip to content

Commit

Permalink
Fix legend tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickofthyme
nickofthyme committed Jan 28, 2020
1 parent 37a9d0c commit bebbbb2
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 63 deletions.
54 changes: 19 additions & 35 deletions src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -95,16 +95,8 @@ const uiState = {
setSilent: jest.fn(),
};

const flushPromises = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, 1000);
});
};

const getWrapper = (props?: Partial<VisLegendProps>) =>
mount(
const getWrapper = async (props?: Partial<VisLegendProps>) => {
const wrapper = mount(
<I18nProvider>
<VisLegend
position="top"
Expand All @@ -117,6 +109,11 @@ const getWrapper = (props?: Partial<VisLegendProps>) =>
</I18nProvider>
);

await (wrapper.find(VisLegend).instance() as VisLegend).refresh();
wrapper.update();
return wrapper;
};

const getLegendItems = (wrapper: ReactWrapper) => wrapper.find('.visLegend__button');

describe('VisLegend Component', () => {
Expand All @@ -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', () => {
Expand All @@ -142,40 +138,35 @@ 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');

expect(vislibVis.handler.highlight).toHaveBeenCalledTimes(1);
});

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();
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -215,8 +204,7 @@ describe('VisLegend Component', () => {

describe('Filtering', () => {
beforeEach(async () => {
wrapper = getWrapper();
await flushPromises();
wrapper = await getWrapper();
});

it('should filter out when clicked', () => {
Expand All @@ -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', () => {
Expand All @@ -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', () => {
Expand All @@ -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');

Expand All @@ -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');

Expand Down
59 changes: 31 additions & 28 deletions src/legacy/core_plugins/vis_type_vislib/public/vislib/components/legend/legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,31 +124,39 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
};

// 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<void> =>
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({
Expand All @@ -170,17 +178,12 @@ export class VisLegend extends PureComponent<VisLegendProps, VisLegendState> {
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) => {
Expand Down

0 comments on commit bebbbb2

Please sign in to comment.