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

src/components/Install/Install.test.tsx

@@ -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', () => {
+const detailContextValue: Partial<DetailContextProps> = {
-  test('should render the component in default state', () => {
+  packageName: 'foo',
-    const wrapper = mount(<Install />);
+  packageMeta: data,
-    expect(wrapper.html()).toMatchSnapshot();
+};
+
+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();
   });
 });

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
+const Heading = styled(Typography)({
-import npm from './img/npm.svg';
+  fontWeight: fontWeight.bold,
-import pnpm from './img/pnpm.svg';
+  textTransform: 'capitalize',
-import yarn from './img/yarn.svg';
+});
 
-import { Heading, InstallItem, PackageMangerAvatar, InstallListItemText } from './styles';
+const Install: React.FC = () => {
+  const detailContext = useContext(DetailContext);
 
-class Install extends Component {
+  const { packageMeta, packageName } = detailContext;
-  public render(): JSX.Element {
+
-    return (
+  if (!packageMeta || !packageName) {
-      <DetailContextConsumer>
+    return null;
-        {(context: Partial<VersionPageConsumerProps>) => {
-          return context && context.packageName && this.renderCopyCLI(context);
-        }}
-      </DetailContextConsumer>
-    );
   }
 
-  public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
+  return (
-    return (
+    <List data-testid={'installList'} subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>
-      <>
+      <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
-        <List subheader={<Heading variant={'subtitle1'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
+      <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
-      </>
+      <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={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>
-      </>
-    );
-  };
-}
 
 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={`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;

src/components/Install/__snapshots__/Install.test.tsx.snap

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

src/components/Install/styles.ts

@@ -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',
-  },
-});

types/packageMeta.ts

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