Skip to content
This repository has been archived by the owner on Jan 16, 2022. It is now read-only.

Commit

Permalink
feat: update material-ui@4.x (#123)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@juanpicado
juanpicado committed Aug 31, 2019
1 parent 376b84f commit 67d7188
Show file tree
Hide file tree
Showing 54 changed files with 1,330 additions and 3,265 deletions.
43 changes: 30 additions & 13 deletions package.json
View file
Expand Up @@ -13,15 +13,15 @@
"devDependencies": {
"@commitlint/cli": "8.1.0",
"@commitlint/config-conventional": "8.1.0",
"@material-ui/core": "3.9.3",
"@material-ui/icons": "3.0.2",
"@material-ui/core": "4.3.3",
"@material-ui/icons": "4.2.1",
"@material-ui/styles": "4.3.3",
"@octokit/rest": "16.28.7",
"@testing-library/react": "9.1.3",
"@types/enzyme": "3.10.3",
"@types/jest": "24.0.18",
"@types/lodash": "4.14.137",
"@types/material-ui": "0.21.6",
"@types/node": "12.7.2",
"@types/lodash": "4.14.138",
"@types/node": "12.7.3",
"@types/react": "16.9.2",
"@types/react-dom": "16.9.0",
"@types/react-router-dom": "4.3.5",
Expand All @@ -47,14 +47,14 @@
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.0",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "1.7.0",
"eslint-plugin-react-hooks": "2.0.1",
"eslint-plugin-verdaccio": "2.0.0",
"file-loader": "4.2.0",
"friendly-errors-webpack-plugin": "1.7.0",
"get-stdin": "6.0.0",
"github-markdown-css": "3.0.1",
"html-webpack-plugin": "3.2.0",
"husky": "3.0.3",
"husky": "3.0.4",
"identity-obj-proxy": "3.0.0",
"in-publish": "2.0.0",
"jest": "24.9.0",
Expand All @@ -65,6 +65,7 @@
"jest-fetch-mock": "2.1.2",
"js-base64": "2.5.1",
"js-yaml": "3.13.1",
"lint-staged": "8.2.1",
"localstorage-memory": "1.0.3",
"mini-css-extract-plugin": "0.8.0",
"node-mocks-http": "1.7.6",
Expand Down Expand Up @@ -97,15 +98,15 @@
"uglifyjs-webpack-plugin": "2.2.0",
"url-loader": "2.1.0",
"validator": "11.1.0",
"verdaccio": "4.2.1",
"verdaccio-auth-memory": "1.1.5",
"verdaccio-memory": "2.0.0",
"webpack": "4.39.2",
"verdaccio": "4.2.2",
"verdaccio-auth-memory": "8.0.0",
"verdaccio-memory": "8.0.0",
"webpack": "4.39.3",
"webpack-bundle-analyzer": "3.4.1",
"webpack-bundle-size-analyzer": "3.0.0",
"webpack-cli": "3.3.7",
"webpack-dev-server": "3.8.0",
"webpack-merge": "4.2.1",
"webpack-merge": "4.2.2",
"whatwg-fetch": "3.0.0",
"xss": "1.0.6"
},
Expand Down Expand Up @@ -168,9 +169,25 @@
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
"lint-staged": {
"relative": true,
"linters": {
"*.{js,tsx,ts}": [
"eslint",
"prettier --write"
],
"*": [
"git add"
]
},
"ignore": [
"*.json"
]
},
"license": "MIT",
"commitlint": {
"extends": [
Expand Down
11 changes: 8 additions & 3 deletions partials/storage/vue/package.json
View file

Large diffs are not rendered by default.

65 changes: 27 additions & 38 deletions src/components/ActionBar/ActionBar.test.tsx
View file
@@ -1,69 +1,58 @@
import React from 'react';
import { mount, shallow } from 'enzyme';
import { mount } from 'enzyme';
import { ActionBar } from './ActionBar';

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('<ActionBar /> component', () => {
beforeEach(() => {
jest.resetModules();
jest.resetAllMocks();
});

test('should render the component in default state', () => {
const packageMeta = {
latest: {
homepage: 'https://verdaccio.tld',
bugs: {
url: 'https://verdaccio.tld/bugs',
},
dist: {
tarball: 'https://verdaccio.tld/download',
},
},
};

jest.doMock('../../pages/Version', () => ({
DetailContextConsumer: component => {
return component.children({ packageMeta });
},
}));

const ActionBar = require('./ActionBar').default;
const wrapper = shallow(<ActionBar />);
const wrapper = mount(<ActionBar />);
expect(wrapper.html()).toMatchSnapshot();
});

test('when there is no action bar data', () => {
const packageMeta = {
// @ts-ignore
mockPackageMeta.mockImplementation(() => ({
latest: {},
};

jest.doMock('../../pages/Version', () => ({
DetailContextConsumer: component => {
return component.children({ packageMeta });
},
}));

const ActionBar = require('./ActionBar').default;
const wrapper = shallow(<ActionBar />);
const wrapper = mount(<ActionBar />);
// FIXME: this only renders the DetailContextConsumer, thus
// the wrapper will be always empty
expect(wrapper.html()).toEqual('');
});

test('when there is a button to download a tarball', () => {
const packageMeta = {
// @ts-ignore
mockPackageMeta.mockImplementation(() => ({
latest: {
dist: {
tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
},
},
};

jest.doMock('../../pages/Version', () => ({
DetailContextConsumer: component => {
return component.children({ packageMeta });
},
}));

const ActionBar = require('./ActionBar').default;
const wrapper = mount(<ActionBar />);
expect(wrapper.html()).toMatchSnapshot();

Expand Down
24 changes: 19 additions & 5 deletions src/components/ActionBar/ActionBar.tsx
View file
Expand Up @@ -49,6 +49,12 @@ class ActionBar extends Component {
return (
<DetailContextConsumer>
{context => {
const { packageMeta } = context;

if (!packageMeta) {
return null;
}

return this.renderActionBar(context as VersionPageConsumerProps);
}}
</DetailContextConsumer>
Expand All @@ -65,12 +71,18 @@ class ActionBar extends Component {

private renderActionBar = ({ packageMeta }) => {
// @ts-ignore
const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
const { latest } = packageMeta;

if (!latest) {
return null;
}

const { homepage, bugs, dist } = latest;

const actionsMap = {
homepage,
issue,
tarball,
issue: bugs ? bugs.url : null,
tarball: dist ? dist.tarball : null,
};

const renderList = Object.keys(actionsMap).reduce((component: React.ReactElement[], value, key) => {
Expand Down Expand Up @@ -108,7 +120,9 @@ class ActionBar extends Component {
if (renderList.length > 0) {
return (
<List>
<ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
<ActionListItem alignItems={'flex-start'} button={true}>
{renderList}
</ActionListItem>
</List>
);
}
Expand All @@ -117,4 +131,4 @@ class ActionBar extends Component {
};
}

export default ActionBar;
export { ActionBar };
4 changes: 2 additions & 2 deletions src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
View file
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ActionBar /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2\\"><li class=\\"MuiListItem-root-5 MuiListItem-default-8 MuiListItem-gutters-13 MuiListItem-alignItemsFlexStart-10 css-9q3x3c eux6shq0\\"><a href=\\"https://verdaccio.tld\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></a><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span></button></li></ul>"`;
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;

exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root-47 MuiList-padding-48\\"><li class=\\"MuiListItem-root-51 MuiListItem-default-54 MuiListItem-gutters-59 MuiListItem-alignItemsFlexStart-56 css-9q3x3c eux6shq0\\"><button class=\\"MuiButtonBase-root-81 MuiFab-root-71 MuiFab-sizeSmall-79 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-72\\"><svg class=\\"MuiSvgIcon-root-84\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-93\\"></span></button></li></ul>"`;
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-9q3x3c eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
53 changes: 30 additions & 23 deletions src/components/Author/Author.test.tsx
View file
@@ -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', () => {
Expand All @@ -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();
});

Expand All @@ -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('');
});

Expand All @@ -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();
});
});
21 changes: 13 additions & 8 deletions src/components/Author/Author.tsx
View file
Expand Up @@ -2,18 +2,23 @@ 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 {
public render(): ReactElement<HTMLElement> {
return (
<DetailContextConsumer>
{context => {
return context && context.packageMeta && this.renderAuthor(context.packageMeta);
const { packageMeta } = context;

if (!packageMeta) {
return null;
}

return this.renderAuthor(packageMeta);
}}
</DetailContextConsumer>
);
Expand All @@ -31,19 +36,19 @@ 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;
}

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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Author/__snapshots__/Author.test.tsx.snap
View file
@@ -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>"`;

0 comments on commit 67d7188

Please sign in to comment.