mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-03 23:07:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add support for a tooltip on HighlightCard component

Browse source
This commit is contained in:
Alejandro Celaya 2023-03-18 10:17:17 +01:00
parent b70724f7d6
commit a1b879a5b4
2 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/servers/helpers/HighlightCard.tsx
View file

@ -1,21 +1,30 @@
import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons'; import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { FC, PropsWithChildren } from 'react'; import type { FC, PropsWithChildren, ReactNode } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Card, CardText, CardTitle } from 'reactstrap'; import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
import { useElementRef } from '../../utils/helpers/hooks';
import './HighlightCard.scss'; import './HighlightCard.scss';
export type HighlightCardProps = PropsWithChildren<{ export type HighlightCardProps = PropsWithChildren<{
title: string; title: string;
link?: string | false; link?: string;
tooltip?: ReactNode;
}>; }>;
const buildExtraProps = (link?: string | false) => (!link ? {} : { tag: Link, to: link }); const buildExtraProps = (link?: string) => (!link ? {} : { tag: Link, to: link });
export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => ( export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link, tooltip }) => {
<Card className="highlight-card" body {...buildExtraProps(link)}> const ref = useElementRef<HTMLElement>();
{link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
<CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle> return (
<CardText tag="h2">{children}</CardText> <>
</Card> <Card innerRef={ref} className="highlight-card" body {...buildExtraProps(link)}>
); {link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
<CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
<CardText tag="h2">{children}</CardText>
</Card>
{tooltip && <UncontrolledTooltip target={ref} placement="bottom">{tooltip}</UncontrolledTooltip>}
</>
);
};

20
test/servers/helpers/HighlightCard.test.tsx
View file

@ -1,11 +1,12 @@
import { render, screen } from '@testing-library/react'; import { screen, waitFor } from '@testing-library/react';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import type { HighlightCardProps } from '../../../src/servers/helpers/HighlightCard'; import type { HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
import { HighlightCard } from '../../../src/servers/helpers/HighlightCard'; import { HighlightCard } from '../../../src/servers/helpers/HighlightCard';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<HighlightCard />', () => { describe('<HighlightCard />', () => {
const setUp = (props: HighlightCardProps & { children?: ReactNode }) => render( const setUp = (props: HighlightCardProps & { children?: ReactNode }) => renderWithEvents(
<MemoryRouter> <MemoryRouter>
<HighlightCard {...props} /> <HighlightCard {...props} />
</MemoryRouter>, </MemoryRouter>,
@ -13,9 +14,9 @@ describe('<HighlightCard />', () => {
it.each([ it.each([
[undefined], [undefined],
[false], [''],
])('does not render icon when there is no link', (link) => { ])('does not render icon when there is no link', (link) => {
setUp({ title: 'foo', link: link as undefined | false }); setUp({ title: 'foo', link });
expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
expect(screen.queryByRole('link')).not.toBeInTheDocument(); expect(screen.queryByRole('link')).not.toBeInTheDocument();
@ -27,7 +28,7 @@ describe('<HighlightCard />', () => {
['baz'], ['baz'],
])('renders provided title', (title) => { ])('renders provided title', (title) => {
setUp({ title }); setUp({ title });
expect(screen.getByText(title)).toHaveAttribute('class', expect.stringContaining('highlight-card__title')); expect(screen.getByText(title)).toHaveClass('highlight-card__title');
}); });
it.each([ it.each([
@ -36,7 +37,7 @@ describe('<HighlightCard />', () => {
['baz'], ['baz'],
])('renders provided children', (children) => { ])('renders provided children', (children) => {
setUp({ title: 'title', children }); setUp({ title: 'title', children });
expect(screen.getByText(children)).toHaveAttribute('class', expect.stringContaining('card-text')); expect(screen.getByText(children)).toHaveClass('card-text');
}); });
it.each([ it.each([
@ -49,4 +50,11 @@ describe('<HighlightCard />', () => {
expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`); expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`);
}); });
it('renders tooltip when provided', async () => {
const { user } = setUp({ title: 'title', children: 'Foo', tooltip: 'This is the tooltip' });
await user.hover(screen.getByText('Foo'));
await waitFor(() => expect(screen.getByText('This is the tooltip')).toBeInTheDocument());
});
}); });