cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

fix: install Component - Replaced class by func. comp (#152)

Browse Source 
* refactor: convert class to func comp

* fix: fixed wrong maintainer type

* refactor: created a partials folder

* fix: fixed test
This commit is contained in:
Priscila Oliveira 2019-10-06 16:55:49 +02:00 committed by Juan Picado @jotadeveloper
parent 43a9628ec4
commit 9eb698f7e1
7 changed files with 6761 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Install/Install.test.tsx
View File

@ -1,11 +1,54 @@
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import { DetailContext, DetailContextProps } from '../../pages/Version';
import data from './__partials__/data.json';
import Install from './Install';
describe('<Install /> component', () => {
test('should render the component in default state', () => {
const wrapper = mount(<Install />);
expect(wrapper.html()).toMatchSnapshot();
const detailContextValue: Partial<DetailContextProps> = {
packageName: 'foo',
packageMeta: data,
};
const ComponentToBeRendered: React.FC = () => (
<DetailContext.Provider value={detailContextValue}>
<Install />
</DetailContext.Provider>
);
/* eslint-disable react/jsx-no-bind*/
describe('<Install />', () => {
test('renders correctly', () => {
const { container } = render(<ComponentToBeRendered />);
expect(container.firstChild).toMatchSnapshot();
});
test('should have 3 children', () => {
const { getByTestId } = render(<ComponentToBeRendered />);
const installListItems = getByTestId('installList');
// installitems + subHeader = 4
expect(installListItems.children.length).toBe(4);
});
test('should have the element NPM', () => {
const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
expect(getByTestId('installListItem-npm')).toBeTruthy();
expect(queryByText(`npm install ${detailContextValue.packageName}`)).toBeTruthy();
expect(queryByText('Install using npm')).toBeTruthy();
});
test('should have the element YARN', () => {
const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
expect(getByTestId('installListItem-yarn')).toBeTruthy();
expect(queryByText(`yarn add ${detailContextValue.packageName}`)).toBeTruthy();
expect(queryByText('Install using yarn')).toBeTruthy();
});
test('should have the element PNPM', () => {
const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
expect(getByTestId('installListItem-pnpm')).toBeTruthy();
expect(queryByText(`pnpm install ${detailContextValue.packageName}`)).toBeTruthy();
expect(queryByText('Install using pnpm')).toBeTruthy();
});
});

64
src/components/Install/Install.tsx
View File

@ -1,54 +1,34 @@
import React, { useContext } from 'react';
import styled from 'react-emotion';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import React, { Component } from 'react';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
import { DetailContext } from '../../pages/Version';
import { fontWeight } from '../../utils/styles/sizes';
import CopyToClipBoard from '../CopyToClipBoard';
import InstallListItem, { DependencyManager } from './InstallListItem';
// logos of package managers
import npm from './img/npm.svg';
import pnpm from './img/pnpm.svg';
import yarn from './img/yarn.svg';
const Heading = styled(Typography)({
fontWeight: fontWeight.bold,
textTransform: 'capitalize',
});
import { Heading, InstallItem, PackageMangerAvatar, InstallListItemText } from './styles';
const Install: React.FC = () => {
const detailContext = useContext(DetailContext);
class Install extends Component {
public render(): JSX.Element {
return (
<DetailContextConsumer>
{(context: Partial<VersionPageConsumerProps>) => {
return context && context.packageName && this.renderCopyCLI(context);
}}
</DetailContextConsumer>
);
const { packageMeta, packageName } = detailContext;
if (!packageMeta || !packageName) {
return null;
}
public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
return (
<>
<List subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
</>
<List data-testid={'installList'} subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>
<InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
<InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
<InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
</List>
);
};
public renderListItems = (packageName: string) => {
return (
<>
<InstallItem button={true}>
<PackageMangerAvatar alt={'npm logo'} src={npm} />
<InstallListItemText primary={<CopyToClipBoard text={`npm install ${packageName}`} />} secondary={'Install using NPM'} />
</InstallItem>
<InstallItem button={true}>
<PackageMangerAvatar alt={'yarn logo'} src={yarn} />
<InstallListItemText primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} secondary={'Install using Yarn'} />
</InstallItem>
<InstallItem button={true}>
<PackageMangerAvatar alt={'pnpm logo'} src={pnpm} />
<InstallListItemText primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} secondary={'Install using PNPM'} />
</InstallItem>
</>
);
};
}
};
export default Install;

70
src/components/Install/InstallListItem.tsx Normal file
View File

@ -0,0 +1,70 @@
import React from 'react';
import styled from 'react-emotion';
import Avatar from '@material-ui/core/Avatar';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import CopyToClipBoard from '../CopyToClipBoard';
// logos of package managers
import npmLogo from './img/npm.svg';
import pnpmLogo from './img/pnpm.svg';
import yarnLogo from './img/yarn.svg';
const InstallItem = styled(ListItem)({
padding: 0,
':hover': {
backgroundColor: 'transparent',
},
});
const InstallListItemText = styled(ListItemText)({
padding: '0 10px',
margin: 0,
});
const PackageMangerAvatar = styled(Avatar)({
borderRadius: '0px',
padding: '0',
});
export enum DependencyManager {
NPM = 'npm',
YARN = 'yarn',
PNPM = 'pnpm',
}
interface Interface {
packageName: string;
dependencyManager: DependencyManager;
}
const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
switch (dependencyManager) {
case DependencyManager.NPM:
return (
<InstallItem button={true} data-testid={'installListItem-npm'}>
<PackageMangerAvatar alt="npm" src={npmLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`npm install ${packageName}`} />} secondary={'Install using npm'} />
</InstallItem>
);
case DependencyManager.YARN:
return (
<InstallItem button={true} data-testid={'installListItem-yarn'}>
<PackageMangerAvatar alt="yarn" src={pnpmLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} secondary={'Install using yarn'} />
</InstallItem>
);
case DependencyManager.PNPM:
return (
<InstallItem button={true} data-testid={'installListItem-pnpm'}>
<PackageMangerAvatar alt={'pnpm'} src={yarnLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} secondary={'Install using pnpm'} />
</InstallItem>
);
default:
return null;
}
};
export default InstallListItem;

6406
src/components/Install/__partials__/data.json Normal file
View File

File diff suppressed because it is too large Load Diff

214
src/components/Install/__snapshots__/Install.test.tsx.snap
View File

@ -1,3 +1,215 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Install /> component should render the component in default state 1`] = `null`;
exports[`<Install /> renders correctly 1`] = `
<ul
class="MuiList-root MuiList-padding MuiList-subheader"
data-testid="installList"
>
<h6
class="MuiTypography-root css-b8upko emotion-0 MuiTypography-subtitle1"
>
Installation
</h6>
<div
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root css-zw46c6 emotion-6 MuiListItem-gutters MuiListItem-button"
data-testid="installListItem-npm"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root css-19top7x emotion-1"
>
<img
alt="npm"
class="MuiAvatar-img"
src="[object Object]"
/>
</div>
<div
class="MuiListItemText-root css-fipixf emotion-5 MuiListItemText-multiline"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1"
>
<div
class="css-1mta3t8 emotion-4"
>
<span
class="css-1m8aenu emotion-2"
>
npm install foo
</span>
<button
class="MuiButtonBase-root MuiIconButton-root css-0 emotion-3"
tabindex="0"
title="Copy to Clipboard"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</span>
<p
class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary"
>
Install using npm
</p>
</div>
<span
class="MuiTouchRipple-root"
/>
</div>
<div
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root css-zw46c6 emotion-6 MuiListItem-gutters MuiListItem-button"
data-testid="installListItem-yarn"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root css-19top7x emotion-1"
>
<img
alt="yarn"
class="MuiAvatar-img"
src="[object Object]"
/>
</div>
<div
class="MuiListItemText-root css-fipixf emotion-5 MuiListItemText-multiline"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1"
>
<div
class="css-1mta3t8 emotion-4"
>
<span
class="css-1m8aenu emotion-2"
>
yarn add foo
</span>
<button
class="MuiButtonBase-root MuiIconButton-root css-0 emotion-3"
tabindex="0"
title="Copy to Clipboard"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</span>
<p
class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary"
>
Install using yarn
</p>
</div>
<span
class="MuiTouchRipple-root"
/>
</div>
<div
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root css-zw46c6 emotion-6 MuiListItem-gutters MuiListItem-button"
data-testid="installListItem-pnpm"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root css-19top7x emotion-1"
>
<img
alt="pnpm"
class="MuiAvatar-img"
src="[object Object]"
/>
</div>
<div
class="MuiListItemText-root css-fipixf emotion-5 MuiListItemText-multiline"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1"
>
<div
class="css-1mta3t8 emotion-4"
>
<span
class="css-1m8aenu emotion-2"
>
pnpm install foo
</span>
<button
class="MuiButtonBase-root MuiIconButton-root css-0 emotion-3"
tabindex="0"
title="Copy to Clipboard"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</span>
<p
class="MuiTypography-root MuiListItemText-secondary MuiTypography-body2 MuiTypography-colorTextSecondary"
>
Install using pnpm
</p>
</div>
<span
class="MuiTouchRipple-root"
/>
</div>
</ul>
`;

36
src/components/Install/styles.ts
View File

@ -1,36 +0,0 @@
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';
export const Heading = styled(Typography)({
'&&': {
fontWeight: fontWeight.bold,
textTransform: 'capitalize',
},
});
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',
},
});

6
types/packageMeta.ts
View File

@ -36,7 +36,6 @@ export interface Version {
name: string;
version: string;
author?: string | Author;
maintainers?: Maintainer[];
description?: string;
license?: string;
main?: string;
@ -49,8 +48,3 @@ export interface Author {
url?: string;
avatar?: string;
}
interface Maintainer {
email?: string;
name?: string;
}