mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Added new card styles to error pages
This commit is contained in:
parent
017db18e70
commit
f2a8865679
5 changed files with 33 additions and 36 deletions
|
@ -1,9 +0,0 @@
|
|||
@import '../utils/mixins/vertical-align.scss';
|
||||
|
||||
.error-handler {
|
||||
@include vertical-align();
|
||||
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
|
@ -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">
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { FC } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { SimpleCard } from '../utils/SimpleCard';
|
||||
|
||||
interface NotFoundProps {
|
||||
to?: string;
|
||||
|
@ -7,13 +8,15 @@ interface NotFoundProps {
|
|||
|
||||
const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
||||
<div className="home">
|
||||
<h2>Oops! We could not find requested route.</h2>
|
||||
<p>
|
||||
Use your browser's back button to navigate to the page you have previously come from, or just press this
|
||||
button.
|
||||
</p>
|
||||
<br />
|
||||
<Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
|
||||
<SimpleCard className="p-4">
|
||||
<h2>Oops! We could not find requested route.</h2>
|
||||
<p>
|
||||
Use your browser's back button to navigate to the page you have previously come from, or just press this
|
||||
button.
|
||||
</p>
|
||||
<br />
|
||||
<Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
|
||||
</SimpleCard>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue