sadpandajoe commented on code in PR #35832:
URL: https://github.com/apache/superset/pull/35832#discussion_r2475818917


##########
superset-frontend/src/features/alerts/components/NotificationMethod.test.tsx:
##########
@@ -62,499 +62,681 @@ const mockSettingSlackV2: NotificationSetting = {
   ],
 };
 
-// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from 
describe blocks
-describe('NotificationMethod', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  test('should render the component', () => {
-    render(
-      <NotificationMethod
-        setting={mockSetting}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
-
-    expect(screen.getByText('Notification Method')).toBeInTheDocument();
-    expect(
-      screen.getByText('Email subject name (optional)'),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Email recipients')).toBeInTheDocument();
-  });
+beforeEach(() => {
+  jest.clearAllMocks();
+  cleanup();
+});
 
-  test('should call onRemove when the delete button is clicked', () => {
-    render(
-      <NotificationMethod
-        setting={mockSetting}
-        index={1}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+test('NotificationMethod - should render the component', () => {
+  render(
+    <NotificationMethod
+      setting={mockSetting}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  expect(screen.getByText('Notification Method')).toBeInTheDocument();
+  expect(screen.getByText('Email subject name 
(optional)')).toBeInTheDocument();
+  expect(screen.getByText('Email recipients')).toBeInTheDocument();
+});
 
-    const deleteButton = document.querySelector('.delete-button');
-    if (deleteButton) userEvent.click(deleteButton);
+test('NotificationMethod - should call onRemove when the delete button is 
clicked', () => {
+  render(
+    <NotificationMethod
+      setting={mockSetting}
+      index={1}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  const deleteButton = document.querySelector('.delete-button');
+  if (deleteButton) userEvent.click(deleteButton);
+
+  expect(mockOnRemove).toHaveBeenCalledWith(1);
+});
 
-    expect(mockOnRemove).toHaveBeenCalledWith(1);
+test('NotificationMethod - should update recipient value when input changes', 
() => {
+  render(
+    <NotificationMethod
+      setting={mockSetting}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  const recipientsInput = screen.getByTestId('recipients');
+  fireEvent.change(recipientsInput, {
+    target: { value: '[email protected]' },
   });
 
-  test('should update recipient value when input changes', () => {
-    render(
-      <NotificationMethod
-        setting={mockSetting}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+  expect(mockOnUpdate).toHaveBeenCalledWith(0, {
+    ...mockSetting,
+    recipients: '[email protected]',
+  });
+});
 
-    const recipientsInput = screen.getByTestId('recipients');
-    fireEvent.change(recipientsInput, {
-      target: { value: '[email protected]' },
-    });
+test('NotificationMethod - should call onRecipientsChange when the recipients 
value is changed', () => {
+  render(
+    <NotificationMethod
+      setting={mockSetting}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  const recipientsInput = screen.getByTestId('recipients');
+  fireEvent.change(recipientsInput, {
+    target: { value: '[email protected]' },
+  });
 
-    expect(mockOnUpdate).toHaveBeenCalledWith(0, {
-      ...mockSetting,
-      recipients: '[email protected]',
-    });
+  expect(mockOnUpdate).toHaveBeenCalledWith(0, {
+    ...mockSetting,
+    recipients: '[email protected]',
   });
+});
 
-  test('should call onRecipientsChange when the recipients value is changed', 
() => {
-    render(
-      <NotificationMethod
-        setting={mockSetting}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+test('NotificationMethod - should correctly map recipients when method is 
SlackV2', () => {
+  const method = 'SlackV2';
+  const recipientValue = 'user1,user2';
+  const slackOptions: { label: string; value: string }[] = [
+    { label: 'User One', value: 'user1' },
+    { label: 'User Two', value: 'user2' },
+  ];
 
-    const recipientsInput = screen.getByTestId('recipients');
-    fireEvent.change(recipientsInput, {
-      target: { value: '[email protected]' },
-    });
+  const result = mapSlackValues({ method, recipientValue, slackOptions });
 
-    expect(mockOnUpdate).toHaveBeenCalledWith(0, {
-      ...mockSetting,
-      recipients: '[email protected]',
-    });
-  });
+  expect(result).toEqual([
+    { label: 'User One', value: 'user1' },
+    { label: 'User Two', value: 'user2' },
+  ]);
+});
 
-  test('should correctly map recipients when method is SlackV2', () => {
-    const method = 'SlackV2';
-    const recipientValue = 'user1,user2';
-    const slackOptions: { label: string; value: string }[] = [
-      { label: 'User One', value: 'user1' },
-      { label: 'User Two', value: 'user2' },
-    ];
+test('NotificationMethod - should return an empty array when recipientValue is 
an empty string', () => {
+  const method = 'SlackV2';
+  const recipientValue = '';
+  const slackOptions: { label: string; value: string }[] = [
+    { label: 'User One', value: 'user1' },
+    { label: 'User Two', value: 'user2' },
+  ];
 
-    const result = mapSlackValues({ method, recipientValue, slackOptions });
+  const result = mapSlackValues({ method, recipientValue, slackOptions });
 
-    expect(result).toEqual([
-      { label: 'User One', value: 'user1' },
-      { label: 'User Two', value: 'user2' },
-    ]);
-  });
+  expect(result).toEqual([]);
+});
 
-  test('should return an empty array when recipientValue is an empty string', 
() => {
-    const method = 'SlackV2';
-    const recipientValue = '';
-    const slackOptions: { label: string; value: string }[] = [
-      { label: 'User One', value: 'user1' },
-      { label: 'User Two', value: 'user2' },
-    ];
+test('NotificationMethod - should correctly map recipients when method is 
Slack with updated recipient values', () => {
+  const method = 'Slack';
+  const recipientValue = 'User One,User Two';
+  const slackOptions: { label: string; value: string }[] = [
+    { label: 'User One', value: 'user1' },
+    { label: 'User Two', value: 'user2' },
+  ];
 
-    const result = mapSlackValues({ method, recipientValue, slackOptions });
+  const result = mapSlackValues({ method, recipientValue, slackOptions });
 
-    expect(result).toEqual([]);
-  });
+  expect(result).toEqual([
+    { label: 'User One', value: 'user1' },
+    { label: 'User Two', value: 'user2' },
+  ]);
+});
 
-  test('should correctly map recipients when method is Slack with updated 
recipient values', () => {
-    const method = 'Slack';
-    const recipientValue = 'User One,User Two';
-    const slackOptions: { label: string; value: string }[] = [
-      { label: 'User One', value: 'user1' },
-      { label: 'User Two', value: 'user2' },
-    ];
+test('NotificationMethod - should render CC and BCC fields when method is 
Email and visibility flags are true', () => {
+  const defaultProps = {
+    setting: {
+      method: NotificationMethodOption.Email,
+      recipients: '[email protected], [email protected]',
+      cc: '[email protected]',
+      bcc: '[email protected]',
+      options: [NotificationMethodOption.Email, 
NotificationMethodOption.Slack],
+    },
+    index: 0,
+    onUpdate: jest.fn(),
+    onRemove: jest.fn(),
+    onInputChange: jest.fn(),
+    email_subject: 'Test Subject',
+    defaultSubject: 'Default Subject',
+    setErrorSubject: jest.fn(),
+  };
+
+  const { getByTestId } = render(<NotificationMethod {...defaultProps} />);
+
+  // Check if CC and BCC fields are rendered
+  expect(getByTestId('cc')).toBeInTheDocument();
+  expect(getByTestId('bcc')).toBeInTheDocument();
+});
 
-    const result = mapSlackValues({ method, recipientValue, slackOptions });
+test('NotificationMethod - should render CC and BCC fields with correct values 
when method is Email', () => {
+  const defaultProps = {
+    setting: {
+      method: NotificationMethodOption.Email,
+      recipients: '[email protected], [email protected]',
+      cc: '[email protected]',
+      bcc: '[email protected]',
+      options: [NotificationMethodOption.Email, 
NotificationMethodOption.Slack],
+    },
+    index: 0,
+    onUpdate: jest.fn(),
+    onRemove: jest.fn(),
+    onInputChange: jest.fn(),
+    email_subject: 'Test Subject',
+    defaultSubject: 'Default Subject',
+    setErrorSubject: jest.fn(),
+  };
+
+  const { getByTestId } = render(<NotificationMethod {...defaultProps} />);
+
+  // Check if CC and BCC fields are rendered with correct values
+  expect(getByTestId('cc')).toHaveValue('[email protected]');
+  expect(getByTestId('bcc')).toHaveValue('[email protected]');
+});
 
-    expect(result).toEqual([
-      { label: 'User One', value: 'user1' },
-      { label: 'User Two', value: 'user2' },
-    ]);
-  });
-  test('should render CC and BCC fields when method is Email and visibility 
flags are true', () => {
-    const defaultProps = {
-      setting: {
-        method: NotificationMethodOption.Email,
-        recipients: '[email protected], [email protected]',
-        cc: '[email protected]',
-        bcc: '[email protected]',
-        options: [
-          NotificationMethodOption.Email,
-          NotificationMethodOption.Slack,
-        ],
-      },
-      index: 0,
-      onUpdate: jest.fn(),
-      onRemove: jest.fn(),
-      onInputChange: jest.fn(),
-      email_subject: 'Test Subject',
-      defaultSubject: 'Default Subject',
-      setErrorSubject: jest.fn(),
-    };
-
-    const { getByTestId } = render(<NotificationMethod {...defaultProps} />);
-
-    // Check if CC and BCC fields are rendered
-    expect(getByTestId('cc')).toBeInTheDocument();
-    expect(getByTestId('bcc')).toBeInTheDocument();
-  });
-  test('should render CC and BCC fields with correct values when method is 
Email', () => {
-    const defaultProps = {
-      setting: {
-        method: NotificationMethodOption.Email,
-        recipients: '[email protected], [email protected]',
-        cc: '[email protected]',
-        bcc: '[email protected]',
-        options: [
-          NotificationMethodOption.Email,
-          NotificationMethodOption.Slack,
-        ],
-      },
-      index: 0,
-      onUpdate: jest.fn(),
-      onRemove: jest.fn(),
-      onInputChange: jest.fn(),
-      email_subject: 'Test Subject',
-      defaultSubject: 'Default Subject',
-      setErrorSubject: jest.fn(),
-    };
-
-    const { getByTestId } = render(<NotificationMethod {...defaultProps} />);
-
-    // Check if CC and BCC fields are rendered with correct values
-    expect(getByTestId('cc')).toHaveValue('[email protected]');
-    expect(getByTestId('bcc')).toHaveValue('[email protected]');
-  });
-  test('should not render CC and BCC fields when method is not Email', () => {
-    const defaultProps = {
-      setting: {
-        method: NotificationMethodOption.Slack,
-        recipients: '[email protected], [email protected]',
-        cc: '[email protected]',
-        bcc: '[email protected]',
-        options: [
-          NotificationMethodOption.Email,
-          NotificationMethodOption.Slack,
-        ],
-      },
-      index: 0,
-      onUpdate: jest.fn(),
-      onRemove: jest.fn(),
-      onInputChange: jest.fn(),
-      email_subject: 'Test Subject',
-      defaultSubject: 'Default Subject',
-      setErrorSubject: jest.fn(),
-    };
-
-    const { queryByTestId } = render(<NotificationMethod {...defaultProps} />);
-
-    // Check if CC and BCC fields are not rendered
-    expect(queryByTestId('cc')).not.toBeInTheDocument();
-    expect(queryByTestId('bcc')).not.toBeInTheDocument();
-  });
-  // Handle empty recipients list gracefully
-  test('should handle empty recipients list gracefully', () => {
-    const defaultProps = {
-      setting: {
-        method: NotificationMethodOption.Email,
-        recipients: '',
-        cc: '',
-        bcc: '',
-        options: [
-          NotificationMethodOption.Email,
-          NotificationMethodOption.Slack,
-        ],
-      },
-      index: 0,
-      onUpdate: jest.fn(),
-      onRemove: jest.fn(),
-      onInputChange: jest.fn(),
-      email_subject: 'Test Subject',
-      defaultSubject: 'Default Subject',
-      setErrorSubject: jest.fn(),
-    };
-
-    const { queryByTestId } = render(<NotificationMethod {...defaultProps} />);
-
-    // Check if CC and BCC fields are not rendered
-    expect(queryByTestId('cc')).not.toBeInTheDocument();
-    expect(queryByTestId('bcc')).not.toBeInTheDocument();
-  });
-  test('shows the right combo when ff is false', async () => {
-    /* should show the div with "Recipients are separated by"
+test('NotificationMethod - should not render CC and BCC fields when method is 
not Email', () => {
+  const defaultProps = {
+    setting: {
+      method: NotificationMethodOption.Slack,
+      recipients: '[email protected], [email protected]',
+      cc: '[email protected]',
+      bcc: '[email protected]',
+      options: [NotificationMethodOption.Email, 
NotificationMethodOption.Slack],
+    },
+    index: 0,
+    onUpdate: jest.fn(),
+    onRemove: jest.fn(),
+    onInputChange: jest.fn(),
+    email_subject: 'Test Subject',
+    defaultSubject: 'Default Subject',
+    setErrorSubject: jest.fn(),
+  };
+
+  const { queryByTestId } = render(<NotificationMethod {...defaultProps} />);
+
+  // Check if CC and BCC fields are not rendered
+  expect(queryByTestId('cc')).not.toBeInTheDocument();
+  expect(queryByTestId('bcc')).not.toBeInTheDocument();
+});
+// Handle empty recipients list gracefully
+test('NotificationMethod - should handle empty recipients list gracefully', () 
=> {
+  const defaultProps = {
+    setting: {
+      method: NotificationMethodOption.Email,
+      recipients: '',
+      cc: '',
+      bcc: '',
+      options: [NotificationMethodOption.Email, 
NotificationMethodOption.Slack],
+    },
+    index: 0,
+    onUpdate: jest.fn(),
+    onRemove: jest.fn(),
+    onInputChange: jest.fn(),
+    email_subject: 'Test Subject',
+    defaultSubject: 'Default Subject',
+    setErrorSubject: jest.fn(),
+  };
+
+  const { queryByTestId } = render(<NotificationMethod {...defaultProps} />);
+
+  // Check if CC and BCC fields are not rendered
+  expect(queryByTestId('cc')).not.toBeInTheDocument();
+  expect(queryByTestId('bcc')).not.toBeInTheDocument();
+});
+
+test('shows the right combo when ff is false', async () => {
+  /* should show the div with "Recipients are separated by"
     when FeatureFlag.AlertReportSlackV2 is false and fetchSlackChannels errors
     */
-    // Mock the feature flag to be false
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: false };
-
-    // Mock the SupersetClient.get to simulate an error
-    jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
-      throw new Error('Error fetching Slack channels');
-    });
+  // Mock the feature flag to be false
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: false };
 
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSetting,
-          method: NotificationMethodOption.Slack,
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+  // Mock the SupersetClient.get to simulate an error
+  jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
+    throw new Error('Error fetching Slack channels');
+  });
 
-    // Wait for the component to handle the error and render the expected div
-    await waitFor(() => {
-      expect(
-        screen.getByText('Recipients are separated by "," or ";"'),
-      ).toBeInTheDocument();
-    });
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSetting,
+        method: NotificationMethodOption.Slack,
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for the component to handle the error and render the expected div
+  await waitFor(() => {
+    expect(
+      screen.getByText('Recipients are separated by "," or ";"'),
+    ).toBeInTheDocument();
   });
-  test('shows the textbox when the fetch fails', async () => {
-    /* should show the div with "Recipients are separated by"
+});
+
+test('shows the textbox when the fetch fails', async () => {
+  /* should show the div with "Recipients are separated by"
     when FeatureFlag.AlertReportSlackV2 is true and fetchSlackChannels errors
     */
 
-    // Mock the feature flag to be false
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: false };
-
-    // Mock the SupersetClient.get to simulate an error
-    jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
-      throw new Error('Error fetching Slack channels');
-    });
+  // Mock the feature flag to be false
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: false };
 
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSetting,
-          method: NotificationMethodOption.Slack,
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+  // Mock the SupersetClient.get to simulate an error
+  jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
+    throw new Error('Error fetching Slack channels');
+  });
 
