diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.jsx b/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.jsx deleted file mode 100644 index 66ddf287d2c69..0000000000000 --- a/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.jsx +++ /dev/null @@ -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()).toBe(true); - }); - it('renders a ModalTrigger', () => { - const wrapper = shallow(); - expect(wrapper.find(ModalTrigger)).toExist(); - }); - it('renders a ModalTrigger while using shrink', () => { - const wrapper = shallow(); - expect(wrapper.find(ModalTrigger)).toExist(); - }); - it('renders two SyntaxHighlighter in modal', () => { - const wrapper = mount( - , - { - 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); - }); -}); diff --git a/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.tsx b/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.tsx new file mode 100644 index 0000000000000..e932c35e085ab --- /dev/null +++ b/superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.tsx @@ -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()).toBe(true); +}); +test('renders a ModalTrigger component', () => { + const { getByTestId } = render(); + expect(getByTestId('span-modal-trigger')).toBeInTheDocument(); +}); +test('renders a ModalTrigger component with shrink prop and maxWidth prop set to 20', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('span-modal-trigger')).toBeInTheDocument(); +}); +test('renders two code elements in modal when rawSql prop is provided', () => { + const { getByRole, queryByRole, getByTestId } = render( + , + ); + 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); +}); diff --git a/superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.jsx b/superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.tsx similarity index 59% rename from superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.jsx rename to superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.tsx index a14e08a9fe722..6adbe7f972552 100644 --- a/superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.jsx +++ b/superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.tsx @@ -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()).toBe( - true, - ); - }); - it('has an Overlay and a Popover', () => { - const wrapper = mount(); - expect(wrapper.find(Label)).toExist(); - }); +jest.mock('src/components/Label', () => () =>
); + +const mockedProps = { + query: { + state: 'running' as QueryState, + }, +}; +test('is valid', () => { + expect(React.isValidElement()).toBe(true); +}); +test('has an Overlay and a Popover', () => { + const { getByTestId } = render(); + expect(getByTestId('mock-label')).toBeInTheDocument(); }); diff --git a/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx b/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx index 0ae092ef5efe3..f450ecdde5177 100644 --- a/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx @@ -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; } const StyledLabel = styled(Label)` diff --git a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx b/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.tsx similarity index 55% rename from superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx rename to superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.tsx index 4aa8351796b0f..9b72e692dc936 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.tsx @@ -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()).toBe(true); - }); - it('is valid with props', () => { - expect(React.isValidElement()).toBe(true); +const mockedProps = { + queries: [runningQuery, successfulQuery], + displayLimit: 100, + latestQueryId: 'ryhMUZCGb', +}; +test('is valid', () => { + expect(React.isValidElement()).toBe(true); +}); +test('is valid with props', () => { + expect(React.isValidElement()).toBe(true); +}); +test('renders a proper table', () => { + const mockStore = configureStore([thunk]); + const store = mockStore({ + user, }); - it('renders a proper table', () => { - const mockStore = configureStore([thunk]); - const store = mockStore({ - user, - }); - const wrapper = mount( - - - , - ); - const tableWrapper = wrapper.find(TableView).find(TableCollection); + const wrapper = mount( + + + , + ); + 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); - }); + 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); });