mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
fix: updates to alert/report modal + more tests (#12045)
Co-authored-by: Tai Dupree <tdupreetan@gmail.com>
This commit is contained in:
parent
17cd174bbf
commit
1cf4a1b3ea
@ -23,6 +23,10 @@ import configureStore from 'redux-mock-store';
|
|||||||
import fetchMock from 'fetch-mock';
|
import fetchMock from 'fetch-mock';
|
||||||
import AlertReportModal from 'src/views/CRUD/alert/AlertReportModal';
|
import AlertReportModal from 'src/views/CRUD/alert/AlertReportModal';
|
||||||
import Modal from 'src/common/components/Modal';
|
import Modal from 'src/common/components/Modal';
|
||||||
|
import { AsyncSelect } from 'src/components/Select';
|
||||||
|
import { Radio } from 'src/common/components/Radio';
|
||||||
|
import { GraySelect as Select } from 'src/common/components/Select';
|
||||||
|
import { Switch } from 'src/common/components/Switch';
|
||||||
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
|
||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
import { styledMount as mount } from 'spec/helpers/theming';
|
||||||
|
|
||||||
@ -49,10 +53,10 @@ const mockedProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Related mocks
|
// Related mocks
|
||||||
const ownersEndpoint = 'glob:*/api/v1/dashboard/related/owners?*';
|
const ownersEndpoint = 'glob:*/api/v1/alert/related/owners?*';
|
||||||
const databaseEndpoint = 'glob:*/api/v1/dataset/related/database?*';
|
const databaseEndpoint = 'glob:*/api/v1/alert/related/database?*';
|
||||||
const dashboardEndpoint = 'glob:*/api/v1/dashboard?*';
|
const dashboardEndpoint = 'glob:*/api/v1/alert/related/dashboard?*';
|
||||||
const chartEndpoint = 'glob:*/api/v1/chart?*';
|
const chartEndpoint = 'glob:*/api/v1/alert/related/chart?*';
|
||||||
|
|
||||||
fetchMock.get(ownersEndpoint, {
|
fetchMock.get(ownersEndpoint, {
|
||||||
result: [],
|
result: [],
|
||||||
@ -127,11 +131,87 @@ describe('AlertReportModal', () => {
|
|||||||
).toEqual('Edit Report');
|
).toEqual('Edit Report');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Fields
|
||||||
it('renders input element for name', () => {
|
it('renders input element for name', () => {
|
||||||
expect(wrapper.find('input[name="name"]')).toExist();
|
expect(wrapper.find('input[name="name"]')).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders three async select elements when in report mode', () => {
|
||||||
|
expect(wrapper.find(AsyncSelect)).toExist();
|
||||||
|
expect(wrapper.find(AsyncSelect)).toHaveLength(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders four async select elements when in alert mode', async () => {
|
||||||
|
const props = {
|
||||||
|
...mockedProps,
|
||||||
|
isReport: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const addWrapper = await mountAndWait(props);
|
||||||
|
|
||||||
|
expect(addWrapper.find(AsyncSelect)).toExist();
|
||||||
|
expect(addWrapper.find(AsyncSelect)).toHaveLength(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders Switch element', () => {
|
||||||
|
expect(wrapper.find(Switch)).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
it('renders input element for description', () => {
|
it('renders input element for description', () => {
|
||||||
expect(wrapper.find('input[name="description"]')).toExist();
|
expect(wrapper.find('input[name="description"]')).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders input element for sql in alert mode only', async () => {
|
||||||
|
const props = {
|
||||||
|
...mockedProps,
|
||||||
|
isReport: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const addWrapper = await mountAndWait(props);
|
||||||
|
|
||||||
|
expect(wrapper.find('textarea[name="sql"]')).toHaveLength(0);
|
||||||
|
expect(addWrapper.find('textarea[name="sql"]')).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders one select element when in report mode', () => {
|
||||||
|
expect(wrapper.find(Select)).toExist();
|
||||||
|
expect(wrapper.find(Select)).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders two select elements when in alert mode', async () => {
|
||||||
|
const props = {
|
||||||
|
...mockedProps,
|
||||||
|
isReport: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const addWrapper = await mountAndWait(props);
|
||||||
|
|
||||||
|
expect(addWrapper.find(Select)).toExist();
|
||||||
|
expect(addWrapper.find(Select)).toHaveLength(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders value input element when in alert mode', async () => {
|
||||||
|
const props = {
|
||||||
|
...mockedProps,
|
||||||
|
isReport: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const addWrapper = await mountAndWait(props);
|
||||||
|
|
||||||
|
expect(wrapper.find('input[name="threshold"]')).toHaveLength(0);
|
||||||
|
expect(addWrapper.find('input[name="threshold"]')).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders four radio buttons', () => {
|
||||||
|
expect(wrapper.find(Radio)).toExist();
|
||||||
|
expect(wrapper.find(Radio)).toHaveLength(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders input element for working timeout', () => {
|
||||||
|
expect(wrapper.find('input[name="working_timeout"]')).toExist();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders input element for grace period', () => {
|
||||||
|
expect(wrapper.find('input[name="grace_period"]')).toExist();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -225,7 +225,7 @@ export const StyledInputContainer = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
height: 160px;
|
height: 300px;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -246,6 +246,11 @@ export const StyledInputContainer = styled.div`
|
|||||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||||
|
|
||||||
|
.ant-select-selection-placeholder,
|
||||||
|
.ant-select-selection-item {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
&[name='description'] {
|
&[name='description'] {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
@ -1023,12 +1028,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
className="no-content-padding"
|
className="no-content-padding"
|
||||||
|
responsive
|
||||||
disablePrimaryButton={disableSave}
|
disablePrimaryButton={disableSave}
|
||||||
onHandledPrimaryAction={onSave}
|
onHandledPrimaryAction={onSave}
|
||||||
onHide={hide}
|
onHide={hide}
|
||||||
primaryButtonName={isEditMode ? t('Save') : t('Add')}
|
primaryButtonName={isEditMode ? t('Save') : t('Add')}
|
||||||
show={show}
|
show={show}
|
||||||
width="100%"
|
width="100%"
|
||||||
|
maxWidth="1450px"
|
||||||
title={
|
title={
|
||||||
<h4 data-test="alert-report-modal-title">
|
<h4 data-test="alert-report-modal-title">
|
||||||
{isEditMode ? (
|
{isEditMode ? (
|
||||||
@ -1141,7 +1148,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
|||||||
<div className="inline-container wrap">
|
<div className="inline-container wrap">
|
||||||
<StyledInputContainer>
|
<StyledInputContainer>
|
||||||
<div className="control-label">
|
<div className="control-label">
|
||||||
{t('Alert If...')}
|
{t('Trigger Alert If...')}
|
||||||
<span className="required">*</span>
|
<span className="required">*</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
|
Loading…
Reference in New Issue
Block a user