diff --git a/packages/react/tooltip/src/Tooltip.test.tsx b/packages/react/tooltip/src/Tooltip.test.tsx new file mode 100644 index 000000000..84481d58f --- /dev/null +++ b/packages/react/tooltip/src/Tooltip.test.tsx @@ -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 Trigger + + + Tooltip Content + + + + + + ); + + expect(screen.getByText('Tooltip Trigger')).toBeInTheDocument(); + expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument(); + }); + + it('renders tooltip content when trigger is hovered', async () => { + render( + + + Tooltip Trigger + + + Tooltip Content + + + + + + ); + + 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 Trigger + + + Tooltip Content + + + + + + ); + + 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(); + }); + }); +});