chore(sqllab): Migrate tests to typescript (apache#25274)

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);
+});

superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.jsx → 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();
 });

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)`

superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx → 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);
 });