mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
chore: Select component refactoring - TimeSeriesColumnControl - Iteration 5 (#16442)
* Refactor Select * Update superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Fix tests * Mock debounce * Add debounce Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
parent
271ec6ec75
commit
667b88c800
@ -21,7 +21,11 @@ import { render, screen } from 'spec/helpers/testing-library';
|
|||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
import TimeSeriesColumnControl from '.';
|
import TimeSeriesColumnControl from '.';
|
||||||
|
|
||||||
jest.mock('lodash/debounce', () => jest.fn(fn => fn));
|
jest.mock('lodash/debounce', () => (fn: Function & { cancel: Function }) => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
fn.cancel = jest.fn();
|
||||||
|
return fn;
|
||||||
|
});
|
||||||
|
|
||||||
test('renders with default props', () => {
|
test('renders with default props', () => {
|
||||||
render(<TimeSeriesColumnControl />);
|
render(<TimeSeriesColumnControl />);
|
||||||
@ -78,7 +82,7 @@ test('triggers onChange when type changes', () => {
|
|||||||
const onChange = jest.fn();
|
const onChange = jest.fn();
|
||||||
render(<TimeSeriesColumnControl onChange={onChange} />);
|
render(<TimeSeriesColumnControl onChange={onChange} />);
|
||||||
userEvent.click(screen.getByRole('button'));
|
userEvent.click(screen.getByRole('button'));
|
||||||
userEvent.click(screen.getByText('Select...'));
|
userEvent.click(screen.getByText('Select ...'));
|
||||||
userEvent.click(screen.getByText('Time comparison'));
|
userEvent.click(screen.getByText('Time comparison'));
|
||||||
expect(onChange).not.toHaveBeenCalled();
|
expect(onChange).not.toHaveBeenCalled();
|
||||||
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
||||||
@ -121,7 +125,7 @@ test('triggers onChange when time type changes', () => {
|
|||||||
const onChange = jest.fn();
|
const onChange = jest.fn();
|
||||||
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
|
render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
|
||||||
userEvent.click(screen.getByRole('button'));
|
userEvent.click(screen.getByRole('button'));
|
||||||
userEvent.click(screen.getByText('Select...'));
|
userEvent.click(screen.getByText('Select ...'));
|
||||||
userEvent.click(screen.getByText('Difference'));
|
userEvent.click(screen.getByText('Difference'));
|
||||||
expect(onChange).not.toHaveBeenCalled();
|
expect(onChange).not.toHaveBeenCalled();
|
||||||
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
userEvent.click(screen.getByRole('button', { name: 'Save' }));
|
||||||
|
@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
|
|||||||
import { Row, Col, Input } from 'src/common/components';
|
import { Row, Col, Input } from 'src/common/components';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import Popover from 'src/components/Popover';
|
import Popover from 'src/components/Popover';
|
||||||
import Select from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import { t, styled } from '@superset-ui/core';
|
import { t, styled } from '@superset-ui/core';
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
import BoundsControl from '../BoundsControl';
|
import BoundsControl from '../BoundsControl';
|
||||||
@ -61,17 +61,17 @@ const defaultProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const comparisonTypeOptions = [
|
const comparisonTypeOptions = [
|
||||||
{ value: 'value', label: 'Actual value' },
|
{ value: 'value', label: 'Actual value', key: 'value' },
|
||||||
{ value: 'diff', label: 'Difference' },
|
{ value: 'diff', label: 'Difference', key: 'diff' },
|
||||||
{ value: 'perc', label: 'Percentage' },
|
{ value: 'perc', label: 'Percentage', key: 'perc' },
|
||||||
{ value: 'perc_change', label: 'Percentage change' },
|
{ value: 'perc_change', label: 'Percentage change', key: 'perc_change' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const colTypeOptions = [
|
const colTypeOptions = [
|
||||||
{ value: 'time', label: 'Time comparison' },
|
{ value: 'time', label: 'Time comparison', key: 'time' },
|
||||||
{ value: 'contrib', label: 'Contribution' },
|
{ value: 'contrib', label: 'Contribution', key: 'contrib' },
|
||||||
{ value: 'spark', label: 'Sparkline' },
|
{ value: 'spark', label: 'Sparkline', key: 'spark' },
|
||||||
{ value: 'avg', label: 'Period average' },
|
{ value: 'avg', label: 'Period average', key: 'avg' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const StyledRow = styled(Row)`
|
const StyledRow = styled(Row)`
|
||||||
@ -143,7 +143,7 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onSelectChange(attr, opt) {
|
onSelectChange(attr, opt) {
|
||||||
this.setState({ [attr]: opt.value });
|
this.setState({ [attr]: opt });
|
||||||
}
|
}
|
||||||
|
|
||||||
onTextInputChange(attr, event) {
|
onTextInputChange(attr, event) {
|
||||||
@ -216,8 +216,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||||||
'Type of comparison, value difference or percentage',
|
'Type of comparison, value difference or percentage',
|
||||||
'col-type',
|
'col-type',
|
||||||
<Select
|
<Select
|
||||||
value={this.state.colType}
|
ariaLabel={t('Type')}
|
||||||
clearable={false}
|
value={this.state.colType || undefined}
|
||||||
onChange={this.onSelectChange.bind(this, 'colType')}
|
onChange={this.onSelectChange.bind(this, 'colType')}
|
||||||
options={colTypeOptions}
|
options={colTypeOptions}
|
||||||
/>,
|
/>,
|
||||||
@ -273,8 +273,8 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||||||
'Type of comparison, value difference or percentage',
|
'Type of comparison, value difference or percentage',
|
||||||
'comp-type',
|
'comp-type',
|
||||||
<Select
|
<Select
|
||||||
value={this.state.comparisonType}
|
ariaLabel={t('Type')}
|
||||||
clearable={false}
|
value={this.state.comparisonType || undefined}
|
||||||
onChange={this.onSelectChange.bind(this, 'comparisonType')}
|
onChange={this.onSelectChange.bind(this, 'comparisonType')}
|
||||||
options={comparisonTypeOptions}
|
options={comparisonTypeOptions}
|
||||||
/>,
|
/>,
|
||||||
|
Loading…
Reference in New Issue
Block a user