diff --git a/jest.config.js b/jest.config.js index aead37c65..fc113d40a 100644 --- a/jest.config.js +++ b/jest.config.js @@ -42,7 +42,8 @@ module.exports = { moduleNameMapper: { '\\.(scss)$': '/node_modules/identity-obj-proxy', 'github-markdown-css': '/node_modules/identity-obj-proxy', - '\\.(png)$': '/node_modules/identity-obj-proxy' + '\\.(png)$': '/node_modules/identity-obj-proxy', + '\\.(svg)$': '/test/unit/empty.js' }, transformIgnorePatterns: [ '/node_modules/(?!react-syntax-highlighter)' diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc index eb219c736..0869e876d 100644 --- a/src/webui/.eslintrc +++ b/src/webui/.eslintrc @@ -10,14 +10,7 @@ }, "rules": { "require-jsdoc": 0, - "no-console": [ - 1, - { - "allow": [ - "log" - ] - } - ], + "no-console": 2, "no-unused-vars": [ 2, { diff --git a/src/webui/components/Footer/index.js b/src/webui/components/Footer/index.js index 5780438e8..2c15bc9c6 100644 --- a/src/webui/components/Footer/index.js +++ b/src/webui/components/Footer/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {Component} from 'react'; import classes from './footer.scss'; import logo from './logo.svg'; @@ -12,7 +12,7 @@ import nicaraguaFlag from './flags/nicaragua-1f1f3-1f1ee.svg'; import pakistanFlag from './flags/pakistan-1f1f5-1f1f0.svg'; import spainFlag from './flags/spain-1f1ea-1f1f8.svg'; -export default class Footer extends React.Component { +export default class Footer extends Component { constructor(props) { super(props); this.handleEarthIconClick = this.handleEarthIconClick.bind(this); diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js index 7e4c33d1e..da27a277f 100644 --- a/src/webui/components/Package/index.js +++ b/src/webui/components/Package/index.js @@ -2,81 +2,51 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Tag} from 'element-react'; import {Link} from 'react-router-dom'; -import isNil from 'lodash/isNil'; -import {formatDateDistance} from '../../utils/DateUtils'; + +import {formatDateDistance} from '../../utils/package'; import classes from './package.scss'; -export default class Package extends React.Component { - static propTypes = { - package: PropTypes.object - } - - render() { - const {package: pkg} = this.props; - - return ( -
- -
- {this.renderTitle(pkg)} - {this.renderAuthor(pkg)} -
-
- {this.renderDescription(pkg)} -
-
- {this.renderPublished(pkg)} - {this.renderLicense(pkg)} -
- -
- ); - } - - renderPublished(pkg) { - return (
- {pkg.time ? `Published ${formatDateDistance(pkg.time)} ago`: ''} -
); - } - - renderLicense(pkg) { - if (pkg.license) { - return (
- {pkg.license} -
); - } - - return null; - } - - renderDescription(pkg) { - return ( -

- {pkg.description} -

- ); - } - - renderTitle(pkg) { - return ( -
-

- {pkg.name} {this.renderTag(pkg)} -

+const Package = ({name, version, author, description, license, time}) => { + return (
+ +
+
+

+ {name} v{version} +

+
+
+ { author ? `By: ${author}`: ''} +
- ); - } +
+

+ {description} +

+
+
+
+ {time ? `Published ${formatDateDistance(time)} ago` : ''} +
+
+ {license} +
+
+ +
); +}; - renderTag(pkg) { - return v{pkg.version}; - } +Package.propTypes = { + name: PropTypes.string, + version: PropTypes.string, + author: PropTypes.string, + description: PropTypes.string, + license: PropTypes.string, + time: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.instanceOf(Date) + ]) +}; - renderAuthor(pkg) { - if (isNil(pkg.author) || isNil(pkg.author.name)) { - return; - } - - return
{`By: ${pkg.author.name}`}
; - } -} +export default Package; diff --git a/src/webui/components/PackageDetail/index.js b/src/webui/components/PackageDetail/index.js index c73d5b817..4458dc011 100644 --- a/src/webui/components/PackageDetail/index.js +++ b/src/webui/components/PackageDetail/index.js @@ -6,27 +6,22 @@ import Readme from '../Readme'; import classes from './packageDetail.scss'; -const PackageDetail = (props) => { - const displayState = (readMe) => { - if (isNil(readMe)) { - return; - } - return ; - }; +const displayState = (readMe) => { + return !isNil(readMe) ? : ''; +}; +const PackageDetail = ({packageName, readMe}) => { return (
-

{ props.package }

-
- {displayState(props.readMe)} -
+

{packageName}

+
{displayState(readMe)}
); }; PackageDetail.propTypes = { readMe: PropTypes.string, - package: PropTypes.string.isRequired + packageName: PropTypes.string.isRequired }; export default PackageDetail; diff --git a/src/webui/components/PackageList/index.js b/src/webui/components/PackageList/index.js index 94e690f9a..f4373c071 100644 --- a/src/webui/components/PackageList/index.js +++ b/src/webui/components/PackageList/index.js @@ -5,6 +5,7 @@ import isEmpty from 'lodash/isEmpty'; import Package from '../Package'; import Help from '../Help'; import NoItems from '../NoItems'; +import {formatAuthor, formatLicense} from '../../utils/package'; import classes from './packageList.scss'; @@ -12,14 +13,14 @@ export default class PackageList extends React.Component { static propTypes = { packages: PropTypes.array, help: PropTypes.bool - } + }; render() { return (
{this.renderTitle()} - {this.isTherePackages() ? this.renderList(): this.renderOptions()} + {this.isTherePackages() ? this.renderList() : this.renderOptions()}
); @@ -30,13 +31,20 @@ export default class PackageList extends React.Component { return; } - return

Available Packages

; + return

Available Packages

; } renderList() { - return this.props.packages.map((pkg, i)=> ( -
    • - )); + return this.props.packages.map((pkg, i) => { + const {name, version, description, time} = pkg; + const author = formatAuthor(pkg.author); + const license = formatLicense(pkg.license); + return ( +
  • + +
    • + ); + }); } renderOptions() { @@ -48,14 +56,19 @@ export default class PackageList extends React.Component { } renderNoItems() { - return ; + return ( + + ); } renderHelp() { if (this.props.help === false) { return; } - return ; + return ; } isTherePackages() { diff --git a/src/webui/components/PackageSidebar/index.jsx b/src/webui/components/PackageSidebar/index.jsx index bd4ed1e28..163d0b69f 100644 --- a/src/webui/components/PackageSidebar/index.jsx +++ b/src/webui/components/PackageSidebar/index.jsx @@ -1,10 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; +import get from 'lodash/get'; import LastSync from './modules/LastSync'; import Maintainers from './modules/Maintainers'; import Dependencies from './modules/Dependencies'; import Infos from './modules/Infos'; +import { + formatLicense, + formatRepository, + getLastUpdatedPackageTime, + getRecentReleases +} from '../../utils/package'; import API from '../../utils/api'; export default class PackageSidebar extends React.Component { @@ -23,7 +30,7 @@ export default class PackageSidebar extends React.Component { await this.loadPackageData(this.props.packageName); } - async componentWillReceiveProps(newProps) { + async UNSAFE_componentWillReceiveProps(newProps) { if (newProps.packageName !== this.props.packageName) { await this.loadPackageData(newProps.packageName); } @@ -38,7 +45,6 @@ export default class PackageSidebar extends React.Component { this.setState({ failed: true }); - return; } this.setState({ @@ -49,14 +55,46 @@ export default class PackageSidebar extends React.Component { render() { let {packageMeta} = this.state; - return packageMeta ? - (): - (); + 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); + + // Lastsync component + const recentReleases = getRecentReleases(time); + const lastUpdated = getLastUpdatedPackageTime(_uplinks); + + // Dependencies component + const dependencies = get(packageMeta, 'latest.dependencies', {}); + + // Maintainers component + return ( + + ); + } + return ( + + ); } } diff --git a/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx b/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx index ffe3db964..9afed572e 100644 --- a/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx +++ b/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx @@ -1,47 +1,46 @@ import React from 'react'; import PropTypes from 'prop-types'; -import get from 'lodash/get'; import Module from '../../Module'; -import classes from './style.scss'; import {getDetailPageURL} from '../../../../utils/url'; import ModuleContentPlaceholder from '../../ModuleContentPlaceholder'; -export default class Dependencies extends React.Component { - static propTypes = { - packageMeta: PropTypes.object.isRequired - }; +import classes from './style.scss'; - get dependencies() { - return get(this, 'props.packageMeta.latest.dependencies', {}); - } +const renderDependenciesList = (dependencies, dependenciesList) => { + return ( +
      + {dependenciesList.map((dependenceName, index) => { + return ( +
    • + {dependenceName} + {index < dependenciesList.length - 1 && , } +
      • + ); + })} +
    + ); +}; - render() { - let dependencies = this.dependencies; - let dependenciesList = Object.keys(dependencies); +const Dependencies = ({dependencies = {}}) => { + const dependenciesList = Object.keys(dependencies); + return ( + + {dependenciesList.length > 1 ? ( + renderDependenciesList(dependencies, dependenciesList) + ) : ( + + )} + + ); +}; - if (!dependenciesList.length) { - return ; - } +Dependencies.propTypes = { + dependencies: PropTypes.object +}; - return ( - -
      - { - dependenciesList.map((dependenceName, index) => { - return ( -
    • - {dependenceName} - {index < dependenciesList.length - 1 && , } -
      • - ); - }) - } -
    -     - ); - } -} +export default Dependencies; diff --git a/src/webui/components/PackageSidebar/modules/Infos/index.jsx b/src/webui/components/PackageSidebar/modules/Infos/index.jsx index bdff8df79..9bfd1dedc 100644 --- a/src/webui/components/PackageSidebar/modules/Infos/index.jsx +++ b/src/webui/components/PackageSidebar/modules/Infos/index.jsx @@ -1,69 +1,37 @@ import React from 'react'; import PropTypes from 'prop-types'; -import get from 'lodash/get'; import Module from '../../Module'; -import isString from 'lodash/isString'; -import isNil from 'lodash/isNil'; +import ModuleContentPlaceholder from '../../ModuleContentPlaceholder'; import classes from './style.scss'; -export default class Infos extends React.Component { - static propTypes = { - packageMeta: PropTypes.object.isRequired - }; +const renderSection = (title, url) => ( +
  • + {title} + + {url} + +
    • +); - get infos() { - const homepage = this.normalizeInfo(get(this, 'props.packageMeta.latest.homepage', null)); - const repo = this.normalizeInfo(get(this, 'props.packageMeta.latest.repository', null)); - const license = get(this, 'props.packageMeta.latest.license', 'N/A'); +const Infos = ({homepage, repository, license}) => { + const showInfo = homepage || repository || license; + return + {showInfo ?
      + {homepage && renderSection('Homepage', homepage)} + {repository && renderSection('Repository', repository)} + {license &&
    • + License + {license} +
      • } +
    : } +     ; +}; - return {homepage, repo, license}; - } +Infos.propTypes = { + homepage: PropTypes.string, + repository: PropTypes.string, + license: PropTypes.string +}; - normalizeInfo(infoObj) { - if (isString(infoObj)) { - return {url: infoObj}; - } else if (isNil(infoObj)) { - return {url: ''}; - } - - infoObj.url = this.normalizeGitUrl(infoObj); - - return infoObj; - } - - normalizeGitUrl(infoObj) { - return infoObj.url.replace(/^git\+/, ''); - } - - render() { - const infos = this.infos; - - if (infos.homepage.url === '' && infos.repo.url === '' && infos.license === 'N/A') { - return ''; - } - - return ( - -
      - {infos.homepage.url && this.renderSection('Homepage', infos.homepage.url)} - - {infos.repo.url && this.renderSection('Repository', infos.repo.url)} - - {infos.license && -
    • License{infos.license}
      • - } -
    -     - ); - } - - renderSection(title, url) { - return ( -
  • {title}{url}
    • - ); - } -} +export default Infos; diff --git a/src/webui/components/PackageSidebar/modules/LastSync/index.jsx b/src/webui/components/PackageSidebar/modules/LastSync/index.jsx index a7708289d..77778bcb5 100644 --- a/src/webui/components/PackageSidebar/modules/LastSync/index.jsx +++ b/src/webui/components/PackageSidebar/modules/LastSync/index.jsx @@ -1,61 +1,45 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import propTypes from 'prop-types'; import Module from '../../Module'; -import {formatDate} from '../../../../utils/DateUtils'; +import ModuleContentPlaceholder from '../../ModuleContentPlaceholder'; import classes from './style.scss'; -export default class LastSync extends React.Component { - static propTypes = { - packageMeta: PropTypes.object.isRequired - }; +const renderRecentReleases = (recentReleases) => { + return ( +
      + {recentReleases.map((versionInfo) => { + const {version, time} = versionInfo; + return ( +
    • + {version} + {time} +
      • + ); + })} +
    + ); +}; - get lastUpdate() { - let lastUpdate = 0; - Object.keys(this.props.packageMeta._uplinks).forEach((upLinkName) => { - const status = this.props.packageMeta._uplinks[upLinkName]; +const LastSync = ({recentReleases = [], lastUpdated = ''}) => { + return ( + + {recentReleases.length ? ( + renderRecentReleases(recentReleases) + ) : ( + + )} + + ); +}; - if (status.fetched > lastUpdate) { - lastUpdate = status.fetched; - } - }); +LastSync.propTypes = { + recentReleases: propTypes.array, + lastUpdated: propTypes.string +}; - const time = formatDate(lastUpdate); - - return lastUpdate ? time : ''; - } - - get recentReleases() { - let recentReleases = Object.keys(this.props.packageMeta.time).map((version) => { - const time = formatDate(this.props.packageMeta.time[version]); - return {version, time}; - }); - - return recentReleases.slice(recentReleases.length - 3, recentReleases.length).reverse(); - } - - render() { - if (!this.props.packageMeta.time) { - return null; - } - - return ( - -
      - {this.recentReleases.map((versionInfo) => { - return ( -
    • - {versionInfo.version} - {versionInfo.time} -
      • - ); - })} -
    -     - ); - } -} +export default LastSync; diff --git a/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx b/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx index d6b37a960..ff5009f42 100644 --- a/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx +++ b/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx @@ -3,11 +3,16 @@ 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'; -import MaintainerInfo from './MaintainerInfo'; + +const CONTRIBUTORS_TO_SHOW = 5; export default class Maintainers extends React.Component { static propTypes = { @@ -44,7 +49,10 @@ export default class Maintainers extends React.Component { return []; } - return uniqBy(this.contributors, (contributor) => contributor.name).slice(0, 5); + return uniqBy(this.contributors, (contributor) => contributor.name).slice( + 0, + CONTRIBUTORS_TO_SHOW + ); } handleShowAllContributors() { @@ -56,26 +64,33 @@ export default class Maintainers extends React.Component { renderContributors() { if (!this.contributors) return null; - return (this.showAllContributors ? this.contributors : this.uniqueContributors) - .map((contributor, index) => { - return { + return ( + ; - }); + avatar={contributor.avatar} + /> + ); + }); } - render() { - let author = this.author; - + renderAuthorAndContributors(author) { return ( - +
      - {author && } + {author && + author.name && ( + + )} {this.renderContributors()}
    {!this.showAllContributors && ( @@ -87,6 +102,20 @@ export default class Maintainers extends React.Component { Show all contributor )} +
    + ); + } + + render() { + let author = this.author; + const contributors = this.renderContributors(); + return ( + + {contributors.length || has(author, 'name') ? ( + this.renderAuthorAndContributors(author) + ) : ( + + )} ); } diff --git a/src/webui/modules/detail/index.jsx b/src/webui/modules/detail/index.jsx index 6b0266941..bfab25b34 100644 --- a/src/webui/modules/detail/index.jsx +++ b/src/webui/modules/detail/index.jsx @@ -68,7 +68,7 @@ export default class Detail extends React.Component { } return (
    - +
    ); diff --git a/src/webui/utils/DateUtils.js b/src/webui/utils/DateUtils.js deleted file mode 100644 index 701b22eac..000000000 --- a/src/webui/utils/DateUtils.js +++ /dev/null @@ -1,12 +0,0 @@ -export const TIMEFORMAT = 'YYYY/MM/DD, HH:mm:ss'; -import format from 'date-fns/format'; -import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; - - -export function formatDate(lastUpdate) { - return format(new Date(lastUpdate), TIMEFORMAT); -} - -export function formatDateDistance(lastUpdate) { - return distanceInWordsToNow(new Date(lastUpdate)); -} diff --git a/src/webui/utils/package.js b/src/webui/utils/package.js new file mode 100644 index 000000000..67219fd95 --- /dev/null +++ b/src/webui/utils/package.js @@ -0,0 +1,92 @@ +import isString from 'lodash/isString'; +import isObject from 'lodash/isObject'; +export const TIMEFORMAT = 'YYYY/MM/DD, HH:mm:ss'; +import format from 'date-fns/format'; +import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; + +/** + * Formats license field for webui. + * @see https://docs.npmjs.com/files/package.json#license + */ +export function formatLicense(license) { + if (isString(license)) { + return license; + } + + if (isObject(license) && license.type) { + return license.type; + } + + return null; +} + +/** + * Formats repository field for webui. + * @see https://docs.npmjs.com/files/package.json#repository + */ +export function formatRepository(repository) { + if (isString(repository)) { + return repository; + } + + if (isObject(repository) && repository.url) { + return repository.url; + } + + return null; +} + + +/** + * Formats author field for webui. + * @see https://docs.npmjs.com/files/package.json#author + */ +export function formatAuthor(author) { + if (isString(author)) { + return author; + } + + if (isObject(author) && author.name) { + return author.name; + } + + return null; +} + +/** + * For component + * @param {array} uplinks + */ +export function getLastUpdatedPackageTime(uplinks = {}) { + let lastUpdate = 0; + Object.keys(uplinks).forEach((upLinkName) => { + const status = uplinks[upLinkName]; + if (status.fetched > lastUpdate) { + lastUpdate = status.fetched; + } + }); + + return lastUpdate ? formatDate(lastUpdate) : ''; +} + +/** + * For component + * @param {Object} time + * @returns {Array} last 3 releases + */ +export function getRecentReleases(time = {}) { + const recent = Object.keys(time).map((version) => ({ + version, + time: formatDate(time[version]) + })); + return recent.slice(recent.length - 3, recent.length).reverse(); +} + + +export function formatDate(lastUpdate) { + return format(new Date(lastUpdate), TIMEFORMAT); +} + +export function formatDateDistance(lastUpdate) { + return distanceInWordsToNow(new Date(lastUpdate)); +} diff --git a/test/unit/empty.js b/test/unit/empty.js new file mode 100644 index 000000000..7c645e42f --- /dev/null +++ b/test/unit/empty.js @@ -0,0 +1 @@ +export default {}; \ No newline at end of file diff --git a/test/unit/setup.js b/test/unit/setup.js index 221340068..12ae7e72e 100644 --- a/test/unit/setup.js +++ b/test/unit/setup.js @@ -7,3 +7,5 @@ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); + +global.__APP_VERSION__ = '1.0.0'; \ No newline at end of file diff --git a/test/unit/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap b/test/unit/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap index 00cb813dd..f098af951 100644 --- a/test/unit/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap +++ b/test/unit/webui/components/PackageSidebar/__snapshots__/dependencies.spec.js.snap @@ -1,3 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` : should load the package and match snapshot 1`] = `"

    Dependencies

    "`; +exports[` : should load dependencies 1`] = `"

    Dependencies

    "`; + +exports[` : should load the package without dependecnies 1`] = `"

    Dependencies

    Zero Dependencies!

    "`; diff --git a/test/unit/webui/components/PackageSidebar/__snapshots__/infos.spec.js.snap b/test/unit/webui/components/PackageSidebar/__snapshots__/infos.spec.js.snap index 82b11f3f5..91206ca91 100644 --- a/test/unit/webui/components/PackageSidebar/__snapshots__/infos.spec.js.snap +++ b/test/unit/webui/components/PackageSidebar/__snapshots__/infos.spec.js.snap @@ -1,3 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` : should load the Info component and match snapshot 1`] = `"

    Infos

    "`; +exports[` : should load the Info component with homepage only 1`] = `"

    Infos

    "`; + +exports[` : should load the Info component with license only 1`] = `"

    Infos

    • LicenseMIT
    "`; + +exports[` : should load the Info component with props 1`] = `"

    Infos

    "`; + +exports[` : should load the Info component with repository only 1`] = `"

    Infos

    "`; + +exports[` : should load the component without props 1`] = `"

    Infos

    Not Available!

    "`; diff --git a/test/unit/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap b/test/unit/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap index 50f71ce7b..680141e45 100644 --- a/test/unit/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap +++ b/test/unit/webui/components/PackageSidebar/__snapshots__/lastsync.spec.js.snap @@ -1,3 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` : should check the default props condition 1`] = `"

    Last Sync

    Not Available!

    "`; + exports[` : should load the LastSync component and match snapshot 1`] = `"

    Last Sync2017/12/14, 15:43:52

    • 2.7.12017/12/14, 15:43:27
    • 2.7.02017/12/05, 23:25:06
    • 2.6.62017/11/08, 22:47:16
    "`; diff --git a/test/unit/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap b/test/unit/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap index aa8afb43e..3e5c8bd0c 100644 --- a/test/unit/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap +++ b/test/unit/webui/components/PackageSidebar/__snapshots__/maintainers.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` : should match with the props 1`] = `"

    Maintainers

      \\"AuthorUser NPM
      \\"Contributors030
      \\"ContributorsAlex Vernacchia
      \\"ContributorsAlexander Makarenko
      \\"ContributorsAlexandre-io
      \\"ContributorsAram Drevekenin
    "`; +exports[` : should match with the props 1`] = `"

    Maintainers

      \\"AuthorUser NPM
      \\"Contributors030
      \\"ContributorsAlex Vernacchia
      \\"ContributorsAlexander Makarenko
      \\"ContributorsAlexandre-io
      \\"ContributorsAram Drevekenin
    "`; diff --git a/test/unit/webui/components/PackageSidebar/dependencies.spec.js b/test/unit/webui/components/PackageSidebar/dependencies.spec.js index 7c103418e..34a0b2e06 100644 --- a/test/unit/webui/components/PackageSidebar/dependencies.spec.js +++ b/test/unit/webui/components/PackageSidebar/dependencies.spec.js @@ -3,22 +3,13 @@ */ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { shallow } from 'enzyme'; import Dependencies from '../../../../../src/webui/components/PackageSidebar/modules/Dependencies/index'; -import { packageMeta } from '../store/packageMeta'; -console.error = jest.fn(); describe(' : ', () => { - it('should throw error for the required props', () => { - mount(); - expect(console.error).toBeCalled(); - }); - - it('getter: should get dependencies from package meta', () => { - const wrapper = mount(); - const dependencies = wrapper.instance().dependencies; - const result = { + it('should load dependencies', () => { + const dependencies = { '@verdaccio/file-locking': '0.0.3', '@verdaccio/streams': '0.0.2', JSONStream: '^1.1.1', @@ -50,11 +41,12 @@ describe(' : ', () => { semver: '^5.1.0', 'unix-crypt-td-js': '^1.0.0' }; - expect(dependencies).toEqual(result); + const wrapper = shallow(); + expect(wrapper.html()).toMatchSnapshot(); }); - it('should load the package and match snapshot', () => { - const wrapper = shallow(); + it('should load the package without dependecnies', () => { + const wrapper = shallow(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/test/unit/webui/components/PackageSidebar/infos.spec.js b/test/unit/webui/components/PackageSidebar/infos.spec.js index 87ce7d70b..88d42f66e 100644 --- a/test/unit/webui/components/PackageSidebar/infos.spec.js +++ b/test/unit/webui/components/PackageSidebar/infos.spec.js @@ -3,27 +3,44 @@ */ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { shallow } from 'enzyme'; import Infos from '../../../../../src/webui/components/PackageSidebar/modules/Infos/index'; -import { packageMeta } from '../store/packageMeta'; - -console.error = jest.fn(); describe(' : ', () => { - it('should load the component and check getter: info with package data', () => { - const wrapper = mount(); - const instance = wrapper.instance(); - const result = { - repo: { type: 'git', url: 'git://github.com/verdaccio/verdaccio.git' }, - homepage: { url: 'https://github.com/verdaccio/verdaccio#readme' }, - license: 'WTFPL' - }; - - expect(instance.infos).toEqual(result); + it('should load the component without props', () => { + const wrapper = shallow(); + expect(wrapper.html()).toMatchSnapshot(); }); - it('should load the Info component and match snapshot', () => { - const wrapper = shallow(); + it('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(); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('should load the Info component with homepage only', () => { + const props = { + homepage: 'https://www.verdaccio.org' + } + const wrapper = shallow(); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('should load the Info component with license only', () => { + const props = { + license: 'MIT', + } + const wrapper = shallow(); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('should load the Info component with repository only', () => { + const props = { repository: 'https://github.com/verdaccio/verdaccio' }; + const wrapper = shallow(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/test/unit/webui/components/PackageSidebar/lastsync.spec.js b/test/unit/webui/components/PackageSidebar/lastsync.spec.js index cdb31502e..1ed870770 100644 --- a/test/unit/webui/components/PackageSidebar/lastsync.spec.js +++ b/test/unit/webui/components/PackageSidebar/lastsync.spec.js @@ -3,28 +3,25 @@ */ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { shallow } from 'enzyme'; import LastSync from '../../../../../src/webui/components/PackageSidebar/modules/LastSync/index'; -import { packageMeta } from '../store/packageMeta'; - -console.error = jest.fn(); describe(' : ', () => { - it('should load the component and check getters: lastUpdate, recentReleases with package data', () => { - const wrapper = mount(); - const instance = wrapper.instance(); - const result = [ - { 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 lastUpdated = '2017/12/14, 15:43:52'; - expect(instance.lastUpdate).toEqual(lastUpdated); - expect(instance.recentReleases).toEqual(result); + it('should check the default props condition', () => { + const wrapper = shallow(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should load the LastSync component and match snapshot', () => { - const wrapper = shallow(); + 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(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/test/unit/webui/components/PackageSidebar/maintainers.spec.js b/test/unit/webui/components/PackageSidebar/maintainers.spec.js index 29b57e696..b992ae843 100644 --- a/test/unit/webui/components/PackageSidebar/maintainers.spec.js +++ b/test/unit/webui/components/PackageSidebar/maintainers.spec.js @@ -7,8 +7,6 @@ import { mount } from 'enzyme'; import Maintainers from '../../../../../src/webui/components/PackageSidebar/modules/Maintainers/index'; import { packageMeta } from '../store/packageMeta'; -console.error = jest.fn(); - describe(' : ', () => { let wrapper; let instance; diff --git a/test/unit/webui/components/__snapshots__/footer.spec.js.snap b/test/unit/webui/components/__snapshots__/footer.spec.js.snap new file mode 100644 index 000000000..aad3cb97b --- /dev/null +++ b/test/unit/webui/components/__snapshots__/footer.spec.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`