diff --git a/package.json b/package.json index a3ada5049..b236c45d1 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", @@ -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", @@ -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" }, @@ -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": [ diff --git a/partials/storage/vue/package.json b/partials/storage/vue/package.json index 2a15b3b17..a3a357300 100644 --- a/partials/storage/vue/package.json +++ b/partials/storage/vue/package.json @@ -25163,7 +25163,12 @@ "registry": "npmjs" } }, - "_attachments": {}, - "_rev": "17-ad64c6287118d7af", - "readme": "

\"Vue

\n\n

\n \"Build\n \"Coverage\n \"Downloads\"\n \"Version\"\n \"License\"\n \"Chat\"\n
\n \"Sauce\n

\n\n

Supporting Vue.js

\n\nVue.js is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/vuejs/vue/blob/dev/BACKERS.md). If you'd like to join them, please consider:\n\n- [Become a backer or sponsor on Patreon](https://www.patreon.com/evanyou).\n- [Become a backer or sponsor on Open Collective](https://opencollective.com/vuejs).\n- [One-time donation via PayPal or crypto-currencies.](https://vuejs.org/support-vuejs/#One-time-Donations)\n\n#### What's the difference between Patreon and OpenCollective?\n\nFunds donated via Patreon go directly to support Evan You's full-time work on Vue.js. Funds donated via OpenCollective are managed with transparent expenses and will be used for compensating work and expenses for core team members or sponsoring community events. Your name/logo will receive proper recognition and exposure by donating on either platform.\n\n

Special Sponsors

\n\n\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Sponsors via Patreon

\n\n

Platinum

\n\n\n\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Gold

\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Sponsors via Open Collective

\n\n

Platinum

\n\n\n\n\n

Gold

\n\n\n\n\n\n\n\n---\n\n## Introduction\n\nVue (pronounced `/vjuː/`, like view) is a **progressive framework** for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.\n\n#### Browser Compatibility\n\nVue.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).\n\n## Ecosystem\n\n| Project | Status | Description |\n|---------|--------|-------------|\n| [vue-router] | [![vue-router-status]][vue-router-package] | Single-page application routing |\n| [vuex] | [![vuex-status]][vuex-package] | Large-scale state management |\n| [vue-cli] | [![vue-cli-status]][vue-cli-package] | Project scaffolding |\n| [vue-loader] | [![vue-loader-status]][vue-loader-package] | Single File Component (`*.vue` file) loader for webpack |\n| [vue-server-renderer] | [![vue-server-renderer-status]][vue-server-renderer-package] | Server-side rendering support |\n| [vue-class-component] | [![vue-class-component-status]][vue-class-component-package] | TypeScript decorator for a class-based API |\n| [vue-rx] | [![vue-rx-status]][vue-rx-package] | RxJS integration |\n| [vue-devtools] | [![vue-devtools-status]][vue-devtools-package] | Browser DevTools extension |\n\n[vue-router]: https://github.com/vuejs/vue-router\n[vuex]: https://github.com/vuejs/vuex\n[vue-cli]: https://github.com/vuejs/vue-cli\n[vue-loader]: https://github.com/vuejs/vue-loader\n[vue-server-renderer]: https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer\n[vue-class-component]: https://github.com/vuejs/vue-class-component\n[vue-rx]: https://github.com/vuejs/vue-rx\n[vue-devtools]: https://github.com/vuejs/vue-devtools\n\n[vue-router-status]: https://img.shields.io/npm/v/vue-router.svg\n[vuex-status]: https://img.shields.io/npm/v/vuex.svg\n[vue-cli-status]: https://img.shields.io/npm/v/vue-cli.svg\n[vue-loader-status]: https://img.shields.io/npm/v/vue-loader.svg\n[vue-server-renderer-status]: https://img.shields.io/npm/v/vue-server-renderer.svg\n[vue-class-component-status]: https://img.shields.io/npm/v/vue-class-component.svg\n[vue-rx-status]: https://img.shields.io/npm/v/vue-rx.svg\n[vue-devtools-status]: https://img.shields.io/chrome-web-store/v/nhdogjmejiglipccpnnnanhbledajbpd.svg\n\n[vue-router-package]: https://npmjs.com/package/vue-router\n[vuex-package]: https://npmjs.com/package/vuex\n[vue-cli-package]: https://npmjs.com/package/vue-cli\n[vue-loader-package]: https://npmjs.com/package/vue-loader\n[vue-server-renderer-package]: https://npmjs.com/package/vue-server-renderer\n[vue-class-component-package]: https://npmjs.com/package/vue-class-component\n[vue-rx-package]: https://npmjs.com/package/vue-rx\n[vue-devtools-package]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd\n\n## Documentation\n\nTo check out [live examples](https://vuejs.org/v2/examples/) and docs, visit [vuejs.org](https://vuejs.org).\n\n## Questions\n\nFor questions and support please use the [the official forum](http://forum.vuejs.org) or [community chat](https://chat.vuejs.org/). The issue list of this repo is **exclusively** for bug reports and feature requests.\n\n## Issues\n\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/vuejs/vue/releases).\n\n## Stay In Touch\n\n- [Twitter](https://twitter.com/vuejs)\n- [Blog](https://medium.com/the-vue-point)\n- [Job Board](https://vuejobs.com/?ref=vuejs)\n\n## Contribution\n\nPlease make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to [this curated list](https://github.com/vuejs/awesome-vue)!\n\nThank you to all the people who already contributed to Vue!\n\n\n\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You" + "_attachments": { + "vue-2.5.16.tgz": { + "shasum": "07edb75e8412aaeed871ebafa99f4672584a0085" + } + }, + "_rev": "18-11555c26367fc5c7", + "readme": "

