update test (#13463)

superset-frontend/spec/javascripts/views/CRUD/alert/AlertReportModal_spec.jsx

@@ -21,6 +21,7 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import { act } from 'react-dom/test-utils';
 import AlertReportModal from 'src/views/CRUD/alert/AlertReportModal';
 import Modal from 'src/common/components/Modal';
 import { AsyncSelect } from 'src/components/Select';
@@ -32,11 +33,13 @@ import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { styledMount as mount } from 'spec/helpers/theming';
 
 const mockData = {
+  active: true,
   id: 1,
   name: 'test report',
   description: 'test report description',
   chart: { id: 1, slice_name: 'test chart' },
   database: { id: 1, database_name: 'test database' },
+  sql: 'SELECT NaN',
 };
 const FETCH_REPORT_ENDPOINT = 'glob:*/api/v1/report/*';
 const REPORT_PAYLOAD = { result: mockData };
@@ -211,6 +214,19 @@ describe('AlertReportModal', () => {
     expect(addWrapper.find(TextAreaControl)).toExist();
   });
 
+  it('renders input element for sql with NaN', async () => {
+    const props = {
+      ...mockedProps,
+      alert: mockData,
+      isReport: false,
+    };
+
+    const editWrapper = await mountAndWait(props);
+    const input = editWrapper.find(TextAreaControl);
+    expect(input).toExist();
+    expect(input.props().value).toEqual('SELECT NaN');
+  });
+
   it('renders one select element when in report mode', () => {
     expect(wrapper.find(Select)).toExist();
     expect(wrapper.find(Select)).toHaveLength(1);
@@ -295,4 +311,25 @@ describe('AlertReportModal', () => {
     });
     expect(input.instance().value).toEqual('1');
   });
+
+  it('allows to add notification method', async () => {
+    const button = wrapper.find('[data-test="notification-add"]');
+    act(() => {
+      button.props().onClick();
+    });
+    await waitForComponentToPaint(wrapper);
+
+    expect(
+      wrapper.find('[data-test="notification-add"]').props().status,
+    ).toEqual('disabled');
+    act(() => {
+      wrapper
+        .find('[data-test="select-delivery-method"]')
+        .last()
+        .props()
+        .onChange('Email');
+    });
+    await waitForComponentToPaint(wrapper);
+    expect(wrapper.find('textarea[name="recipients"]')).toHaveLength(1);
+  });
 });

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -418,7 +418,6 @@ const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
   const onMethodChange = (method: NotificationMethod) => {
     // Since we're swapping the method, reset the recipients
     setRecipientValue('');
-
     if (onUpdate) {
       const updatedSetting = {
         ...setting,
@@ -464,6 +463,7 @@ const NotificationMethod: FunctionComponent<NotificationMethodProps> = ({
         <StyledInputContainer>
           <div className="input-container">
             <Select
+              data-test="select-delivery-method"
               onChange={onMethodChange}
               placeholder="Select Delivery Method"
               defaultValue={method}
@@ -585,8 +585,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     clearError();
     setIsHidden(true);
     onHide();
-    setCurrentAlert({ ...DEFAULT_ALERT });
     setNotificationSettings([]);
+    setCurrentAlert({ ...DEFAULT_ALERT });
+    setNotificationAddState('active');
   };
 
   const onSave = () => {
@@ -996,6 +997,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       }));
 
       setNotificationSettings(settings);
+      setNotificationAddState(
+        settings.length === NOTIFICATION_METHODS.length ? 'hidden' : 'active',
+      );
       setContentType(resource.chart ? 'chart' : 'dashboard');
 
       const validatorConfig =
@@ -1123,7 +1127,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               {t('Owners')}
               <span className="required">*</span>
             </div>
-            <div className="input-container">
+            <div data-test="owners-select" className="input-container">
               <AsyncSelect
                 name="owners"
                 isMulti
@@ -1395,6 +1399,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
               onRemove={removeNotificationSetting}
             />
             <NotificationMethodAdd
+              data-test="notification-add"
               status={notificationAddState}
               onClick={onNotificationAdd}
             />