diff --git a/src/webui/app.js b/src/webui/app.js
index 4ca152050..a54606829 100644
--- a/src/webui/app.js
+++ b/src/webui/app.js
@@ -1,3 +1,7 @@
+/**
+ * @prettier
+ */
+
 import React, { Component, Fragment } from 'react';
 import isNil from 'lodash/isNil';
 
@@ -16,7 +20,6 @@ import 'normalize.css';
 import Footer from './components/Footer';
 
 export const AppContext = React.createContext();
-
 export const AppContextProvider = AppContext.Provider;
 export const AppContextConsumer = AppContext.Consumer;
 
@@ -25,12 +28,12 @@ export default class App extends Component {
     error: {},
     logoUrl: window.VERDACCIO_LOGO,
     user: {},
-    scope: (window.VERDACCIO_SCOPE) ? `${window.VERDACCIO_SCOPE}:` : '',
+    scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '',
     showLoginModal: false,
     isUserLoggedIn: false,
     packages: [],
     isLoading: true,
-  }
+  };
 
   componentDidMount() {
     this.isUserAlreadyLoggedIn();
@@ -45,19 +48,36 @@ export default class App extends Component {
     }
   }
 
+  render() {
+    const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
+
+    return (
+      <Container isLoading={isLoading}>
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <Fragment>
+            <AppContextProvider value={{ isUserLoggedIn, packages, logoUrl, user, scope }}>{this.renderContent()}</AppContextProvider>
+          </Fragment>
+        )}
+        {this.renderLoginModal()}
+      </Container>
+    );
+  }
+
   isUserAlreadyLoggedIn = () => {
     // checks for token validity
     const token = storage.getItem('token');
     const username = storage.getItem('username');
     if (isTokenExpire(token) || isNil(username)) {
-     this.handleLogout();
+      this.handleLogout();
     } else {
       this.setState({
         user: { username, token },
         isUserLoggedIn: true,
       });
     }
-  }
+  };
 
   loadOnHandler = async () => {
     try {
@@ -74,34 +94,30 @@ export default class App extends Component {
       });
       this.setLoading(false);
     }
-  }
+  };
 
