chore(chart-controls): migrate enzyme to RTL (#26257)
This commit is contained in:
JUST.in DO IT
GitHub
parent
1a1548da3b
commit
c049771a7f
|
|
@ -16,87 +16,98 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { isValidElement } from 'react';
|
||||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { GenericDataType } from '@superset-ui/core';
|
||||
import '@testing-library/jest-dom';
|
||||
import { render } from '@testing-library/react';
|
||||
import {
|
||||
ThemeProvider,
|
||||
supersetTheme,
|
||||
GenericDataType,
|
||||
} from '@superset-ui/core';
|
||||
|
||||
import { ColumnOption, ColumnOptionProps, ColumnTypeLabel } from '../../src';
|
||||
import { SQLPopover } from '../../src/components/SQLPopover';
|
||||
import { ColumnOption, ColumnOptionProps } from '../../src';
|
||||
|
||||
describe('ColumnOption', () => {
|
||||
const defaultProps: ColumnOptionProps = {
|
||||
jest.mock('../../src/components/SQLPopover', () => ({
|
||||
SQLPopover: () => <div data-test="mock-sql-popover" />,
|
||||
}));
|
||||
jest.mock('../../src/components/ColumnTypeLabel/ColumnTypeLabel', () => ({
|
||||
ColumnTypeLabel: ({ type }: { type: string }) => (
|
||||
<div data-test="mock-column-type-label">{type}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const defaultProps: ColumnOptionProps = {
|
||||
column: {
|
||||
column_name: 'foo',
|
||||
verbose_name: 'Foo',
|
||||
expression: 'SUM(foo)',
|
||||
description: 'Foo is the greatest column of all',
|
||||
},
|
||||
showType: false,
|
||||
};
|
||||
|
||||
const setup = (props: Partial<ColumnOptionProps> = {}) =>
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<ColumnOption {...defaultProps} {...props} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
test('shows a label with verbose_name', () => {
|
||||
const { container } = setup();
|
||||
const lbl = container.getElementsByClassName('option-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(`${lbl[0].textContent}`).toEqual(defaultProps.column.verbose_name);
|
||||
});
|
||||
test('shows SQL Popover trigger', () => {
|
||||
const { getByTestId } = setup();
|
||||
expect(getByTestId('mock-sql-popover')).toBeInTheDocument();
|
||||
});
|
||||
test('shows a label with column_name when no verbose_name', () => {
|
||||
const { getByText } = setup({
|
||||
column: {
|
||||
...defaultProps.column,
|
||||
verbose_name: undefined,
|
||||
},
|
||||
});
|
||||
expect(getByText(defaultProps.column.column_name)).toBeInTheDocument();
|
||||
});
|
||||
test('shows a column type label when showType is true', () => {
|
||||
const { getByTestId } = setup({
|
||||
showType: true,
|
||||
column: {
|
||||
column_name: 'foo',
|
||||
verbose_name: 'Foo',
|
||||
expression: 'SUM(foo)',
|
||||
description: 'Foo is the greatest column of all',
|
||||
type: 'VARCHAR',
|
||||
type_generic: GenericDataType.String,
|
||||
},
|
||||
showType: false,
|
||||
};
|
||||
|
||||
let wrapper: ShallowWrapper;
|
||||
let props: ColumnOptionProps;
|
||||
const factory = (o: ColumnOptionProps) => <ColumnOption {...o} />;
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(factory(defaultProps));
|
||||
props = { ...defaultProps };
|
||||
});
|
||||
it('is a valid element', () => {
|
||||
expect(isValidElement(<ColumnOption {...defaultProps} />)).toBe(true);
|
||||
});
|
||||
it('shows a label with verbose_name', () => {
|
||||
const lbl = wrapper.find('.option-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('Foo');
|
||||
});
|
||||
it('shows SQL Popover trigger', () => {
|
||||
expect(wrapper.find(SQLPopover)).toHaveLength(1);
|
||||
});
|
||||
it('shows a label with column_name when no verbose_name', () => {
|
||||
delete props.column.verbose_name;
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('.option-label').first().text()).toBe('foo');
|
||||
});
|
||||
it('shows a column type label when showType is true', () => {
|
||||
wrapper = shallow(
|
||||
factory({
|
||||
...props,
|
||||
showType: true,
|
||||
column: {
|
||||
column_name: 'foo',
|
||||
type: 'VARCHAR',
|
||||
type_generic: GenericDataType.String,
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
|
||||
});
|
||||
it('column with expression has correct column label if showType is true', () => {
|
||||
props.showType = true;
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
|
||||
expect(wrapper.find(ColumnTypeLabel).props().type).toBe('expression');
|
||||
});
|
||||
it('shows no column type label when type is null', () => {
|
||||
wrapper = shallow(
|
||||
factory({
|
||||
...props,
|
||||
showType: true,
|
||||
column: {
|
||||
column_name: 'foo',
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(0);
|
||||
});
|
||||
it('dttm column has correct column label if showType is true', () => {
|
||||
props.showType = true;
|
||||
props.column.expression = undefined;
|
||||
props.column.type_generic = GenericDataType.Temporal;
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
|
||||
expect(wrapper.find(ColumnTypeLabel).props().type).toBe(
|
||||
GenericDataType.Temporal,
|
||||
);
|
||||
});
|
||||
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
|
||||
});
|
||||
test('column with expression has correct column label if showType is true', () => {
|
||||
const { getByTestId } = setup({
|
||||
showType: true,
|
||||
});
|
||||
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
|
||||
expect(getByTestId('mock-column-type-label')).toHaveTextContent('expression');
|
||||
});
|
||||
test('shows no column type label when type is null', () => {
|
||||
const { queryByTestId } = setup({
|
||||
showType: true,
|
||||
column: {
|
||||
column_name: 'foo',
|
||||
},
|
||||
});
|
||||
expect(queryByTestId('mock-column-type-label')).not.toBeInTheDocument();
|
||||
});
|
||||
test('dttm column has correct column label if showType is true', () => {
|
||||
const { getByTestId } = setup({
|
||||
showType: true,
|
||||
column: {
|
||||
...defaultProps.column,
|
||||
expression: undefined,
|
||||
type_generic: GenericDataType.Temporal,
|
||||
},
|
||||
});
|
||||
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
|
||||
expect(getByTestId('mock-column-type-label')).toHaveTextContent(
|
||||
String(GenericDataType.Temporal),
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,42 +16,69 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { shallow } from 'enzyme';
|
||||
import { Tooltip } from '../../src/components/Tooltip';
|
||||
import { InfoTooltipWithTrigger } from '../../src';
|
||||
import '@testing-library/jest-dom';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger, InfoTooltipWithTriggerProps } from '../../src';
|
||||
|
||||
describe('InfoTooltipWithTrigger', () => {
|
||||
it('renders a tooltip', () => {
|
||||
const wrapper = shallow(
|
||||
<InfoTooltipWithTrigger label="test" tooltip="this is a test" />,
|
||||
);
|
||||
expect(wrapper.find(Tooltip)).toHaveLength(1);
|
||||
});
|
||||
jest.mock('../../src/components/Tooltip', () => ({
|
||||
Tooltip: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-test="mock-tooltip">{children}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
it('renders an info icon', () => {
|
||||
const wrapper = shallow(<InfoTooltipWithTrigger />);
|
||||
expect(wrapper.find('.fa-info-circle')).toHaveLength(1);
|
||||
});
|
||||
const defaultProps = {};
|
||||
|
||||
it('responds to keypresses', () => {
|
||||
const clickHandler = jest.fn();
|
||||
const wrapper = shallow(
|
||||
<InfoTooltipWithTrigger
|
||||
label="test"
|
||||
tooltip="this is a test"
|
||||
onClick={clickHandler}
|
||||
/>,
|
||||
);
|
||||
wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Tab' });
|
||||
expect(clickHandler).toHaveBeenCalledTimes(0);
|
||||
wrapper.find('.fa-info-circle').simulate('keypress', { key: 'Enter' });
|
||||
expect(clickHandler).toHaveBeenCalledTimes(1);
|
||||
wrapper.find('.fa-info-circle').simulate('keypress', { key: ' ' });
|
||||
expect(clickHandler).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
const setup = (props: Partial<InfoTooltipWithTriggerProps> = {}) =>
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<InfoTooltipWithTrigger {...defaultProps} {...props} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
it('has a bsStyle', () => {
|
||||
const wrapper = shallow(<InfoTooltipWithTrigger bsStyle="something" />);
|
||||
expect(wrapper.find('.text-something')).toHaveLength(1);
|
||||
test('renders a tooltip', () => {
|
||||
const { getAllByTestId } = setup({
|
||||
label: 'test',
|
||||
tooltip: 'this is a test',
|
||||
});
|
||||
expect(getAllByTestId('mock-tooltip').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('renders an info icon', () => {
|
||||
const { container } = setup();
|
||||
expect(container.getElementsByClassName('fa-info-circle')).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('responds to keypresses', () => {
|
||||
const clickHandler = jest.fn();
|
||||
const { getByRole } = setup({
|
||||
label: 'test',
|
||||
tooltip: 'this is a test',
|
||||
onClick: clickHandler,
|
||||
});
|
||||
fireEvent.keyPress(getByRole('button'), {
|
||||
key: 'Tab',
|
||||
code: 9,
|
||||
charCode: 9,
|
||||
});
|
||||
expect(clickHandler).toHaveBeenCalledTimes(0);
|
||||
fireEvent.keyPress(getByRole('button'), {
|
||||
key: 'Enter',
|
||||
code: 13,
|
||||
charCode: 13,
|
||||
});
|
||||
expect(clickHandler).toHaveBeenCalledTimes(1);
|
||||
fireEvent.keyPress(getByRole('button'), {
|
||||
key: ' ',
|
||||
code: 32,
|
||||
charCode: 32,
|
||||
});
|
||||
expect(clickHandler).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test('has a bsStyle', () => {
|
||||
const { container } = setup({
|
||||
bsStyle: 'something',
|
||||
});
|
||||
expect(container.getElementsByClassName('text-something')).toHaveLength(1);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,72 +16,97 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { isValidElement } from 'react';
|
||||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import '@testing-library/jest-dom';
|
||||
import { render } from '@testing-library/react';
|
||||
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
||||
import { MetricOption, MetricOptionProps } from '../../src';
|
||||
|
||||
describe('MetricOption', () => {
|
||||
const defaultProps = {
|
||||
metric: {
|
||||
metric_name: 'foo',
|
||||
verbose_name: 'Foo',
|
||||
expression: 'SUM(foo)',
|
||||
label: 'test',
|
||||
description: 'Foo is the greatest metric of all',
|
||||
warning_text: 'Be careful when using foo',
|
||||
},
|
||||
openInNewWindow: false,
|
||||
showFormula: true,
|
||||
showType: true,
|
||||
url: '',
|
||||
};
|
||||
jest.mock('../../src/components/InfoTooltipWithTrigger', () => () => (
|
||||
<div data-test="mock-info-tooltip-with-trigger" />
|
||||
));
|
||||
jest.mock('../../src/components/ColumnTypeLabel/ColumnTypeLabel', () => ({
|
||||
ColumnTypeLabel: () => <div data-test="mock-column-type-label" />,
|
||||
}));
|
||||
jest.mock(
|
||||
'../../src/components/Tooltip',
|
||||
() =>
|
||||
({ children }: { children: React.ReactNode }) => (
|
||||
<div data-test="mock-tooltip">{children}</div>
|
||||
),
|
||||
);
|
||||
jest.mock('../../src/components/SQLPopover', () => ({
|
||||
SQLPopover: () => <div data-test="mock-sql-popover" />,
|
||||
}));
|
||||
|
||||
let wrapper: ShallowWrapper;
|
||||
let props: MetricOptionProps;
|
||||
const factory = (o: MetricOptionProps) => <MetricOption {...o} />;
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(factory(defaultProps));
|
||||
props = { ...defaultProps };
|
||||
});
|
||||
it('is a valid element', () => {
|
||||
expect(isValidElement(<MetricOption {...defaultProps} />)).toBe(true);
|
||||
});
|
||||
it('shows a label with verbose_name', () => {
|
||||
const lbl = wrapper.find('.option-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('Foo');
|
||||
});
|
||||
it('shows a InfoTooltipWithTrigger', () => {
|
||||
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(1);
|
||||
});
|
||||
it('shows SQL Popover trigger', () => {
|
||||
expect(wrapper.find('SQLPopover')).toHaveLength(1);
|
||||
});
|
||||
it('shows a label with metric_name when no verbose_name', () => {
|
||||
props.metric.verbose_name = '';
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('.option-label').first().text()).toBe('foo');
|
||||
});
|
||||
it('doesnt show InfoTooltipWithTrigger when no warning', () => {
|
||||
props.metric.warning_text = '';
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('InfoTooltipWithTrigger')).toHaveLength(0);
|
||||
});
|
||||
it('sets target="_blank" when openInNewWindow is true', () => {
|
||||
props.url = 'https://github.com/apache/incubator-superset';
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('a').prop('target')).toBe('');
|
||||
const defaultProps = {
|
||||
metric: {
|
||||
metric_name: 'foo',
|
||||
verbose_name: 'Foo',
|
||||
expression: 'SUM(foo)',
|
||||
label: 'test',
|
||||
description: 'Foo is the greatest metric of all',
|
||||
warning_text: 'Be careful when using foo',
|
||||
},
|
||||
openInNewWindow: false,
|
||||
showFormula: true,
|
||||
showType: true,
|
||||
url: '',
|
||||
};
|
||||
|
||||
props.openInNewWindow = true;
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('a').prop('target')).toBe('_blank');
|
||||
});
|
||||
it('shows a metric type label when showType is true', () => {
|
||||
props.showType = true;
|
||||
wrapper = shallow(factory(props));
|
||||
expect(wrapper.find('ColumnTypeLabel')).toHaveLength(1);
|
||||
});
|
||||
it('shows a Tooltip for the verbose metric name', () => {
|
||||
expect(wrapper.find('Tooltip')).toHaveLength(1);
|
||||
});
|
||||
const setup = (props: Partial<MetricOptionProps> = {}) =>
|
||||
render(
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<MetricOption {...defaultProps} {...props} />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
test('shows a label with verbose_name', () => {
|
||||
const { container } = setup();
|
||||
const lbl = container.getElementsByClassName('option-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(`${lbl[0].textContent}`).toEqual(defaultProps.metric.verbose_name);
|
||||
});
|
||||
test('shows a InfoTooltipWithTrigger', () => {
|
||||
const { getByTestId } = setup();
|
||||
expect(getByTestId('mock-info-tooltip-with-trigger')).toBeInTheDocument();
|
||||
});
|
||||
test('shows SQL Popover trigger', () => {
|
||||
const { getByTestId } = setup();
|
||||
expect(getByTestId('mock-sql-popover')).toBeInTheDocument();
|
||||
});
|
||||
test('shows a label with metric_name when no verbose_name', () => {
|
||||
const { getByText } = setup({
|
||||
metric: {
|
||||
...defaultProps.metric,
|
||||
verbose_name: '',
|
||||
},
|
||||
});
|
||||
expect(getByText(defaultProps.metric.metric_name)).toBeInTheDocument();
|
||||
});
|
||||
test('doesnt show InfoTooltipWithTrigger when no warning', () => {
|
||||
const { queryByText } = setup({
|
||||
metric: {
|
||||
...defaultProps.metric,
|
||||
warning_text: '',
|
||||
},
|
||||
});
|
||||
expect(queryByText('mock-info-tooltip-with-trigger')).not.toBeInTheDocument();
|
||||
});
|
||||
test('sets target="_blank" when openInNewWindow is true', () => {
|
||||
const { getByRole } = setup({
|
||||
url: 'https://github.com/apache/incubator-superset',
|
||||
openInNewWindow: true,
|
||||
});
|
||||
expect(
|
||||
getByRole('link', { name: defaultProps.metric.verbose_name }),
|
||||
).toHaveAttribute('target', '_blank');
|
||||
});
|
||||
test('shows a metric type label when showType is true', () => {
|
||||
const { getByTestId } = setup({
|
||||
showType: true,
|
||||
});
|
||||
expect(getByTestId('mock-column-type-label')).toBeInTheDocument();
|
||||
});
|
||||
test('shows a Tooltip for the verbose metric name', () => {
|
||||
const { getByTestId } = setup();
|
||||
expect(getByTestId('mock-tooltip')).toBeInTheDocument();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue