Skip to content

Commit

Permalink
feat: display package peer deps (#1144)
Browse files Browse the repository at this point in the history
* feat: enable overriding Dependencies title

* feat: add PeerDependencies component

* test: add PeerDependencies unit tests

* test: add unit test about Dependencies title overriding

* feat: display peer dependencies in package sidebar
  • Loading branch information
stephanebachelier authored and juanpicado committed Dec 3, 2018
1 parent 9d4c761 commit 9b52b1d
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 4 deletions.
3 changes: 3 additions & 0 deletions src/webui/components/PackageSidebar/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import get from 'lodash/get';
import LastSync from './modules/LastSync';
import Maintainers from './modules/Maintainers';
import Dependencies from './modules/Dependencies';
import PeerDependencies from './modules/PeerDependencies';
import Infos from './modules/Infos';

import {
Expand Down Expand Up @@ -65,6 +66,7 @@ export default class PackageSidebar extends React.Component {

// Dependencies component
const dependencies = get(packageMeta, 'latest.dependencies', {});
const peerDependencies = get(packageMeta, 'latest.peerDependencies', {});

// Maintainers component
return (
Expand All @@ -83,6 +85,7 @@ export default class PackageSidebar extends React.Component {
{/* TODO: Refacor later, when we decide to show only maintainers/authors */}
<Maintainers packageMeta={packageMeta} />
<Dependencies dependencies={dependencies} />
<PeerDependencies dependencies={peerDependencies} />
{/* Package management module? Help us implement it! */}
</aside>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ const renderDependenciesList = (dependencies, dependenciesList) => {
);
};

const Dependencies = ({dependencies = {}}) => {
const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {
const dependenciesList = Object.keys(dependencies);
return (
<Module title="Dependencies" className={classes.dependenciesModule}>
<Module title={title} className={classes.dependenciesModule}>
{dependenciesList.length > 0 ? (
renderDependenciesList(dependencies, dependenciesList)
) : (
Expand All @@ -43,7 +43,8 @@ const Dependencies = ({dependencies = {}}) => {
};

Dependencies.propTypes = {
dependencies: PropTypes.object
dependencies: PropTypes.object,
title: PropTypes.string
};

export default Dependencies;
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import Dependencies from '../Dependencies';

export const TITLE = 'Peer Dependencies'

const PeerDependencies = ({dependencies = {}, title = TITLE}) => {
return (
<Dependencies title={title} dependencies={dependencies} />
);
};

PeerDependencies.propTypes = {
dependencies: PropTypes.object,
title: PropTypes.string
};

export default PeerDependencies;
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
exports[`<PackageSidebar /> : <Dependencies /> should load dependencies 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Dependencies</h2><div><ul><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.3\\"><a href=\\"http://localhost/#/detail/@verdaccio/file-locking\\">@verdaccio/file-locking</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.2\\"><a href=\\"http://localhost/#/detail/@verdaccio/streams\\">@verdaccio/streams</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.1\\"><a href=\\"http://localhost/#/detail/JSONStream\\">JSONStream</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.2\\"><a href=\\"http://localhost/#/detail/apache-md5\\">apache-md5</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"http://localhost/#/detail/async\\">async</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.15.0\\"><a href=\\"http://localhost/#/detail/body-parser\\">body-parser</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.8.0\\"><a href=\\"http://localhost/#/detail/bunyan\\">bunyan</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"http://localhost/#/detail/chalk\\">chalk</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.11.0\\"><a href=\\"http://localhost/#/detail/commander\\">commander</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.6.2\\"><a href=\\"http://localhost/#/detail/compression\\">compression</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"http://localhost/#/detail/cookies\\">cookies</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.8.3\\"><a href=\\"http://localhost/#/detail/cors\\">cors</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.15.3\\"><a href=\\"http://localhost/#/detail/express\\">express</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^4.3.2\\"><a href=\\"http://localhost/#/detail/global\\">global</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.0.5\\"><a href=\\"http://localhost/#/detail/handlebars\\">handlebars</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.4.0\\"><a href=\\"http://localhost/#/detail/http-errors\\">http-errors</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.0.1\\"><a href=\\"http://localhost/#/detail/js-string-escape\\">js-string-escape</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.6.0\\"><a href=\\"http://localhost/#/detail/js-yaml\\">js-yaml</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^7.4.1\\"><a href=\\"http://localhost/#/detail/jsonwebtoken\\">jsonwebtoken</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.1\\"><a href=\\"http://localhost/#/detail/lockfile\\">lockfile</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.17.4\\"><a href=\\"http://localhost/#/detail/lodash\\">lodash</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"http://localhost/#/detail/lunr\\">lunr</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.3.6\\"><a href=\\"http://localhost/#/detail/marked\\">marked</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.3.6\\"><a href=\\"http://localhost/#/detail/mime\\">mime</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.0.2\\"><a href=\\"http://localhost/#/detail/minimatch\\">minimatch</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.5.1\\"><a href=\\"http://localhost/#/detail/mkdirp\\">mkdirp</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.4.0\\"><a href=\\"http://localhost/#/detail/pkginfo\\">pkginfo</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.72.0\\"><a href=\\"http://localhost/#/detail/request\\">request</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^5.1.0\\"><a href=\\"http://localhost/#/detail/semver\\">semver</a><span>, </span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.0\\"><a href=\\"http://localhost/#/detail/unix-crypt-td-js\\">unix-crypt-td-js</a></li></ul></div></div>"`;

exports[`<PackageSidebar /> : <Dependencies /> should load the package without dependencies 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Dependencies</h2><div><p class=\\"emptyPlaceholder\\">Zero Dependencies!</p></div></div>"`;
exports[`<PackageSidebar /> : <Dependencies /> should permit overriding title 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Package dependencies</h2><div><p class=\\"emptyPlaceholder\\">Zero Dependencies!</p></div></div>"`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<PackageSidebar /> : <PeerDependencies /> should load dependencies 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Peer Dependencies</h2><div><ul><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.3\\"><a href=\\"http://localhost/#/detail/@verdaccio/file-locking\\">@verdaccio/file-locking</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.0.2\\"><a href=\\"http://localhost/#/detail/@verdaccio/streams\\">@verdaccio/streams</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.1\\"><a href=\\"http://localhost/#/detail/JSONStream\\">JSONStream</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.1.2\\"><a href=\\"http://localhost/#/detail/apache-md5\\">apache-md5</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"http://localhost/#/detail/async\\">async</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.15.0\\"><a href=\\"http://localhost/#/detail/body-parser\\">body-parser</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.8.0\\"><a href=\\"http://localhost/#/detail/bunyan\\">bunyan</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.0.1\\"><a href=\\"http://localhost/#/detail/chalk\\">chalk</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.11.0\\"><a href=\\"http://localhost/#/detail/commander\\">commander</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.6.2\\"><a href=\\"http://localhost/#/detail/compression\\">compression</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"http://localhost/#/detail/cookies\\">cookies</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.8.3\\"><a href=\\"http://localhost/#/detail/cors\\">cors</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.15.3\\"><a href=\\"http://localhost/#/detail/express\\">express</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^4.3.2\\"><a href=\\"http://localhost/#/detail/global\\">global</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.0.5\\"><a href=\\"http://localhost/#/detail/handlebars\\">handlebars</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.4.0\\"><a href=\\"http://localhost/#/detail/http-errors\\">http-errors</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 1.0.1\\"><a href=\\"http://localhost/#/detail/js-string-escape\\">js-string-escape</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.6.0\\"><a href=\\"http://localhost/#/detail/js-yaml\\">js-yaml</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^7.4.1\\"><a href=\\"http://localhost/#/detail/jsonwebtoken\\">jsonwebtoken</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.1\\"><a href=\\"http://localhost/#/detail/lockfile\\">lockfile</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 4.17.4\\"><a href=\\"http://localhost/#/detail/lodash\\">lodash</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.7.0\\"><a href=\\"http://localhost/#/detail/lunr\\">lunr</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: 0.3.6\\"><a href=\\"http://localhost/#/detail/marked\\">marked</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.3.6\\"><a href=\\"http://localhost/#/detail/mime\\">mime</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^3.0.2\\"><a href=\\"http://localhost/#/detail/minimatch\\">minimatch</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.5.1\\"><a href=\\"http://localhost/#/detail/mkdirp\\">mkdirp</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^0.4.0\\"><a href=\\"http://localhost/#/detail/pkginfo\\">pkginfo</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^2.72.0\\"><a href=\\"http://localhost/#/detail/request\\">request</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^5.1.0\\"><a href=\\"http://localhost/#/detail/semver\\">semver</a><span>,&nbsp;</span></li><li class=\\"dependency-item\\" title=\\"Depend on version: ^1.0.0\\"><a href=\\"http://localhost/#/detail/unix-crypt-td-js\\">unix-crypt-td-js</a></li></ul></div></div>"`;

exports[`<PackageSidebar /> : <PeerDependencies /> should load the package without dependencies 1`] = `"<div class=\\"module dependenciesModule\\"><h2 class=\\"moduleTitle\\">Peer Dependencies</h2><div><p class=\\"emptyPlaceholder\\">Zero Dependencies!</p></div></div>"`;
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

import React from 'react';
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import Dependencies, {
NO_DEPENDENCIES,
DEP_ITEM_CLASS
Expand Down Expand Up @@ -57,4 +57,11 @@ describe('<PackageSidebar /> : <Dependencies />', () => {
expect(wrapper.find(ModuleContentPlaceholder).props().text).toBe(NO_DEPENDENCIES);
expect(wrapper.html()).toMatchSnapshot();
});

test('should permit overriding title', () => {
const wrapper = mount(<Dependencies title='Package dependencies' />);

expect(wrapper.find('h2').text()).toEqual('Package dependencies');
expect(wrapper.html()).toMatchSnapshot();
});
});
64 changes: 64 additions & 0 deletions test/unit/webui/components/PackageSidebar/peerDependencies.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* Dependencies component
*/

import React from 'react';
import { mount } from 'enzyme';
import {
NO_DEPENDENCIES,
DEP_ITEM_CLASS
} from '../../../../../src/webui/components/PackageSidebar/modules/Dependencies/index';
import PeerDependencies, {
TITLE
} from '../../../../../src/webui/components/PackageSidebar/modules/PeerDependencies/index';
import ModuleContentPlaceholder from '../../../../../src/webui/components/PackageSidebar/ModuleContentPlaceholder';


describe('<PackageSidebar /> : <PeerDependencies />', () => {
test('should load dependencies', () => {
const peerDependencies = {
'@verdaccio/file-locking': '0.0.3',
'@verdaccio/streams': '0.0.2',
JSONStream: '^1.1.1',
'apache-md5': '^1.1.2',
async: '^2.0.1',
'body-parser': '^1.15.0',
bunyan: '^1.8.0',
chalk: '^2.0.1',
commander: '^2.11.0',
compression: '1.6.2',
cookies: '^0.7.0',
cors: '^2.8.3',
express: '4.15.3',
global: '^4.3.2',
handlebars: '4.0.5',
'http-errors': '^1.4.0',
'js-string-escape': '1.0.1',
'js-yaml': '^3.6.0',
jsonwebtoken: '^7.4.1',
lockfile: '^1.0.1',
lodash: '4.17.4',
lunr: '^0.7.0',
marked: '0.3.6',
mime: '^1.3.6',
minimatch: '^3.0.2',
mkdirp: '^0.5.1',
pkginfo: '^0.4.0',
request: '^2.72.0',
semver: '^5.1.0',
'unix-crypt-td-js': '^1.0.0'
};
const wrapper = mount(<PeerDependencies dependencies={peerDependencies} />);

expect(wrapper.find('h2').text()).toEqual(TITLE);
expect(wrapper.find(`.${DEP_ITEM_CLASS}`)).toHaveLength(Object.keys(peerDependencies).length);
expect(wrapper.html()).toMatchSnapshot();
});

test('should load the package without dependencies', () => {
const wrapper = mount(<PeerDependencies />);

expect(wrapper.find(ModuleContentPlaceholder).props().text).toBe(NO_DEPENDENCIES);
expect(wrapper.html()).toMatchSnapshot();
});
});

0 comments on commit 9b52b1d

Please sign in to comment.