fix: refactoring version page / fix issue not found page #100 (#117)

* chore: refactoring version page

* refactor: migrate version page to hooks

* refactor: Version page better imports

* fix: #100 render not found on click item

* test: add test for version page

* chore: update mocks

* test: add scenario for not found package

* chore: fix wrong mock path

* chore: update mock

* chore: add todo list

Author: juanpicado

jest.config.js

@@ -3,6 +3,7 @@ const { defaults } = require('jest-config');
 module.exports = {
   name: 'verdaccio-ui-jest',
   verbose: true,
+  automock: false,
   collectCoverage: true,
   testEnvironment: 'jest-environment-jsdom-global',
   moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],

jest/jest.config.js

@@ -5,6 +5,7 @@
 import 'raf/polyfill';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import { GlobalWithFetchMock } from 'jest-fetch-mock';
 
 // @ts-ignore : Only a void function can be called with the 'new' keyword
 configure({ adapter: new Adapter() });
@@ -14,6 +15,10 @@ global.__APP_VERSION__ = '1.0.0';
 // @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
 global.__VERDACCIO_BASENAME_UI_OPTIONS = {};
 
+const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
+customGlobal.fetch = require('jest-fetch-mock');
+customGlobal.fetchMock = customGlobal.fetch;
+
 // mocking few DOM methods
 // @ts-ignore : Property 'document' does not exist on type 'Global'.
 if (global.document) {

jest/setup.ts

@@ -16,24 +16,25 @@
     "@material-ui/core": "3.9.3",
     "@material-ui/icons": "3.0.2",
     "@octokit/rest": "16.28.7",
-    "@testing-library/react": "9.1.0",
+    "@testing-library/react": "9.1.3",
     "@types/enzyme": "3.10.3",
-    "@types/lodash": "4.14.136",
+    "@types/jest": "24.0.18",
+    "@types/lodash": "4.14.137",
     "@types/material-ui": "0.21.6",
-    "@types/node": "12.7.1",
-    "@types/react": "16.9.1",
-    "@types/react-dom": "16.8.5",
-    "@types/react-router-dom": "4.3.4",
-    "@types/validator": "10.11.2",
+    "@types/node": "12.7.2",
+    "@types/react": "16.9.2",
+    "@types/react-dom": "16.9.0",
+    "@types/react-router-dom": "4.3.5",
+    "@types/validator": "10.11.3",
     "@verdaccio/babel-preset": "2.0.0",
     "@verdaccio/eslint-config": "2.0.0",
-    "@verdaccio/types": "8.0.0-next.2",
+    "@verdaccio/types": "8.0.0",
     "autosuggest-highlight": "3.1.1",
     "babel-loader": "8.0.6",
     "bundlesize": "0.18.0",
     "codeceptjs": "2.2.1",
     "codecov": "3.5.0",
-    "concurrently": "4.1.1",
+    "concurrently": "4.1.2",
     "cross-env": "5.2.0",
     "css-loader": "3.2.0",
     "date-fns": "1.30.1",
@@ -56,11 +57,12 @@
     "husky": "3.0.3",
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
-    "jest": "24.8.0",
+    "jest": "24.9.0",
     "jest-emotion": "10.0.14",
-    "jest-environment-jsdom": "24.8.0",
+    "jest-environment-jsdom": "24.9.0",
     "jest-environment-jsdom-global": "1.2.0",
-    "jest-environment-node": "24.8.0",
+    "jest-environment-node": "24.9.0",
+    "jest-fetch-mock": "2.1.2",
     "js-base64": "2.5.1",
     "js-yaml": "3.13.1",
     "localstorage-memory": "1.0.3",
@@ -76,7 +78,7 @@
     "react-autosuggest": "9.4.3",
     "react-dom": "16.9.0",
     "react-emotion": "9.2.12",
-    "react-hot-loader": "4.12.10",
+    "react-hot-loader": "4.12.11",
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
     "resolve-url-loader": "3.1.0",
@@ -98,10 +100,10 @@
     "verdaccio": "4.2.1",
     "verdaccio-auth-memory": "1.1.5",
     "verdaccio-memory": "2.0.0",
-    "webpack": "4.39.1",
+    "webpack": "4.39.2",
     "webpack-bundle-analyzer": "3.4.1",
     "webpack-bundle-size-analyzer": "3.0.0",
-    "webpack-cli": "3.3.6",
+    "webpack-cli": "3.3.7",
     "webpack-dev-server": "3.8.0",
     "webpack-merge": "4.2.1",
     "whatwg-fetch": "3.0.0",

package.json

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+export interface ErrorProps {
+  children: any;
+}
+
+export interface ErrorAppState {
+  hasError: boolean;
+  error: any;
+  info: any;
+}
+
+export default class ErrorBoundary extends Component<ErrorProps, ErrorAppState> {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, info: null };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true, error, info });
+  }
+
+  render() {
+    const { hasError, error, info } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      return (
+        <>
+          <h1>{'Something went wrong.'}</h1>
+          <p>{`error: ${error}`}</p>
+          <p>{`info: ${JSON.stringify(info)}`}</p>
+        </>
+      );
+    }
+    return children;
+  }
+}

src/App/AppError.tsx

@@ -19,7 +19,7 @@ describe('<ActionBar /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },
@@ -35,7 +35,7 @@ describe('<ActionBar /> component', () => {
       latest: {},
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },
@@ -57,7 +57,7 @@ describe('<ActionBar /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },

src/components/ActionBar/ActionBar.test.tsx

@@ -6,7 +6,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import List from '@material-ui/core/List';
 import Tooltip from '@material-ui/core/Tooltip';
 
-import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 import { Fab, ActionListItem } from './styles';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';

src/components/ActionBar/ActionBar.tsx

@@ -20,7 +20,7 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },
@@ -39,7 +39,7 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },
@@ -63,7 +63,7 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/version/Version', () => ({
+    jest.doMock('../../pages/Version', () => ({
       DetailContextConsumer: component => {
         return component.children({ packageMeta });
       },

src/components/Author/Author.test.tsx

@@ -4,7 +4,7 @@ import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 
-import { DetailContextConsumer } from '../../pages/version/Version';
+import { DetailContextConsumer } from '../../pages/Version';
 import { Heading, AuthorListItem } from './styles';
 import { isEmail } from '../../utils/url';
 

src/components/Author/Author.tsx

@@ -2,7 +2,7 @@ import React, { Component, Fragment, ReactElement } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import CardContent from '@material-ui/core/CardContent';
 
-import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 
 import { CardWrap, Heading, Tags, Tag } from './styles';
 import NoItems from '../NoItems';