Install Component - Replaced class by func. comp

src/components/Install/Install.test.tsx

@@ -1,11 +1,48 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+
+import { DetailContext, DetailContextProps } from '../../pages/Version';
+import data from '../Versions/__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 } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-npm')).toBeTruthy();
+  });
+
+  test('should have the element YARN', () => {
+    const { getByTestId } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-yarn')).toBeTruthy();
+  });
+
+  test('should have the element PNPM', () => {
+    const { getByTestId } = render(<ComponentToBeRendered />);
+    expect(getByTestId('installListItem-pnpm')).toBeTruthy();
   });
 });

src/components/Install/Install.tsx

@@ -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;

src/components/Install/InstallListItem.tsx

@@ -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={`npm install ${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={`npm install ${packageName}`} />} secondary={'Install using pnpm'} />
+        </InstallItem>
+      );
+    default:
+      return null;
+  }
+};
+
+export default InstallListItem;