Skip to content

Commit 67d7188

Browse files
authored
* chore: update [email protected] * 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
1 parent 376b84f commit 67d7188

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1330
-3265
lines changed

package.json

+30-13
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
"devDependencies": {
1414
"@commitlint/cli": "8.1.0",
1515
"@commitlint/config-conventional": "8.1.0",
16-
"@material-ui/core": "3.9.3",
17-
"@material-ui/icons": "3.0.2",
16+
"@material-ui/core": "4.3.3",
17+
"@material-ui/icons": "4.2.1",
18+
"@material-ui/styles": "4.3.3",
1819
"@octokit/rest": "16.28.7",
1920
"@testing-library/react": "9.1.3",
2021
"@types/enzyme": "3.10.3",
2122
"@types/jest": "24.0.18",
22-
"@types/lodash": "4.14.137",
23-
"@types/material-ui": "0.21.6",
24-
"@types/node": "12.7.2",
23+
"@types/lodash": "4.14.138",
24+
"@types/node": "12.7.3",
2525
"@types/react": "16.9.2",
2626
"@types/react-dom": "16.9.0",
2727
"@types/react-router-dom": "4.3.5",
@@ -47,14 +47,14 @@
4747
"eslint-plugin-jsx-a11y": "6.2.3",
4848
"eslint-plugin-prettier": "3.1.0",
4949
"eslint-plugin-react": "7.14.3",
50-
"eslint-plugin-react-hooks": "1.7.0",
50+
"eslint-plugin-react-hooks": "2.0.1",
5151
"eslint-plugin-verdaccio": "2.0.0",
5252
"file-loader": "4.2.0",
5353
"friendly-errors-webpack-plugin": "1.7.0",
5454
"get-stdin": "6.0.0",
5555
"github-markdown-css": "3.0.1",
5656
"html-webpack-plugin": "3.2.0",
57-
"husky": "3.0.3",
57+
"husky": "3.0.4",
5858
"identity-obj-proxy": "3.0.0",
5959
"in-publish": "2.0.0",
6060
"jest": "24.9.0",
@@ -65,6 +65,7 @@
6565
"jest-fetch-mock": "2.1.2",
6666
"js-base64": "2.5.1",
6767
"js-yaml": "3.13.1",
68+
"lint-staged": "8.2.1",
6869
"localstorage-memory": "1.0.3",
6970
"mini-css-extract-plugin": "0.8.0",
7071
"node-mocks-http": "1.7.6",
@@ -97,15 +98,15 @@
9798
"uglifyjs-webpack-plugin": "2.2.0",
9899
"url-loader": "2.1.0",
99100
"validator": "11.1.0",
100-
"verdaccio": "4.2.1",
101-
"verdaccio-auth-memory": "1.1.5",
102-
"verdaccio-memory": "2.0.0",
103-
"webpack": "4.39.2",
101+
"verdaccio": "4.2.2",
102+
"verdaccio-auth-memory": "8.0.0",
103+
"verdaccio-memory": "8.0.0",
104+
"webpack": "4.39.3",
104105
"webpack-bundle-analyzer": "3.4.1",
105106
"webpack-bundle-size-analyzer": "3.0.0",
106107
"webpack-cli": "3.3.7",
107108
"webpack-dev-server": "3.8.0",
108-
"webpack-merge": "4.2.1",
109+
"webpack-merge": "4.2.2",
109110
"whatwg-fetch": "3.0.0",
110111
"xss": "1.0.6"
111112
},
@@ -168,9 +169,25 @@
168169
},
169170
"husky": {
170171
"hooks": {
171-
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
172+
"pre-commit": "lint-staged",
173+
"commit-msg": "commitlint -e $GIT_PARAMS"
172174
}
173175
},
176+
"lint-staged": {
177+
"relative": true,
178+
"linters": {
179+
"*.{js,tsx,ts}": [
180+
"eslint",
181+
"prettier --write"
182+
],
183+
"*": [
184+
"git add"
185+
]
186+
},
187+
"ignore": [
188+
"*.json"
189+
]
190+
},
174191
"license": "MIT",
175192
"commitlint": {
176193
"extends": [

partials/storage/vue/package.json

+8-3
Large diffs are not rendered by default.

src/components/ActionBar/ActionBar.test.tsx

+27-38
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,58 @@
11
import React from 'react';
2-
import { mount, shallow } from 'enzyme';
2+
import { mount } from 'enzyme';
3+
import { ActionBar } from './ActionBar';
4+
5+
const mockPackageMeta = jest.fn(() => ({
6+
latest: {
7+
homepage: 'https://verdaccio.tld',
8+
bugs: {
9+
url: 'https://verdaccio.tld/bugs',
10+
},
11+
dist: {
12+
tarball: 'https://verdaccio.tld/download',
13+
},
14+
},
15+
}));
16+
17+
jest.mock('../../pages/Version', () => ({
18+
DetailContextConsumer: component => {
19+
return component.children({ packageMeta: mockPackageMeta() });
20+
},
21+
}));
322

423
describe('<ActionBar /> component', () => {
524
beforeEach(() => {
625
jest.resetModules();
26+
jest.resetAllMocks();
727
});
828

929
test('should render the component in default state', () => {
10-
const packageMeta = {
11-
latest: {
12-
homepage: 'https://verdaccio.tld',
13-
bugs: {
14-
url: 'https://verdaccio.tld/bugs',
15-
},
16-
dist: {
17-
tarball: 'https://verdaccio.tld/download',
18-
},
19-
},
20-
};
21-
22-
jest.doMock('../../pages/Version', () => ({
23-
DetailContextConsumer: component => {
24-
return component.children({ packageMeta });
25-
},
26-
}));
27-
28-
const ActionBar = require('./ActionBar').default;
29-
const wrapper = shallow(<ActionBar />);
30+
const wrapper = mount(<ActionBar />);
3031
expect(wrapper.html()).toMatchSnapshot();
3132
});
3233

3334
test('when there is no action bar data', () => {
34-
const packageMeta = {
35+
// @ts-ignore
36+
mockPackageMeta.mockImplementation(() => ({
3537
latest: {},
36-
};
37-
38-
jest.doMock('../../pages/Version', () => ({
39-
DetailContextConsumer: component => {
40-
return component.children({ packageMeta });
41-
},
4238
}));
4339

44-
const ActionBar = require('./ActionBar').default;
45-
const wrapper = shallow(<ActionBar />);
40+
const wrapper = mount(<ActionBar />);
4641
// FIXME: this only renders the DetailContextConsumer, thus
4742
// the wrapper will be always empty
4843
expect(wrapper.html()).toEqual('');
4944
});
5045

5146
test('when there is a button to download a tarball', () => {
52-
const packageMeta = {
47+
// @ts-ignore
48+
mockPackageMeta.mockImplementation(() => ({
5349
latest: {
5450
dist: {
5551
tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
5652
},
5753
},
58-
};
59-
60-
jest.doMock('../../pages/Version', () => ({
61-
DetailContextConsumer: component => {
62-
return component.children({ packageMeta });
63-
},
6454
}));
6555

66-
const ActionBar = require('./ActionBar').default;
6756
const wrapper = mount(<ActionBar />);
6857
expect(wrapper.html()).toMatchSnapshot();
6958

src/components/ActionBar/ActionBar.tsx

+19-5
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ class ActionBar extends Component {
4949
return (
5050
<DetailContextConsumer>
5151
{context => {
52+
const { packageMeta } = context;
53+
54+
if (!packageMeta) {
55+
return null;
56+
}
57+
5258
return this.renderActionBar(context as VersionPageConsumerProps);
5359
}}
5460
</DetailContextConsumer>
@@ -65,12 +71,18 @@ class ActionBar extends Component {
6571

6672
private renderActionBar = ({ packageMeta }) => {
6773
// @ts-ignore
68-
const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
74+
const { latest } = packageMeta;
75+
76+
if (!latest) {
77+
return null;
78+
}
79+
80+
const { homepage, bugs, dist } = latest;
6981

7082
const actionsMap = {
7183
homepage,
72-
issue,
73-
tarball,
84+
issue: bugs ? bugs.url : null,
85+
tarball: dist ? dist.tarball : null,
7486
};
7587

7688
const renderList = Object.keys(actionsMap).reduce((component: React.ReactElement[], value, key) => {
@@ -108,7 +120,9 @@ class ActionBar extends Component {
108120
if (renderList.length > 0) {
109121
return (
110122
<List>
111-
<ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
123+
<ActionListItem alignItems={'flex-start'} button={true}>
124+
{renderList}
125+
</ActionListItem>
112126
</List>
113127
);
114128
}
@@ -117,4 +131,4 @@ class ActionBar extends Component {
117131
};
118132
}
119133

120-
export default ActionBar;
134+
export { ActionBar };
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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>"`;
3+
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
44

5-
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>"`;
5+
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>"`;

src/components/Author/Author.test.tsx

+30-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
import React from 'react';
2-
import { shallow } from 'enzyme';
2+
import { mount } from 'enzyme';
3+
import Authors from './Author';
4+
5+
const mockPackageMeta = jest.fn(() => ({
6+
latest: {
7+
homepage: 'https://verdaccio.tld',
8+
bugs: {
9+
url: 'https://verdaccio.tld/bugs',
10+
},
11+
dist: {
12+
tarball: 'https://verdaccio.tld/download',
13+
},
14+
},
15+
}));
16+
17+
jest.mock('../../pages/Version', () => ({
18+
DetailContextConsumer: component => {
19+
return component.children({ packageMeta: mockPackageMeta() });
20+
},
21+
}));
322

423
describe('<Author /> component', () => {
524
beforeEach(() => {
6-
jest.resetModules();
25+
jest.resetAllMocks();
726
});
827

928
test('should render the component in default state', () => {
@@ -20,14 +39,10 @@ describe('<Author /> component', () => {
2039
},
2140
};
2241

23-
jest.doMock('../../pages/Version', () => ({
24-
DetailContextConsumer: component => {
25-
return component.children({ packageMeta });
26-
},
27-
}));
42+
// @ts-ignore
43+
mockPackageMeta.mockImplementation(() => packageMeta);
2844

29-
const Author = require('./Author').default;
30-
const wrapper = shallow(<Author />);
45+
const wrapper = mount(<Authors />);
3146
expect(wrapper.html()).toMatchSnapshot();
3247
});
3348

@@ -39,14 +54,10 @@ describe('<Author /> component', () => {
3954
},
4055
};
4156

42-
jest.doMock('../../pages/Version', () => ({
43-
DetailContextConsumer: component => {
44-
return component.children({ packageMeta });
45-
},
46-
}));
57+
// @ts-ignore
58+
mockPackageMeta.mockImplementation(() => packageMeta);
4759

48-
const Author = require('./Author').default;
49-
const wrapper = shallow(<Author />);
60+
const wrapper = mount(<Authors />);
5061
expect(wrapper.html()).toEqual('');
5162
});
5263

@@ -63,14 +74,10 @@ describe('<Author /> component', () => {
6374
},
6475
};
6576

66-
jest.doMock('../../pages/Version', () => ({
67-
DetailContextConsumer: component => {
68-
return component.children({ packageMeta });
69-
},
70-
}));
77+
// @ts-ignore
78+
mockPackageMeta.mockImplementation(() => packageMeta);
7179

72-
const Author = require('./Author').default;
73-
const wrapper = shallow(<Author />);
80+
const wrapper = mount(<Authors />);
7481
expect(wrapper.html()).toMatchSnapshot();
7582
});
7683
});

src/components/Author/Author.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,23 @@ import React, { Component, ReactNode, ReactElement } from 'react';
22

33
import Avatar from '@material-ui/core/Avatar';
44
import List from '@material-ui/core/List';
5-
import ListItemText from '@material-ui/core/ListItemText';
65

76
import { DetailContextConsumer } from '../../pages/Version';
8-
import { Heading, AuthorListItem } from './styles';
7+
import { Heading, AuthorListItem, AuthorListItemText } from './styles';
98
import { isEmail } from '../../utils/url';
109

1110
class Authors extends Component {
1211
public render(): ReactElement<HTMLElement> {
1312
return (
1413
<DetailContextConsumer>
1514
{context => {
16-
return context && context.packageMeta && this.renderAuthor(context.packageMeta);
15+
const { packageMeta } = context;
16+
17+
if (!packageMeta) {
18+
return null;
19+
}
20+
21+
return this.renderAuthor(packageMeta);
1722
}}
1823
</DetailContextConsumer>
1924
);
@@ -31,19 +36,19 @@ class Authors extends Component {
3136
);
3237
}
3338

34-
public renderAuthor = packageMeta => {
35-
const { author, name: packageName, version } = packageMeta.latest;
39+
public renderAuthor = ({ latest }) => {
40+
const { author, name: packageName, version } = latest;
3641

3742
if (!author) {
3843
return null;
3944
}
4045

4146
const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
4247
return (
43-
<List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>
44-
<AuthorListItem>
48+
<List subheader={<Heading variant={'subtitle1'}>{'Author'}</Heading>}>
49+
<AuthorListItem button={true}>
4550
{this.renderLinkForMail(author.email, avatarComponent, packageName, version)}
46-
<ListItemText primary={author.name} />
51+
<AuthorListItemText primary={author.name} />
4752
</AuthorListItem>
4853
</List>
4954
);
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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:[email protected][email protected]\\" 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>"`;
3+
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:[email protected][email protected]\\" 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>"`;
44
5-
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>"`;
5+
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 commit comments

Comments
 (0)