Skip to content

Commit

Permalink
test: (@radix-ui/react-tooltip) add unit tests for tooltip component (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
upatel32 authored Sep 27, 2024
1 parent 4b3b969 commit 98d15cb
Showing 1 changed file with 82 additions and 0 deletions.
82 changes: 82 additions & 0 deletions packages/react/tooltip/src/Tooltip.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import * as Tooltip from '@radix-ui/react-tooltip';
import userEvent from '@testing-library/user-event';

describe('Tooltip', () => {
it('renders tooltip trigger', () => {
render(
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
Tooltip Content
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);

expect(screen.getByText('Tooltip Trigger')).toBeInTheDocument();
expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();
});

it('renders tooltip content when trigger is hovered', async () => {
render(
<Tooltip.Provider>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
Tooltip Content
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);

const trigger = screen.getByText('Tooltip Trigger');
expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();

userEvent.hover(trigger);
await waitFor(() => {
// Get the first instance of the tooltip content because the second is
// the visually hidden primitive.
expect(screen.queryAllByText('Tooltip Content')[0]).toBeVisible();
});
});

it('renders tooltip content is dismissed when trigger is clicked', async () => {
render(
<Tooltip.Provider>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content>
Tooltip Content
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);

const trigger = screen.getByText('Tooltip Trigger');
expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();

userEvent.hover(trigger);
await waitFor(() => {
// Get the first instance of the tooltip content because the second is
// the visually hidden primitive.
expect(screen.queryAllByText('Tooltip Content')[0]).toBeVisible();
});

userEvent.click(trigger);
await waitFor(() => {
expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();
});
});
});

0 comments on commit 98d15cb

Please sign in to comment.