Fix tests errors and warnings - iteration 7 (#12212) (#12245)

superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
+import fetchMock from 'fetch-mock';
 
 import {
   supersetTheme,
@@ -41,6 +42,21 @@ const dashboardResult = {
   },
 };
 
+fetchMock.restore();
+
+fetchMock.get('glob:*/api/v1/dashboard/related/owners?*', {
+  result: {},
+});
+
+fetchMock.get('glob:*/api/v1/dashboard/*', {
+  result: {
+    dashboard_title: 'New Title',
+    slug: '/new',
+    json_metadata: '{"something":"foo"}',
+    owners: [],
+  },
+});
+
 describe('PropertiesModal', () => {
   afterEach(() => {
     jest.restoreAllMocks();
@@ -84,14 +100,14 @@ describe('PropertiesModal', () => {
       });
       describe('with metadata', () => {
         describe('with color_scheme in the metadata', () => {
-          const wrapper = setup();
-          const modalInstance = wrapper.find('PropertiesModal').instance();
-          modalInstance.setState({
-            values: {
-              json_metadata: '{"color_scheme": "foo"}',
-            },
-          });
           it('will update the metadata', () => {
+            const wrapper = setup();
+            const modalInstance = wrapper.find('PropertiesModal').instance();
+            modalInstance.setState({
+              values: {
+                json_metadata: '{"color_scheme": "foo"}',
+              },
+            });
             const spy = jest.spyOn(modalInstance, 'onMetadataChange');
             modalInstance.onColorSchemeChange('SUPERSET_DEFAULT');
             expect(spy).toHaveBeenCalledWith(

superset-frontend/spec/javascripts/views/CRUD/welcome/Welcome_spec.tsx

@@ -21,15 +21,24 @@ import { styledMount as mount } from 'spec/helpers/theming';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
+import { act } from 'react-dom/test-utils';
 import configureStore from 'redux-mock-store';
 import Welcome from 'src/views/CRUD/welcome/Welcome';
+import { ReactWrapper } from 'enzyme';
 
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
 const chartsEndpoint = 'glob:*/api/v1/chart/?*';
-const dashboardEndpoint = 'glob:*/api/v1/dashboard/?*';
+const chartInfoEndpoint = 'glob:*/api/v1/chart/_info?*';
+const chartFavoriteStatusEndpoint = 'glob:*/api/v1/chart/favorite_status?*';
+const dashboardsEndpoint = 'glob:*/api/v1/dashboard/?*';
+const dashboardInfoEndpoint = 'glob:*/api/v1/dashboard/_info?*';
+const dashboardFavoriteStatusEndpoint =
+  'glob:*/api/v1/dashboard/favorite_status?*';
 const savedQueryEndpoint = 'glob:*/api/v1/saved_query/?*';
+const savedQueryInfoEndpoint = 'glob:*/api/v1/saved_query/_info?*';
+const recentActivityEndpoint = 'glob:*/superset/recent_activity/*';
 
 fetchMock.get(chartsEndpoint, {
   result: [
@@ -43,7 +52,7 @@ fetchMock.get(chartsEndpoint, {
   ],
 });
 
-fetchMock.get(dashboardEndpoint, {
+fetchMock.get(dashboardsEndpoint, {
   result: [
     {
       dashboard_title: 'Dashboard_Test',
@@ -58,6 +67,28 @@ fetchMock.get(savedQueryEndpoint, {
   result: [],
 });
 
+fetchMock.get(recentActivityEndpoint, {});
+
+fetchMock.get(chartInfoEndpoint, {
+  permissions: [],
+});
+
+fetchMock.get(chartFavoriteStatusEndpoint, {
+  result: [],
+});
+
+fetchMock.get(dashboardInfoEndpoint, {
+  permissions: [],
+});
+
+fetchMock.get(dashboardFavoriteStatusEndpoint, {
+  result: [],
+});
+
+fetchMock.get(savedQueryInfoEndpoint, {
+  permissions: [],
+});
+
 describe('Welcome', () => {
   const mockedProps = {
     user: {
@@ -70,11 +101,18 @@ describe('Welcome', () => {
       isActive: true,
     },
   };
-  const wrapper = mount(
-    <Provider store={store}>
-      <Welcome {...mockedProps} />
-    </Provider>,
-  );
+
+  let wrapper: ReactWrapper;
+
+  beforeAll(async () => {
+    await act(async () => {
+      wrapper = mount(
+        <Provider store={store}>
+          <Welcome {...mockedProps} />
+        </Provider>,
+      );
+    });
+  });
 
   it('renders', () => {
     expect(wrapper).toExist();

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

@@ -22,7 +22,9 @@ import { Tooltip } from 'src/common/components/Tooltip';
 import Icon, { IconName } from 'src/components/Icon';
 import { AlertState } from '../types';
 
-const StatusIcon = styled(Icon)<{ status: string; isReportEnabled: boolean }>`
+const StatusIcon = styled(Icon, {
+  shouldForwardProp: prop => prop !== 'status' && prop !== 'isReportEnabled',
+})<{ status: string; isReportEnabled: boolean }>`
   color: ${({ status, theme, isReportEnabled }) => {
     switch (status) {
       case AlertState.working:

superset-frontend/src/views/CRUD/data/query/QueryList.tsx

@@ -80,7 +80,9 @@ const StyledPopoverItem = styled.div`
   color: ${({ theme }) => theme.colors.grayscale.dark2};
 `;
 
-const StatusIcon = styled(Icon)<{ status: string }>`
+const StatusIcon = styled(Icon, {
+  shouldForwardProp: prop => prop !== 'status',
+})<{ status: string }>`
   color: ${({ status, theme }) => {
     if (status === 'success') return theme.colors.success.base;
     if (status === 'failed') return theme.colors.error.base;

superset-frontend/src/views/CRUD/welcome/Welcome.tsx

@@ -62,9 +62,9 @@ const WelcomeContainer = styled.div`
       }
     }
     .nav.navbar-nav {
-      & > li:nth-child(1),
-      & > li:nth-child(2),
-      & > li:nth-child(3) {
+      & > li:nth-of-type(1),
+      & > li:nth-of-type(2),
+      & > li:nth-of-type(3) {
         margin-top: ${({ theme }) => theme.gridUnit * 2}px;
       }
     }