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 AlertReportModal from 'src/views/CRUD/alert/AlertReportModal';
|
||||
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 { styledMount as mount } from 'spec/helpers/theming';
|
||||
|
||||
@ -49,10 +53,10 @@ const mockedProps = {
|
||||
};
|
||||
|
||||
// Related mocks
|
||||
const ownersEndpoint = 'glob:*/api/v1/dashboard/related/owners?*';
|
||||
const databaseEndpoint = 'glob:*/api/v1/dataset/related/database?*';
|
||||
const dashboardEndpoint = 'glob:*/api/v1/dashboard?*';
|
||||
const chartEndpoint = 'glob:*/api/v1/chart?*';
|
||||
const ownersEndpoint = 'glob:*/api/v1/alert/related/owners?*';
|
||||
const databaseEndpoint = 'glob:*/api/v1/alert/related/database?*';
|
||||
const dashboardEndpoint = 'glob:*/api/v1/alert/related/dashboard?*';
|
||||
const chartEndpoint = 'glob:*/api/v1/alert/related/chart?*';
|
||||
|
||||
fetchMock.get(ownersEndpoint, {
|
||||
result: [],
|
||||
@ -127,11 +131,87 @@ describe('AlertReportModal', () => {
|
||||
).toEqual('Edit Report');
|
||||
});
|
||||
|
||||
// Fields
|
||||
it('renders input element for name', () => {
|
||||
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', () => {
|
||||
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 {
|
||||
height: 160px;
|
||||
height: 300px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
@ -246,6 +246,11 @@ export const StyledInputContainer = styled.div`
|
||||
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||
|
||||
.ant-select-selection-placeholder,
|
||||
.ant-select-selection-item {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&[name='description'] {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -1023,12 +1028,14 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
||||
return (
|
||||
<Modal
|
||||
className="no-content-padding"
|
||||
responsive
|
||||
disablePrimaryButton={disableSave}
|
||||
onHandledPrimaryAction={onSave}
|
||||
onHide={hide}
|
||||
primaryButtonName={isEditMode ? t('Save') : t('Add')}
|
||||
show={show}
|
||||
width="100%"
|
||||
maxWidth="1450px"
|
||||
title={
|
||||
<h4 data-test="alert-report-modal-title">
|
||||
{isEditMode ? (
|
||||
@ -1141,7 +1148,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
|
||||
<div className="inline-container wrap">
|
||||
<StyledInputContainer>
|
||||
<div className="control-label">
|
||||
{t('Alert If...')}
|
||||
{t('Trigger Alert If...')}
|
||||
<span className="required">*</span>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
|
Loading…
Reference in New Issue
Block a user