|
| 1 | +import { render, screen } from '@testing-library/react'; |
1 | 2 | import * as React from 'react'; |
2 | | -import { cleanup, fireEvent, render, screen } from '@testing-library/react'; |
3 | 3 | import { TooltipComponent } from '../tooltip-component'; |
4 | 4 |
|
5 | | -const model = { |
6 | | - id: '123', |
7 | | - range: { start: 1, end: 10 }, |
8 | | - label: 'model' |
9 | | -}; |
10 | | -const tooltip = new TooltipComponent(10); |
11 | | -tooltip.setState = jest.fn(); |
12 | | - |
13 | | -describe('Tooltip component', () => { |
14 | | - let axisComponent: any; |
15 | | - const ref = (el: TooltipComponent | undefined | null): void => { |
16 | | - axisComponent = el; |
| 5 | +// Mock ReactTooltip since we don't need its actual implementation for these tests |
| 6 | +jest.mock('react-tooltip', () => { |
| 7 | + return function MockReactTooltip(props: any) { |
| 8 | + return ( |
| 9 | + <div |
| 10 | + data-testid="mock-tooltip" |
| 11 | + id={props.id} |
| 12 | + className="__react_component_tooltip" |
| 13 | + data-type={props.type} |
| 14 | + data-effect={props.effect} |
| 15 | + data-place={props.place} |
| 16 | + data-clickable={props.clickable} |
| 17 | + data-scroll-hide={props.scrollHide} |
| 18 | + > |
| 19 | + {props.children} |
| 20 | + </div> |
| 21 | + ); |
17 | 22 | }; |
| 23 | +}); |
18 | 24 |
|
19 | | - beforeEach(() => { |
20 | | - axisComponent = null; |
| 25 | +describe('TooltipComponent', () => { |
| 26 | + it('renders itself', () => { |
| 27 | + const { container } = render(<TooltipComponent visible={true} />); |
| 28 | + expect(screen.getByTestId('mock-tooltip')).toBeTruthy(); |
21 | 29 | }); |
22 | 30 |
|
23 | | - afterEach(() => { |
24 | | - cleanup(); |
25 | | - jest.clearAllMocks(); |
| 31 | + it('renders an hourglass when visible with no content', () => { |
| 32 | + const { container } = render(<TooltipComponent visible={true} />); |
| 33 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 34 | + expect(tooltip.textContent).toBe('⏳'); |
26 | 35 | }); |
27 | 36 |
|
28 | | - /* |
29 | | - * Skip due to issues with TooltipComponent: |
30 | | - * |
31 | | - * react-tooltip v4.2.14 works in the application but causes an exception |
32 | | - * in tests (https://github.com/ReactTooltip/react-tooltip/issues/681), |
33 | | - * which is fixed in v4.2.17. However, version v4.2.17 breaks the tooltip |
34 | | - * when running in the application. |
35 | | - */ |
36 | | - it.skip('renders itself', () => { |
37 | | - render(<TooltipComponent />); |
38 | | - expect(axisComponent).toBeTruthy(); |
39 | | - expect(axisComponent instanceof TooltipComponent).toBe(true); |
| 37 | + it('renders the provided content if visible with content', () => { |
| 38 | + const testContent = <div>Test Content</div>; |
| 39 | + const { container } = render(<TooltipComponent visible={true} content={testContent} />); |
| 40 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 41 | + expect(tooltip.textContent).toBe('Test Content'); |
40 | 42 | }); |
41 | 43 |
|
42 | | - // Skip due to issues with TooltipComponent (see above for details) |
43 | | - it.skip('resets timer on mouse enter', () => { |
44 | | - tooltip.state = { |
45 | | - element: model, |
46 | | - func: undefined, |
47 | | - content: 'Test' |
48 | | - }; |
49 | | - render(<TooltipComponent />); |
50 | | - const component = screen.getByRole('tooltip-component-role'); |
51 | | - fireEvent.mouseEnter(component); |
52 | | - fireEvent.mouseLeave(component); |
| 44 | + it('does not render when not visible', () => { |
| 45 | + const { container } = render(<TooltipComponent visible={false} content="Test Content" />); |
| 46 | + const tooltip = screen.queryByTestId('mock-tooltip'); |
| 47 | + expect(tooltip).toBeNull(); |
| 48 | + }); |
53 | 49 |
|
54 | | - expect(tooltip.setState).toBeCalledWith({ content: undefined }); |
| 50 | + it('has the correct tooltip ID', () => { |
| 51 | + const { container } = render(<TooltipComponent visible={true} />); |
| 52 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 53 | + expect(tooltip.id).toBe('tooltip-component'); |
55 | 54 | }); |
56 | 55 |
|
57 | | - it('displays a tooltip for a time graph state component', () => { |
58 | | - tooltip.state = { |
59 | | - element: undefined, |
60 | | - func: undefined, |
61 | | - content: undefined |
62 | | - }; |
63 | | - tooltip.setElement(model); |
| 56 | + it('applies correct tooltip configuration', () => { |
| 57 | + const { container } = render(<TooltipComponent visible={true} />); |
| 58 | + const tooltip = screen.getByTestId('mock-tooltip'); |
64 | 59 |
|
65 | | - expect(tooltip.setState).toBeCalledWith({ element: model, func: undefined }); |
| 60 | + expect(tooltip.getAttribute('data-type')).toBe('info'); |
| 61 | + expect(tooltip.getAttribute('data-effect')).toBe('float'); |
| 62 | + expect(tooltip.getAttribute('data-place')).toBe('bottom'); |
| 63 | + expect(tooltip.getAttribute('data-clickable')).toBe('true'); |
| 64 | + expect(tooltip.getAttribute('data-scroll-hide')).toBe('true'); |
66 | 65 | }); |
67 | 66 |
|
68 | | - it('hides tooltip if mouse is not hovering over element', async () => { |
69 | | - tooltip.state = { |
70 | | - element: model, |
71 | | - func: undefined, |
72 | | - content: 'Test' |
73 | | - }; |
74 | | - tooltip.setElement(undefined); |
75 | | - await new Promise(r => setTimeout(r, 500)); |
76 | | - |
77 | | - expect(tooltip.setState).toBeCalledWith({ content: undefined }); |
| 67 | + it('renders complex React nodes as content', () => { |
| 68 | + const complexContent = ( |
| 69 | + <div> |
| 70 | + <h1>Title</h1> |
| 71 | + <p>Description</p> |
| 72 | + <span>Details</span> |
| 73 | + </div> |
| 74 | + ); |
| 75 | + const { container } = render(<TooltipComponent visible={true} content={complexContent} />); |
| 76 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 77 | + expect(tooltip.textContent).toBe('TitleDescriptionDetails'); |
78 | 78 | }); |
79 | 79 |
|
80 | | - it('hide tooltip because there is no content', () => { |
81 | | - tooltip.state = { |
82 | | - element: model, |
83 | | - func: undefined, |
84 | | - content: undefined |
85 | | - }; |
86 | | - tooltip.setElement(undefined); |
| 80 | + it('renders null content as hourglass', () => { |
| 81 | + const { container } = render(<TooltipComponent visible={true} content={null} />); |
| 82 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 83 | + expect(tooltip.textContent).toBe('⏳'); |
| 84 | + }); |
87 | 85 |
|
88 | | - expect(tooltip.setState).toBeCalledWith({ content: undefined }); |
| 86 | + it('renders undefined content as hourglass', () => { |
| 87 | + const { container } = render(<TooltipComponent visible={true} content={undefined} />); |
| 88 | + const tooltip = screen.getByTestId('mock-tooltip'); |
| 89 | + expect(tooltip.textContent).toBe('⏳'); |
89 | 90 | }); |
90 | 91 | }); |
0 commit comments