Added new card styles to error pages

This commit is contained in:
Alejandro Celaya 2020-12-13 20:57:00 +01:00
parent 017db18e70
commit f2a8865679
5 changed files with 33 additions and 36 deletions

View file

@ -1,9 +0,0 @@
@import '../utils/mixins/vertical-align.scss';
.error-handler {
@include vertical-align();
padding: 20px;
text-align: center;
width: 100%;
}

View file

@ -1,6 +1,6 @@
import { Component, ReactNode } from 'react';
import { Button } from 'reactstrap';
import './ErrorHandler.scss';
import { SimpleCard } from '../utils/SimpleCard';
interface ErrorHandlerState {
hasError: boolean;
@ -25,14 +25,16 @@ const ErrorHandler = (
}
}
public render(): ReactNode | undefined {
public render(): ReactNode {
if (this.state.hasError) {
return (
<div className="error-handler">
<div className="home">
<SimpleCard className="p-4">
<h1>Oops! This is awkward :S</h1>
<p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
<br />
<Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
</SimpleCard>
</div>
);
}

View file

@ -1,5 +1,6 @@
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { SimpleCard } from '../utils/SimpleCard';
interface NotFoundProps {
to?: string;
@ -7,6 +8,7 @@ interface NotFoundProps {
const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
<div className="home">
<SimpleCard className="p-4">
<h2>Oops! We could not find requested route.</h2>
<p>
Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
@ -14,6 +16,7 @@ const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
</p>
<br />
<Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
</SimpleCard>
</div>
);

View file

@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { Button } from 'reactstrap';
import { Mock } from 'ts-mockery';
import createErrorHandler from '../../src/common/ErrorHandler';
import { SimpleCard } from '../../src/utils/SimpleCard';
describe('<ErrorHandler />', () => {
const window = Mock.of<Window>({
@ -28,10 +29,10 @@ describe('<ErrorHandler />', () => {
it('renders error page when error has occurred', () => {
wrapper.setState({ hasError: true });
expect(wrapper.text()).toContain('Oops! This is awkward :S');
expect(wrapper.text()).toContain(
expect(wrapper.find(SimpleCard).contains('Oops! This is awkward :S')).toEqual(true);
expect(wrapper.find(SimpleCard).contains(
'It seems that something went wrong. Try refreshing the page or just click this button.',
);
)).toEqual(true);
expect(wrapper.find(Button)).toHaveLength(1);
});
});

View file

@ -1,34 +1,34 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Link } from 'react-router-dom';
import NotFound from '../../src/common/NotFound';
import { SimpleCard } from '../../src/utils/SimpleCard';
describe('<NotFound />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props = {}) => {
wrapper = shallow(<NotFound {...props} />);
const content = wrapper.text();
wrapper = shallow(<NotFound {...props} />).find(SimpleCard);
return { wrapper, content };
return wrapper;
};
afterEach(() => wrapper?.unmount());
it('shows expected error title', () => {
const { content } = createWrapper();
const wrapper = createWrapper();
expect(content).toContain('Oops! We could not find requested route.');
expect(wrapper.contains('Oops! We could not find requested route.')).toEqual(true);
});
it('shows expected error message', () => {
const { content } = createWrapper();
const wrapper = createWrapper();
expect(content).toContain(
expect(wrapper.contains(
'Use your browser\'s back button to navigate to the page you have previously come from, or just press this button.',
);
)).toEqual(true);
});
it('shows a link to the home', () => {
const { wrapper } = createWrapper();
const wrapper = createWrapper();
const link = wrapper.find(Link);
expect(link.prop('to')).toEqual('/');
@ -37,7 +37,7 @@ describe('<NotFound />', () => {
});
it('shows a link with provided props', () => {
const { wrapper } = createWrapper({ to: '/foo/bar', children: 'Hello' });
const wrapper = createWrapper({ to: '/foo/bar', children: 'Hello' });
const link = wrapper.find(Link);
expect(link.prop('to')).toEqual('/foo/bar');