This is an automated email from the ASF dual-hosted git repository.
justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 52faa2e17d chore(sqllab): Migrate tests to typescript (#25274)
52faa2e17d is described below
commit 52faa2e17d240f48b28e2499729df09fd0049df3
Author: JUST.in DO IT <[email protected]>
AuthorDate: Fri Sep 15 09:43:45 2023 -0700
chore(sqllab): Migrate tests to typescript (#25274)
---
.../HighlightedSql/HighlightedSql.test.jsx | 64 ----------------------
.../HighlightedSql/HighlightedSql.test.tsx | 48 ++++++++++++++++
...tateLabel.test.jsx => QueryStateLabel.test.tsx} | 34 ++++++------
.../SqlLab/components/QueryStateLabel/index.tsx | 2 +-
.../{QueryTable.test.jsx => QueryTable.test.tsx} | 54 +++++++++---------
5 files changed, 91 insertions(+), 111 deletions(-)
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 66ddf287d2..0000000000
---
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(<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);
- });
-});
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 0000000000..e932c35e08
--- /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(<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);
+});
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 a14e08a9fe..6adbe7f972 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(<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();
});
diff --git a/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx
b/superset-frontend/src/SqlLab/components/QueryStateLabel/index.tsx
index 0ae092ef5e..f450ecdde5 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<Query, 'state'>;
}
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 4aa8351796..9b72e692dc 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(<QueryTable displayLimit={100} />)).toBe(true);
- });
- it('is valid with props', () => {
- expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
+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,
});
- 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);
+ 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);
- });
+ 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);
});
