Improves RTL configuration (#13079)

- Adds plugin:jest-dom/recommended to ESLint plugins list to enforce tests best practices

- Moves import @testing-library/jest-dom/extend-expect; from setup.ts to testing-library.tsx to avoid matchers collision

- Adds @testing-library/user-event to help simulate users events
This commit is contained in:
Michael S. Molina
2021-02-11 20:32:22 -03:00
committed by GitHub
parent 870886ca2f
commit 86807e40b7
8 changed files with 56150 additions and 1036 deletions

View File

@@ -25,7 +25,7 @@ describe('ControlSetRow', () => {
const { getAllByText } = render(
<ControlSetRow controls={[<p>My Control 1</p>]} />,
);
expect(getAllByText('My Control 1')).toHaveLength(1);
expect(getAllByText('My Control 1').length).toBe(1);
});
it('renders a single row with two elements', () => {
const { getAllByText } = render(

View File

@@ -17,9 +17,8 @@
* under the License.
*/
import React from 'react';
import { Simulate } from 'react-dom/test-utils';
import { render, screen, fireEvent } from '@testing-library/react';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import DatasourcePanel from 'src/explore/components/DatasourcePanel';
import { columns, metrics } from 'spec/javascripts/datasource/fixtures';
@@ -51,49 +50,31 @@ describe('datasourcepanel', () => {
};
function search(value, input) {
fireEvent.change(input, {
target: { value },
});
Simulate.change(input);
userEvent.clear(input);
userEvent.type(input, value);
}
it('should render', () => {
const { container } = render(
<ThemeProvider theme={supersetTheme}>
<DatasourcePanel {...props} />
</ThemeProvider>,
);
const { container } = render(<DatasourcePanel {...props} />);
expect(container).toBeVisible();
});
it('should display items in controls', () => {
render(
<ThemeProvider theme={supersetTheme}>
<DatasourcePanel {...props} />
</ThemeProvider>,
);
render(<DatasourcePanel {...props} />);
expect(screen.getByText('birth_names')).toBeTruthy();
expect(screen.getByText('Columns')).toBeTruthy();
expect(screen.getByText('Metrics')).toBeTruthy();
});
it('should render search results', () => {
const { container } = render(
<ThemeProvider theme={supersetTheme}>
<DatasourcePanel {...props} />
</ThemeProvider>,
);
const { container } = render(<DatasourcePanel {...props} />);
const c = container.getElementsByClassName('option-label');
expect(c).toHaveLength(5);
});
it('should render 0 search results', () => {
const { container } = render(
<ThemeProvider theme={supersetTheme}>
<DatasourcePanel {...props} />
</ThemeProvider>,
);
const { container } = render(<DatasourcePanel {...props} />);
const c = container.getElementsByClassName('option-label');
const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
@@ -104,11 +85,7 @@ describe('datasourcepanel', () => {
});
it('should render and sort search results', () => {
const { container } = render(
<ThemeProvider theme={supersetTheme}>
<DatasourcePanel {...props} />
</ThemeProvider>,
);
const { container } = render(<DatasourcePanel {...props} />);
const c = container.getElementsByClassName('option-label');
const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');