-    // Wait for the component to handle the error and render the expected div
-    await waitFor(() => {
-      expect(
-        screen.getByText('Recipients are separated by "," or ";"'),
-      ).toBeInTheDocument();
-    });
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSetting,
+        method: NotificationMethodOption.Slack,
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for the component to handle the error and render the expected div
+  await waitFor(() => {
+    expect(
+      screen.getByText('Recipients are separated by "," or ";"'),
+    ).toBeInTheDocument();
   });
-  test('shows the dropdown when ff is true and slackChannels succeed', async 
() => {
-    /* should show the Select channels dropdown
+});
+
+test('shows the dropdown when ff is true and slackChannels succeed', async () 
=> {
+  /* should show the Select channels dropdown
     when FeatureFlag.AlertReportSlackV2 is true and fetchSlackChannels succeeds
     */
-    // Mock the feature flag to be false
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
-
-    // Mock the SupersetClient.get to simulate an error
-    jest
-      .spyOn(SupersetClient, 'get')
-      .mockImplementation(
-        () =>
-          Promise.resolve({ json: { result: [] } }) as unknown as Promise<
-            Response | JsonResponse | TextResponse
-          >,
-      );
-
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSetting,
-          method: NotificationMethodOption.SlackV2,
-          recipients: 'slack-channel',
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
+  // Mock the feature flag to be false
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+
+  // Mock the SupersetClient.get to simulate an error
+  jest
+    .spyOn(SupersetClient, 'get')
+    .mockImplementation(
+      () =>
+        Promise.resolve({ json: { result: [] } }) as unknown as Promise<
+          Response | JsonResponse | TextResponse
+        >,
     );
 
-    // Wait for the component to handle the error and render the expected div
-    await waitFor(() => {
-      expect(screen.getByTitle('Slack')).toBeInTheDocument();
-    });
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSetting,
+        method: NotificationMethodOption.SlackV2,
+        recipients: 'slack-channel',
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for the component to handle the error and render the expected div
+  await waitFor(() => {
+    expect(screen.getByTitle('Slack')).toBeInTheDocument();
   });
-  test('shows the textarea when ff is true and slackChannels fail', async () 
=> {
-    /* should show the Select channels dropdown
+});
+
+test('shows the textarea when ff is true and slackChannels fail', async () => {
+  /* should show the Select channels dropdown
     when FeatureFlag.AlertReportSlackV2 is true and fetchSlackChannels succeeds
     */
-    // Mock the feature flag to be false
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  // Mock the feature flag to be false
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
 
-    // Mock the SupersetClient.get to simulate an error
-    jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
-      throw new Error('Error fetching Slack channels');
-    });
+  // Mock the SupersetClient.get to simulate an error
+  jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
+    throw new Error('Error fetching Slack channels');
+  });
 
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSetting,
-          method: NotificationMethodOption.Slack,
-          recipients: 'slack-channel',
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSetting,
+        method: NotificationMethodOption.Slack,
+        recipients: 'slack-channel',
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for the component to handle the error and render the expected div
+  expect(
+    screen.getByText('Recipients are separated by "," or ";"'),
+  ).toBeInTheDocument();
+});
 
