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/Repository/Repository.test.tsx

@@ -1,11 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
+import Repository from './Repository';
 
 jest.mock('./img/git.png', () => '');
 
+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('<Repository /> component', () => {
   beforeEach(() => {
-    jest.resetModules();
+    jest.resetAllMocks();
   });
 
   test('should render the component in default state', () => {
@@ -18,14 +37,10 @@ describe('<Repository /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Repository = require('./Repository').default;
-    const wrapper = shallow(<Repository />);
+    const wrapper = mount(<Repository />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -34,14 +49,10 @@ describe('<Repository /> component', () => {
       latest: {},
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Repository = require('./Repository').default;
-    const wrapper = shallow(<Repository />);
+    const wrapper = mount(<Repository />);
     expect(wrapper.html()).toEqual('');
   });
 
@@ -55,14 +66,10 @@ describe('<Repository /> component', () => {
       },
     };
 
-    jest.doMock('../../pages/Version', () => ({
-      DetailContextConsumer: component => {
-        return component.children({ packageMeta });
-      },
-    }));
+    // @ts-ignore
+    mockPackageMeta.mockImplementation(() => packageMeta);
 
-    const Repository = require('./Repository').default;
-    const wrapper = shallow(<Repository />);
+    const wrapper = mount(<Repository />);
     expect(wrapper.html()).toEqual('');
   });
 });

src/components/Repository/Repository.tsx

@@ -3,12 +3,11 @@
 import React, { Component, Fragment, 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 CopyToClipBoard from '../CopyToClipBoard';
 
-import { Heading, GithubLink, RepositoryListItem } from './styles';
+import { Heading, GithubLink, RepositoryListItem, RepositoryListItemText } from './styles';
 
 import git from './img/git.png';
 import { isURL } from '../../utils/url';
@@ -41,10 +40,10 @@ class Repository extends Component {
 
     return (
       <Fragment>
-        <List dense={true} subheader={<Heading variant="subheading">{'Repository'}</Heading>}>
-          <RepositoryListItem>
+        <List dense={true} subheader={<Heading variant="subtitle1">{'Repository'}</Heading>}>
+          <RepositoryListItem button={true}>
             <Avatar src={git} />
-            <ListItemText primary={this.renderContent(url)} />
+            <RepositoryListItemText primary={this.renderContent(url)} />
           </RepositoryListItem>
         </List>
       </Fragment>

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Repository /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-dense-3 MuiList-padding-2 MuiList-subheader-4\\"><h3 class=\\"MuiTypography-root-5 MuiTypography-subheading-12 css-hyrz44 e1wmjxnh0\\">Repository</h3><li class=\\"MuiListItem-root-41 MuiListItem-default-44 MuiListItem-dense-45 MuiListItem-gutters-49 css-z8a2h0 e1wmjxnh4\\"><div class=\\"MuiAvatar-root-53 MuiAvatar-colorDefault-54\\"></div><div class=\\"MuiListItemText-root-56 MuiListItemText-dense-58\\"><span class=\\"MuiTypography-root-5 MuiTypography-subheading-12 MuiListItemText-primary-59 MuiListItemText-textDense-61\\"><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\"><a href=\\"git+https://github.com/verdaccio/ui.git\\" target=\\"_blank\\" class=\\"css-15gl0ho e1wmjxnh2\\">git+https://github.com/verdaccio/ui.git</a></span><button class=\\"MuiButtonBase-root-76 MuiIconButton-root-70 css-56v3u0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-75\\"><svg class=\\"MuiSvgIcon-root-79\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span></button></div></span></div></li></ul>"`;
+exports[`<Repository /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-dense MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-hyrz44 e1wmjxnh0 MuiTypography-subtitle1\\">Repository</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1wmjxnh4 MuiListItem-dense MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-colorDefault\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1wmjxnh5 MuiListItemText-dense\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body2\\"><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\"><a href=\\"git+https://github.com/verdaccio/ui.git\\" target=\\"_blank\\" class=\\"css-15gl0ho e1wmjxnh2\\">git+https://github.com/verdaccio/ui.git</a></span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div></span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Repository/styles.ts

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
+import ListItemText from '@material-ui/core/ListItemText';
 
 export const Heading = styled(Typography)({
   '&&': {
@@ -36,7 +37,16 @@ export const GithubLogo = styled(Github)({
 
 export const RepositoryListItem = styled(ListItem)({
   '&&': {
-    paddingLeft: 0,
-    paddingRight: 0,
+    padding: 0,
+  },
+  '&&:hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const RepositoryListItemText = styled(ListItemText)({
+  '&&': {
+    padding: '0 10px',
+    margin: 0,
   },
 });