mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 13:44:31 +07:00
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:
parent
b56e43846b
commit
5cb47ed49e
@ -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();
|
||||
});
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -9,6 +9,10 @@ export interface PackageMetaInterface {
|
||||
fileCount: number;
|
||||
unpackedSize: number;
|
||||
};
|
||||
engines?: {
|
||||
node?: string;
|
||||
npm?: string;
|
||||
};
|
||||
license?: Partial<LicenseInterface> | string;
|
||||
version: string;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user