forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-10 09:33:51 +00:00
Code Issues Packages Projects Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

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 { MemoryRouter } from 'react-router-dom';
import type { HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
import { HighlightCard } from '../../../src/servers/helpers/HighlightCard';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<HighlightCard />', () => {
const setUp = (props: HighlightCardProps & { children?: ReactNode }) => render(
const setUp = (props: HighlightCardProps & { children?: ReactNode }) => renderWithEvents(
<MemoryRouter>
<HighlightCard {...props} />
</MemoryRouter>,
@@ -13,9 +14,9 @@ describe('<HighlightCard />', () => {
it.each([
[undefined],
[false],
[''],
])('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('link')).not.toBeInTheDocument();
@@ -27,7 +28,7 @@ describe('<HighlightCard />', () => {
['baz'],
])('renders provided title', (title) => {
setUp({ title });
expect(screen.getByText(title)).toHaveAttribute('class', expect.stringContaining('highlight-card__title'));
expect(screen.getByText(title)).toHaveClass('highlight-card__title');
});
it.each([
@@ -36,7 +37,7 @@ describe('<HighlightCard />', () => {
['baz'],
])('renders provided children', (children) => {
setUp({ title: 'title', children });
expect(screen.getByText(children)).toHaveAttribute('class', expect.stringContaining('card-text'));
expect(screen.getByText(children)).toHaveClass('card-text');
});
it.each([
@@ -49,4 +50,11 @@ describe('<HighlightCard />', () => {
expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
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());
});
});