feat: update material-ui@4.x (#123)

* chore: update material-ui@4.x

* test: update test for ActionBar and TestField

* chore: add types

* chore: update types

* test: update test for Author

* chore: fixed bunch of unit test

* chore: remove unused import

* chore: remove comments

* chore: replace shallow my mount

* chore: update git hooks

* chore: fix styles

* chore: update dependencies

* chore: remove types material-ui

src/components/Author/Author.test.tsx

@@ -1,9 +1,28 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import Authors from './Author';
+
+const mockPackageMeta = jest.fn(() => ({
+  latest: {
+    homepage: 'https://verdaccio.tld',
+    bugs: {
+      url: 'https://verdaccio.tld/bugs',
+    },
+    dist: {
+      tarball: 'https://verdaccio.tld/download',
+    },
+  },
+}));
+
+jest.mock('../../pages/Version', () => ({
+  DetailContextConsumer: component => {
+    return component.children({ packageMeta: mockPackageMeta() });
+  },
+}));
 
 describe('<Author /> component', () => {
   beforeEach(() => {
-    jest.resetModules();
+    jest.resetAllMocks();
   });
 
   test('should render the component in default state', () => {
@@ -20,14 +39,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -39,14 +54,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toEqual('');
   });
 
@@ -63,14 +74,10 @@ describe('<Author /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Author = require('./Author').default;
-    const wrapper = shallow(<Author />);
+    const wrapper = mount(<Authors />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

src/components/Author/Author.tsx

@@ -2,10 +2,9 @@ import React, { Component, ReactNode, ReactElement } from 'react';
 
 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';
-import { Heading, AuthorListItem } from './styles';
+import { Heading, AuthorListItem, AuthorListItemText } from './styles';
 import { isEmail } from '../../utils/url';
 
 class Authors extends Component {
@@ -13,7 +12,13 @@ class Authors extends Component {
     return (
       <DetailContextConsumer>
         {context => {
-          return context && context.packageMeta && this.renderAuthor(context.packageMeta);
+          const { packageMeta } = context;
+
+          if (!packageMeta) {
+            return null;
+          }
+
+          return this.renderAuthor(packageMeta);
         }}
       </DetailContextConsumer>
     );
@@ -31,8 +36,8 @@ class Authors extends Component {
     );
   }
 
-  public renderAuthor = packageMeta => {
-    const { author, name: packageName, version } = packageMeta.latest;
+  public renderAuthor = ({ latest }) => {
+    const { author, name: packageName, version } = latest;
 
     if (!author) {
       return null;
@@ -40,10 +45,10 @@ class Authors extends Component {
 
     const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
     return (
-      <List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>
-        <AuthorListItem>
+      <List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
+        <AuthorListItem button={true}>
           {this.renderLinkForMail(author.email, avatarComponent, packageName, version)}
-          <ListItemText primary={author.name} />
+          <AuthorListItemText primary={author.name} />
         </AuthorListItem>
       </List>
     );

src/components/Author/__snapshots__/Author.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2 MuiList-subheader-4\\"><h3 class=\\"MuiTypography-root-5 MuiTypography-subheading-12 css-hyrz44 e1xuehjw0\\">Author</h3><li class=\\"MuiListItem-root-41 MuiListItem-default-44 MuiListItem-gutters-49 css-z8a2h0 e1xuehjw1\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root-53\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img-55\\"/></div></a><div class=\\"MuiListItemText-root-56\\"><span class=\\"MuiTypography-root-5 MuiTypography-subheading-12 MuiListItemText-primary-59\\">verdaccio user</span></div></li></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root-62 MuiList-padding-63 MuiList-subheader-65\\"><h3 class=\\"MuiTypography-root-66 MuiTypography-subheading-73 css-hyrz44 e1xuehjw0\\">Author</h3><li class=\\"MuiListItem-root-102 MuiListItem-default-105 MuiListItem-gutters-110 css-z8a2h0 e1xuehjw1\\"><div class=\\"MuiAvatar-root-114\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img-116\\"/></div><div class=\\"MuiListItemText-root-117\\"><span class=\\"MuiTypography-root-66 MuiTypography-subheading-73 MuiListItemText-primary-120\\">verdaccio user</span></div></li></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Author/styles.ts

@@ -2,6 +2,7 @@ import styled from 'react-emotion';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItemText from '@material-ui/core/ListItemText';
 
 export const Heading = styled(Typography)({
   '&&': {
@@ -11,7 +12,16 @@ export const Heading = styled(Typography)({
 });
 export const AuthorListItem = styled(ListItem)({
   '&&': {
-    paddingLeft: 0,
-    paddingRight: 0,
+    padding: 0,
+  },
+  '&&:hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const AuthorListItemText = styled(ListItemText)({
+  '&&': {
+    padding: '0 10px',
+    margin: 0,
   },
 });