diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index 62c9c256..62181381 100644 --- a/src/common/MenuLayout.js +++ b/src/common/MenuLayout.js @@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classnames from 'classnames'; import * as PropTypes from 'prop-types'; import { serverType } from '../servers/prop-types'; +import NotFound from './NotFound'; import './MenuLayout.scss'; const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) => @@ -38,7 +39,8 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi } render() { - const { selectedServer } = this.props; + const { selectedServer, match } = this.props; + const { params: { serverId } } = match; const burgerClasses = classnames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': this.state.showSideBar, }); @@ -88,6 +90,11 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi path="/server/:serverId/manage-tags" component={TagsList} /> + + } + /> diff --git a/src/common/NotFound.js b/src/common/NotFound.js index 1a68e2c0..d34e0143 100644 --- a/src/common/NotFound.js +++ b/src/common/NotFound.js @@ -1,15 +1,23 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import * as PropTypes from 'prop-types'; -const NotFound = () => ( +const propTypes = { + to: PropTypes.string, + btnText: PropTypes.string, +}; + +const NotFound = ({ to = '/', btnText = 'Home' }) => (

Oops! We could not find requested route.

Use your browser{'\''}s back button to navigate to the page you have previously come from, or just press this button.


- Home + {btnText}
); +NotFound.propTypes = propTypes; + export default NotFound; diff --git a/test/common/NotFound.test.js b/test/common/NotFound.test.js index dc3c7f33..a230cc56 100644 --- a/test/common/NotFound.test.js +++ b/test/common/NotFound.test.js @@ -5,26 +5,44 @@ import NotFound from '../../src/common/NotFound'; describe('', () => { let wrapper; - let content; + const createWrapper = (props = {}) => { + wrapper = shallow(); + const content = wrapper.text(); - beforeEach(() => { - wrapper = shallow(); - content = wrapper.text(); + return { wrapper, content }; + }; + + afterEach(() => wrapper && wrapper.unmount()); + + it('shows expected error title', () => { + const { content } = createWrapper(); + + expect(content).toContain('Oops! We could not find requested route.'); }); - afterEach(() => wrapper.unmount()); + it('shows expected error message', () => { + const { content } = createWrapper(); - it('shows expected error title', () => expect(content).toContain('Oops! We could not find requested route.')); - - it('shows expected error message', () => expect(content).toContain( 'Use your browser\'s back button to navigate to the page you have previously come from, or just press this button.' - )); + ); + }); it('shows a link to the home', () => { + const { wrapper } = createWrapper(); const link = wrapper.find(Link); expect(link.prop('to')).toEqual('/'); expect(link.prop('className')).toEqual('btn btn-outline-primary btn-lg'); + expect(link.prop('children')).toEqual('Home'); + }); + + it('shows a link with provided props', () => { + const { wrapper } = createWrapper({ to: '/foo/bar', btnText: 'Hello' }); + const link = wrapper.find(Link); + + expect(link.prop('to')).toEqual('/foo/bar'); + expect(link.prop('className')).toEqual('btn btn-outline-primary btn-lg'); + expect(link.prop('children')).toEqual('Hello'); }); });