-    // Wait for the component to handle the error and render the expected div
-    expect(
-      screen.getByText('Recipients are separated by "," or ";"'),
-    ).toBeInTheDocument();
-  });
-  test('shows the textarea when ff is true and slackChannels fail and slack is 
selected', async () => {
-    /* should show the Select channels dropdown
+test('shows the textarea when ff is true and slackChannels fail and slack is 
selected', async () => {
+  /* should show the Select channels dropdown
     when FeatureFlag.AlertReportSlackV2 is true and fetchSlackChannels succeeds
     */
-    // Mock the feature flag to be false
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  // Mock the feature flag to be false
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
 
-    // Mock the SupersetClient.get to simulate an error
-    jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
-      throw new Error('Error fetching Slack channels');
-    });
+  // Mock the SupersetClient.get to simulate an error
+  jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
+    throw new Error('Error fetching Slack channels');
+  });
 
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSetting,
-          method: NotificationMethodOption.Slack,
-          recipients: 'slack-channel',
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
-    );
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSetting,
+        method: NotificationMethodOption.Slack,
+        recipients: 'slack-channel',
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for the component to handle the error and render the expected div
+  expect(
+    screen.getByText('Recipients are separated by "," or ";"'),
+  ).toBeInTheDocument();
+});
 
-    // Wait for the component to handle the error and render the expected div
-    expect(
-      screen.getByText('Recipients are separated by "," or ";"'),
-    ).toBeInTheDocument();
+test('shows the textarea when ff is true, slackChannels fail and slack is 
selected', async () => {
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
+    throw new Error('Error fetching Slack channels');
   });
 
