QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-12 03:15:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Replaces Icon with Icons component - iteration 1 (#14469)

Browse Source
This commit is contained in:
Michael S. Molina
2021-05-17 14:24:56 -03:00
committed by GitHub
parent 4e6169e0f9
commit 9deb7aa3c1
9 changed files with 79 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.test.tsx
View File

@@ -31,25 +31,25 @@ const defaultProps = {
options: { string: { column_name: 'Column' } },
};
test('renders with default props', () => {
test('renders with default props', async () => {
render(<DndSelectLabel {...defaultProps} />, { useDnd: true });
expect(screen.getByText('Drop columns')).toBeInTheDocument();
expect(await screen.findByText('Drop columns')).toBeInTheDocument();
});
test('renders ghost button when empty', () => {
test('renders ghost button when empty', async () => {
const ghostButtonText = 'Ghost button text';
render(
<DndSelectLabel {...defaultProps} ghostButtonText={ghostButtonText} />,
{ useDnd: true },
);
expect(screen.getByText(ghostButtonText)).toBeInTheDocument();
expect(await screen.findByText(ghostButtonText)).toBeInTheDocument();
});
test('renders values', () => {
test('renders values', async () => {
const values = 'Values';
const valuesRenderer = () => <span>{values}</span>;
render(<DndSelectLabel {...defaultProps} valuesRenderer={valuesRenderer} />, {
useDnd: true,
});
expect(screen.getByText(values)).toBeInTheDocument();
expect(await screen.findByText(values)).toBeInTheDocument();
});

4
superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx
View File

@@ -26,7 +26,7 @@ import {
HeaderContainer,
} from 'src/explore/components/controls/OptionControls';
import { DatasourcePanelDndItem } from 'src/explore/components/DatasourcePanel/types';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
import { DndColumnSelectProps } from './types';
export default function DndSelectLabel<T, O>({
@@ -54,7 +54,7 @@ export default function DndSelectLabel<T, O>({
function renderGhostButton() {
return (
<AddControlLabel cancelHover>
<Icon name="plus-small" color={theme.colors.grayscale.light1} />
<Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
{t(props.ghostButtonText || 'Drop columns')}
</AddControlLabel>
);

15
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
View File

@@ -38,7 +38,7 @@ import {
HeaderContainer,
LabelsContainer,
} from 'src/explore/components/controls/OptionControls';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
import AdhocFilterOption from 'src/explore/components/controls/FilterControl/AdhocFilterOption';
import AdhocFilter, {
@@ -339,11 +339,9 @@ class AdhocFilterControl extends React.Component {
<ControlHeader {...this.props} />
{this.addNewFilterPopoverTrigger(
<AddIconButton data-test="add-filter-button">
<Icon
name="plus-large"
width={theme.gridUnit * 3}
height={theme.gridUnit * 3}
color={theme.colors.grayscale.light5}
<Icons.PlusLarge
iconSize="s"
iconColor={theme.colors.grayscale.light5}
/>
</AddIconButton>,
)}
@@ -355,10 +353,7 @@ class AdhocFilterControl extends React.Component {
)
: this.addNewFilterPopoverTrigger(
<AddControlLabel>
<Icon
name="plus-small"
color={theme.colors.grayscale.light1}
/>
<Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
{t('Add filter')}
</AddControlLabel>,
)}

24
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
View File

@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
@@ -61,30 +61,32 @@ const setup = (props: {
</DndProvider>
);
test('should render', () => {
test('should render', async () => {
const { container } = render(setup(mockedProps));
expect(container).toBeInTheDocument();
await waitFor(() => expect(container).toBeInTheDocument());
});
test('should render the control label', () => {
test('should render the control label', async () => {
render(setup(mockedProps));
expect(screen.getByText('value > 10')).toBeInTheDocument();
expect(await screen.findByText('value > 10')).toBeInTheDocument();
});
test('should render the remove button', () => {
test('should render the remove button', async () => {
render(setup(mockedProps));
const removeBtn = screen.getByRole('button');
const removeBtn = await screen.findByRole('button');
expect(removeBtn).toBeInTheDocument();
});
test('should render the right caret', () => {
test('should render the right caret', async () => {
render(setup(mockedProps));
expect(screen.getByRole('img', { name: 'caret-right' })).toBeInTheDocument();
expect(
await screen.findByRole('img', { name: 'caret-right' }),
).toBeInTheDocument();
});
test('should render the Popover on clicking the right caret', () => {
test('should render the Popover on clicking the right caret', async () => {
render(setup(mockedProps));
const rightCaret = screen.getByRole('img', { name: 'caret-right' });
const rightCaret = await screen.findByRole('img', { name: 'caret-right' });
userEvent.click(rightCaret);
expect(screen.getByRole('tooltip')).toBeInTheDocument();
});

15
superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
View File

@@ -26,7 +26,7 @@ import {
sqlaAutoGeneratedMetricNameRegex,
druidAutoGeneratedMetricRegex,
} from 'src/explore/constants';
import Icon from 'src/components/Icon';
import Icons from 'src/components/Icons';
import {
AddIconButton,
AddControlLabel,
@@ -386,11 +386,9 @@ class MetricsControl extends React.PureComponent {
disabled={this.isAddNewMetricDisabled()}
data-test="add-metric-button"
>
<Icon
name="plus-large"
width={theme.gridUnit * 3}
height={theme.gridUnit * 3}
color={theme.colors.grayscale.light5}
<Icons.PlusLarge
iconSize="s"
iconColor={theme.colors.grayscale.light5}
/>
</AddIconButton>,
)}
@@ -402,10 +400,7 @@ class MetricsControl extends React.PureComponent {
)
: this.addNewMetricPopoverTrigger(
<AddControlLabel>
<Icon
name="plus-small"
color={theme.colors.grayscale.light1}
/>
<Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
{t('Add metric')}
</AddControlLabel>,
)}

34
superset-frontend/src/explore/components/controls/OptionControls/OptionControls.test.tsx
View File

@@ -17,7 +17,12 @@
* under the License.
*/
import React from 'react';
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
import {
render,
screen,
fireEvent,
waitFor,
} from 'spec/helpers/testing-library';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import {
@@ -51,29 +56,30 @@ const setup = (overrides?: Record<string, any>) =>
</DndProvider>,
);
test('should render', () => {
test('should render', async () => {
const { container } = setup();
expect(container).toBeVisible();
await waitFor(() => expect(container).toBeVisible());
});
test('should display a label', () => {
test('should display a label', async () => {
setup();
expect(screen.getByText('Test label')).toBeTruthy();
expect(await screen.findByText('Test label')).toBeTruthy();
});
test('should display a certification icon if saved metric is certified', () => {
test('should display a certification icon if saved metric is certified', async () => {
const { container } = setup({
savedMetric: {
metric_name: 'test_metric',
is_certified: true,
},
});
screen.getByText('test_metric');
expect(screen.queryByText('Test label')).toBeFalsy();
expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
await waitFor(() => {
expect(screen.queryByText('Test label')).toBeFalsy();
expect(container.querySelector('.metric-option > svg')).toBeInTheDocument();
});
});
test('triggers onMoveLabel on drop', () => {
test('triggers onMoveLabel on drop', async () => {
render(
<DndProvider backend={HTML5Backend}>
<OptionControlLabel
@@ -88,9 +94,11 @@ test('triggers onMoveLabel on drop', () => {
/>
</DndProvider>,
);
fireEvent.dragStart(screen.getByText('Label 1'));
fireEvent.drop(screen.getByText('Label 2'));
expect(defaultProps.onMoveLabel).toHaveBeenCalled();
await waitFor(() => {
fireEvent.dragStart(screen.getByText('Label 1'));
fireEvent.drop(screen.getByText('Label 2'));
expect(defaultProps.onMoveLabel).toHaveBeenCalled();
});
});
test('renders DragContainer', () => {