mirror of
https://github.com/verdaccio/verdaccio.git
synced 2025-04-01 02:42:23 -05:00
refactor: removes old package sidebar
This commit is contained in:
Ayush Sharma
parent
cba68431f7
commit
fed9711f48
39 changed files with 0 additions and 1182 deletions
|
|
@ -1,25 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
export default function Module({title, description, children, className}) {
|
||||
return (
|
||||
<div className={`${classes.module} ${className}`}>
|
||||
<h2 className={classes.moduleTitle}>
|
||||
{title}
|
||||
{description && <span>{description}</span>}
|
||||
</h2>
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Module.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string,
|
||||
children: PropTypes.any.isRequired,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@import '../../../styles/variables';
|
||||
@import '../../../styles/mixins';
|
||||
|
||||
.module {
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
.moduleTitle {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: $font-size-lg;
|
||||
margin: 0 0 10px;
|
||||
padding: 5px 0;
|
||||
font-weight: $font-weight-semibold;
|
||||
@include border-bottom-default($greyGainsboro);
|
||||
|
||||
span { // description
|
||||
font-size: $font-size-sm;
|
||||
color: $greyChateau;
|
||||
margin-left: auto;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
export default function ModuleContentPlaceholder({text}) {
|
||||
return <p className={classes.emptyPlaceholder}>{text}</p>;
|
||||
}
|
||||
ModuleContentPlaceholder.propTypes = {
|
||||
text: PropTypes.string.isRequired,
|
||||
};
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import '../../../styles/variables';
|
||||
|
||||
.emptyPlaceholder {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
font-size: $font-size-base;
|
||||
color: $greyChateau;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import get from 'lodash/get';
|
||||
import LastSync from './modules/LastSync';
|
||||
import DistTags from './modules/DistTags';
|
||||
import Maintainers from './modules/Maintainers';
|
||||
import Dependencies from './modules/Dependencies';
|
||||
import PeerDependencies from './modules/PeerDependencies';
|
||||
import Infos from './modules/Infos';
|
||||
|
||||
import {
|
||||
formatLicense,
|
||||
formatRepository,
|
||||
getLastUpdatedPackageTime,
|
||||
getRecentReleases,
|
||||
} from '../../utils/package';
|
||||
import API from '../../utils/api';
|
||||
import {DIST_TAGS} from '../../../lib/constants';
|
||||
|
||||
export default class PackageSidebar extends React.Component {
|
||||
state = {};
|
||||
|
||||
static propTypes = {
|
||||
packageName: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.loadPackageData = this.loadPackageData.bind(this);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { packageName } = this.props;
|
||||
await this.loadPackageData(packageName);
|
||||
}
|
||||
|
||||
async loadPackageData(packageName) {
|
||||
let packageMeta;
|
||||
|
||||
try {
|
||||
packageMeta = await API.request(`sidebar/${packageName}`, 'GET');
|
||||
} catch (err) {
|
||||
this.setState({
|
||||
failed: true,
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
packageMeta,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { packageMeta } = this.state;
|
||||
|
||||
if (packageMeta) {
|
||||
const {time, _uplinks} = packageMeta;
|
||||
|
||||
// Infos component
|
||||
const license = formatLicense(get(packageMeta, 'latest.license', null));
|
||||
const repository = formatRepository(
|
||||
get(packageMeta, 'latest.repository', null)
|
||||
);
|
||||
const homepage = get(packageMeta, 'latest.homepage', null);
|
||||
|
||||
// dist-tags
|
||||
const distTags = packageMeta[DIST_TAGS];
|
||||
|
||||
// Lastsync component
|
||||
const recentReleases = getRecentReleases(time);
|
||||
const lastUpdated = getLastUpdatedPackageTime(_uplinks);
|
||||
|
||||
// Dependencies component
|
||||
const dependencies = get(packageMeta, 'latest.dependencies', {});
|
||||
const peerDependencies = get(packageMeta, 'latest.peerDependencies', {});
|
||||
|
||||
// Maintainers component
|
||||
return (
|
||||
<aside className={'sidebar-info'}>
|
||||
{time && (
|
||||
<LastSync
|
||||
lastUpdated={lastUpdated}
|
||||
recentReleases={recentReleases}
|
||||
/>
|
||||
)}
|
||||
<DistTags distTags={distTags} />
|
||||
<Infos
|
||||
homepage={homepage}
|
||||
license={license}
|
||||
repository={repository}
|
||||
/>
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<aside className={'sidebar-loading'}>{'Loading package information...'}</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Module from '../../Module';
|
||||
|
||||
import {getDetailPageURL} from '../../../../utils/url';
|
||||
import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
export const NO_DEPENDENCIES = 'Zero Dependencies!';
|
||||
export const DEP_ITEM_CLASS = 'dependency-item';
|
||||
|
||||
const renderDependenciesList = (dependencies, dependenciesList) => {
|
||||
return (
|
||||
<ul>
|
||||
{dependenciesList.map((dependenceName, index) => {
|
||||
return (
|
||||
<li
|
||||
className={DEP_ITEM_CLASS}
|
||||
key={index}
|
||||
title={`Depend on version: ${dependencies[dependenceName]}`}
|
||||
>
|
||||
<a href={getDetailPageURL(dependenceName)}>{dependenceName}</a>
|
||||
{index < dependenciesList.length - 1 && <span>{', '}</span>}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {
|
||||
const dependenciesList = Object.keys(dependencies);
|
||||
return (
|
||||
<Module className={classes.dependenciesModule} title={title}>
|
||||
{dependenciesList.length > 0 ? (
|
||||
renderDependenciesList(dependencies, dependenciesList)
|
||||
) : (
|
||||
<ModuleContentPlaceholder text={NO_DEPENDENCIES} />
|
||||
)}
|
||||
</Module>
|
||||
);
|
||||
};
|
||||
|
||||
Dependencies.propTypes = {
|
||||
dependencies: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Dependencies;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../styles/variables';
|
||||
|
||||
.dependenciesModule {
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-xxs;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import React from 'react';
|
||||
import propTypes from 'prop-types';
|
||||
import Module from '../../Module';
|
||||
import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
const renderDistTags = (distTags) => {
|
||||
|
||||
const tags = Object.entries(distTags);
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{tags.map((tagItem) => {
|
||||
const [tag, version] = tagItem;
|
||||
|
||||
return (
|
||||
<li className={'dist-tag-item'} key={tag}>
|
||||
<span>{tag}</span>
|
||||
<span>{version}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
const DistTags = ({distTags = {}}) => {
|
||||
const hasTags = Object.keys(distTags).length > 0;
|
||||
|
||||
return (
|
||||
<Module
|
||||
className={classes.releasesModule}
|
||||
description={''}
|
||||
title={'Dist-Tags'}
|
||||
>
|
||||
{hasTags ? (
|
||||
renderDistTags(distTags)
|
||||
) : (
|
||||
<ModuleContentPlaceholder text={'Not Available!'} />
|
||||
)}
|
||||
</Module>
|
||||
);
|
||||
};
|
||||
|
||||
DistTags.propTypes = {
|
||||
distTags: propTypes.object,
|
||||
};
|
||||
|
||||
export default DistTags;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../styles/variables';
|
||||
|
||||
.releasesModule {
|
||||
li {
|
||||
display: flex;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-xs;
|
||||
|
||||
span:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Module from '../../Module';
|
||||
import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
const renderSection = (title, url) => (
|
||||
<li>
|
||||
<span>{title}</span>
|
||||
<a href={url} rel={'noopener noreferrer'} target={'_blank'}>
|
||||
{url}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
|
||||
const Infos = ({homepage, repository, license}) => {
|
||||
const showInfo = homepage || repository || license;
|
||||
return (
|
||||
<Module className={classes.infosModule} title={'Infos'}>
|
||||
{showInfo ? (
|
||||
<ul>
|
||||
{homepage && renderSection('Homepage', homepage)}
|
||||
{repository && renderSection('Repository', repository)}
|
||||
{license && (
|
||||
<li>
|
||||
<span>{'License'}</span>
|
||||
<span>{license}</span>
|
||||
</li>)}
|
||||
</ul>) : <ModuleContentPlaceholder text={'Not Available!'} />}
|
||||
</Module>);
|
||||
};
|
||||
|
||||
Infos.propTypes = {
|
||||
homepage: PropTypes.string,
|
||||
repository: PropTypes.string,
|
||||
license: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Infos;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
@import '../../../../styles/variables';
|
||||
@import '../../../../styles/mixins';
|
||||
|
||||
.infosModule {
|
||||
li {
|
||||
display: flex;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-xs;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
max-width: 150px;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
a:last-child,
|
||||
span:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import React from 'react';
|
||||
import propTypes from 'prop-types';
|
||||
import Module from '../../Module';
|
||||
import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
const renderRecentReleases = (recentReleases) => (
|
||||
<ul>
|
||||
{recentReleases.map((versionInfo) => {
|
||||
const {version, time} = versionInfo;
|
||||
return (
|
||||
<li className={'last-sync-item'} key={version}>
|
||||
<span>{version}</span>
|
||||
<span>{time}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
|
||||
const LastSync = ({recentReleases = [], lastUpdated = ''}) => {
|
||||
return (
|
||||
<Module
|
||||
className={classes.releasesModule}
|
||||
description={lastUpdated}
|
||||
title={'Last Sync'}
|
||||
>
|
||||
{recentReleases.length ? (
|
||||
renderRecentReleases(recentReleases)
|
||||
) : (
|
||||
<ModuleContentPlaceholder text={'Not Available!'} />
|
||||
)}
|
||||
</Module>
|
||||
);
|
||||
};
|
||||
|
||||
LastSync.propTypes = {
|
||||
recentReleases: propTypes.array,
|
||||
lastUpdated: propTypes.string,
|
||||
};
|
||||
|
||||
export default LastSync;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../styles/variables';
|
||||
|
||||
.releasesModule {
|
||||
li {
|
||||
display: flex;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-xs;
|
||||
|
||||
span:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
const MaintainerInfo = ({title, name, avatar}) => {
|
||||
const avatarDescription = `${title} ${name}'s avatar`;
|
||||
return (
|
||||
<div className={classes.maintainer} title={name}>
|
||||
<img alt={avatarDescription} src={avatar} title={avatarDescription} />
|
||||
<span className={'maintainer-name'}>{name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MaintainerInfo.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
avatar: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default MaintainerInfo;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import '../../../../../styles/variables';
|
||||
@import '../../../../../styles/mixins';
|
||||
|
||||
.maintainer {
|
||||
display: flex;
|
||||
line-height: $line-height-xl;
|
||||
cursor: default;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-sm;
|
||||
flex-shrink: 1;
|
||||
@include ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import get from 'lodash/get';
|
||||
import filter from 'lodash/filter';
|
||||
import size from 'lodash/size';
|
||||
import has from 'lodash/has';
|
||||
import uniqBy from 'lodash/uniqBy';
|
||||
|
||||
import Module from '../../Module';
|
||||
import MaintainerInfo from './MaintainerInfo';
|
||||
import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';
|
||||
|
||||
import classes from './style.scss';
|
||||
|
||||
const CONTRIBUTORS_TO_SHOW = 5;
|
||||
|
||||
export default class Maintainers extends React.Component {
|
||||
static propTypes = {
|
||||
packageMeta: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleShowAllContributors = this.handleShowAllContributors.bind(this);
|
||||
}
|
||||
|
||||
get author() {
|
||||
return get(this, 'props.packageMeta.latest.author');
|
||||
}
|
||||
|
||||
get contributors() {
|
||||
const contributors = get(this, 'props.packageMeta.latest.contributors', {});
|
||||
return filter(contributors, (contributor) => {
|
||||
return (
|
||||
contributor.name !== get(this, 'author.name') &&
|
||||
contributor.email !== get(this, 'author.email')
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
get showAllContributors() {
|
||||
const { showAllContributors } = this.state;
|
||||
return showAllContributors || size(this.contributors) <= 5;
|
||||
}
|
||||
|
||||
get uniqueContributors() {
|
||||
if (!this.contributors) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return uniqBy(this.contributors, (contributor) => contributor.name).slice(
|
||||
0,
|
||||
CONTRIBUTORS_TO_SHOW
|
||||
);
|
||||
}
|
||||
|
||||
handleShowAllContributors() {
|
||||
this.setState({
|
||||
showAllContributors: true,
|
||||
});
|
||||
}
|
||||
|
||||
renderContributors() {
|
||||
if (!this.contributors) return null;
|
||||
|
||||
return (this.showAllContributors
|
||||
? this.contributors
|
||||
: this.uniqueContributors
|
||||
).map((contributor, index) => {
|
||||
return (
|
||||
<MaintainerInfo
|
||||
avatar={contributor.avatar}
|
||||
key={index}
|
||||
name={contributor.name}
|
||||
title={'Contributors'}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderAuthorAndContributors(author) {
|
||||
return (
|
||||
<div>
|
||||
<ul className={'maintainer-author'}>
|
||||
{author &&
|
||||
author.name && (
|
||||
<MaintainerInfo
|
||||
avatar={author.avatar}
|
||||
name={author.name}
|
||||
title={'Author'}
|
||||
/>
|
||||
)}
|
||||
{this.renderContributors()}
|
||||
</ul>
|
||||
{!this.showAllContributors && (
|
||||
<button
|
||||
className={classes.showAllContributors}
|
||||
onClick={this.handleShowAllContributors}
|
||||
title={'Current list only show the author and first 5 contributors unique by name'}
|
||||
>
|
||||
{'Show all contributor'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const contributors = this.renderContributors();
|
||||
return (
|
||||
<Module className={classes.maintainersModule} title={'Maintainers'}>
|
||||
{contributors.length || has(this.author, 'name') ? (
|
||||
this.renderAuthorAndContributors(this.author)
|
||||
) : (
|
||||
<ModuleContentPlaceholder text={'Not Available!'} />
|
||||
)}
|
||||
</Module>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../styles/variables';
|
||||
|
||||
.maintainersModule {
|
||||
.showAllContributors {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
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 dependencies={dependencies} title={title} />
|
||||
);
|
||||
};
|
||||
|
||||
PeerDependencies.propTypes = {
|
||||
dependencies: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
export default PeerDependencies;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@import '../../styles/variables';
|
||||
@import '../../styles/mixins';
|
||||
|
||||
.twoColumn {
|
||||
@include container-size;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
flex-shrink: 1;
|
||||
min-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> aside {
|
||||
&:last-child {
|
||||
margin-left: auto;
|
||||
|
||||
padding-left: 15px;
|
||||
flex-shrink: 0;
|
||||
width: 285px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
|
||||
import PackageDetail from '../../components/PackageDetail';
|
||||
import NotFound from '../../components/NotFound';
|
||||
import Spinner from '../../components/Spinner';
|
||||
import API from '../../utils/api';
|
||||
|
||||
import classes from './detail.scss';
|
||||
import PackageSidebar from '../../components/PackageSidebar/index';
|
||||
|
||||
export default class Detail extends Component {
|
||||
static propTypes = {
|
||||
match: PropTypes.object,
|
||||
isUserLoggedIn: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
readMe: '',
|
||||
notFound: false,
|
||||
};
|
||||
|
||||
getPackageName(props = this.props) {
|
||||
const params = props.match.params;
|
||||
return `${(params.scope && '@' + params.scope + '/') || ''}${
|
||||
params.package
|
||||
}`;
|
||||
}
|
||||
|
||||
get packageName() {
|
||||
return this.getPackageName();
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
await this.loadPackageInfo(this.packageName);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { isUserLoggedIn, match } = this.props;
|
||||
const condition1 = prevProps.isUserLoggedIn !== isUserLoggedIn;
|
||||
const condition2 =
|
||||
prevProps.match.params.package !== match.params.package;
|
||||
if (condition1 || condition2) {
|
||||
const packageName = this.getPackageName(this.props);
|
||||
this.loadPackageInfo(packageName);
|
||||
}
|
||||
}
|
||||
|
||||
async loadPackageInfo(packageName) {
|
||||
this.setState({
|
||||
readMe: '',
|
||||
});
|
||||
|
||||
try {
|
||||
const resp = await API.request(`package/readme/${packageName}`, 'GET');
|
||||
this.setState({
|
||||
readMe: resp,
|
||||
notFound: false,
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({
|
||||
notFound: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { notFound, readMe } = this.state;
|
||||
|
||||
if (notFound) {
|
||||
return (
|
||||
<div className={'container content'}>
|
||||
<NotFound pkg={this.packageName} />
|
||||
</div>
|
||||
);
|
||||
} else if (isEmpty(readMe)) {
|
||||
return <Spinner centered={true} />;
|
||||
}
|
||||
return (
|
||||
<div className={`container content ${classes.twoColumn}`}>
|
||||
<PackageDetail packageName={this.packageName} readMe={readMe} />
|
||||
<PackageSidebar packageName={this.packageName} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@ import history from './history';
|
|||
import Header from './components/Header';
|
||||
|
||||
const NotFound = asyncComponent(() => import('./components/NotFound'));
|
||||
const DetailPackage = asyncComponent(() => import('./pages/detail'));
|
||||
const VersionPackage = asyncComponent(() => import('./pages/version'));
|
||||
const HomePage = asyncComponent(() => import('./pages/home'));
|
||||
|
||||
|
|
@ -26,8 +25,6 @@ class RouterApp extends Component<any, any> {
|
|||
{this.renderHeader()}
|
||||
<Switch>
|
||||
<Route exact={true} path={'/'} render={this.renderHomePage} />
|
||||
<Route exact={true} path={'/-/web/detail/@:scope/:package'} render={this.renderDetailPage} />
|
||||
<Route exact={true} path={'/-/web/detail/:package'} render={this.renderDetailPage} />
|
||||
<Route exact={true} path={'/-/web/version/@:scope/:package'} render={this.renderVersionPage} />
|
||||
<Route exact={true} path={'/-/web/version/:package'} render={this.renderVersionPage} />
|
||||
<Route component={NotFound} />
|
||||
|
|
@ -59,16 +56,6 @@ class RouterApp extends Component<any, any> {
|
|||
);
|
||||
};
|
||||
|
||||
renderDetailPage = (routerProps: any) => {
|
||||
return (
|
||||
<AppContextConsumer>
|
||||
{function renderConsumerVersionPage({ isUserLoggedIn }) {
|
||||
return <DetailPackage {...routerProps} isUserLoggedIn={isUserLoggedIn} />;
|
||||
}}
|
||||
</AppContextConsumer>
|
||||
);
|
||||
};
|
||||
|
||||
renderVersionPage = (routerProps: any) => {
|
||||
return (
|
||||
<AppContextConsumer>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <Infos /> should load the Info component with homepage only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://www.verdaccio.org</a></li></ul></div></div>"`;
|
||||
|
||||
exports[`<PackageSidebar /> : <Infos /> should load the Info component with license only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>License</span><span>MIT</span></li></ul></div></div>"`;
|
||||
|
||||
exports[`<PackageSidebar /> : <Infos /> should load the Info component with props 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://www.verdaccio.org</a></li><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://github.com/verdaccio/verdaccio</a></li><li><span>License</span><span>MIT</span></li></ul></div></div>"`;
|
||||
|
||||
exports[`<PackageSidebar /> : <Infos /> should load the Info component with repository only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://github.com/verdaccio/verdaccio</a></li></ul></div></div>"`;
|
||||
|
||||
exports[`<PackageSidebar /> : <Infos /> should load the component without props 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><p class=\\"emptyPlaceholder\\">Not Available!</p></div></div>"`;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <LastSync /> should check the default props condition 1`] = `"<div class=\\"module releasesModule\\"><h2 class=\\"moduleTitle\\">Last Sync</h2><div><p class=\\"emptyPlaceholder\\">Not Available!</p></div></div>"`;
|
||||
|
||||
exports[`<PackageSidebar /> : <LastSync /> should load the LastSync component and match snapshot 1`] = `"<div class=\\"module releasesModule\\"><h2 class=\\"moduleTitle\\">Last Sync<span>2017/12/14, 15:43:52</span></h2><div><ul><li class=\\"last-sync-item\\"><span>2.7.1</span><span>2017/12/14, 15:43:27</span></li><li class=\\"last-sync-item\\"><span>2.7.0</span><span>2017/12/05, 23:25:06</span></li><li class=\\"last-sync-item\\"><span>2.6.6</span><span>2017/11/08, 22:47:16</span></li></ul></div></div>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <Maintainers /> <MaintainerInfo /> should load the component and match with snapshot 1`] = `"<div class=\\"maintainer\\" title=\\"test\\"><img alt=\\"test-title test's avatar\\" src=\\"http://xyz.com/profile.jpg\\" title=\\"test-title test's avatar\\"/><span class=\\"maintainer-name\\">test</span></div>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <Maintainers /> should match with the props 1`] = `"<div class=\\"module maintainersModule\\"><h2 class=\\"moduleTitle\\">Maintainers</h2><div><div><ul class=\\"maintainer-author\\"><div class=\\"maintainer\\" title=\\"User NPM\\"><img alt=\\"Author User NPM's avatar\\" src=\\"https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a\\" title=\\"Author User NPM's avatar\\"><span class=\\"maintainer-name\\">User NPM</span></div><div class=\\"maintainer\\" title=\\"030\\"><img alt=\\"Contributors 030's avatar\\" src=\\"https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b\\" title=\\"Contributors 030's avatar\\"><span class=\\"maintainer-name\\">030</span></div><div class=\\"maintainer\\" title=\\"Alex Vernacchia\\"><img alt=\\"Contributors Alex Vernacchia's avatar\\" src=\\"https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112\\" title=\\"Contributors Alex Vernacchia's avatar\\"><span class=\\"maintainer-name\\">Alex Vernacchia</span></div><div class=\\"maintainer\\" title=\\"Alexander Makarenko\\"><img alt=\\"Contributors Alexander Makarenko's avatar\\" src=\\"https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4\\" title=\\"Contributors Alexander Makarenko's avatar\\"><span class=\\"maintainer-name\\">Alexander Makarenko</span></div><div class=\\"maintainer\\" title=\\"Alexandre-io\\"><img alt=\\"Contributors Alexandre-io's avatar\\" src=\\"https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1\\" title=\\"Contributors Alexandre-io's avatar\\"><span class=\\"maintainer-name\\">Alexandre-io</span></div><div class=\\"maintainer\\" title=\\"Aram Drevekenin\\"><img alt=\\"Contributors Aram Drevekenin's avatar\\" src=\\"https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0\\" title=\\"Contributors Aram Drevekenin's avatar\\"><span class=\\"maintainer-name\\">Aram Drevekenin</span></div></ul><button class=\\"showAllContributors\\" title=\\"Current list only show the author and first 5 contributors unique by name\\">Show all contributor</button></div></div></div>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <Module /> should load module component 1`] = `"<div class=\\"module module-component\\"><h2 class=\\"moduleTitle\\">Test title<span>Test description</span></h2><div><p>test children</p></div></div>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> : <ModuleContentPlaceholder /> should load module component 1`] = `"<p class=\\"emptyPlaceholder\\">Test text</p>"`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<PackageSidebar /> component should load the packageMeta 1`] = `"<aside class=\\"sidebar-loading\\">Loading package information...</aside>"`;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,67 +0,0 @@
|
|||
/**
|
||||
* Dependencies component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import Dependencies, {
|
||||
NO_DEPENDENCIES,
|
||||
DEP_ITEM_CLASS
|
||||
} from '../../../../../src/webui/components/PackageSidebar/modules/Dependencies/index';
|
||||
import ModuleContentPlaceholder from '../../../../../src/webui/components/PackageSidebar/ModuleContentPlaceholder';
|
||||
|
||||
|
||||
describe('<PackageSidebar /> : <Dependencies />', () => {
|
||||
test('should load dependencies', () => {
|
||||
const dependencies = {
|
||||
'@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 = shallow(<Dependencies dependencies={dependencies} />);
|
||||
|
||||
expect(wrapper.find(`.${DEP_ITEM_CLASS}`)).toHaveLength(Object.keys(dependencies).length);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the package without dependencies', () => {
|
||||
const wrapper = shallow(<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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
/**
|
||||
* Infos component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import Infos from '../../../../../src/webui/components/PackageSidebar/modules/Infos/index';
|
||||
|
||||
describe('<PackageSidebar /> : <Infos />', () => {
|
||||
test('should load the component without props', () => {
|
||||
const wrapper = shallow(<Infos />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the Info component with props', () => {
|
||||
const props = {
|
||||
homepage: 'https://www.verdaccio.org',
|
||||
license: 'MIT',
|
||||
repository: 'https://github.com/verdaccio/verdaccio'
|
||||
}
|
||||
const wrapper = shallow(<Infos {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the Info component with homepage only', () => {
|
||||
const props = {
|
||||
homepage: 'https://www.verdaccio.org'
|
||||
}
|
||||
const wrapper = shallow(<Infos {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the Info component with license only', () => {
|
||||
const props = {
|
||||
license: 'MIT',
|
||||
}
|
||||
const wrapper = shallow(<Infos {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the Info component with repository only', () => {
|
||||
const props = { repository: 'https://github.com/verdaccio/verdaccio' };
|
||||
const wrapper = shallow(<Infos {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
/**
|
||||
* LastSync component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import LastSync from '../../../../../src/webui/components/PackageSidebar/modules/LastSync/index';
|
||||
|
||||
describe('<PackageSidebar /> : <LastSync />', () => {
|
||||
test('should check the default props condition', () => {
|
||||
const wrapper = shallow(<LastSync />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should load the LastSync component and match snapshot', () => {
|
||||
const props = {
|
||||
lastUpdated: '2017/12/14, 15:43:52',
|
||||
recentReleases: [
|
||||
{ time: '2017/12/14, 15:43:27', version: '2.7.1' },
|
||||
{ time: '2017/12/05, 23:25:06', version: '2.7.0' },
|
||||
{ time: '2017/11/08, 22:47:16', version: '2.6.6' }
|
||||
]
|
||||
};
|
||||
const wrapper = shallow(<LastSync {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* MaintainerInfo component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import MaintainerInfo from '../../../../../src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index';
|
||||
|
||||
console.error = jest.fn();
|
||||
|
||||
describe('<PackageSidebar /> : <Maintainers /> <MaintainerInfo />', () => {
|
||||
test('should throw error for required props', () => {
|
||||
shallow(<MaintainerInfo />);
|
||||
expect(console.error).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should load the component and match with snapshot', () => {
|
||||
const props = {
|
||||
title: 'test-title',
|
||||
name: 'test',
|
||||
avatar: 'http://xyz.com/profile.jpg'
|
||||
};
|
||||
const wrapper = shallow(<MaintainerInfo {...props} />);
|
||||
expect(wrapper.find('.maintainer').prop('title')).toEqual('test');
|
||||
expect(wrapper.find('img').prop('src')).toEqual(
|
||||
'http://xyz.com/profile.jpg'
|
||||
);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
/**
|
||||
* Maintainers component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Maintainers from '../../../../../src/webui/components/PackageSidebar/modules/Maintainers/index';
|
||||
import { packageMeta } from '../store/packageMeta';
|
||||
|
||||
describe('<PackageSidebar /> : <Maintainers />', () => {
|
||||
let wrapper;
|
||||
let instance;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mount(<Maintainers packageMeta={packageMeta} />);
|
||||
instance = wrapper.instance();
|
||||
});
|
||||
|
||||
test('should match with the props', () => {
|
||||
expect(wrapper.props().packageMeta).toEqual(packageMeta);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('author shoule be equal to User NPM', () => {
|
||||
expect(instance.author).toEqual({
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a',
|
||||
email: 'test@author.local',
|
||||
name: 'User NPM'
|
||||
});
|
||||
});
|
||||
|
||||
test('should get all the contributors with false for showAllContributors', () => {
|
||||
expect(instance.showAllContributors).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should get unique contributors', () => {
|
||||
const result = [
|
||||
{
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b',
|
||||
email: 'test1@test.local',
|
||||
name: '030'
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112',
|
||||
email: 'tes4@test.local',
|
||||
name: 'Alex Vernacchia'
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4',
|
||||
email: 'test5@test.local',
|
||||
name: 'Alexander Makarenko'
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1',
|
||||
email: 'test6@test.local',
|
||||
name: 'Alexandre-io'
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
'https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0',
|
||||
email: 'test7@test.local',
|
||||
name: 'Aram Drevekenin'
|
||||
}
|
||||
];
|
||||
expect(instance.uniqueContributors).toEqual(result);
|
||||
});
|
||||
|
||||
test('should click on handleShowAllContributors', () => {
|
||||
wrapper.find('button').simulate('click');
|
||||
expect(wrapper.state('showAllContributors')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* Module component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import Module from '../../../../../src/webui/components/PackageSidebar/Module/index';
|
||||
|
||||
console.error = jest.fn();
|
||||
|
||||
describe('<PackageSidebar /> : <Module />', () => {
|
||||
test('should error for required props', () => {
|
||||
shallow(<Module />);
|
||||
expect(console.error).toHaveBeenCalled();
|
||||
});
|
||||
test('should load module component', () => {
|
||||
const props = {
|
||||
title: 'Test title',
|
||||
description: 'Test description',
|
||||
className: 'module-component'
|
||||
};
|
||||
const wrapper = shallow(
|
||||
<Module {...props}>
|
||||
<p>{'test children'}</p>
|
||||
</Module>
|
||||
);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* ModuleContentPlaceholder component
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import ModuleContentPlaceholder from '../../../../../src/webui/components/PackageSidebar/ModuleContentPlaceholder/index';
|
||||
|
||||
console.error = jest.fn();
|
||||
|
||||
describe('<PackageSidebar /> : <ModuleContentPlaceholder />', () => {
|
||||
test('should error for required props', () => {
|
||||
shallow(<ModuleContentPlaceholder />);
|
||||
expect(console.error).toHaveBeenCalled();
|
||||
});
|
||||
test('should load module component', () => {
|
||||
const props = {
|
||||
text: 'Test text'
|
||||
};
|
||||
const wrapper = shallow(<ModuleContentPlaceholder {...props} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/**
|
||||
* Package Sidebar module
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import PackageSidebar from '../../../../../src/webui/components/PackageSidebar/index';
|
||||
import { packageMeta } from '../store/packageMeta';
|
||||
|
||||
jest.mock('../../../../../src/webui/utils/api', () => ({
|
||||
request: require('../__mocks__/api').default.request,
|
||||
}));
|
||||
|
||||
console.error = jest.fn();
|
||||
|
||||
describe('<PackageSidebar /> component', () => {
|
||||
test('should throw error for the required props', () => {
|
||||
const wrapper = mount(<PackageSidebar />);
|
||||
const { loadPackageData } = wrapper.instance();
|
||||
expect(console.error).toHaveBeenCalled();
|
||||
return loadPackageData().catch(response => {
|
||||
expect(response).toBeUndefined();
|
||||
expect(wrapper.state()).toEqual({ failed: true });
|
||||
});
|
||||
});
|
||||
|
||||
test('should load the packageMeta', () => {
|
||||
const wrapper = mount(<PackageSidebar packageName={'verdaccio'} />);
|
||||
const { loadPackageData } = wrapper.instance();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
return loadPackageData('verdaccio').then(response => {
|
||||
expect(wrapper.state('packageMeta')).toEqual(packageMeta);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/**
|
||||
* 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();
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue