fix: convert Engine component to hooks (#233)

* refactor: convert Engine component to hooks

* inline engine test data only used by one test

* remove  from engines tests

* remove confusing test abstraction

* change tests to not use mutations
This commit is contained in:
Andrew Hughson 2019-10-31 21:17:16 +00:00 committed by Juan Picado @jotadeveloper
parent b56e43846b
commit 5cb47ed49e
3 changed files with 73 additions and 101 deletions

View File

@ -1,71 +1,61 @@
import React from 'react';
import { mount } from 'enzyme';
import { DetailContext } from '../../pages/Version';
import { PackageMetaInterface } from '../../../types/packageMeta';
import Engine from './Engines';
jest.mock('./img/node.png', () => '');
jest.mock('../Install/img/npm.svg', () => '');
const mockPackageMeta: jest.Mock = jest.fn(() => ({
const mockPackageMeta = (engines?: PackageMetaInterface['latest']['engines']): PackageMetaInterface => ({
latest: {
homepage: 'https://verdaccio.tld',
bugs: {
url: 'https://verdaccio.tld/bugs',
},
name: 'verdaccio',
version: '0.0.0',
dist: {
tarball: 'https://verdaccio.tld/download',
fileCount: 1,
unpackedSize: 1,
},
...(engines && { engines }),
},
}));
jest.mock('../../pages/Version', () => ({
DetailContextConsumer: component => {
return component.children({ packageMeta: mockPackageMeta() });
},
}));
_uplinks: {},
});
describe('<Engines /> component', () => {
beforeEach(() => {
jest.resetAllMocks();
});
test('should render the component in default state', () => {
const packageMeta = {
latest: {
engines: {
node: '>= 0.1.98',
npm: '>3',
},
},
};
const packageMeta = mockPackageMeta({
node: '>= 0.1.98',
npm: '>3',
});
mockPackageMeta.mockImplementation(() => packageMeta);
const wrapper = mount(<Engine />);
const wrapper = mount(
<DetailContext.Provider value={{ packageMeta }}>
<Engine />
</DetailContext.Provider>
);
expect(wrapper.html()).toMatchSnapshot();
});
test('should render the component when there is no engine key in package meta', () => {
const packageMeta = {
latest: {},
};
const packageMeta = mockPackageMeta();
mockPackageMeta.mockImplementation(() => packageMeta);
const wrapper = mount(<Engine />);
expect(wrapper.html()).toEqual('');
const wrapper = mount(
<DetailContext.Provider value={{ packageMeta }}>
<Engine />
</DetailContext.Provider>
);
expect(wrapper.html()).toBeNull();
});
test('should render the component when there is no keys in engine in package meta', () => {
const packageMeta = {
latest: {
engines: {},
},
};
const packageMeta = mockPackageMeta({});
mockPackageMeta.mockImplementation(() => packageMeta);
const wrapper = mount(<Engine />);
expect(wrapper.html()).toEqual('');
const wrapper = mount(
<DetailContext.Provider value={{ packageMeta }}>
<Engine />
</DetailContext.Provider>
);
expect(wrapper.html()).toBeNull();
});
});

View File

@ -1,6 +1,6 @@
import React, { Component, ReactElement } from 'react';
import React, { useContext } from 'react';
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
import { DetailContext } from '../../pages/Version';
import Avatar from '../../muiComponents/Avatar';
import List from '../../muiComponents/List';
import npm from '../Install/img/npm.svg';
@ -8,66 +8,44 @@ import ListItemText from '../../muiComponents/ListItemText';
import Grid from '../../muiComponents/Grid';
import { StyledText, EngineListItem } from './styles';
// @ts-ignore
import node from './img/node.png';
const ICONS = {
'node-JS': <Avatar src={node} />,
'NPM-version': <Avatar src={npm} />,
};
const Engine: React.FC = () => {
const { packageMeta } = useContext(DetailContext);
class Engine extends Component {
public render(): ReactElement<HTMLElement> {
return (
<DetailContextConsumer>
{context => {
return this.renderEngine(context as VersionPageConsumerProps);
}}
</DetailContextConsumer>
);
const engines = packageMeta && packageMeta.latest && packageMeta.latest.engines;
if (!engines || (!engines.node && !engines.npm)) {
return null;
}
private renderEngine = ({ packageMeta }): ReactElement<HTMLElement> | null => {
const { engines } = packageMeta.latest;
if (!engines) {
return null;
}
/* eslint-disable react/jsx-max-depth */
return (
<Grid container={true}>
{engines.node && (
<Grid item={true} xs={6}>
<List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
<EngineListItem button={true}>
<Avatar src={node} />
<ListItemText primary={engines.node} />
</EngineListItem>
</List>
</Grid>
)}
const engineDict = {
'node-JS': engines.node,
'NPM-version': engines.npm,
};
const accumulator: React.ReactNode[] = [];
const items = Object.keys(engineDict).reduce((markup, text, key) => {
const heading = engineDict[text];
if (heading) {
markup.push(
<Grid item={true} key={key} xs={6}>
{this.renderListItems(heading, text)}
</Grid>
);
}
return markup;
}, accumulator);
if (items.length < 1) {
return null;
}
return <Grid container={true}>{items}</Grid>;
};
private renderListItems = (heading: string, text: string) => {
return (
<List subheader={<StyledText variant={'subtitle1'}>{text.split('-').join(' ')}</StyledText>}>
<EngineListItem button={true}>
{ICONS[text]}
<ListItemText primary={heading} />
</EngineListItem>
</List>
);
};
}
{engines.npm && (
<Grid item={true} xs={6}>
<List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}>
<EngineListItem button={true}>
<Avatar src={npm} />
<ListItemText primary={engines.npm} />
</EngineListItem>
</List>
</Grid>
)}
</Grid>
);
/* eslint-enable react/jsx-max-depth */
};
export default Engine;

View File

@ -9,6 +9,10 @@ export interface PackageMetaInterface {
fileCount: number;
unpackedSize: number;
};
engines?: {
node?: string;
npm?: string;
};
license?: Partial<LicenseInterface> | string;
version: string;
};