0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-16 21:56:25 -05:00

refactor: added flow and css in JS in NotFound (#1098)

This commit is contained in:
Priscila 2018-10-31 13:42:43 +01:00 committed by Juan Picado @jotadeveloper
parent f18e749e93
commit 1d705f58b6
7 changed files with 50 additions and 35 deletions

View file

@ -1,11 +0,0 @@
@import '../../styles/variables';
.notFound {
width: 100%;
font-size: $font-size-md;
line-height: $line-height-xl;
border: none;
outline: none;
flex-direction: column;
align-items: center;
}

View file

@ -1,23 +1,18 @@
/**
* @prettier
* @flow
*/
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import { Wrapper } from './styles';
import { IProps } from './types';
import classes from './404.scss'; const NotFound = ({ pkg }: IProps) => (
<Wrapper>
const NotFound = (props) => { <h1>Error 404 - {pkg}</h1>
return ( <hr />
<div className={`container content ${classes.notFound}`}> <p>Oops, The package you are trying to access does not exist.</p>
<h1>Error 404 - {props.pkg}</h1> </Wrapper>
<hr/> );
<p>
Oops, The package you are trying to access does not exist.
</p>
</div>
);
};
NotFound.propTypes = {
pkg: PropTypes.string.isRequired
};
export default NotFound; export default NotFound;

View file

@ -0,0 +1,19 @@
/**
* @prettier
* @flow
*/
import styled from 'react-emotion';
import { fontSize, lineHeight } from '../../utils/styles/sizes';
export const Wrapper = styled.div`
&& {
font-size: ${fontSize.md};
line-height: ${lineHeight.xl};
border: none;
outline: none;
flex-direction: column;
align-items: center;
}
`;

View file

@ -0,0 +1,8 @@
/**
* @prettier
* @flow
*/
export interface IProps {
pkg: string;
}

View file

@ -68,7 +68,9 @@ export default class Detail extends Component {
if (notFound) { if (notFound) {
return ( return (
<NotFound pkg={this.packageName} /> <div className='container content'>
<NotFound pkg={this.packageName} />
</div>
); );
} else if (isEmpty(readMe)) { } else if (isEmpty(readMe)) {
return <Spinner centered />; return <Spinner centered />;

View file

@ -1,3 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"container content notFound\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`; exports[`<NotFound /> component should load the component in default state 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - test</h1><hr><p>Oops, The package you are trying to access does not exist.</p></div>"`;
exports[`<NotFound /> component should set html from props 1`] = `"<div class=\\"css-24p7uw e1gvymku0\\"><h1>Error 404 - verdaccio</h1><hr/><p>Oops, The package you are trying to access does not exist.</p></div>"`;

View file

@ -3,15 +3,15 @@
*/ */
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow, mount } from 'enzyme';
import NotFound from '../../../../src/webui/components/NotFound/index'; import NotFound from '../../../../src/webui/components/NotFound/index';
console.error = jest.fn(); console.error = jest.fn();
describe('<NotFound /> component', () => { describe('<NotFound /> component', () => {
it('should give error for the required fields', () => { it('should load the component in default state', () => {
shallow(<NotFound />); const wrapper = mount(<NotFound pkg='test' />);
expect(console.error).toBeCalled(); expect(wrapper.html()).toMatchSnapshot();
}); });
it('should set html from props', () => { it('should set html from props', () => {