fix: remove prevent default and use react context (#411)

* fix: remove prevent default and use react context

* chore: remove string check
This commit is contained in:
Juan Picado @jotadeveloper 2020-01-08 12:16:13 +01:00 committed by GitHub
parent 6e2bface93
commit 6bd38b8120
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 120 additions and 15 deletions

View File

@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
/>
<ActionBar />
<Install />
{packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
<DetailSidebarFundButton />
<Repository />
<Engines />
<Dist />

View File

@ -0,0 +1,103 @@
import React from 'react';
import _ from 'lodash';
import { render } from '../../utils/test-react-testing-library';
import { DetailContext, DetailContextProps } from '../../pages/Version';
import DetailSidebarFundButton from './DetailSidebarFundButton';
const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({ contextValue }) => (
<DetailContext.Provider value={contextValue}>
<DetailSidebarFundButton />
</DetailContext.Provider>
);
const detailContextValue: DetailContextProps = {
packageName: 'foo',
readMe: 'test',
enableLoading: () => {},
isLoading: false,
hasNotBeenFound: false,
packageMeta: {
_uplinks: {},
latest: {
name: '@verdaccio/local-storage',
version: '8.0.1-next.1',
dist: { fileCount: 0, unpackedSize: 0, tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz' },
homepage: 'https://verdaccio.org',
bugs: {
url: 'https://github.com/verdaccio/monorepo/issues',
},
},
},
};
describe('test DetailSidebarFundButton', () => {
test('should not display the button if fund is missing', () => {
const wrapper = render(<ComponentToBeRendered contextValue={detailContextValue} />);
expect(wrapper.queryByText('Fund')).toBeNull();
});
test('should not display the button if url is missing', () => {
const value = _.merge(detailContextValue, {
packageMeta: {
latest: {
funding: {},
},
},
});
const wrapper = render(<ComponentToBeRendered contextValue={value} />);
expect(wrapper.queryByText('Fund')).toBeNull();
});
test('should not display the button if url is not a string', () => {
const value = _.merge(detailContextValue, {
packageMeta: {
latest: {
funding: {
url: null,
},
},
},
});
const wrapper = render(<ComponentToBeRendered contextValue={value} />);
expect(wrapper.queryByText('Fund')).toBeNull();
});
test('should not display the button if url is not an url', () => {
const value = _.merge(detailContextValue, {
packageMeta: {
latest: {
funding: {
url: 'somethign different as url',
},
},
},
});
const wrapper = render(<ComponentToBeRendered contextValue={value} />);
expect(wrapper.queryByText('Fund')).toBeNull();
});
test('should display the button if url is a valid url', () => {
const value = _.merge(detailContextValue, {
packageMeta: {
latest: {
funding: {
url: 'https://opencollective.com/verdaccio',
},
},
},
});
const wrapper = render(<ComponentToBeRendered contextValue={value} />);
expect(wrapper.getByText('Fund')).toBeTruthy();
});
});

View File

@ -1,10 +1,12 @@
import React, { MouseEvent } from 'react';
import React, { useContext } from 'react';
import styled from '@emotion/styled';
import Favorite from '@material-ui/icons/Favorite';
import Button from '../../muiComponents/Button';
import Link from '../Link';
import { isURL } from '../../utils/url';
import { Theme } from '../../design-tokens/theme';
import { DetailContext } from '../../pages/Version';
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
marginTop: theme && theme.spacing(1),
@ -21,21 +23,21 @@ const StyledFundStrong = styled('strong')({
marginRight: 3,
});
interface Props {
to: string;
}
/* eslint-disable react/jsx-no-bind */
const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
const DetailSidebarFundButton: React.FC = () => {
const detailContext = useContext(DetailContext);
const { packageMeta } = detailContext;
const fundingUrl = packageMeta?.latest?.funding?.url as string;
if (!isURL(fundingUrl)) {
return null;
}
return (
<StyledLink external={true} to={to}>
<Button
color="primary"
fullWidth={true}
onClick={preventDefault}
startIcon={<StyledFavoriteIcon />}
variant="outlined">
<StyledLink external={true} to={fundingUrl}>
<Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
<StyledFundStrong>{'Fund'}</StyledFundStrong>
{'this package'}
</Button>