mirror of
https://github.com/SomboChea/ui
synced 2024-11-05 06:04:28 +07:00
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:
parent
6e2bface93
commit
6bd38b8120
@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
|
||||
/>
|
||||
<ActionBar />
|
||||
<Install />
|
||||
{packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
|
||||
<DetailSidebarFundButton />
|
||||
<Repository />
|
||||
<Engines />
|
||||
<Dist />
|
||||
|
103
src/components/DetailSidebar/DetailSidebarFundButton.test.tsx
Normal file
103
src/components/DetailSidebar/DetailSidebarFundButton.test.tsx
Normal 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();
|
||||
});
|
||||
});
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user