-  setLoading = isLoading => (
+  setLoading = isLoading =>
     this.setState({
       isLoading,
-    })
-  )
+    });
 
   /**
    * Toggles the login modal
    * Required by: <LoginModal /> <Header />
    */
   handleToggleLoginModal = () => {
-    this.setState((prevState) => ({
+    this.setState(prevState => ({
       showLoginModal: !prevState.showLoginModal,
       error: {},
     }));
-  }
+  };
 
   /**
    * handles login
    * Required by: <Header />
    */
   handleDoLogin = async (usernameValue, passwordValue) => {
-    const { username, token, error } = await makeLogin(
-      usernameValue,
-      passwordValue
-    );
+    const { username, token, error } = await makeLogin(usernameValue, passwordValue);
 
     if (username && token) {
       this.setLoggedUser(username, token);
@@ -115,7 +131,7 @@ export default class App extends Component {
         error,
       });
     }
-  }
+  };
 
   setLoggedUser = (username, token) => {
     this.setState({
@@ -123,10 +139,11 @@ export default class App extends Component {
         username,
         token,
       },
-      isUserLoggedIn: true,  // close login modal after successful login
-      showLoginModal: false,  // set isUserLoggedIn to true
+      isUserLoggedIn: true, // close login modal after successful login
+      showLoginModal: false, // set isUserLoggedIn to true
     });
-  }
+  };
+
   /**
    * Logouts user
    * Required by: <Header />
@@ -138,25 +155,7 @@ export default class App extends Component {
       user: {},
       isUserLoggedIn: false,
     });
-  }
-
-  render() {
-    const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
-    return (
-      <Container isLoading={isLoading}>
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <Fragment>
-            <AppContextProvider value={{isUserLoggedIn, packages, logoUrl, user, scope}}>
-              {this.renderContent()}
-            </AppContextProvider>
-          </Fragment>
-        )}
-        {this.renderLoginModal()}
-      </Container>
-    );
-  }
+  };
 
   renderLoginModal = () => {
     const { error, showLoginModal } = this.state;
@@ -169,34 +168,24 @@ export default class App extends Component {
         visibility={showLoginModal}
       />
     );
-  }
+  };
 
   renderContent = () => {
     return (
       <Fragment>
         <Content>
-          <RouterApp 
-            onLogout={this.handleLogout}
-            onToggleLoginModal={this.handleToggleLoginModal}>
+          <RouterApp onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal}>
             {this.renderHeader()}
           </RouterApp>
         </Content>
         <Footer />
       </Fragment>
     );
-  }
+  };
 
   renderHeader = () => {
-    const { logoUrl, user, scope } = this.state;
+    const { logoUrl, user: { username } = {}, scope } = this.state;
 
-    return (
-      <Header
-        logo={logoUrl}
-        onLogout={this.handleLogout}
-        onToggleLoginModal={this.handleToggleLoginModal}
-        scope={scope}
-        username={user.username}
-      />
-    );
-  }
+    return <Header logo={logoUrl} onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal} scope={scope} username={username} />;
+  };
 }
diff --git a/src/webui/components/Icon/img/filebinary.svg b/src/webui/components/Icon/img/filebinary.svg
index 489e632da..f891b36fe 100644
--- a/src/webui/components/Icon/img/filebinary.svg
+++ b/src/webui/components/Icon/img/filebinary.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="fileBinary">
+<svg xmlns="http://www.w3.org/2000/svg" id="filebinary">
 <path d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM5 6.98L3.5 8.5 5 10l-.5 1L2 8.5 4.5 6l.5.98zM7.5 6L10 8.5 7.5 11l-.5-.98L8.5 8.5 7 7l.5-1z"></path>
 </svg>
\ No newline at end of file
diff --git a/src/webui/components/Icon/index.js b/src/webui/components/Icon/index.js
index f91ea8241..ae78da338 100644
--- a/src/webui/components/Icon/index.js
+++ b/src/webui/components/Icon/index.js
@@ -19,7 +19,7 @@ import austria from './img/austria.svg';
 import spain from './img/spain.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
-import fileBinary from './img/fileBinary.svg';
+import filebinary from './img/filebinary.svg';
 import law from './img/law.svg';
 import license from './img/license.svg';
 import time from './img/time.svg';
@@ -37,7 +37,7 @@ export const Icons: $Shape<IIconsMap> = {
   earth,
   verdaccio,
   // other icons
-  fileBinary,
+  filebinary,
   law,
   license,
   time,
diff --git a/src/webui/components/Icon/types.js b/src/webui/components/Icon/types.js
index b825c4e26..5b2adf68a 100644
--- a/src/webui/components/Icon/types.js
+++ b/src/webui/components/Icon/types.js
@@ -19,7 +19,7 @@ export interface IIconsMap {
   time: string;
   law: string;
   version: string;
-  fileBinary: string;
+  filebinary: string;
   [key: string]: string;
 }
 
diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js
index e1c7d6387..0fd3ef1ae 100644
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@@ -69,7 +69,7 @@ const Package = ({
   const renderFileSize = () =>
     unpackedSize && (
       <OverviewItem>
-        <Icon name={'fileBinary'} />
+        <Icon name={'filebinary'} />
         {fileSizeSI(unpackedSize)}
       </OverviewItem>
     );
@@ -157,4 +157,5 @@ const Package = ({
     </PackageList>
   );
 };
+
 export default Package;
diff --git a/src/webui/utils/asyncComponent.js b/src/webui/utils/asyncComponent.js
index 6ffa7b14e..7aadf71b8 100644
--- a/src/webui/utils/asyncComponent.js
+++ b/src/webui/utils/asyncComponent.js
@@ -1,24 +1,32 @@
+/**
+ * @prettier
+ */
+
 import React from 'react';
 
 export function asyncComponent(getComponent) {
   return class AsyncComponent extends React.Component {
     static Component = null;
-    state = {Component: AsyncComponent.Component};
+    state = { Component: AsyncComponent.Component };
 
     componentDidMount() {
-      const {Component} = this.state;
-
+      const { Component } = this.state;
       if (!Component) {
-        getComponent().then(({default: Component}) => {
-          AsyncComponent.Component = Component;
-          /* eslint react/no-did-mount-set-state:0 */
-          this.setState({Component});
-        });
+        getComponent()
+          .then(({ default: Component }) => {
+            AsyncComponent.Component = Component;
+            /* eslint react/no-did-mount-set-state:0 */
+            this.setState({ Component });
+          })
+          .catch(err => {
+            console.error(err);
+          });
       }
     }
     render() {
-      const {Component} = this.state;
+      const { Component } = this.state;
       if (Component) {
+        // eslint-disable-next-line verdaccio/jsx-spread
         return <Component {...this.props} />;
       }
 
diff --git a/test/unit/webui/app.spec.js b/test/unit/webui/app.spec.js
index ea1e998fe..e4f75bfe5 100644
--- a/test/unit/webui/app.spec.js
+++ b/test/unit/webui/app.spec.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { mount } from 'enzyme';
 import storage from '../../../src/webui/utils/storage';
 import App from '../../../src/webui/app';
-import { API_ERROR } from '../../../src/lib/constants';
 
 import { generateTokenWithTimeRange } from './components/__mocks__/token';
 
@@ -38,7 +37,7 @@ describe('App', () => {
     wrapper = mount(<App />);
   });
   
-  xtest('toggleLoginModal: should toggle the value in state', () => {
+  test('toggleLoginModal: should toggle the value in state', () => {
     const { handleToggleLoginModal } = wrapper.instance();
     expect(wrapper.state().showLoginModal).toBeFalsy();
     handleToggleLoginModal();
@@ -46,7 +45,7 @@ describe('App', () => {
     expect(wrapper.state('error')).toEqual({});
   });
 
-  xtest('isUserAlreadyLoggedIn: token already available in storage', async () => {
+  test('isUserAlreadyLoggedIn: token already available in storage', async () => {
 
     storage.setItem('username', 'verdaccio');
     storage.setItem('token', generateTokenWithTimeRange(24));
@@ -57,7 +56,7 @@ describe('App', () => {
     expect(wrapper.state('user').username).toEqual('verdaccio');
   });
 
-  xtest('handleLogout - logouts the user and clear localstorage', async () => {
+  test('handleLogout - logouts the user and clear localstorage', async () => {
     const { handleLogout } = wrapper.instance();
     storage.setItem('username', 'verdaccio');
     storage.setItem('token', 'xxxx.TOKEN.xxxx');
@@ -67,7 +66,7 @@ describe('App', () => {
     expect(wrapper.state('isUserLoggedIn')).toBeFalsy();
   });
 
-  xtest('handleDoLogin - login the user successfully', async () => {
+  test('handleDoLogin - login the user successfully', async () => {
     const { handleDoLogin } = wrapper.instance();
     await handleDoLogin('sam', '1234');
     const result = {
@@ -81,10 +80,9 @@ describe('App', () => {
     expect(wrapper.state('user')).toEqual(result);
   });
 
-  xtest('handleDoLogin - authentication failure', async () => {
+  test('handleDoLogin - authentication failure', async () => {
     const { handleDoLogin } = wrapper.instance();
     await handleDoLogin('sam', '12345');
-    console.log(API_ERROR.BAD_USERNAME_PASSWORD);
     const result = {
       description: 'bad username/password, access denied',
       title: 'Unable to login',
diff --git a/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap b/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap
index a2f3733d8..04f2934d1 100644
--- a/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap
+++ b/test/unit/webui/components/__snapshots__/packagelist.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"/-/web/detail/verdaccio\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-15gl0ho e11fsc2k1\\">verdaccio</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>7 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-128 MuiAvatar-colorDefault-129 css-1to0t9u e11fsc2k13\\">S</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Sam</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">Private NPM repository</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"/-/web/detail/abc\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-15gl0ho e11fsc2k1\\">abc</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.1</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>7 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-128 MuiAvatar-colorDefault-129 css-1to0t9u e11fsc2k13\\">R</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Rose</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">abc description</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"/-/web/detail/xyz\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-15gl0ho e11fsc2k1\\">xyz</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.1.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on Invalid Date •</span>almost NaN years ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-128 MuiAvatar-colorDefault-129 css-1to0t9u e11fsc2k13\\">M</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Martin</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">xyz description</div></div></div></a></div></div>"`;
+exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><ul class=\\"MuiList-root-128 MuiList-padding-129 css-jpnf4t e11fsc2k10\\"><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137\\"><div class=\\"MuiListItemText-root-144 css-9dxxs7 e11fsc2k14\\" component=\\"div\\"><span class=\\"MuiTypography-root-30 MuiTypography-subheading-37 MuiListItemText-primary-147\\"><div class=\\"MuiGrid-container-150 MuiGrid-item-151 MuiGrid-grid-xs-12-190\\"><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178\\"><a class=\\"css-1jgqs7g e11fsc2k7\\" href=\\"/-/web/detail/verdaccio\\"><span class=\\"css-10n8p5f e11fsc2k8\\">verdaccio</span></a></div><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178 css-s168sa e11fsc2k9\\"></div></div></span><p class=\\"MuiTypography-root-30 MuiTypography-body1-39 MuiTypography-colorTextSecondary-63 MuiListItemText-secondary-148\\"><span class=\\"MuiTypography-root-30 MuiTypography-body1-39 css-zd063h e11fsc2k15\\">Private NPM repository</span></p></div></li><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137 css-11vba5x e11fsc2k13\\"><div class=\\"css-15496ft e11fsc2k5\\"><div class=\\"MuiAvatar-root-247 css-16dqgrp e11fsc2k6\\"><img alt=\\"Sam\\" src=\\"test avatar\\" class=\\"MuiAvatar-img-249\\"></div><span class=\\"css-eazh50 e11fsc2k4\\"><div class=\\"e11fsc2k3 css-16bvijn e1pneb170\\">Sam</div></span></div><span class=\\"css-1rxy2wf e11fsc2k0\\"><svg class=\\"e11fsc2k1 css-pqdkph ej4jd2o0\\"><title>Version</title><use xlink:href=\\"[object Object]#version\\"></use></svg>v1.0.0</span><span class=\\"css-1rxy2wf e11fsc2k0\\"><svg class=\\"e11fsc2k1 css-pqdkph ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1dp07e1 e11fsc2k2\\">Published on 21.07.2018, 22:11:12 •</span>7 months ago</span></li></ul><hr class=\\"MuiDivider-root-250\\"><ul class=\\"MuiList-root-128 MuiList-padding-129 css-jpnf4t e11fsc2k10\\"><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137\\"><div class=\\"MuiListItemText-root-144 css-9dxxs7 e11fsc2k14\\" component=\\"div\\"><span class=\\"MuiTypography-root-30 MuiTypography-subheading-37 MuiListItemText-primary-147\\"><div class=\\"MuiGrid-container-150 MuiGrid-item-151 MuiGrid-grid-xs-12-190\\"><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178\\"><a class=\\"css-1jgqs7g e11fsc2k7\\" href=\\"/-/web/detail/abc\\"><span class=\\"css-10n8p5f e11fsc2k8\\">abc</span></a></div><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178 css-s168sa e11fsc2k9\\"></div></div></span><p class=\\"MuiTypography-root-30 MuiTypography-body1-39 MuiTypography-colorTextSecondary-63 MuiListItemText-secondary-148\\"><span class=\\"MuiTypography-root-30 MuiTypography-body1-39 css-zd063h e11fsc2k15\\">abc description</span></p></div></li><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137 css-11vba5x e11fsc2k13\\"><div class=\\"css-15496ft e11fsc2k5\\"><div class=\\"MuiAvatar-root-247 css-16dqgrp e11fsc2k6\\"><img alt=\\"Rose\\" src=\\"test avatar\\" class=\\"MuiAvatar-img-249\\"></div><span class=\\"css-eazh50 e11fsc2k4\\"><div class=\\"e11fsc2k3 css-16bvijn e1pneb170\\">Rose</div></span></div><span class=\\"css-1rxy2wf e11fsc2k0\\"><svg class=\\"e11fsc2k1 css-pqdkph ej4jd2o0\\"><title>Version</title><use xlink:href=\\"[object Object]#version\\"></use></svg>v1.0.1</span><span class=\\"css-1rxy2wf e11fsc2k0\\"><svg class=\\"e11fsc2k1 css-pqdkph ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1dp07e1 e11fsc2k2\\">Published on 21.07.2018, 22:11:12 •</span>7 months ago</span></li></ul><hr class=\\"MuiDivider-root-250\\"><ul class=\\"MuiList-root-128 MuiList-padding-129 css-jpnf4t e11fsc2k10\\"><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137\\"><div class=\\"MuiListItemText-root-144 css-9dxxs7 e11fsc2k14\\" component=\\"div\\"><span class=\\"MuiTypography-root-30 MuiTypography-subheading-37 MuiListItemText-primary-147\\"><div class=\\"MuiGrid-container-150 MuiGrid-item-151 MuiGrid-grid-xs-12-190\\"><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178\\"><a class=\\"css-1jgqs7g e11fsc2k7\\" href=\\"/-/web/detail/xyz\\"><span class=\\"css-10n8p5f e11fsc2k8\\">xyz</span></a></div><div class=\\"MuiGrid-item-151 MuiGrid-grid-xs-true-178 css-s168sa e11fsc2k9\\"></div></div></span><p class=\\"MuiTypography-root-30 MuiTypography-body1-39 MuiTypography-colorTextSecondary-63 MuiListItemText-secondary-148\\"><span class=\\"MuiTypography-root-30 MuiTypography-body1-39 css-zd063h e11fsc2k15\\">xyz description</span></p></div></li><li class=\\"MuiListItem-root-132 MuiListItem-default-135 MuiListItem-gutters-140 MuiListItem-alignItemsFlexStart-137 css-11vba5x e11fsc2k13\\"><div class=\\"css-15496ft e11fsc2k5\\"><div class=\\"MuiAvatar-root-247 css-16dqgrp e11fsc2k6\\"><img alt=\\"Martin\\" src=\\"test avatar\\" class=\\"MuiAvatar-img-249\\"></div><span class=\\"css-eazh50 e11fsc2k4\\"><div class=\\"e11fsc2k3 css-16bvijn e1pneb170\\">Martin</div></span></div><span class=\\"css-1rxy2wf e11fsc2k0\\"><svg class=\\"e11fsc2k1 css-pqdkph ej4jd2o0\\"><title>Version</title><use xlink:href=\\"[object Object]#version\\"></use></svg>v1.1.0</span></li></ul></div></div>"`;
diff --git a/test/unit/webui/components/packagelist.spec.js b/test/unit/webui/components/packagelist.spec.js
index 5eb50f5c4..ffc7afe53 100644
--- a/test/unit/webui/components/packagelist.spec.js
+++ b/test/unit/webui/components/packagelist.spec.js
@@ -21,7 +21,7 @@ describe('<PackageList /> component', () => {
 
   });
 
-  xtest('should load the component with packages', () => {
+  test('should load the component with packages', () => {
     const props = {
       packages: [
         {
@@ -29,20 +29,20 @@ describe('<PackageList /> component', () => {
           version: '1.0.0',
           time: new Date(1532211072138).getTime(),
           description: 'Private NPM repository',
-          author: { name: 'Sam' }
+          author: { name: 'Sam', avatar: 'test avatar' }
         },
         {
           name: 'abc',
           version: '1.0.1',
           time: new Date(1532211072138).getTime(),
           description: 'abc description',
-          author: { name: 'Rose' }
+          author: { name: 'Rose', avatar: 'test avatar' }
         },
         {
           name: 'xyz',
           version: '1.1.0',
           description: 'xyz description',
-          author: { name: 'Martin' }
+          author: { name: 'Martin', avatar: 'test avatar' }
         }
       ],
       help: false
diff --git a/test/unit/webui/components/store/package.js b/test/unit/webui/components/store/package.js
index fe957a59a..97006ca9b 100644
--- a/test/unit/webui/components/store/package.js
+++ b/test/unit/webui/components/store/package.js
@@ -8,7 +8,8 @@ export const packageInformation = [
     homepage: 'https://jquery.com',
     author: {
       name: 'JS Foundation and other contributors',
-      url: 'https://github.com/jquery/jquery/blob/master/AUTHORS.txt'
+      url: 'https://github.com/jquery/jquery/blob/master/AUTHORS.txt',
+      avatar: '',
     },
     repository: {
       type: 'git',
@@ -108,6 +109,11 @@ export const packageInformation = [
     license: 'MIT',
     private: true,
     main: 'lodash.js',
+    author: {
+      name: 'John david dalton',
+      url: 'test url',
+      avatar: 'test avatar',
+    },
     engines: {
       node: '>=4.0.0'
     },
diff --git a/test/unit/webui/utils/package.spec.js b/test/unit/webui/utils/package.spec.js
index c13d3da7a..bd5e1b7f1 100644
--- a/test/unit/webui/utils/package.spec.js
+++ b/test/unit/webui/utils/package.spec.js
@@ -50,15 +50,15 @@ describe('formatDate', () => {
   });
 });
 
-xdescribe('formatDateDistance', () => {
+describe('formatDateDistance', () => {
   test('should calculate the distance', () => {
-    const dateOneMonthAgo = () => {
+    const dateTwoMonthsAgo = () => {
       const date = new Date();
-      date.setMonth(date.getMonth() - 1);
+      date.setMonth(date.getMonth() - 2);
       return date;
     };
-    const date = dateOneMonthAgo();
-    expect(formatDateDistance(date)).toEqual('about 1 month');
+    const date = dateTwoMonthsAgo();
+    expect(formatDateDistance(date)).toEqual('about 2 months');
   });
 });