chore: TypeScript <Label /> (apache#10494)

* chore: TypeScript <Label /> * rebase * chore: TypeScript <Label /> * rebase * A bunch o' test fixes. One more to go! * helper for mountying Emotional components with Enzyme * asf license * fixed last test, some linting * improve the storybook * Adressing comments Co-authored-by: Evan Rusackas <[email protected]>
zhaowufu · Aug 7, 2020 · 0bad77f · 0bad77f
1 parent 96b9ba3
commit 0bad77f
Show file tree

Hide file tree

Showing 33 changed files with 328 additions and 106 deletions.
diff --git a/superset-frontend/spec/helpers/theming.ts b/superset-frontend/spec/helpers/theming.ts
@@ -0,0 +1,55 @@
+/**
+ * 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 { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
+import { ReactElement } from 'react';
+
+type optionsType = {
+  wrappingComponentProps?: any;
+  wrappingComponent?: ReactElement;
+  context?: any;
+};
+
+export function styledMount(
+  component: ReactElement,
+  options: optionsType = {},
+) {
+  return enzymeMount(component, {
+    ...options,
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+      ...options?.wrappingComponentProps,
+    },
+  });
+}
+
+export function styledShallow(
+  component: ReactElement,
+  options: optionsType = {},
+) {
+  return enzymeShallow(component, {
+    ...options,
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: {
+      theme: supersetTheme,
+      ...options?.wrappingComponentProps,
+    },
+  });
+}
diff --git a/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx b/superset-frontend/spec/javascripts/components/CachedLabel_spec.jsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Label } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import CachedLabel from 'src/components/CachedLabel';
 
 describe('CachedLabel', () => {

diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx
@@ -20,8 +20,9 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import AdhocFilter, {
   EXPRESSION_TYPES,
   CLAUSES,

diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx
@@ -20,8 +20,9 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Label, OverlayTrigger } from 'react-bootstrap';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import AdhocMetric from 'src/explore/AdhocMetric';
 import AdhocMetricOption from 'src/explore/components/AdhocMetricOption';
 import { AGGREGATES } from 'src/explore/constants';

diff --git a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx
@@ -19,9 +19,10 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { mount } from 'enzyme';
-import { Button, Label } from 'react-bootstrap';
+import { styledMount as mount } from 'spec/helpers/theming';
+import { Button } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 

diff --git a/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx b/superset-frontend/spec/javascripts/explore/components/RowCountLabel_spec.jsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Label } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import TooltipWrapper from 'src/components/TooltipWrapper';
 import RowCountLabel from 'src/explore/components/RowCountLabel';
 

diff --git a/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ViewportControl_spec.jsx
@@ -18,9 +18,10 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { shallow } from 'enzyme';
-import { OverlayTrigger, Label } from 'react-bootstrap';
+import { styledMount as mount } from 'spec/helpers/theming';
+import { OverlayTrigger } from 'react-bootstrap';
 
+import Label from 'src/components/Label';
 import ViewportControl from 'src/explore/components/controls/ViewportControl';
 import TextControl from 'src/explore/components/controls/TextControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
@@ -33,13 +34,14 @@ const defaultProps = {
     bearing: 0,
     pitch: 0,
   },
+  name: 'foo',
 };
 
 describe('ViewportControl', () => {
   let wrapper;
   let inst;
   beforeEach(() => {
-    wrapper = shallow(<ViewportControl {...defaultProps} />);
+    wrapper = mount(<ViewportControl {...defaultProps} />);
     inst = wrapper.instance();
   });
 
@@ -50,13 +52,12 @@ describe('ViewportControl', () => {
   });
 
   it('renders a Popover with 5 TextControl', () => {
-    const popOver = shallow(inst.renderPopover());
+    const popOver = mount(inst.renderPopover());
     expect(popOver.find(TextControl)).toHaveLength(5);
   });
 
   it('renders a summary in the label', () => {
-    expect(wrapper.find(Label).first().render().text()).toBe(
-      '6° 51\' 8.50" | 31° 13\' 21.56"',
-    );
+    const label = wrapper.find(Label).first();
+    expect(label.render().text()).toBe('6° 51\' 8.50" | 31° 13\' 21.56"');
   });
 });
diff --git a/superset-frontend/spec/javascripts/profile/Security_spec.tsx b/superset-frontend/spec/javascripts/profile/Security_spec.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import Security from 'src/profile/components/Security';
 
 import { user, userNoPerms } from './fixtures';

diff --git a/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx b/superset-frontend/spec/javascripts/sqllab/LimitControl_spec.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Label } from 'react-bootstrap';
+import Label from 'src/components/Label';
 import LimitControl from 'src/SqlLab/components/LimitControl';
 import ControlHeader from 'src/explore/components/ControlHeader';
 

diff --git a/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryStateLabel_spec.jsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import { Label } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 
+import Label from 'src/components/Label';
 import QueryStateLabel from 'src/SqlLab/components/QueryStateLabel';
 
 describe('SavedQuery', () => {

diff --git a/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { shallow } from 'enzyme';
+import { styledShallow as shallow } from 'spec/helpers/theming';
 import SouthPaneContainer, { SouthPane } from 'src/SqlLab/components/SouthPane';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
@@ -70,6 +70,7 @@ describe('SouthPane', () => {
     actions: {},
     activeSouthPaneTab: '',
     height: 1,
+    displayLimit: 1,
     databases: {},
     offline: false,
   };
@@ -90,7 +91,7 @@ describe('SouthPane', () => {
   it('should render offline when the state is offline', () => {
     wrapper = getWrapper();
     wrapper.setProps({ offline: true });
-    expect(wrapper.find('.m-r-3').render().text()).toBe(STATUS_OPTIONS.offline);
+    expect(wrapper.childAt(0).text()).toBe(STATUS_OPTIONS.offline);
   });
   it('should pass latest query down to ResultSet component', () => {
     wrapper = getWrapper();

diff --git a/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx b/superset-frontend/spec/javascripts/sqllab/Timer_spec.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 
 import Timer from 'src/components/Timer';

diff --git a/superset-frontend/src/SqlLab/components/LimitControl.jsx b/superset-frontend/src/SqlLab/components/LimitControl.jsx
@@ -20,14 +20,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
-  Label,
   FormGroup,
   FormControl,
   Overlay,
   Popover,
 } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
+import Label from 'src/components/Label';
 import ControlHeader from '../../explore/components/ControlHeader';
 
 const propTypes = {
@@ -131,7 +131,7 @@ export default class LimitControl extends React.PureComponent {
   render() {
     return (
       <div>
-        <Label style={{ cursor: 'pointer' }} onClick={this.handleToggle}>
+        <Label className="pointer" onClick={this.handleToggle}>
           LIMIT {this.props.value || this.props.maxRow}
         </Label>
         <Overlay

diff --git a/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx b/superset-frontend/src/SqlLab/components/QueryStateLabel.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from 'react-bootstrap';
+import Label from 'src/components/Label';
 
 import { STATE_BSSTYLE_MAP } from '../constants';
 

diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -20,7 +20,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Table } from 'reactable-arc';
-import { Label, ProgressBar, Well } from 'react-bootstrap';
+import { ProgressBar, Well } from 'react-bootstrap';
+import Label from 'src/components/Label';
 import { t } from '@superset-ui/translation';
 
 import Link from '../../components/Link';
@@ -141,7 +142,7 @@ class QueryTable extends React.PureComponent {
               bsSize="large"
               className="ResultsModal"
               triggerNode={
-                <Label bsStyle="info" style={{ cursor: 'pointer' }}>
+                <Label bsStyle="info" className="pointer">
                   {t('view results')}
                 </Label>
               }

diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx
@@ -19,12 +19,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import shortid from 'shortid';
-import { Alert, Label, Tab, Tabs } from 'react-bootstrap';
+import { Alert, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { t } from '@superset-ui/translation';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
+import Label from 'src/components/Label';
 import * as Actions from '../actions/sqlLab';
 import QueryHistory from './QueryHistory';
 import ResultSet from './ResultSet';

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -24,7 +24,6 @@ import {
   InputGroup,
   Form,
   FormControl,
-  Label,
   OverlayTrigger,
   Tooltip,
 } from 'react-bootstrap';
@@ -33,17 +32,19 @@ import { t } from '@superset-ui/translation';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
-import Button from '../../components/Button';
-import Checkbox from '../../components/Checkbox';
+import Label from 'src/components/Label';
+import Button from 'src/components/Button';
+import Checkbox from 'src/components/Checkbox';
+import Timer from 'src/components/Timer';
+import Hotkeys from 'src/components/Hotkeys';
+
 import LimitControl from './LimitControl';
 import TemplateParamsEditor from './TemplateParamsEditor';
 import SouthPane from './SouthPane';
 import SaveQuery from './SaveQuery';
 import ScheduleQueryButton from './ScheduleQueryButton';
 import EstimateQueryCostButton from './EstimateQueryCostButton';
 import ShareSqlLabQuery from './ShareSqlLabQuery';
-import Timer from '../../components/Timer';
-import Hotkeys from '../../components/Hotkeys';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import {