This repository has been archived by the owner on Jan 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 80
Refactor/116 RegistryInfoContent is converted to functional component #229
Merged
juanpicado
merged 18 commits into
verdaccio:master
from
alfonsoar:refactor/116_registry_info_content_is_converted_to_functional_component
Nov 2, 2019
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
b66b14f
refactor:116[PackageList] component is converted to functional
alfonsoar f9a19e0
Refactor:#116 - Registry info content is converted to functional comp…
alfonsoar 7f7594e
refactor/#116 - rebase and resolve conflicts
alfonsoar 5baf922
refactor/116 - fix lint error
alfonsoar 6e05255
refactor:116 - more lint errors
alfonsoar 22bd9ea
refactor/116 - lint error
alfonsoar 513ad12
refactor:116 - remove snapshot
alfonsoar 6c4098b
refactor: address code review comments #116
alfonsoar 237b313
refactor: fix lint error
alfonsoar bf7fe69
refactor: code review changes
alfonsoar 5adbad7
refactor add missed file
alfonsoar 560112e
refactor: lint error
alfonsoar d0f0ae2
refactor: lint
alfonsoar 3fc4b16
refactor: lint
alfonsoar 5318dd8
Merge branch 'master' into refactor/116_registry_info_content_is_conv…
priscilawebdev 4f14f41
refactor: fix lint error
alfonsoar 058bcbc
Merge branch 'refactor/116_registry_info_content_is_converted_to_func…
alfonsoar a1e5edb
Merge branch 'master' into refactor/116_registry_info_content_is_conv…
alfonsoar File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 24 additions & 12 deletions
36
src/components/RegistryInfoContent/RegistryInfoContent.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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('<RegistryInfoContent /> component', () => { | ||
test('should render the component in default state with npm tab', () => { | ||
const wrapper = mount(<RegistryInfoContent registryUrl="https://registry.verdaccio.org" scope="@" />); | ||
expect(wrapper.html()).toMatchSnapshot(); | ||
afterEach(() => { | ||
cleanup(); | ||
}); | ||
|
||
test('should render the component in default state with pnpm tab', () => { | ||
const wrapper = mount(<RegistryInfoContent registryUrl="https://registry.verdaccio.org" scope="@" />); | ||
wrapper.setState({ tabPosition: 1 }); | ||
expect(wrapper.html()).toMatchSnapshot(); | ||
test('should load the component with no data', () => { | ||
const { getByTestId } = render(<RegistryInfoContent registryUrl={''} scope={''} />); | ||
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(<RegistryInfoContent registryUrl="https://registry.verdaccio.org" scope="@" />); | ||
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( | ||
<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); | ||
|
||
// Assert the text content is correct after clicking on the tab. | ||
expect(container.textContent).toContain(pnpmTabTextContent); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,4 +1,4 @@ | ||||||
import React, { Component } from 'react'; | ||||||
import React, { useState } from 'react'; | ||||||
priscilawebdev marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
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 ( | ||||||
<CommandContainer> | ||||||
<Typography | ||||||
className={css` | ||||||
padding: 0; | ||||||
min-height: 170; | ||||||
`} | ||||||
component="div"> | ||||||
{children} | ||||||
</Typography> | ||||||
</CommandContainer> | ||||||
); | ||||||
} | ||||||
const RegistryInfoContent: React.FC<Props> = props => { | ||||||
const [tabPosition, setTabPosition] = useState<State['tabPosition']>(0); | ||||||
priscilawebdev marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. as discussed I think it should be ok to be explicit here |
||||||
const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => { | ||||||
event.preventDefault(); | ||||||
setTabPosition(tabPosition); | ||||||
}; | ||||||
|
||||||
class RegistryInfoContent extends Component<Props, State> { | ||||||
public state = { | ||||||
tabPosition: 0, | ||||||
const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||||||
return ( | ||||||
<> | ||||||
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} /> | ||||||
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} /> | ||||||
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} /> | ||||||
</> | ||||||
); | ||||||
}; | ||||||
|
||||||
public render(): JSX.Element { | ||||||
return <div>{this.renderTabs()}</div>; | ||||||
} | ||||||
const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||||||
return ( | ||||||
<> | ||||||
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} /> | ||||||
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} /> | ||||||
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} /> | ||||||
</> | ||||||
); | ||||||
}; | ||||||
|
||||||
private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => { | ||||||
event.preventDefault(); | ||||||
this.setState({ tabPosition }); | ||||||
const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => { | ||||||
return <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />; | ||||||
}; | ||||||
|
||||||
private renderTabs(): JSX.Element { | ||||||
const { scope, registryUrl } = this.props; | ||||||
const { tabPosition } = this.state; | ||||||
const renderTabs = (): JSX.Element => { | ||||||
const { scope, registryUrl } = props; | ||||||
|
||||||
return ( | ||||||
<React.Fragment> | ||||||
<> | ||||||
<Tabs | ||||||
data-testid={'tabs-el'} | ||||||
indicatorColor="primary" | ||||||
onChange={this.handleChange} | ||||||
onChange={handleChange} | ||||||
textColor="primary" | ||||||
value={tabPosition} | ||||||
variant="fullWidth"> | ||||||
<Tab label={NODE_MANAGER.npm} /> | ||||||
<Tab label={NODE_MANAGER.pnpm} /> | ||||||
<Tab label={NODE_MANAGER.yarn} /> | ||||||
<Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} /> | ||||||
<Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} /> | ||||||
<Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} /> | ||||||
</Tabs> | ||||||
{tabPosition === 0 && <TabContainer>{this.renderNpmTab(scope, registryUrl)}</TabContainer>} | ||||||
{tabPosition === 1 && <TabContainer>{this.renderPNpmTab(scope, registryUrl)}</TabContainer>} | ||||||
{tabPosition === 2 && <TabContainer>{this.renderYarnTab(scope, registryUrl)}</TabContainer>} | ||||||
</React.Fragment> | ||||||
{tabPosition === 0 && <TabContainer>{renderNpmTab(scope, registryUrl)}</TabContainer>} | ||||||
{tabPosition === 1 && <TabContainer>{renderPnpmTab(scope, registryUrl)}</TabContainer>} | ||||||
{tabPosition === 2 && <TabContainer>{renderYarnTab(scope, registryUrl)}</TabContainer>} | ||||||
</> | ||||||
); | ||||||
} | ||||||
}; | ||||||
|
||||||
private renderNpmTab(scope: string, registryUrl: string): JSX.Element { | ||||||
/* eslint react/prop-types:0 */ | ||||||
const TabContainer = ({ children }): 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> | ||||||
<CommandContainer> | ||||||
<Typography | ||||||
className={css` | ||||||
padding: 0; | ||||||
min-height: 170; | ||||||
`} | ||||||
component="div"> | ||||||
{children} | ||||||
</Typography> | ||||||
</CommandContainer> | ||||||
); | ||||||
} | ||||||
|
||||||
private 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> | ||||||
); | ||||||
} | ||||||
}; | ||||||
|
||||||
private renderYarnTab(scope: string, registryUrl: string): JSX.Element { | ||||||
return ( | ||||||
<React.Fragment> | ||||||
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} /> | ||||||
</React.Fragment> | ||||||
); | ||||||
} | ||||||
} | ||||||
return <div>{renderTabs()}</div>; | ||||||
}; | ||||||
|
||||||
export default RegistryInfoContent; |
7 changes: 0 additions & 7 deletions
7
src/components/RegistryInfoContent/__snapshots__/RegistryInfoContent.test.tsx.snap
This file was deleted.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please why did you add
_
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we cant name this variable
license
the props already have a prop namedlicense
I presume this why the component was not destructuring the props before. this way we could callpkg.license