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

Author: Andrew Hughson

src/components/Engines/Engines.test.tsx

@@ -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',
-        },
-      },
-    };
-
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Engine />);
+    const packageMeta = mockPackageMeta({
+      node: '>= 0.1.98',
+      npm: '>3',
+    });
+
+    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: {},
-    };
-
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Engine />);
-    expect(wrapper.html()).toEqual('');
+    const packageMeta = mockPackageMeta();
+
+    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: {},
-      },
-    };
-
-    mockPackageMeta.mockImplementation(() => packageMeta);
-
-    const wrapper = mount(<Engine />);
-    expect(wrapper.html()).toEqual('');
+    const packageMeta = mockPackageMeta({});
+
+    const wrapper = mount(
+      <DetailContext.Provider value={{ packageMeta }}>
+        <Engine />
+      </DetailContext.Provider>
+    );
+    expect(wrapper.html()).toBeNull();
   });
 });

src/components/Engines/Engines.tsx

@@ -1,73 +1,51 @@
-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';
 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} />,
-};
-
-class Engine extends Component {
-  public render(): ReactElement<HTMLElement> {
-    return (
-      <DetailContextConsumer>
-        {context => {
-          return this.renderEngine(context as VersionPageConsumerProps);
-        }}
-      </DetailContextConsumer>
-    );
-  }
-
-  private renderEngine = ({ packageMeta }): ReactElement<HTMLElement> | null => {
-    const { engines } = packageMeta.latest;
-    if (!engines) {
-      return null;
-    }
+const Engine: React.FC = () => {
+  const { packageMeta } = useContext(DetailContext);
 
-    const engineDict = {
-      'node-JS': engines.node,
-      'NPM-version': engines.npm,
-    };
+  const engines = packageMeta && packageMeta.latest && packageMeta.latest.engines;
 
-    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>;
-  };
+  if (!engines || (!engines.node && !engines.npm)) {
+    return null;
+  }
 
-  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>
-    );
-  };
-}
+  /* 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>
+      )}
+
+      {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;

types/packageMeta.ts

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