Created new Result component to display operation result messages consistently

This commit is contained in:
Alejandro Celaya
2020-12-21 17:54:05 +01:00
parent c25355c531
commit b211a29fc5
19 changed files with 110 additions and 72 deletions

View File

@@ -30,12 +30,12 @@ describe('<CreateServer />', () => {
const wrapper = createWrapper();
expect(wrapper.find(ServerForm)).toHaveLength(1);
expect(wrapper.find('Result')).toHaveLength(0);
expect(wrapper.find('ImportResult')).toHaveLength(0);
});
it('shows success message when imported is true', () => {
const wrapper = createWrapper(true);
const result = wrapper.find('Result');
const result = wrapper.find('ImportResult');
expect(result).toHaveLength(1);
expect(result.prop('type')).toEqual('success');
@@ -43,7 +43,7 @@ describe('<CreateServer />', () => {
it('shows error message when import failed', () => {
const wrapper = createWrapper(false, true);
const result = wrapper.find('Result');
const result = wrapper.find('ImportResult');
expect(result).toHaveLength(1);
expect(result.prop('type')).toEqual('error');

View File

@@ -5,6 +5,7 @@ import { Mock } from 'ts-mockery';
import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult';
import { ShortUrl } from '../../../src/short-urls/data';
import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
import { Result } from '../../../src/utils/Result';
describe('<CreateShortUrlResult />', () => {
let wrapper: ShallowWrapper;
@@ -24,7 +25,7 @@ describe('<CreateShortUrlResult />', () => {
it('renders an error when error is true', () => {
const wrapper = createWrapper(Mock.all<ShortUrl>(), true);
const errorCard = wrapper.find('.bg-danger');
const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
expect(errorCard).toHaveLength(1);
expect(errorCard.html()).toContain('An error occurred while creating the URL :(');

View File

@@ -5,6 +5,7 @@ import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlM
import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion';
import { ProblemDetailsError } from '../../../src/utils/services/types';
import { Result } from '../../../src/utils/Result';
describe('<DeleteShortUrlModal />', () => {
let wrapper: ShallowWrapper;
@@ -48,7 +49,7 @@ describe('<DeleteShortUrlModal />', () => {
shortCode: 'abc123',
errorData: Mock.of<ProblemDetailsError>(errorData),
});
const warning = wrapper.find('.bg-warning');
const warning = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'warning');
expect(warning).toHaveLength(1);
expect(warning.html()).toContain(expectedMessage);
@@ -61,7 +62,7 @@ describe('<DeleteShortUrlModal />', () => {
shortCode: 'abc123',
errorData: Mock.of<ProblemDetailsError>({ type: 'OTHER_ERROR' }),
});
const error = wrapper.find('.bg-danger');
const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
expect(error).toHaveLength(1);
expect(error.html()).toContain('Something went wrong while deleting the URL :(');

View File

@@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery';
import EditMetaModal from '../../../src/short-urls/helpers/EditMetaModal';
import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlMetaEdition } from '../../../src/short-urls/reducers/shortUrlMeta';
import { Result } from '../../../src/utils/Result';
describe('<EditMetaModal />', () => {
let wrapper: ShallowWrapper;
@@ -30,7 +31,7 @@ describe('<EditMetaModal />', () => {
it('properly renders form with components', () => {
const wrapper = createWrapper({ saving: false, error: false });
const error = wrapper.find('.bg-danger');
const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
const form = wrapper.find('form');
const formGroup = form.find(FormGroup);
@@ -52,7 +53,7 @@ describe('<EditMetaModal />', () => {
it('renders error message on error', () => {
const wrapper = createWrapper({ saving: false, error: true });
const error = wrapper.find('.bg-danger');
const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
expect(error).toHaveLength(1);
});

View File

@@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery';
import EditShortUrlModal from '../../../src/short-urls/helpers/EditShortUrlModal';
import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlEdition } from '../../../src/short-urls/reducers/shortUrlEdition';
import { Result } from '../../../src/utils/Result';
describe('<EditShortUrlModal />', () => {
let wrapper: ShallowWrapper;
@@ -31,7 +32,7 @@ describe('<EditShortUrlModal />', () => {
[ true, 1 ],
])('properly renders form with expected components', (error, expectedErrorLength) => {
const wrapper = createWrapper({}, { saving: false, error });
const errorElement = wrapper.find('.bg-danger');
const errorElement = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
const form = wrapper.find('form');
const formGroup = form.find(FormGroup);

View File

@@ -7,6 +7,7 @@ import SearchField from '../../src/utils/SearchField';
import { rangeOf } from '../../src/utils/utils';
import { TagsList } from '../../src/tags/reducers/tagsList';
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
import { Result } from '../../src/utils/Result';
describe('<TagsList />', () => {
let wrapper: ShallowWrapper;
@@ -41,7 +42,7 @@ describe('<TagsList />', () => {
it('shows an error when tags failed to be loaded', () => {
const wrapper = createWrapper({ error: true });
const errorMsg = wrapper.find('.bg-danger');
const errorMsg = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
expect(errorMsg).toHaveLength(1);
expect(errorMsg.html()).toContain('Error loading tags :(');

View File

@@ -1,5 +1,5 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Card, Progress } from 'reactstrap';
import { Progress } from 'reactstrap';
import { Mock } from 'ts-mockery';
import VisitStats from '../../src/visits/VisitsStats';
import Message from '../../src/utils/Message';
@@ -8,6 +8,7 @@ import SortableBarGraph from '../../src/visits/helpers/SortableBarGraph';
import { Visit, VisitsInfo } from '../../src/visits/types';
import LineChartCard from '../../src/visits/helpers/LineChartCard';
import VisitsTable from '../../src/visits/VisitsTable';
import { Result } from '../../src/utils/Result';
describe('<VisitStats />', () => {
const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
@@ -53,7 +54,7 @@ describe('<VisitStats />', () => {
it('renders an error message when visits could not be loaded', () => {
const wrapper = createComponent({ loading: false, error: true, visits: [] });
const errorMessage = wrapper.find(Card);
const errorMessage = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error');
expect(errorMessage).toHaveLength(1);
expect(errorMessage.html()).toContain('An error occurred while loading visits :(');