Skip to content

Commit

Permalink
[Vis: Default editor] Create vis_options_react_wrapper (#41746) (#41890)
Browse files Browse the repository at this point in the history 
* Add vis_options_react_wrapper

* Update jest tests

* Fix plugin functional test
  • Loading branch information
@sulemanof
sulemanof authored Jul 24, 2019
1 parent bfeaf0a commit 1172d50
Show file tree
Hide file tree
Showing 12 changed files with 252 additions and 273 deletions.
2 changes: 1 addition & 1 deletion ...plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 22 additions & 27 deletions src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
* under the License.
*/

import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ControlEditor } from './control_editor';
Expand All @@ -41,69 +40,65 @@ class ControlsTabUi extends Component {
}

getIndexPattern = async (indexPatternId) => {
return await this.props.scope.vis.API.indexPatterns.get(indexPatternId);
return await this.props.vis.API.indexPatterns.get(indexPatternId);
}

setVisParam(paramName, paramValue) {
const params = _.cloneDeep(this.props.editorState.params);
params[paramName] = paramValue;
this.props.stageEditorParams(params);
}
onChange = value => this.props.setValue('controls', value)

handleLabelChange = (controlIndex, evt) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.label = evt.target.value;
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

handleIndexPatternChange = (controlIndex, indexPatternId) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.indexPattern = indexPatternId;
updatedControl.fieldName = '';
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

handleFieldNameChange = (controlIndex, fieldName) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.fieldName = fieldName;
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

handleCheckboxOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.options[optionName] = evt.target.checked;
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

handleNumberOptionChange = (controlIndex, optionName, evt) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.options[optionName] = parseFloat(evt.target.value);
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

handleRemoveControl = (controlIndex) => {
this.setVisParam('controls', removeControl(this.props.editorState.params.controls, controlIndex));
this.onChange(removeControl(this.props.stateParams.controls, controlIndex));
}

moveControl = (controlIndex, direction) => {
this.setVisParam('controls', moveControl(this.props.editorState.params.controls, controlIndex, direction));
this.onChange(moveControl(this.props.stateParams.controls, controlIndex, direction));
}

handleAddControl = () => {
this.setVisParam('controls', addControl(this.props.editorState.params.controls, newControl(this.state.type)));
this.onChange(addControl(this.props.stateParams.controls, newControl(this.state.type)));
}

handleParentChange = (controlIndex, evt) => {
const updatedControl = this.props.editorState.params.controls[controlIndex];
const updatedControl = this.props.stateParams.controls[controlIndex];
updatedControl.parent = evt.target.value;
this.setVisParam('controls', setControl(this.props.editorState.params.controls, controlIndex, updatedControl));
this.onChange(setControl(this.props.stateParams.controls, controlIndex, updatedControl));
}

