refactor: address code review comments #116

Author: alfonsoar

src/components/PackageList/PackageList.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactElement } from 'react';
+import React, { Fragment, ReactNode } from 'react';
 
 import Package from '../Package';
 import Help from '../Help';
@@ -13,8 +13,9 @@ interface Props {
 }
 
 export const PackageList: React.FC<Props> = props => {
-  const renderPackages: () => ReactElement<HTMLElement>[] = () => {
-    return props.packages.map((pkg, i) => {
+  const { packages } = props;
+  const renderPackages: () => ReactNode[] = () => {
+    return packages.map((pkg, i) => {
       const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
       // TODO: move format license to API side.
       const license = formatLicense(pkg.license);
@@ -27,7 +28,7 @@ export const PackageList: React.FC<Props> = props => {
     });
   };
 
-  const hasPackages: () => boolean = () => props.packages.length > 0;
+  const hasPackages: () => boolean = () => packages.length > 0;
 
   return (
     <div className={'package-list-items'}>

src/components/RegistryInfoContent/RegistryInfoContent.test.tsx

@@ -15,10 +15,19 @@ describe('<RegistryInfoContent /> component', () => {
   });
 
   test('should load the appropiate tab content when the tab is clicked', () => {
-    const { container, getByTestId } = render(<RegistryInfoContent registryUrl={'http://localhost:4872'} scope={''} />);
-    expect(container.textContent).not.toContain('pnpm adduser --registry http://localhost:4872');
+    const props = { registryUrl: 'http://localhost:4872', scope: '@' };
+    const pnpmTabTextContent = `pnpm adduser --registry ${props.registryUrl}`;
+
+    // Render the component.
+    const { container, getByTestId } = render(<RegistryInfoContent registryUrl={props.registryUrl} scope={props.scope} />);
+
+    // Assert the text content for pnpm tab is not present intially
+    expect(container.textContent).not.toContain(pnpmTabTextContent);
+
     const pnpmTab = getByTestId('pnpm-tab');
     fireEvent.click(pnpmTab);
-    expect(container.textContent).toContain('pnpm adduser --registry http://localhost:4872');
+
+    // Assert the text content is correct after clicking on the tab.
+    expect(container.textContent).toContain(pnpmTabTextContent);
   });
 });

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -20,37 +20,33 @@ export const RegistryInfoContent: React.FC<Props> = props => {
 
   const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => {
     return (
-      <React.Fragment>
+      <>
         <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} />
         <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} />
         <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
-      </React.Fragment>
+      </>
     );
   };
 
-  const renderPNpmTab = (scope: string, registryUrl: string): JSX.Element => {
+  const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => {
     return (
-      <React.Fragment>
+      <>
         <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} />
         <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} />
         <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} />
-      </React.Fragment>
+      </>
     );
   };
 
   const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => {
-    return (
-      <React.Fragment>
-        <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />
-      </React.Fragment>
-    );
+    return <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />;
   };
 
   const renderTabs = (): JSX.Element => {
     const { scope, registryUrl } = props;
 
     return (
-      <React.Fragment>
+      <>
         <Tabs
           data-testid={'tabs-el'}
           indicatorColor="primary"
@@ -63,9 +59,9 @@ export const RegistryInfoContent: React.FC<Props> = props => {
           <Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} />
         </Tabs>
         {tabPosition === 0 && <TabContainer>{renderNpmTab(scope, registryUrl)}</TabContainer>}
-        {tabPosition === 1 && <TabContainer>{renderPNpmTab(scope, registryUrl)}</TabContainer>}
+        {tabPosition === 1 && <TabContainer>{renderPnpmTab(scope, registryUrl)}</TabContainer>}
         {tabPosition === 2 && <TabContainer>{renderYarnTab(scope, registryUrl)}</TabContainer>}
-      </React.Fragment>
+      </>
     );
   };