\"Vue

\n\n

\n \"Build\n \"Coverage\n \"Downloads\"\n \"Version\"\n \"License\"\n \"Chat\"\n
\n \"Sauce\n

\n\n

Supporting Vue.js

\n\nVue.js is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/vuejs/vue/blob/dev/BACKERS.md). If you'd like to join them, please consider:\n\n- [Become a backer or sponsor on Patreon](https://www.patreon.com/evanyou).\n- [Become a backer or sponsor on Open Collective](https://opencollective.com/vuejs).\n- [One-time donation via PayPal or crypto-currencies.](https://vuejs.org/support-vuejs/#One-time-Donations)\n\n#### What's the difference between Patreon and OpenCollective?\n\nFunds donated via Patreon go directly to support Evan You's full-time work on Vue.js. Funds donated via OpenCollective are managed with transparent expenses and will be used for compensating work and expenses for core team members or sponsoring community events. Your name/logo will receive proper recognition and exposure by donating on either platform.\n\n

Special Sponsors

\n\n\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Sponsors via Patreon

\n\n

Platinum

\n\n\n\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Gold

\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n

Sponsors via Open Collective

\n\n

Platinum

\n\n\n\n\n

Gold

\n\n\n\n\n\n\n\n---\n\n## Introduction\n\nVue (pronounced `/vjuː/`, like view) is a **progressive framework** for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.\n\n#### Browser Compatibility\n\nVue.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).\n\n## Ecosystem\n\n| Project | Status | Description |\n|---------|--------|-------------|\n| [vue-router] | [![vue-router-status]][vue-router-package] | Single-page application routing |\n| [vuex] | [![vuex-status]][vuex-package] | Large-scale state management |\n| [vue-cli] | [![vue-cli-status]][vue-cli-package] | Project scaffolding |\n| [vue-loader] | [![vue-loader-status]][vue-loader-package] | Single File Component (`*.vue` file) loader for webpack |\n| [vue-server-renderer] | [![vue-server-renderer-status]][vue-server-renderer-package] | Server-side rendering support |\n| [vue-class-component] | [![vue-class-component-status]][vue-class-component-package] | TypeScript decorator for a class-based API |\n| [vue-rx] | [![vue-rx-status]][vue-rx-package] | RxJS integration |\n| [vue-devtools] | [![vue-devtools-status]][vue-devtools-package] | Browser DevTools extension |\n\n[vue-router]: https://github.com/vuejs/vue-router\n[vuex]: https://github.com/vuejs/vuex\n[vue-cli]: https://github.com/vuejs/vue-cli\n[vue-loader]: https://github.com/vuejs/vue-loader\n[vue-server-renderer]: https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer\n[vue-class-component]: https://github.com/vuejs/vue-class-component\n[vue-rx]: https://github.com/vuejs/vue-rx\n[vue-devtools]: https://github.com/vuejs/vue-devtools\n\n[vue-router-status]: https://img.shields.io/npm/v/vue-router.svg\n[vuex-status]: https://img.shields.io/npm/v/vuex.svg\n[vue-cli-status]: https://img.shields.io/npm/v/vue-cli.svg\n[vue-loader-status]: https://img.shields.io/npm/v/vue-loader.svg\n[vue-server-renderer-status]: https://img.shields.io/npm/v/vue-server-renderer.svg\n[vue-class-component-status]: https://img.shields.io/npm/v/vue-class-component.svg\n[vue-rx-status]: https://img.shields.io/npm/v/vue-rx.svg\n[vue-devtools-status]: https://img.shields.io/chrome-web-store/v/nhdogjmejiglipccpnnnanhbledajbpd.svg\n\n[vue-router-package]: https://npmjs.com/package/vue-router\n[vuex-package]: https://npmjs.com/package/vuex\n[vue-cli-package]: https://npmjs.com/package/vue-cli\n[vue-loader-package]: https://npmjs.com/package/vue-loader\n[vue-server-renderer-package]: https://npmjs.com/package/vue-server-renderer\n[vue-class-component-package]: https://npmjs.com/package/vue-class-component\n[vue-rx-package]: https://npmjs.com/package/vue-rx\n[vue-devtools-package]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd\n\n## Documentation\n\nTo check out [live examples](https://vuejs.org/v2/examples/) and docs, visit [vuejs.org](https://vuejs.org).\n\n## Questions\n\nFor questions and support please use the [the official forum](http://forum.vuejs.org) or [community chat](https://chat.vuejs.org/). The issue list of this repo is **exclusively** for bug reports and feature requests.\n\n## Issues\n\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n## Changelog\n\nDetailed changes for each release are documented in the [release notes](https://github.com/vuejs/vue/releases).\n\n## Stay In Touch\n\n- [Twitter](https://twitter.com/vuejs)\n- [Blog](https://medium.com/the-vue-point)\n- [Job Board](https://vuejobs.com/?ref=vuejs)\n\n## Contribution\n\nPlease make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to [this curated list](https://github.com/vuejs/awesome-vue)!\n\nThank you to all the people who already contributed to Vue!\n\n\n\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2013-present, Yuxi (Evan) You", + "_id": "vue" } \ No newline at end of file diff --git a/src/components/ActionBar/ActionBar.test.tsx b/src/components/ActionBar/ActionBar.test.tsx index 89bfd5445..fac80e059 100644 --- a/src/components/ActionBar/ActionBar.test.tsx +++ b/src/components/ActionBar/ActionBar.test.tsx @@ -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(' 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(); + const wrapper = mount(); 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(); + const wrapper = mount(); // 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(); expect(wrapper.html()).toMatchSnapshot(); diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx index f68c50133..ea021071f 100644 --- a/src/components/ActionBar/ActionBar.tsx +++ b/src/components/ActionBar/ActionBar.tsx @@ -49,6 +49,12 @@ class ActionBar extends Component { return ( {context => { + const { packageMeta } = context; + + if (!packageMeta) { + return null; + } + return this.renderActionBar(context as VersionPageConsumerProps); }} @@ -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) => { @@ -108,7 +120,9 @@ class ActionBar extends Component { if (renderList.length > 0) { return ( - {renderList} + + {renderList} + ); } @@ -117,4 +131,4 @@ class ActionBar extends Component { }; } -export default ActionBar; +export { ActionBar }; diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index 902784d13..3da4e83e4 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
"`; +exports[` component should render the component in default state 1`] = `""`; -exports[` component when there is a button to download a tarball 1`] = `"
"`; +exports[` component when there is a button to download a tarball 1`] = `"
"`; diff --git a/src/components/Author/Author.test.tsx b/src/components/Author/Author.test.tsx index 62b2b40e4..69f13942d 100644 --- a/src/components/Author/Author.test.tsx +++ b/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(' component', () => { beforeEach(() => { - jest.resetModules(); + jest.resetAllMocks(); }); test('should render the component in default state', () => { @@ -20,14 +39,10 @@ describe(' component', () => { }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Author = require('./Author').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); @@ -39,14 +54,10 @@ describe(' component', () => { }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Author = require('./Author').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toEqual(''); }); @@ -63,14 +74,10 @@ describe(' component', () => { }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Author = require('./Author').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/src/components/Author/Author.tsx b/src/components/Author/Author.tsx index fbe4921e5..4a64bbeab 100644 --- a/src/components/Author/Author.tsx +++ b/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 ( {context => { - return context && context.packageMeta && this.renderAuthor(context.packageMeta); + const { packageMeta } = context; + + if (!packageMeta) { + return null; + } + + return this.renderAuthor(packageMeta); }} ); @@ -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 = ; return ( - {'Author'}}> - + {'Author'}}> + {this.renderLinkForMail(author.email, avatarComponent, packageName, version)} - + ); diff --git a/src/components/Author/__snapshots__/Author.test.tsx.snap b/src/components/Author/__snapshots__/Author.test.tsx.snap index 2838593d3..bb8e3bd2b 100644 --- a/src/components/Author/__snapshots__/Author.test.tsx.snap +++ b/src/components/Author/__snapshots__/Author.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

    Author

  • \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component in default state 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; -exports[` component should render the component when there is no author email 1`] = `"

    Author

  • \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component when there is no author email 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index b6b8d6c30..16d99e76e 100644 --- a/src/components/Author/styles.ts +++ b/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, }, }); diff --git a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx index 341852d23..a6a3bb447 100644 --- a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx +++ b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import CopyToClipBoard from './CopyToClipBoard'; import { CopyIcon } from './styles'; @@ -8,7 +8,7 @@ describe(' component', () => { let wrapper; beforeEach(() => { - wrapper = shallow(); + wrapper = mount(); }); test('render the component', () => { diff --git a/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap b/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap index 7be567ebf..23f310a89 100644 --- a/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap +++ b/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component render the component 1`] = `"
copy text
"`; +exports[` component render the component 1`] = `"
copy text
"`; diff --git a/src/components/CopyToClipBoard/styles.ts b/src/components/CopyToClipBoard/styles.ts index deb75faf2..9ee5f6524 100644 --- a/src/components/CopyToClipBoard/styles.ts +++ b/src/components/CopyToClipBoard/styles.ts @@ -19,8 +19,4 @@ export const ClipBoardCopyText = styled('span')({ }, }); -export const CopyIcon = styled(IconButton)({ - '&&': { - margin: '0 0 0 10px', - }, -}); +export const CopyIcon = styled(IconButton)({}); diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx index 2b46a4889..34e452cc4 100644 --- a/src/components/Dependencies/Dependencies.tsx +++ b/src/components/Dependencies/Dependencies.tsx @@ -32,7 +32,7 @@ class DepDetail extends Component { public render(): ReactElement { const { name, version } = this.state; const tagText = `${name}@${version}`; - return ; + return ; } private handleOnClick = () => { @@ -57,7 +57,7 @@ class DependencyBlock extends Component<{ title: string; dependencies: [] }> { return ( - {`${title} (${deps.length})`} + {`${title} (${deps.length})`} {this.renderTags(deps, enableLoading)} diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx index 277e81a4f..9edd19eea 100644 --- a/src/components/DetailSidebar/DetailSidebar.tsx +++ b/src/components/DetailSidebar/DetailSidebar.tsx @@ -4,7 +4,7 @@ import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import List from '@material-ui/core/List'; -import ActionBar from '../ActionBar/ActionBar'; +import { ActionBar } from '../ActionBar/ActionBar'; import Author from '../Author'; import Developers from '../Developers'; import Dist from '../Dist/Dist'; @@ -27,7 +27,7 @@ const renderActionBar = () => ; const renderTitle = (packageName, packageMeta) => { return ( - + {packageName}} secondary={packageMeta.latest.description} /> diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx index 43d15233c..9490139f3 100644 --- a/src/components/Developers/Developers.tsx +++ b/src/components/Developers/Developers.tsx @@ -33,7 +33,7 @@ const Developers: FC = ({ type, visibleMax }) => { return ( - {type} + {type} {listVisibleDevelopers.map(developer => (
{renderDeveloperDetails(developer, packageMeta)}
diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap index 1024561f1..a82148107 100644 --- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap +++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap @@ -4,454 +4,59 @@ exports[`test Developers should render the component for contributors with items - - - -

contributors -

- - - + + + +
- - - - -
- - - - - + + + + +
+ + } + className="MuiTooltip-popper" id={null} open={false} placement="bottom" @@ -923,433 +163,68 @@ exports[`test Developers should render the component for contributors with items title="mgol" > - - - - -
- - - - - + + + + +
+ + } + className="MuiTooltip-popper" id={null} open={false} placement="bottom" @@ -1369,454 +244,59 @@ exports[`test Developers should render the component for maintainers with items - - - -

maintainers -

- - - + + + +
- - - - -
- - - - - + + + + +
+ + } + className="MuiTooltip-popper" id={null} open={false} placement="bottom" @@ -2288,433 +403,68 @@ exports[`test Developers should render the component for maintainers with items title="mgol" > - - - - -
- - - - - + + + + +
+ + } + className="MuiTooltip-popper" id={null} open={false} placement="bottom" diff --git a/src/components/Dist/Dist.test.tsx b/src/components/Dist/Dist.test.tsx index 05350d520..3ae7d4e71 100644 --- a/src/components/Dist/Dist.test.tsx +++ b/src/components/Dist/Dist.test.tsx @@ -1,5 +1,24 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; +import Dist from './Dist'; + +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(' component', () => { beforeEach(() => { @@ -18,14 +37,11 @@ describe(' component', () => { license: '', }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); - const Dist = require('./Dist').default; - const wrapper = shallow(); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); + + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); @@ -41,14 +57,11 @@ describe(' component', () => { license: 'MIT', }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); - const Dist = require('./Dist').default; - const wrapper = shallow(); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); + + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); @@ -67,14 +80,11 @@ describe(' component', () => { }, }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); - const Dist = require('./Dist').default; - const wrapper = shallow(); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); + + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/src/components/Dist/Dist.tsx b/src/components/Dist/Dist.tsx index d42c2252a..490117012 100644 --- a/src/components/Dist/Dist.tsx +++ b/src/components/Dist/Dist.tsx @@ -46,8 +46,8 @@ class Dist extends Component { const { dist, license } = packageMeta && packageMeta.latest; return ( - {'Latest Distribution'}}> - {this.renderChips(dist, license)} + {'Latest Distribution'}}> + {this.renderChips(dist, license)} ); }; diff --git a/src/components/Dist/__snapshots__/Dist.test.tsx.snap b/src/components/Dist/__snapshots__/Dist.test.tsx.snap index 15ebd6c27..8aa31736f 100644 --- a/src/components/Dist/__snapshots__/Dist.test.tsx.snap +++ b/src/components/Dist/__snapshots__/Dist.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

    Latest Distribution

  • file count: 7
    size: 10.00 Bytes
"`; +exports[` component should render the component in default state 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
"`; -exports[` component should render the component with license as object 1`] = `"

    Latest Distribution

  • file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as object 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; -exports[` component should render the component with license as string 1`] = `"

    Latest Distribution

  • file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as string 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; diff --git a/src/components/Engines/Engines.test.tsx b/src/components/Engines/Engines.test.tsx index 7d361dd6c..475658843 100644 --- a/src/components/Engines/Engines.test.tsx +++ b/src/components/Engines/Engines.test.tsx @@ -1,12 +1,31 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; +import Engine from './Engines'; jest.mock('./img/node.png', () => ''); jest.mock('../Install/img/npm.svg', () => ''); +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(' component', () => { beforeEach(() => { - jest.resetModules(); + jest.resetAllMocks(); }); test('should render the component in default state', () => { @@ -19,14 +38,10 @@ describe(' component', () => { }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Engines = require('./Engines').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); @@ -35,14 +50,10 @@ describe(' component', () => { latest: {}, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Engines = require('./Engines').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toEqual(''); }); @@ -53,14 +64,10 @@ describe(' component', () => { }, }; - jest.doMock('../../pages/Version', () => ({ - DetailContextConsumer: component => { - return component.children({ packageMeta }); - }, - })); + // @ts-ignore + mockPackageMeta.mockImplementation(() => packageMeta); - const Engines = require('./Engines').default; - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toEqual(''); }); }); diff --git a/src/components/Engines/Engines.tsx b/src/components/Engines/Engines.tsx index 125de75fa..875bf2f00 100644 --- a/src/components/Engines/Engines.tsx +++ b/src/components/Engines/Engines.tsx @@ -60,8 +60,8 @@ class Engine extends Component { private renderListItems = (heading, text) => { return ( - {text.split('-').join(' ')}}> - + {text.split('-').join(' ')}}> + {ICONS[text]} diff --git a/src/components/Engines/__snapshots__/Engines.test.tsx.snap b/src/components/Engines/__snapshots__/Engines.test.tsx.snap index f3ec7352e..ec651b4a7 100644 --- a/src/components/Engines/__snapshots__/Engines.test.tsx.snap +++ b/src/components/Engines/__snapshots__/Engines.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

    node JS

  • >= 0.1.98

    NPM version

  • >3
"`; +exports[` component should render the component in default state 1`] = `"
    node JS
    >= 0.1.98
    NPM version
    >3
"`; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b0c2ff7f3..4cbea8848 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -32,7 +32,7 @@ interface Props { } interface State { - anchorEl?: null | HTMLElement | ((element: HTMLElement) => HTMLElement); + anchorEl?: null | Element | ((element: Element) => Element); openInfoDialog: boolean; registryUrl: string; showMobileNavBar: boolean; diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index 228f683b7..7b031153f 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; +exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; -exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; +exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; diff --git a/src/components/Help/Help.test.tsx b/src/components/Help/Help.test.tsx index 70bf2a276..33bc9c27e 100644 --- a/src/components/Help/Help.test.tsx +++ b/src/components/Help/Help.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import Help from './Help'; describe(' component', () => { test('should render the component in default state', () => { - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/src/components/Help/Help.tsx b/src/components/Help/Help.tsx index a050e6fb5..39eb1eb6c 100644 --- a/src/components/Help/Help.tsx +++ b/src/components/Help/Help.tsx @@ -12,7 +12,7 @@ import { CardStyled as Card, HelpTitle } from './styles'; function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode { return ( - {title} + {title} ); @@ -24,7 +24,7 @@ const Help: React.FC = () => { return ( - + {'No Package Published Yet.'} diff --git a/src/components/Help/__snapshots__/Help.test.tsx.snap b/src/components/Help/__snapshots__/Help.test.tsx.snap index 4cc3f9dab..1751a66dc 100644 --- a/src/components/Help/__snapshots__/Help.test.tsx.snap +++ b/src/components/Help/__snapshots__/Help.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

1. Login

npm adduser --registry http://localhost

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; +exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

1. Login

npm adduser --registry http://localhost

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; diff --git a/src/components/Install/Install.test.tsx b/src/components/Install/Install.test.tsx index f3d1a8a29..50ffe3818 100644 --- a/src/components/Install/Install.test.tsx +++ b/src/components/Install/Install.test.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import Install from './Install'; describe(' component', () => { test('should render the component in default state', () => { - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/src/components/Install/Install.tsx b/src/components/Install/Install.tsx index 474e72439..76cfc30cc 100644 --- a/src/components/Install/Install.tsx +++ b/src/components/Install/Install.tsx @@ -1,5 +1,4 @@ import List from '@material-ui/core/List'; -import ListItemText from '@material-ui/core/ListItemText'; import React, { Component } from 'react'; import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version'; @@ -11,7 +10,7 @@ import npm from './img/npm.svg'; import pnpm from './img/pnpm.svg'; import yarn from './img/yarn.svg'; -import { Heading, InstallItem, PackageMangerAvatar } from './styles'; +import { Heading, InstallItem, PackageMangerAvatar, InstallListItemText } from './styles'; class Install extends Component { public render(): JSX.Element { @@ -27,7 +26,7 @@ class Install extends Component { public renderCopyCLI = ({ packageName = '' }: Partial) => { return ( <> - {'Installation'}}>{this.renderListItems(packageName)} + {'Installation'}}>{this.renderListItems(packageName)} ); }; @@ -35,17 +34,17 @@ class Install extends Component { public renderListItems = (packageName: string) => { return ( <> - + - } secondary={'Install using NPM'} /> + } secondary={'Install using NPM'} /> - + - } secondary={'Install using Yarn'} /> + } secondary={'Install using Yarn'} /> - + - } secondary={'Install using PNPM'} /> + } secondary={'Install using PNPM'} /> ); diff --git a/src/components/Install/__snapshots__/Install.test.tsx.snap b/src/components/Install/__snapshots__/Install.test.tsx.snap index 9945574a5..4b1f325c7 100644 --- a/src/components/Install/__snapshots__/Install.test.tsx.snap +++ b/src/components/Install/__snapshots__/Install.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `""`; +exports[` component should render the component in default state 1`] = `null`; diff --git a/src/components/Install/styles.ts b/src/components/Install/styles.ts index 635294e7c..146e7cd9d 100644 --- a/src/components/Install/styles.ts +++ b/src/components/Install/styles.ts @@ -1,5 +1,6 @@ import Avatar from '@material-ui/core/Avatar'; import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; import Typography from '@material-ui/core/Typography'; import styled from 'react-emotion'; import { fontWeight } from '../../utils/styles/sizes'; @@ -15,10 +16,21 @@ export const InstallItem = styled(ListItem)({ '&&': { padding: 0, }, + '&&:hover': { + backgroundColor: 'transparent', + }, +}); + +export const InstallListItemText = styled(ListItemText)({ + '&&': { + padding: '0 10px', + margin: 0, + }, }); export const PackageMangerAvatar = styled(Avatar)({ '&&': { borderRadius: '0px', + padding: '0', }, }); diff --git a/src/components/Label/Label.test.tsx b/src/components/Label/Label.test.tsx index c3dcd1573..f5668b959 100644 --- a/src/components/Label/Label.test.tsx +++ b/src/components/Label/Label.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import Label from './Label'; @@ -8,7 +8,7 @@ describe('