renderControls() {
const lineageMap = getLineageMap(this.props.editorState.params.controls);
return this.props.editorState.params.controls.map((controlParams, controlIndex) => {
const lineageMap = getLineageMap(this.props.stateParams.controls);
return this.props.stateParams.controls.map((controlParams, controlIndex) => {
const parentCandidates = getParentCandidates(
this.props.editorState.params.controls,
this.props.stateParams.controls,
controlParams.id,
lineageMap);
return (
Expand Down Expand Up @@ -187,8 +182,8 @@ class ControlsTabUi extends Component {
}

ControlsTabUi.propTypes = {
scope: PropTypes.object.isRequired,
stageEditorParams: PropTypes.func.isRequired
vis: PropTypes.object.isRequired,
setValue: PropTypes.func.isRequired
};

export const ControlsTab = injectI18n(ControlsTabUi);
210 changes: 92 additions & 118 deletions src/legacy/core_plugins/input_control_vis/public/components/editor/controls_tab.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
*/

import React from 'react';
import sinon from 'sinon';
import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
import { findTestSubject } from '@elastic/eui/lib/test';
import { getIndexPatternMock } from './__tests__/get_index_pattern_mock';
Expand All @@ -29,15 +28,17 @@ import {
const indexPatternsMock = {
get: getIndexPatternMock
};
const scopeMock = {
vis: {
API: {
indexPatterns: indexPatternsMock
let props;

beforeEach(() => {
props = {
vis: {
API: {
indexPatterns: indexPatternsMock
},
},
},
editorState: {
params: {
'controls': [
stateParams: {
controls: [
{
'id': '1',
'indexPattern': 'indexPattern1',
Expand All @@ -62,138 +63,111 @@ const scopeMock = {
}
}
]
}
}
};
let stageEditorParams;

beforeEach(() => {
stageEditorParams = sinon.spy();
},
setValue: jest.fn(),
};
});

test('renders ControlsTab', () => {
const component = shallowWithIntl(<ControlsTab.WrappedComponent
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
expect(component).toMatchSnapshot(); // eslint-disable-line
const component = shallowWithIntl(<ControlsTab.WrappedComponent {...props}/>);

expect(component).toMatchSnapshot();
});

describe('behavior', () => {

test('add control button', () => {
const component = mountWithIntl(<ControlsTab.WrappedComponent
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const component = mountWithIntl(<ControlsTab.WrappedComponent {...props}/>);

findTestSubject(component, 'inputControlEditorAddBtn').simulate('click');
// Use custom match function since control.id is dynamically generated and never the same.
sinon.assert.calledWith(stageEditorParams, sinon.match((newParams) => {
if (newParams.controls.length !== 3) {
return false;
}
return true;
}, 'control not added to editorState.params'));

// // Use custom match function since control.id is dynamically generated and never the same.
expect(props.setValue).toHaveBeenCalledWith(
'controls',
expect.arrayContaining(props.stateParams.controls)
);
expect(props.setValue.mock.calls[0][1].length).toEqual(3);
});

test('remove control button', () => {
const component = mountWithIntl(<ControlsTab.WrappedComponent
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const component = mountWithIntl(<ControlsTab.WrappedComponent {...props}/>);
findTestSubject(component, 'inputControlEditorRemoveControl0').simulate('click');
const expectedParams = {
'controls': [
{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
}
]
};
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
const expectedParams = ['controls', [{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
}]];

expect(props.setValue).toHaveBeenCalledWith(...expectedParams);
});


test('move down control button', () => {
const component = mountWithIntl(<ControlsTab.WrappedComponent
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const component = mountWithIntl(<ControlsTab.WrappedComponent {...props}/>);
findTestSubject(component, 'inputControlEditorMoveDownControl0').simulate('click');
const expectedParams = {
'controls': [
{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
},
{
'id': '1',
'indexPattern': 'indexPattern1',
'fieldName': 'keywordField',
'label': 'custom label',
'type': 'list',
'options': {
'type': 'terms',
'multiselect': true,
'size': 5,
'order': 'desc'
}
const expectedParams = ['controls', [
{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
]
};
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
},
{
'id': '1',
'indexPattern': 'indexPattern1',
'fieldName': 'keywordField',
'label': 'custom label',
'type': 'list',
'options': {
'type': 'terms',
'multiselect': true,
'size': 5,
'order': 'desc'
}
}
]];

expect(props.setValue).toHaveBeenCalledWith(...expectedParams);
});

test('move up control button', () => {
const component = mountWithIntl(<ControlsTab.WrappedComponent
scope={scopeMock}
editorState={scopeMock.editorState}
stageEditorParams={stageEditorParams}
/>);
const component = mountWithIntl(<ControlsTab.WrappedComponent {...props}/>);
findTestSubject(component, 'inputControlEditorMoveUpControl1').simulate('click');
const expectedParams = {
'controls': [
{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
},
{
'id': '1',
'indexPattern': 'indexPattern1',
'fieldName': 'keywordField',
'label': 'custom label',
'type': 'list',
'options': {
'type': 'terms',
'multiselect': true,
'size': 5,
'order': 'desc'
}
const expectedParams = ['controls', [
{
'id': '2',
'indexPattern': 'indexPattern1',
'fieldName': 'numberField',
'label': '',
'type': 'range',
'options': {
'step': 1
}
]
};
sinon.assert.calledWith(stageEditorParams, sinon.match(expectedParams));
},
{
'id': '1',
'indexPattern': 'indexPattern1',
'fieldName': 'keywordField',
'label': 'custom label',
'type': 'list',
'options': {
'type': 'terms',
'multiselect': true,
'size': 5,
'order': 'desc'
}
}
]];

expect(props.setValue).toHaveBeenCalledWith(...expectedParams);
});
});
Loading

0 comments on commit 1172d50

Please sign in to comment.