Migrates Button component from Bootstrap to AntD (#12832)

superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
 import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import AddSliceContainer, {
@@ -25,6 +25,7 @@ import AddSliceContainer, {
   AddSliceContainerState,
 } from 'src/addSlice/AddSliceContainer';
 import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
+import { styledMount as mount } from 'spec/helpers/theming';
 
 const defaultProps = {
   datasources: [
@@ -34,14 +35,18 @@ const defaultProps = {
 };
 
 describe('AddSliceContainer', () => {
-  let wrapper: ShallowWrapper<
+  let wrapper: ReactWrapper<
     AddSliceContainerProps,
     AddSliceContainerState,
     AddSliceContainer
   >;
 
   beforeEach(() => {
-    wrapper = shallow(<AddSliceContainer {...defaultProps} />);
+    wrapper = mount(<AddSliceContainer {...defaultProps} />) as ReactWrapper<
+      AddSliceContainerProps,
+      AddSliceContainerState,
+      AddSliceContainer
+    >;
   });
 
   it('uses table as default visType', () => {
@@ -58,9 +63,9 @@ describe('AddSliceContainer', () => {
   });
 
   it('renders a disabled button if no datasource is selected', () => {
-    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      1,
-    );
+    expect(
+      wrapper.find(Button).find({ disabled: true }).hostNodes(),
+    ).toHaveLength(1);
   });
 
   it('renders an enabled button if datasource is selected', () => {
@@ -70,9 +75,9 @@ describe('AddSliceContainer', () => {
       datasourceId: datasourceValue.split('__')[0],
       datasourceType: datasourceValue.split('__')[1],
     });
-    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      0,
-    );
+    expect(
+      wrapper.find(Button).find({ disabled: true }).hostNodes(),
+    ).toHaveLength(0);
   });
 
   it('formats explore url', () => {

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/FilterBar_spec.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { styledMount as mount } from 'spec/helpers/theming';
 import { Provider } from 'react-redux';
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
+import Button from 'src/components/Button';
 import { mockStore } from 'spec/fixtures/mockStore';
 
 describe('FilterBar', () => {
@@ -42,7 +43,8 @@ describe('FilterBar', () => {
     expect(wrapper.find({ name: 'collapse' })).toExist();
   });
   it('has apply and reset all buttons', () => {
-    expect(wrapper.find('.btn-primary')).toExist();
-    expect(wrapper.find('.btn-secondary')).toExist();
+    expect(wrapper.find(Button).length).toBe(2);
+    expect(wrapper.find(Button).at(0)).toHaveProp('buttonStyle', 'secondary');
+    expect(wrapper.find(Button).at(1)).toHaveProp('buttonStyle', 'primary');
   });
 });

superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { shallow } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 
 import QueryAndSaveButtons from 'src/explore/components/QueryAndSaveBtns';
@@ -38,23 +38,21 @@ describe('QueryAndSaveButtons', () => {
 
   // Test the output
   describe('output', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<QueryAndSaveButtons {...defaultProps} />);
-    });
+    const wrapper = mount(<QueryAndSaveButtons {...defaultProps} />);
 
     it('renders 2 buttons', () => {
       expect(wrapper.find(Button)).toHaveLength(2);
     });
 
     it('renders buttons with correct text', () => {
-      expect(wrapper.find(Button).contains('Run')).toBe(true);
-      expect(wrapper.find(Button).contains('Save')).toBe(true);
+      expect(wrapper.find(Button).at(0).text().trim()).toBe('Run');
+      expect(wrapper.find(Button).at(1).text().trim()).toBe('Save');
     });
 
     it('calls onQuery when query button is clicked', () => {
-      const queryButton = wrapper.find('[data-test="run-query-button"]');
+      const queryButton = wrapper
+        .find('[data-test="run-query-button"]')
+        .hostNodes();
       queryButton.simulate('click');
       expect(defaultProps.onQuery.called).toBe(true);
     });