mirror of
https://github.com/SomboChea/ui
synced 2024-11-24 06:54:27 +07:00
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:
Priscila Oliveira
Juan Picado @jotadeveloper
parent
43a9628ec4
commit
9eb698f7e1
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user