diff --git a/src/components/PackageList/PackageList.tsx b/src/components/PackageList/PackageList.tsx index a349281bf..c20044e3c 100644 --- a/src/components/PackageList/PackageList.tsx +++ b/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'; @@ -12,22 +12,23 @@ interface Props { packages: PackageInterface[]; } -export const PackageList: React.FC = props => { - const renderPackages: () => ReactElement[] = () => { - return props.packages.map((pkg, i) => { - const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg; +export const PackageList: React.FC = ({ packages }) => { + const renderPackages: () => ReactNode[] = () => { + return packages.map(({ name, version, description, time, keywords, dist, homepage, bugs, author, license }, i) => { // TODO: move format license to API side. - const license = formatLicense(pkg.license); + const _license = formatLicense(license); return ( {i !== 0 && } - + ); }); }; - const hasPackages: () => boolean = () => props.packages.length > 0; + const hasPackages: () => boolean = () => packages.length > 0; return (
diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.test.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.test.tsx index 058c27eee..21fc5ff1a 100644 --- a/src/components/RegistryInfoContent/RegistryInfoContent.test.tsx +++ b/src/components/RegistryInfoContent/RegistryInfoContent.test.tsx @@ -1,23 +1,35 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render, cleanup, fireEvent } from '@testing-library/react'; import RegistryInfoContent from './RegistryInfoContent'; describe(' component', () => { - test('should render the component in default state with npm tab', () => { - const wrapper = mount(); - expect(wrapper.html()).toMatchSnapshot(); + afterEach(() => { + cleanup(); }); - test('should render the component in default state with pnpm tab', () => { - const wrapper = mount(); - wrapper.setState({ tabPosition: 1 }); - expect(wrapper.html()).toMatchSnapshot(); + test('should load the component with no data', () => { + const { getByTestId } = render(); + const unorderedListOfTodos = getByTestId('tabs-el'); + expect(unorderedListOfTodos.children.length).toBe(1); }); - test('should render the component in default state with yarn tab', () => { - const wrapper = mount(); - wrapper.setState({ tabPosition: 2 }); - expect(wrapper.html()).toMatchSnapshot(); + test('should load the appropiate tab content when the tab is clicked', () => { + const props = { registryUrl: 'http://localhost:4872', scope: '@' }; + const pnpmTabTextContent = `pnpm adduser --registry ${props.registryUrl}`; + + // Render the component. + const { container, getByTestId } = render( + + ); + + // 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); + + // Assert the text content is correct after clicking on the tab. + expect(container.textContent).toContain(pnpmTabTextContent); }); }); diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.tsx index 6ccd80b55..af7824c34 100644 --- a/src/components/RegistryInfoContent/RegistryInfoContent.tsx +++ b/src/components/RegistryInfoContent/RegistryInfoContent.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { useState } from 'react'; import { css } from 'emotion'; import CopyToClipBoard from '../CopyToClipBoard'; @@ -11,86 +11,77 @@ import Tab from '../../muiComponents/Tab'; import { CommandContainer } from './styles'; import { Props, State } from './types'; -/* eslint react/prop-types:0 */ -function TabContainer({ children }): JSX.Element { - return ( - - - {children} - - - ); -} +const RegistryInfoContent: React.FC = props => { + const [tabPosition, setTabPosition] = useState(0); + const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => { + event.preventDefault(); + setTabPosition(tabPosition); + }; -class RegistryInfoContent extends Component { - public state = { - tabPosition: 0, + const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => { + return ( + <> + + + + + ); }; - public render(): JSX.Element { - return
{this.renderTabs()}
; - } + const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => { + return ( + <> + + + + + ); + }; - private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => { - event.preventDefault(); - this.setState({ tabPosition }); + const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => { + return ; }; - private renderTabs(): JSX.Element { - const { scope, registryUrl } = this.props; - const { tabPosition } = this.state; + const renderTabs = (): JSX.Element => { + const { scope, registryUrl } = props; return ( - + <> - - - + + + - {tabPosition === 0 && {this.renderNpmTab(scope, registryUrl)}} - {tabPosition === 1 && {this.renderPNpmTab(scope, registryUrl)}} - {tabPosition === 2 && {this.renderYarnTab(scope, registryUrl)}} - + {tabPosition === 0 && {renderNpmTab(scope, registryUrl)}} + {tabPosition === 1 && {renderPnpmTab(scope, registryUrl)}} + {tabPosition === 2 && {renderYarnTab(scope, registryUrl)}} + ); - } + }; - private renderNpmTab(scope: string, registryUrl: string): JSX.Element { + /* eslint react/prop-types:0 */ + const TabContainer = ({ children }): JSX.Element => { return ( - - - - - + + + {children} + + ); - } - - private renderPNpmTab(scope: string, registryUrl: string): JSX.Element { - return ( - - - - - - ); - } + }; - private renderYarnTab(scope: string, registryUrl: string): JSX.Element { - return ( - - - - ); - } -} + return
{renderTabs()}
; +}; export default RegistryInfoContent; diff --git a/src/components/RegistryInfoContent/__snapshots__/RegistryInfoContent.test.tsx.snap b/src/components/RegistryInfoContent/__snapshots__/RegistryInfoContent.test.tsx.snap deleted file mode 100644 index 0f69ac565..000000000 --- a/src/components/RegistryInfoContent/__snapshots__/RegistryInfoContent.test.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` component should render the component in default state with npm tab 1`] = `"
npm set @registry https://registry.verdaccio.org
npm adduser --registry https://registry.verdaccio.org
npm profile set password --registry https://registry.verdaccio.org
"`; - -exports[` component should render the component in default state with pnpm tab 1`] = `"
pnpm set @registry https://registry.verdaccio.org
pnpm adduser --registry https://registry.verdaccio.org
pnpm profile set password --registry https://registry.verdaccio.org
"`; - -exports[` component should render the component in default state with yarn tab 1`] = `"
yarn config set @registry https://registry.verdaccio.org
"`;