Merge pull request #86 from griffithtp/fix/83_support-deprecated-license-object-properties

fix: 83 support deprecated license object properties

src/components/Dist/Dist.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('<Dist /> component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  test('should render the component in default state', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: {
+          fileCount: 7,
+          unpackedSize: 10,
+        },
+        license: '',
+      },
+    };
+    jest.doMock('../../pages/version/Version', () => ({
+      DetailContextConsumer: component => {
+        return component.children({ packageMeta });
+      },
+    }));
+
+    const Dist = require('./Dist').default;
+    const wrapper = shallow(<Dist />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('should render the component with license as string', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: {
+          fileCount: 7,
+          unpackedSize: 10,
+        },
+        license: 'MIT',
+      },
+    };
+    jest.doMock('../../pages/version/Version', () => ({
+      DetailContextConsumer: component => {
+        return component.children({ packageMeta });
+      },
+    }));
+
+    const Dist = require('./Dist').default;
+    const wrapper = shallow(<Dist />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('should render the component with license as object', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio',
+        version: '4.0.0',
+        dist: {
+          fileCount: 7,
+          unpackedSize: 10,
+        },
+        license: {
+          type: 'MIT',
+          url: 'https://www.opensource.org/licenses/mit-license.php',
+        },
+      },
+    };
+    jest.doMock('../../pages/version/Version', () => ({
+      DetailContextConsumer: component => {
+        return component.children({ packageMeta });
+      },
+    }));
+
+    const Dist = require('./Dist').default;
+    const wrapper = shallow(<Dist />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

src/components/Dist/Dist.tsx

@@ -6,6 +6,7 @@ import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/ver
 import { Heading, DistListItem, DistChips } from './styles';
 import fileSizeSI from '../../utils/file-size';
 import { PackageMetaInterface } from 'types/packageMeta';
+import { formatLicense } from '../../utils/package';
 
 class Dist extends Component {
   public render(): JSX.Element {
@@ -18,28 +19,25 @@ class Dist extends Component {
     );
   }
 
-  private renderChips(dist, license: string): JSX.Element | never[] {
+  private renderChips(dist, license: PackageMetaInterface['latest']['license']): (JSX.Element | undefined)[] {
     const distDict = {
       'file-count': dist.fileCount,
       size: dist.unpackedSize && fileSizeSI(dist.unpackedSize),
       license,
     };
 
-    const chipsList = Object.keys(distDict).reduce((componentList, title, key) => {
+    const chipsList = Object.keys(distDict).map((dist, key) => {
-      // @ts-ignore
+      if (!distDict[dist]) return;
-      const value = distDict[title];
+
-      if (value) {
+      const value = dist === 'license' ? formatLicense(distDict[dist]) : distDict[dist];
       const label = (
-          <span>
+        <>
           {/* eslint-disable-next-line */}
-            <b>{title.split('-').join(' ')}</b>:{value}
+          <b>{dist.replace('-', ' ')}</b>: {value}
-          </span>
+        </>
       );
-        // @ts-ignore is not assignable to parameter of type 'never'
+      return <DistChips key={key} label={label} />;
-        componentList.push(<DistChips key={key} label={label} />);
+    });
-      }
-      return componentList;
-    }, []);
 
     return chipsList;
   }

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2 MuiList-subheader-4\\"><h3 class=\\"MuiTypography-root-5 MuiTypography-subheading-12 css-hyrz44 estxrtg0\\">Latest Distribution</h3><li class=\\"MuiListItem-root-41 MuiListItem-default-44 MuiListItem-gutters-49 css-z8a2h0 estxrtg1\\"><div role=\\"button\\" class=\\"MuiChip-root-53 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-72\\"><b>file count</b>: 7</span></div><div role=\\"button\\" class=\\"MuiChip-root-53 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-72\\"><b>size</b>: 10.00 Bytes</span></div></li></ul>"`;
+
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root-155 MuiList-padding-156 MuiList-subheader-158\\"><h3 class=\\"MuiTypography-root-159 MuiTypography-subheading-166 css-hyrz44 estxrtg0\\">Latest Distribution</h3><li class=\\"MuiListItem-root-195 MuiListItem-default-198 MuiListItem-gutters-203 css-z8a2h0 estxrtg1\\"><div role=\\"button\\" class=\\"MuiChip-root-207 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-226\\"><b>file count</b>: 7</span></div><div role=\\"button\\" class=\\"MuiChip-root-207 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-226\\"><b>size</b>: 10.00 Bytes</span></div><div role=\\"button\\" class=\\"MuiChip-root-207 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-226\\"><b>license</b>: MIT</span></div></li></ul>"`;
+
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root-78 MuiList-padding-79 MuiList-subheader-81\\"><h3 class=\\"MuiTypography-root-82 MuiTypography-subheading-89 css-hyrz44 estxrtg0\\">Latest Distribution</h3><li class=\\"MuiListItem-root-118 MuiListItem-default-121 MuiListItem-gutters-126 css-z8a2h0 estxrtg1\\"><div role=\\"button\\" class=\\"MuiChip-root-130 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-149\\"><b>file count</b>: 7</span></div><div role=\\"button\\" class=\\"MuiChip-root-130 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-149\\"><b>size</b>: 10.00 Bytes</span></div><div role=\\"button\\" class=\\"MuiChip-root-130 css-1le6jk6 estxrtg2\\" tabindex=\\"-1\\"><span class=\\"MuiChip-label-149\\"><b>license</b>: MIT</span></div></li></ul>"`;

src/components/Package/Package.tsx

@@ -6,10 +6,29 @@ import HomeIcon from '@material-ui/icons/Home';
 import ListItem from '@material-ui/core/ListItem';
 import Tooltip from '@material-ui/core/Tooltip';
 
+import { PackageMetaInterface } from 'types/packageMeta';
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
 import { formatDate, formatDateDistance } from '../../utils/package';
-
+import {
+  Author,
+  Avatar,
+  Description,
+  Details,
+  GridRightAligned,
+  Icon,
+  IconButton,
+  OverviewItem,
+  PackageList,
+  PackageListItem,
+  PackageListItemText,
+  PackageTitle,
+  Published,
+  TagContainer,
+  Text,
+  WrapperLink,
+} from './styles';
+import { isURL } from '../../utils/url';
 interface Author {
   name: string;
   avatar?: string;
@@ -30,32 +49,11 @@ export interface PackageInterface {
   author: Author;
   description?: string;
   keywords?: string[];
-  license?: string | null;
+  license?: PackageMetaInterface['latest']['license'];
   homepage?: string;
   bugs?: Bugs;
   dist?: Dist;
 }
-// interface Props {} & PackageInterface;
-
-import {
-  Author,
-  Avatar,
-  Description,
-  Details,
-  GridRightAligned,
-  Icon,
-  IconButton,
-  OverviewItem,
-  PackageList,
-  PackageListItem,
-  PackageListItemText,
-  PackageTitle,
-  Published,
-  TagContainer,
-  Text,
-  WrapperLink,
-} from './styles';
-import { isURL } from '../../utils/url';
 
 const Package: React.FC<PackageInterface> = ({
   author: { name: authorName, avatar: authorAvatar },

src/utils/package.test.ts

@@ -13,9 +13,9 @@ describe('formatLicense', (): void => {
   });
 
   test('should check license field for other value', (): void => {
-    expect(formatLicense(null)).toBeNull();
+    expect(formatLicense(null)).toBeUndefined();
-    expect(formatLicense({})).toBeNull();
+    expect(formatLicense({})).toBeUndefined();
-    expect(formatLicense([])).toBeNull();
+    expect(formatLicense([])).toBeUndefined();
   });
 });
 

src/utils/package.ts

@@ -6,18 +6,13 @@ import { isObject } from 'util';
 
 export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss';
 
-export interface License {
-  type: string;
-  url: string;
-}
-
 /**
  * Formats license field for webui.
  * @see https://docs.npmjs.com/files/package.json#license
  */
 // License should use type License defined above, but conflicts with the unit test that provide array or empty object
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export function formatLicense(license: any): string | null {
+export function formatLicense(license: any): string | undefined {
   if (isString(license)) {
     return license;
   }
@@ -26,7 +21,7 @@ export function formatLicense(license: any): string | null {
     return license.type;
   }
 
-  return null;
+  return;
 }
 
 export interface Repository {

types/packageMeta.ts

@@ -5,7 +5,12 @@ export interface PackageMetaInterface {
       fileCount: number;
       unpackedSize: number;
     };
-    license: string;
+    license?: Partial<LicenseInterface> | string;
   };
   _uplinks: {};
 }
+
+interface LicenseInterface {
+  type: string;
+  url: string;
+}