chore: add unit test for <Dist/> component

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

@@ -31,10 +31,10 @@ class Dist extends Component {
 
       const value = dist === 'license' ? formatLicense(distDict[dist]) : distDict[dist];
       const label = (
-        <span>
+        <>
           {/* eslint-disable-next-line */}
           <b>{dist.replace('-', ' ')}</b>: {value}
-        </span>
+        </>
       );
       return <DistChips key={key} label={label} />;
     });

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>"`;