forked from sombochea/verdaccio-ui
fix: install Component - Replaced class by func. comp (#152)
* refactor: convert class to func comp * fix: fixed wrong maintainer type * refactor: created a partials folder * fix: fixed test
This commit is contained in:
parent
43a9628ec4
commit
9eb698f7e1
@ -1,11 +1,54 @@
|
|||||||
import React from 'react';
|
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';
|
import Install from './Install';
|
||||||
|
|
||||||
describe('<Install /> component', () => {
|
const detailContextValue: Partial<DetailContextProps> = {
|
||||||
test('should render the component in default state', () => {
|
packageName: 'foo',
|
||||||
const wrapper = mount(<Install />);
|
packageMeta: data,
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
};
|
||||||
|
|
||||||
|
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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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 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
|
const Heading = styled(Typography)({
|
||||||
import npm from './img/npm.svg';
|
fontWeight: fontWeight.bold,
|
||||||
import pnpm from './img/pnpm.svg';
|
textTransform: 'capitalize',
|
||||||
import yarn from './img/yarn.svg';
|
});
|
||||||
|
|
||||||
import { Heading, InstallItem, PackageMangerAvatar, InstallListItemText } from './styles';
|
const Install: React.FC = () => {
|
||||||
|
const detailContext = useContext(DetailContext);
|
||||||
|
|
||||||
class Install extends Component {
|
const { packageMeta, packageName } = detailContext;
|
||||||
public render(): JSX.Element {
|
|
||||||
return (
|
if (!packageMeta || !packageName) {
|
||||||
<DetailContextConsumer>
|
return null;
|
||||||
{(context: Partial<VersionPageConsumerProps>) => {
|
|
||||||
return context && context.packageName && this.renderCopyCLI(context);
|
|
||||||
}}
|
|
||||||
</DetailContextConsumer>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
|
return (
|
||||||
return (
|
<List data-testid={'installList'} subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>
|
||||||
<>
|
<InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
|
||||||
<List subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
|
<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;
|
export default Install;
|
||||||
|
70
src/components/Install/InstallListItem.tsx
Normal file
70
src/components/Install/InstallListItem.tsx
Normal 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
6406
src/components/Install/__partials__/data.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,215 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// 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>
|
||||||
|
`;
|
||||||
|
@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
@ -36,7 +36,6 @@ export interface Version {
|
|||||||
name: string;
|
name: string;
|
||||||
version: string;
|
version: string;
|
||||||
author?: string | Author;
|
author?: string | Author;
|
||||||
maintainers?: Maintainer[];
|
|
||||||
description?: string;
|
description?: string;
|
||||||
license?: string;
|
license?: string;
|
||||||
main?: string;
|
main?: string;
|
||||||
@ -49,8 +48,3 @@ export interface Author {
|
|||||||
url?: string;
|
url?: string;
|
||||||
avatar?: string;
|
avatar?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Maintainer {
|
|
||||||
email?: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user