diff --git a/src/components/PackageList/PackageList.tsx b/src/components/PackageList/PackageList.tsx index a349281..c20044e 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 058c27e..21fc5ff 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 6ccd80b..af7824c 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} - - - ); -} - -class RegistryInfoContent extends Component { - public state = { - tabPosition: 0, - }; - - public render(): JSX.Element { - return
{this.renderTabs()}
; - } - - private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => { +const RegistryInfoContent: React.FC = props => { + const [tabPosition, setTabPosition] = useState(0); + const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => { event.preventDefault(); - this.setState({ tabPosition }); + setTabPosition(tabPosition); }; - private renderTabs(): JSX.Element { - const { scope, registryUrl } = this.props; - const { tabPosition } = this.state; - + const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => { return ( - - - - - - - {tabPosition === 0 && {this.renderNpmTab(scope, registryUrl)}} - {tabPosition === 1 && {this.renderPNpmTab(scope, registryUrl)}} - {tabPosition === 2 && {this.renderYarnTab(scope, registryUrl)}} - - ); - } - - private renderNpmTab(scope: string, registryUrl: string): JSX.Element { - return ( - + <> - + ); - } + }; - private renderPNpmTab(scope: string, registryUrl: string): JSX.Element { + const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => { return ( - + <> - + ); - } + }; + + const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => { + return ; + }; + + const renderTabs = (): JSX.Element => { + const { scope, registryUrl } = props; - private renderYarnTab(scope: string, registryUrl: string): JSX.Element { return ( - - - + <> + + + + + + {tabPosition === 0 && {renderNpmTab(scope, registryUrl)}} + {tabPosition === 1 && {renderPnpmTab(scope, registryUrl)}} + {tabPosition === 2 && {renderYarnTab(scope, registryUrl)}} + ); - } -} + }; + + /* eslint react/prop-types:0 */ + const TabContainer = ({ children }): JSX.Element => { + return ( + + + {children} + + + ); + }; + + 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 0f69ac5..0000000 --- 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
"`;