chore(sqllab): Migrate tests to typescript (#25274)
This commit is contained in:
JUST.in DO IT
GitHub
parent
78cbdc3e42
commit
52faa2e17d
|
|
@ -1,64 +0,0 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
|
||||
import HighlightedSql from 'src/SqlLab/components/HighlightedSql';
|
||||
import ModalTrigger from 'src/components/ModalTrigger';
|
||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||
|
||||
describe('HighlightedSql', () => {
|
||||
const sql =
|
||||
"SELECT * FROM test WHERE something='fkldasjfklajdslfkjadlskfjkldasjfkladsjfkdjsa'";
|
||||
it('renders with props', () => {
|
||||
expect(React.isValidElement(<HighlightedSql sql={sql} />)).toBe(true);
|
||||
});
|
||||
it('renders a ModalTrigger', () => {
|
||||
const wrapper = shallow(<HighlightedSql sql={sql} />);
|
||||
expect(wrapper.find(ModalTrigger)).toExist();
|
||||
});
|
||||
it('renders a ModalTrigger while using shrink', () => {
|
||||
const wrapper = shallow(<HighlightedSql sql={sql} shrink maxWidth={20} />);
|
||||
expect(wrapper.find(ModalTrigger)).toExist();
|
||||
});
|
||||
it('renders two SyntaxHighlighter in modal', () => {
|
||||
const wrapper = mount(
|
||||
<HighlightedSql
|
||||
sql={sql}
|
||||
rawSql="SELECT * FORM foo"
|
||||
shrink
|
||||
maxWidth={5}
|
||||
/>,
|
||||
{
|
||||
wrappingComponent: ThemeProvider,
|
||||
wrappingComponentProps: {
|
||||
theme: supersetTheme,
|
||||
},
|
||||
},
|
||||
);
|
||||
const pre = wrapper.find('pre');
|
||||
expect(pre).toHaveLength(1);
|
||||
pre.simulate('click');
|
||||
setTimeout(() => {
|
||||
const modalBody = mount(wrapper.state().modalBody);
|
||||
expect(modalBody.find(SyntaxHighlighter)).toHaveLength(2);
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
import HighlightedSql from 'src/SqlLab/components/HighlightedSql';
|
||||
import { fireEvent, render } from 'spec/helpers/testing-library';
|
||||
|
||||
const sql =
|
||||
"SELECT * FROM test WHERE something='fkldasjfklajdslfkjadlskfjkldasjfkladsjfkdjsa'";
|
||||
test('renders HighlightedSql component with sql prop', () => {
|
||||
expect(React.isValidElement(<HighlightedSql sql={sql} />)).toBe(true);
|
||||
});
|
||||
test('renders a ModalTrigger component', () => {
|
||||
const { getByTestId } = render(<HighlightedSql sql={sql} />);
|
||||
expect(getByTestId('span-modal-trigger')).toBeInTheDocument();
|
||||
});
|
||||
test('renders a ModalTrigger component with shrink prop and maxWidth prop set to 20', () => {
|
||||
const { getByTestId } = render(
|
||||
<HighlightedSql sql={sql} shrink maxWidth={20} />,
|
||||
);
|
||||
expect(getByTestId('span-modal-trigger')).toBeInTheDocument();
|
||||
});
|
||||
test('renders two code elements in modal when rawSql prop is provided', () => {
|
||||
const { getByRole, queryByRole, getByTestId } = render(
|
||||
<HighlightedSql sql={sql} rawSql="SELECT * FORM foo" shrink maxWidth={5} />,
|
||||
);
|
||||
expect(queryByRole('dialog')).not.toBeInTheDocument();
|
||||
fireEvent.click(getByTestId('span-modal-trigger'));
|
||||
expect(queryByRole('dialog')).toBeInTheDocument();
|
||||
const codeElements = getByRole('dialog').getElementsByTagName('code');
|
||||
expect(codeElements.length).toEqual(2);
|
||||
});
|
||||
|
|
@ -17,23 +17,21 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import Label from 'src/components/Label';
|
||||
import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
|
||||
import type { QueryState } from '@superset-ui/core';
|
||||
import { render } from 'spec/helpers/testing-library';
|
||||
import QueryStateLabel from '.';
|
||||
|
||||
describe('SavedQuery', () => {
|
||||
const mockedProps = {
|
||||
query: {
|
||||
state: 'running',
|
||||
},
|
||||
};
|
||||
it('is valid', () => {
|
||||
expect(React.isValidElement(<QueryStateLabel {...mockedProps} />)).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
it('has an Overlay and a Popover', () => {
|
||||
const wrapper = mount(<QueryStateLabel {...mockedProps} />);
|
||||
expect(wrapper.find(Label)).toExist();
|
||||
});
|
||||
jest.mock('src/components/Label', () => () => <div data-test="mock-label" />);
|
||||
|
||||
const mockedProps = {
|
||||
query: {
|
||||
state: 'running' as QueryState,
|
||||
},
|
||||
};
|
||||
test('is valid', () => {
|
||||
expect(React.isValidElement(<QueryStateLabel {...mockedProps} />)).toBe(true);
|
||||
});
|
||||
test('has an Overlay and a Popover', () => {
|
||||
const { getByTestId } = render(<QueryStateLabel {...mockedProps} />);
|
||||
expect(getByTestId('mock-label')).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -22,7 +22,7 @@ import { STATE_TYPE_MAP, STATE_TYPE_MAP_LOCALIZED } from 'src/SqlLab/constants';
|
|||
import { styled, Query } from '@superset-ui/core';
|
||||
|
||||
interface QueryStateLabelProps {
|
||||
query: Query;
|
||||
query: Pick<Query, 'state'>;
|
||||
}
|
||||
|
||||
const StyledLabel = styled(Label)`
|
||||
|
|
|
|||
|
|
@ -24,36 +24,34 @@ import QueryTable from 'src/SqlLab/components/QueryTable';
|
|||
import TableView from 'src/components/TableView';
|
||||
import TableCollection from 'src/components/TableCollection';
|
||||
import { Provider } from 'react-redux';
|
||||
import { queries, user } from 'src/SqlLab/fixtures';
|
||||
import { runningQuery, successfulQuery, user } from 'src/SqlLab/fixtures';
|
||||
|
||||
describe('QueryTable', () => {
|
||||
const mockedProps = {
|
||||
queries,
|
||||
displayLimit: 100,
|
||||
latestQueryId: 'ryhMUZCGb',
|
||||
};
|
||||
it('is valid', () => {
|
||||
expect(React.isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
|
||||
});
|
||||
it('is valid with props', () => {
|
||||
expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
||||
});
|
||||
it('renders a proper table', () => {
|
||||
const mockStore = configureStore([thunk]);
|
||||
const store = mockStore({
|
||||
user,
|
||||
});
|
||||
|
||||
const wrapper = mount(
|
||||
<Provider store={store}>
|
||||
<QueryTable {...mockedProps} />
|
||||
</Provider>,
|
||||
);
|
||||
const tableWrapper = wrapper.find(TableView).find(TableCollection);
|
||||
|
||||
expect(wrapper.find(TableView)).toExist();
|
||||
expect(tableWrapper.find('table')).toExist();
|
||||
expect(tableWrapper.find('table').find('thead').find('tr')).toHaveLength(1);
|
||||
expect(tableWrapper.find('table').find('tbody').find('tr')).toHaveLength(2);
|
||||
});
|
||||
const mockedProps = {
|
||||
queries: [runningQuery, successfulQuery],
|
||||
displayLimit: 100,
|
||||
latestQueryId: 'ryhMUZCGb',
|
||||
};
|
||||
test('is valid', () => {
|
||||
expect(React.isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
|
||||
});
|
||||
test('is valid with props', () => {
|
||||
expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
||||
});
|
||||
test('renders a proper table', () => {
|
||||
const mockStore = configureStore([thunk]);
|
||||
const store = mockStore({
|
||||
user,
|
||||
});
|
||||
|
||||
const wrapper = mount(
|
||||
<Provider store={store}>
|
||||
<QueryTable {...mockedProps} />
|
||||
</Provider>,
|
||||
);
|
||||
const tableWrapper = wrapper.find(TableView).find(TableCollection);
|
||||
|
||||
expect(wrapper.find(TableView)).toExist();
|
||||
expect(tableWrapper.find('table')).toExist();
|
||||
expect(tableWrapper.find('table').find('thead').find('tr')).toHaveLength(1);
|
||||
expect(tableWrapper.find('table').find('tbody').find('tr')).toHaveLength(2);
|
||||
});
|
||||
Loading…
Reference in New Issue