2019-09-17 20:57:53 +02:00
|
|
|
/*
|
|
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
|
|
* or more contributor license agreements. Licensed under the Elastic License;
|
|
|
|
* you may not use this file except in compliance with the Elastic License.
|
|
|
|
*/
|
|
|
|
|
2019-10-02 19:21:39 +02:00
|
|
|
import React from 'react';
|
2020-07-03 16:15:06 +02:00
|
|
|
import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
|
2020-08-06 18:52:21 +02:00
|
|
|
import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
|
2020-07-03 16:15:06 +02:00
|
|
|
import { LayerContextMenu, XyToolbar } from './xy_config_panel';
|
2020-09-16 10:30:19 +02:00
|
|
|
import { ToolbarPopover } from '../shared_components';
|
|
|
|
import { AxisSettingsPopover } from './axis_settings_popover';
|
2020-03-17 14:57:52 +01:00
|
|
|
import { FramePublicAPI } from '../types';
|
2020-01-14 18:06:51 +01:00
|
|
|
import { State } from './types';
|
2019-09-17 20:57:53 +02:00
|
|
|
import { Position } from '@elastic/charts';
|
2020-02-13 13:54:51 +01:00
|
|
|
import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-07-03 16:15:06 +02:00
|
|
|
describe('XY Config panels', () => {
|
2019-09-17 20:57:53 +02:00
|
|
|
let frame: FramePublicAPI;
|
|
|
|
|
|
|
|
function testState(): State {
|
|
|
|
return {
|
|
|
|
legend: { isVisible: true, position: Position.Right },
|
|
|
|
preferredSeriesType: 'bar',
|
|
|
|
layers: [
|
|
|
|
{
|
|
|
|
seriesType: 'bar',
|
|
|
|
layerId: 'first',
|
|
|
|
splitAccessor: 'baz',
|
|
|
|
xAccessor: 'foo',
|
|
|
|
accessors: ['bar'],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
frame = createMockFramePublicAPI();
|
|
|
|
frame.datasourceLayers = {
|
2020-03-17 14:57:52 +01:00
|
|
|
first: createMockDatasource('test').publicAPIMock,
|
2019-09-17 20:57:53 +02:00
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
describe('LayerContextMenu', () => {
|
|
|
|
test('enables stacked chart types even when there is no split series', () => {
|
|
|
|
const state = testState();
|
|
|
|
const component = mount(
|
|
|
|
<LayerContextMenu
|
|
|
|
layerId={state.layers[0].layerId}
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
const options = component
|
2020-08-06 18:52:21 +02:00
|
|
|
.find(EuiButtonGroup)
|
2020-01-14 18:06:51 +01:00
|
|
|
.first()
|
|
|
|
.prop('options') as EuiButtonGroupProps['options'];
|
2019-10-02 19:21:39 +02:00
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
expect(options!.map(({ id }) => id)).toEqual([
|
|
|
|
'bar',
|
|
|
|
'bar_stacked',
|
2020-09-15 11:24:02 +02:00
|
|
|
'bar_percentage_stacked',
|
2020-01-14 18:06:51 +01:00
|
|
|
'area',
|
|
|
|
'area_stacked',
|
2020-09-15 11:24:02 +02:00
|
|
|
'area_percentage_stacked',
|
|
|
|
'line',
|
2020-01-14 18:06:51 +01:00
|
|
|
]);
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
|
|
|
|
});
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
test('shows only horizontal bar options when in horizontal mode', () => {
|
|
|
|
const state = testState();
|
|
|
|
const component = mount(
|
|
|
|
<LayerContextMenu
|
|
|
|
layerId={state.layers[0].layerId}
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-01-14 18:06:51 +01:00
|
|
|
const options = component
|
2020-08-06 18:52:21 +02:00
|
|
|
.find(EuiButtonGroup)
|
2020-01-14 18:06:51 +01:00
|
|
|
.first()
|
|
|
|
.prop('options') as EuiButtonGroupProps['options'];
|
2019-09-17 20:57:53 +02:00
|
|
|
|
2020-09-15 11:24:02 +02:00
|
|
|
expect(options!.map(({ id }) => id)).toEqual([
|
|
|
|
'bar_horizontal',
|
|
|
|
'bar_horizontal_stacked',
|
|
|
|
'bar_horizontal_percentage_stacked',
|
|
|
|
]);
|
2020-01-14 18:06:51 +01:00
|
|
|
expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
|
|
|
|
});
|
2019-09-17 20:57:53 +02:00
|
|
|
});
|
2020-07-03 16:15:06 +02:00
|
|
|
|
|
|
|
describe('XyToolbar', () => {
|
|
|
|
it('should show currently selected fitting function', () => {
|
|
|
|
const state = testState();
|
|
|
|
|
|
|
|
const component = shallow(
|
|
|
|
<XyToolbar
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{
|
|
|
|
...state,
|
|
|
|
layers: [{ ...state.layers[0], seriesType: 'line' }],
|
|
|
|
fittingFunction: 'Carry',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(component.find(EuiSuperSelect).prop('valueOfSelected')).toEqual('Carry');
|
|
|
|
});
|
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
it('should disable the popover if there is no area or line series', () => {
|
2020-07-03 16:15:06 +02:00
|
|
|
const state = testState();
|
|
|
|
const component = shallow(
|
|
|
|
<XyToolbar
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{
|
|
|
|
...state,
|
2020-08-31 19:01:38 +02:00
|
|
|
layers: [{ ...state.layers[0], seriesType: 'bar' }],
|
2020-07-03 16:15:06 +02:00
|
|
|
fittingFunction: 'Carry',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
expect(component.find(ToolbarPopover).at(0).prop('isDisabled')).toEqual(true);
|
2020-07-03 16:15:06 +02:00
|
|
|
});
|
2020-08-11 19:10:35 +02:00
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
it('should disable the popover if there is no right axis', () => {
|
|
|
|
const state = testState();
|
|
|
|
const component = shallow(<XyToolbar frame={frame} setState={jest.fn()} state={state} />);
|
|
|
|
|
|
|
|
expect(component.find(AxisSettingsPopover).at(2).prop('isDisabled')).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should enable the popover if there is right axis', () => {
|
2020-08-11 19:10:35 +02:00
|
|
|
const state = testState();
|
|
|
|
const component = shallow(
|
|
|
|
<XyToolbar
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{
|
|
|
|
...state,
|
2020-09-16 10:30:19 +02:00
|
|
|
layers: [{ ...state.layers[0], yConfig: [{ axisMode: 'right', forAccessor: 'bar' }] }],
|
2020-08-11 19:10:35 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
expect(component.find(AxisSettingsPopover).at(2).prop('isDisabled')).toEqual(false);
|
2020-08-11 19:10:35 +02:00
|
|
|
});
|
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
it('should render the AxisSettingsPopover 3 times', () => {
|
2020-08-11 19:10:35 +02:00
|
|
|
const state = testState();
|
|
|
|
const component = shallow(
|
|
|
|
<XyToolbar
|
|
|
|
frame={frame}
|
|
|
|
setState={jest.fn()}
|
|
|
|
state={{
|
|
|
|
...state,
|
2020-09-16 10:30:19 +02:00
|
|
|
layers: [{ ...state.layers[0], yConfig: [{ axisMode: 'right', forAccessor: 'foo' }] }],
|
2020-08-11 19:10:35 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2020-09-16 10:30:19 +02:00
|
|
|
expect(component.find(AxisSettingsPopover).length).toEqual(3);
|
2020-08-11 19:10:35 +02:00
|
|
|
});
|
2020-07-03 16:15:06 +02:00
|
|
|
});
|
2019-09-17 20:57:53 +02:00
|
|
|
});
|