-  test('shows the textarea when ff is true, slackChannels fail and slack is 
selected', async () => {
-    window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
-    jest.spyOn(SupersetClient, 'get').mockImplementation(() => {
-      throw new Error('Error fetching Slack channels');
-    });
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSettingSlackV2,
+        method: NotificationMethodOption.Slack,
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  expect(
+    screen.getByText('Recipients are separated by "," or ";"'),
+  ).toBeInTheDocument();
+});
 
-    render(
-      <NotificationMethod
-        setting={{
-          ...mockSettingSlackV2,
-          method: NotificationMethodOption.Slack,
-        }}
-        index={0}
-        onUpdate={mockOnUpdate}
-        onRemove={mockOnRemove}
-        onInputChange={mockOnInputChange}
-        email_subject={mockEmailSubject}
-        defaultSubject={mockDefaultSubject}
-        setErrorSubject={mockSetErrorSubject}
-      />,
+test('NotificationMethod - AsyncSelect should render for SlackV2 method', 
async () => {
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  const mockChannels = [
+    { name: 'general', id: 'C001', is_private: false, is_member: true },
+    { name: 'random', id: 'C002', is_private: false, is_member: true },
+  ];
+
+  jest.spyOn(SupersetClient, 'get').mockResolvedValue({
+    json: {
+      result: mockChannels,
+      next_cursor: null,
+      has_more: false,
+    },
+  } as unknown as Promise<Response | JsonResponse | TextResponse>);
+
+  render(
+    <NotificationMethod
+      setting={mockSettingSlackV2}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Verify AsyncSelect is rendered for SlackV2
+  await waitFor(() => {
+    expect(screen.getByTitle('Slack')).toBeInTheDocument();
+  });
+});
+
+test('NotificationMethod - AsyncSelect should handle SlackV2 with valid API 
response', async () => {
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  const mockChannels = [
+    {
+      name: 'test-channel',
+      id: 'C123',
+      is_private: false,
+      is_member: true,
+    },
+  ];
+
+  jest.spyOn(SupersetClient, 'get').mockResolvedValue({
+    json: {
+      result: mockChannels,
+      next_cursor: null,
+      has_more: false,
+    },
+  } as unknown as Promise<Response | JsonResponse | TextResponse>);
+
+  const { container } = render(
+    <NotificationMethod
+      setting={mockSettingSlackV2}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Verify AsyncSelect container is present (not a textarea)
+  await waitFor(() => {
+    const textarea = container.querySelector(
+      'textarea[data-test="recipients"]',
     );
+    expect(textarea).toBeNull(); // Should NOT have textarea for SlackV2
+  });
+});
 
-    expect(
-      screen.getByText('Recipients are separated by "," or ";"'),
-    ).toBeInTheDocument();
+test('NotificationMethod - AsyncSelect should render refresh button for 
SlackV2', async () => {
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  const mockChannels = [
+    {
+      name: 'test-channel',
+      id: 'C123',
+      is_private: false,
+      is_member: true,
+    },
+  ];
+
+  jest.spyOn(SupersetClient, 'get').mockResolvedValue({
+    json: {
+      result: mockChannels,
+      next_cursor: null,
+      has_more: false,
+    },
+  } as unknown as Promise<Response | JsonResponse | TextResponse>);
+
+  render(
+    <NotificationMethod
+      setting={mockSettingSlackV2}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Verify refresh button is present (icon only button)
+  await waitFor(() => {
+    const refreshButton = screen.getByTestId('refresh-slack-channels');
+    expect(refreshButton).toBeInTheDocument();
+    expect(refreshButton).toHaveAttribute('title', 'Refresh channels');
+  });
+});
+
+test('NotificationMethod - AsyncSelect should clear recipients and reload 
channels when refresh button clicked', async () => {
+  window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
+  const mockChannels = [
+    {
+      name: 'test-channel',
+      id: 'C123',
+      is_private: false,
+      is_member: true,
+    },
+  ];
+
+  jest.spyOn(SupersetClient, 'get').mockResolvedValue({
+    json: {
+      result: mockChannels,
+      next_cursor: null,
+      has_more: false,
+    },
+  } as unknown as Promise<Response | JsonResponse | TextResponse>);
+
+  render(
+    <NotificationMethod
+      setting={{
+        ...mockSettingSlackV2,
+        recipients: 'C123', // Pre-existing recipient
+      }}
+      index={0}
+      onUpdate={mockOnUpdate}
+      onRemove={mockOnRemove}
+      onInputChange={mockOnInputChange}
+      email_subject={mockEmailSubject}
+      defaultSubject={mockDefaultSubject}
+      setErrorSubject={mockSetErrorSubject}
+    />,
+  );
+
+  // Wait for initial render
+  await waitFor(() => {
+    expect(screen.getByTestId('refresh-slack-channels')).toBeInTheDocument();
   });
 
-  // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from 
describe blocks
-  describe('RefreshLabel functionality', () => {
-    test('should call updateSlackOptions with force true when RefreshLabel is 
clicked', async () => {
-      // Set feature flag so that SlackV2 branch renders RefreshLabel
-      window.featureFlags = { [FeatureFlag.AlertReportSlackV2]: true };
-      // Spy on SupersetClient.get which is called by updateSlackOptions
-      const supersetClientSpy = jest
-        .spyOn(SupersetClient, 'get')
-        .mockImplementation(
-          () =>
-            Promise.resolve({ json: { result: [] } }) as unknown as Promise<
-              Response | JsonResponse | TextResponse
-            >,
-        );
-
-      render(
-        <NotificationMethod
-          setting={mockSettingSlackV2}
-          index={0}
-          onUpdate={mockOnUpdate}
-          onRemove={mockOnRemove}
-          onInputChange={mockOnInputChange}
-          email_subject={mockEmailSubject}
-          defaultSubject={mockDefaultSubject}
-          setErrorSubject={mockSetErrorSubject}
-        />,
-      );
-
-      // Wait for RefreshLabel to be rendered (it may have a tooltip with the 
provided content)
-      const refreshLabel = await waitFor(() => screen.getByLabelText('sync'));
-      // Simulate a click on the RefreshLabel
-      userEvent.click(refreshLabel);
-      // Verify that the SupersetClient.get was called indicating that 
updateSlackOptions executed
-      await waitFor(() => {
-        expect(supersetClientSpy).toHaveBeenCalled();
-      });
+  // Click refresh button
+  const refreshButton = screen.getByTestId('refresh-slack-channels');
+  fireEvent.click(refreshButton);
+
+  // Verify onUpdate was called with empty recipients
+  await waitFor(() => {
+    expect(mockOnUpdate).toHaveBeenCalledWith(
+      0,
+      expect.objectContaining({
+        recipients: '',

Review Comment:
   Is this right that we want recipients to be empty? If I have already 
selected say a channel on page 1, refresh to get more, would it clear out my 
selections?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]


Reply via email to