diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx index 8b3ff1d016ab7..a383c8be20cf0 100644 --- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx +++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx @@ -180,11 +180,11 @@ describe('AlertReportModal', () => { expect(wrapper.find('input[name="name"]')).toExist(); }); - it('renders five select elements when in report mode', () => { + it('renders four select elements when in report mode', () => { expect(wrapper.find(Select)).toExist(); expect(wrapper.find(AsyncSelect)).toExist(); expect(wrapper.find(Select)).toHaveLength(2); - expect(wrapper.find(AsyncSelect)).toHaveLength(3); + expect(wrapper.find(AsyncSelect)).toHaveLength(2); }); it('renders Switch element', () => { @@ -220,14 +220,14 @@ describe('AlertReportModal', () => { expect(input.props().initialValue).toEqual('SELECT NaN'); }); - it('renders five select element when in report mode', () => { + it('renders four select element when in report mode', () => { expect(wrapper.find(Select)).toExist(); expect(wrapper.find(AsyncSelect)).toExist(); expect(wrapper.find(Select)).toHaveLength(2); - expect(wrapper.find(AsyncSelect)).toHaveLength(3); + expect(wrapper.find(AsyncSelect)).toHaveLength(2); }); - it('renders seven select elements when in alert mode', async () => { + it('renders six select elements when in alert mode', async () => { const props = { ...mockedProps, isReport: false, @@ -238,7 +238,7 @@ describe('AlertReportModal', () => { expect(addWrapper.find(Select)).toExist(); expect(addWrapper.find(AsyncSelect)).toExist(); expect(addWrapper.find(Select)).toHaveLength(3); - expect(addWrapper.find(AsyncSelect)).toHaveLength(4); + expect(addWrapper.find(AsyncSelect)).toHaveLength(3); }); it('renders value input element when in alert mode', async () => { diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.tsx index 8eeea3d45bcd8..928b2e9567062 100644 --- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.tsx +++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.test.tsx @@ -40,3 +40,37 @@ test('allows change to None in log retention', async () => { // check if None is selected expect(selectedItem).toHaveTextContent('None'); }); + +test('renders the appropriate dropdown in Message Content section', async () => { + render(, { useRedux: true }); + + const chartRadio = screen.getByRole('radio', { name: /chart/i }); + + // Dashboard is initially checked by default + expect( + await screen.findByRole('radio', { + name: /dashboard/i, + }), + ).toBeChecked(); + expect(chartRadio).not.toBeChecked(); + // Only the dashboard dropdown should show + expect(screen.getByRole('combobox', { name: /dashboard/i })).toBeVisible(); + expect( + screen.queryByRole('combobox', { name: /chart/i }), + ).not.toBeInTheDocument(); + + // Click the chart radio option + userEvent.click(chartRadio); + + expect(await screen.findByRole('radio', { name: /chart/i })).toBeChecked(); + expect( + screen.getByRole('radio', { + name: /dashboard/i, + }), + ).not.toBeChecked(); + // Now that chart is checked, only the chart dropdown should show + expect(screen.getByRole('combobox', { name: /chart/i })).toBeVisible(); + expect( + screen.queryByRole('combobox', { name: /dashboard/i }), + ).not.toBeInTheDocument(); +}); diff --git a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx index de5d5cad0659b..b416bdaf5fdf1 100644 --- a/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx +++ b/superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx @@ -1314,40 +1314,38 @@ const AlertReportModal: FunctionComponent = ({ {t('Dashboard')} {t('Chart')} - - + {contentType === 'chart' ? ( + + ) : ( + + )} {formatOptionEnabled && ( <>