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 { Component, ReactNode } from 'react';
|
||||||
import { Button } from 'reactstrap';
|
import { Button } from 'reactstrap';
|
||||||
import './ErrorHandler.scss';
|
import { SimpleCard } from '../utils/SimpleCard';
|
||||||
|
|
||||||
interface ErrorHandlerState {
|
interface ErrorHandlerState {
|
||||||
hasError: boolean;
|
hasError: boolean;
|
||||||
|
@ -25,14 +25,16 @@ const ErrorHandler = (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): ReactNode | undefined {
|
public render(): ReactNode {
|
||||||
if (this.state.hasError) {
|
if (this.state.hasError) {
|
||||||
return (
|
return (
|
||||||
<div className="error-handler">
|
<div className="home">
|
||||||
<h1>Oops! This is awkward :S</h1>
|
<SimpleCard className="p-4">
|
||||||
<p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
|
<h1>Oops! This is awkward :S</h1>
|
||||||
<br />
|
<p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
|
||||||
<Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
|
<br />
|
||||||
|
<Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
|
||||||
|
</SimpleCard>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import { SimpleCard } from '../utils/SimpleCard';
|
||||||
|
|
||||||
interface NotFoundProps {
|
interface NotFoundProps {
|
||||||
to?: string;
|
to?: string;
|
||||||
|
@ -7,13 +8,15 @@ interface NotFoundProps {
|
||||||
|
|
||||||
const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
||||||
<div className="home">
|
<div className="home">
|
||||||
<h2>Oops! We could not find requested route.</h2>
|
<SimpleCard className="p-4">
|
||||||
<p>
|
<h2>Oops! We could not find requested route.</h2>
|
||||||
Use your browser's back button to navigate to the page you have previously come from, or just press this
|
<p>
|
||||||
button.
|
Use your browser's back button to navigate to the page you have previously come from, or just press this
|
||||||
</p>
|
button.
|
||||||
<br />
|
</p>
|
||||||
<Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
|
<br />
|
||||||
|
<Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
|
||||||
|
</SimpleCard>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
|
||||||
import { Button } from 'reactstrap';
|
import { Button } from 'reactstrap';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import createErrorHandler from '../../src/common/ErrorHandler';
|
import createErrorHandler from '../../src/common/ErrorHandler';
|
||||||
|
import { SimpleCard } from '../../src/utils/SimpleCard';
|
||||||
|
|
||||||
describe('<ErrorHandler />', () => {
|
describe('<ErrorHandler />', () => {
|
||||||
const window = Mock.of<Window>({
|
const window = Mock.of<Window>({
|
||||||
|
@ -28,10 +29,10 @@ describe('<ErrorHandler />', () => {
|
||||||
it('renders error page when error has occurred', () => {
|
it('renders error page when error has occurred', () => {
|
||||||
wrapper.setState({ hasError: true });
|
wrapper.setState({ hasError: true });
|
||||||
|
|
||||||
expect(wrapper.text()).toContain('Oops! This is awkward :S');
|
expect(wrapper.find(SimpleCard).contains('Oops! This is awkward :S')).toEqual(true);
|
||||||
expect(wrapper.text()).toContain(
|
expect(wrapper.find(SimpleCard).contains(
|
||||||
'It seems that something went wrong. Try refreshing the page or just click this button.',
|
'It seems that something went wrong. Try refreshing the page or just click this button.',
|
||||||
);
|
)).toEqual(true);
|
||||||
expect(wrapper.find(Button)).toHaveLength(1);
|
expect(wrapper.find(Button)).toHaveLength(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,34 +1,34 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { shallow, ShallowWrapper } from 'enzyme';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import NotFound from '../../src/common/NotFound';
|
import NotFound from '../../src/common/NotFound';
|
||||||
|
import { SimpleCard } from '../../src/utils/SimpleCard';
|
||||||
|
|
||||||
describe('<NotFound />', () => {
|
describe('<NotFound />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
const createWrapper = (props = {}) => {
|
const createWrapper = (props = {}) => {
|
||||||
wrapper = shallow(<NotFound {...props} />);
|
wrapper = shallow(<NotFound {...props} />).find(SimpleCard);
|
||||||
const content = wrapper.text();
|
|
||||||
|
|
||||||
return { wrapper, content };
|
return wrapper;
|
||||||
};
|
};
|
||||||
|
|
||||||
afterEach(() => wrapper?.unmount());
|
afterEach(() => wrapper?.unmount());
|
||||||
|
|
||||||
it('shows expected error title', () => {
|
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', () => {
|
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.',
|
'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', () => {
|
it('shows a link to the home', () => {
|
||||||
const { wrapper } = createWrapper();
|
const wrapper = createWrapper();
|
||||||
const link = wrapper.find(Link);
|
const link = wrapper.find(Link);
|
||||||
|
|
||||||
expect(link.prop('to')).toEqual('/');
|
expect(link.prop('to')).toEqual('/');
|
||||||
|
@ -37,7 +37,7 @@ describe('<NotFound />', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows a link with provided props', () => {
|
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);
|
const link = wrapper.find(Link);
|
||||||
|
|
||||||
expect(link.prop('to')).toEqual('/foo/bar');
|
expect(link.prop('to')).toEqual('/foo/bar');
|
||||||
|
|
Loading…
Reference in a new issue