From 67d7188cf5f021887432efbcd148e8627a6430e6 Mon Sep 17 00:00:00 2001 From: "Juan Picado @jotadeveloper" Date: Sat, 31 Aug 2019 02:02:46 -0700 Subject: [PATCH] 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 --- package.json | 43 +- partials/storage/vue/package.json | 11 +- src/components/ActionBar/ActionBar.test.tsx | 65 +- src/components/ActionBar/ActionBar.tsx | 24 +- .../__snapshots__/ActionBar.test.tsx.snap | 4 +- src/components/Author/Author.test.tsx | 53 +- src/components/Author/Author.tsx | 21 +- .../Author/__snapshots__/Author.test.tsx.snap | 4 +- src/components/Author/styles.ts | 14 +- .../CopyToClipBoard/CopyToClipBoard.test.tsx | 4 +- .../CopyToClipBoard.test.tsx.snap | 2 +- src/components/CopyToClipBoard/styles.ts | 6 +- src/components/Dependencies/Dependencies.tsx | 4 +- .../DetailSidebar/DetailSidebar.tsx | 4 +- src/components/Developers/Developers.tsx | 2 +- .../__snapshots__/Developers.test.tsx.snap | 2834 ++--------------- src/components/Dist/Dist.test.tsx | 54 +- src/components/Dist/Dist.tsx | 4 +- .../Dist/__snapshots__/Dist.test.tsx.snap | 6 +- src/components/Engines/Engines.test.tsx | 53 +- src/components/Engines/Engines.tsx | 4 +- .../__snapshots__/Engines.test.tsx.snap | 2 +- src/components/Header/Header.tsx | 2 +- .../Header/__snapshots__/Header.test.tsx.snap | 4 +- src/components/Help/Help.test.tsx | 4 +- src/components/Help/Help.tsx | 4 +- .../Help/__snapshots__/Help.test.tsx.snap | 2 +- src/components/Install/Install.test.tsx | 4 +- src/components/Install/Install.tsx | 17 +- .../__snapshots__/Install.test.tsx.snap | 2 +- src/components/Install/styles.ts | 12 + src/components/Label/Label.test.tsx | 4 +- src/components/Link/Link.test.tsx | 4 +- .../__snapshots__/Loading.test.tsx.snap | 2 +- .../Login/__snapshots__/Login.test.tsx.snap | 4 +- .../__snapshots__/Noitems.test.tsx.snap | 4 +- .../__snapshots__/Notfound.test.tsx.snap | 2 +- src/components/Package/Package.tsx | 2 +- src/components/Readme/Readme.spec.tsx | 4 +- src/components/Repository/Repository.test.tsx | 53 +- src/components/Repository/Repository.tsx | 9 +- .../__snapshots__/Repository.test.tsx.snap | 2 +- src/components/Repository/styles.ts | 14 +- .../Search/__snapshots__/Search.test.tsx.snap | 2 +- .../__snapshots__/Spinner.test.tsx.snap | 2 +- src/components/TextField/TextField.test.tsx | 4 +- .../__snapshots__/TextField.test.tsx.snap | 2 +- src/components/UpLinks/UpLinks.tsx | 2 +- src/components/Versions/Versions.test.tsx | 65 +- src/components/Versions/Versions.tsx | 4 +- .../__snapshots__/Versions.test.tsx.snap | 2 +- src/pages/Version/Version.test.tsx | 9 +- tsconfig.json | 6 +- yarn.lock | 1136 ++++--- 54 files changed, 1336 insertions(+), 3271 deletions(-) diff --git a/package.json b/package.json index a3ada50..b236c45 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 2a15b3b..a3a3573 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 89bfd54..fac80e0 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 f68c501..ea02107 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 902784d..3da4e83 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 62b2b40..69f1394 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 fbe4921..4a64bbe 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 2838593..bb8e3bd 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 b6b8d6c..16d99e7 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 341852d..a6a3bb4 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 7be567e..23f310a 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 deb75fa..9ee5f65 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 2b46a48..34e452c 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 277e81a..9edd19e 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 43d1523..9490139 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 1024561..a821481 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 05350d5..3ae7d4e 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 d42c225..4901170 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 15ebd6c..8aa3173 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 7d361dd..4756588 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 125de75..875bf2f 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 f3ec735..ec651b4 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 b0c2ff7..4cbea88 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 228f683..7b03115 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 70bf2a2..33bc9c2 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 a050e6f..39eb1eb 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 4cc3f9d..1751a66 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 f3d1a8a..50ffe38 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 474e724..76cfc30 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 9945574..4b1f325 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 635294e..146e7cd 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 c3dcd15..f5668b9 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('