Skip to content

Commit f2022b5

Browse files
author
Eric Olkowski
committed
Updated mock and tests
1 parent 453029e commit f2022b5

File tree

5 files changed

+147
-32
lines changed

5 files changed

+147
-32
lines changed

‎packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ test('renders dropdown', () => {
2222
});
2323

2424
test('passes children', () => {
25-
render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
25+
render(
26+
<Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
27+
{dropdownChildren}
28+
</Dropdown>
29+
);
2630

2731
expect(screen.getByText('Dropdown children')).toBeVisible();
2832
});
@@ -134,7 +138,7 @@ test('passes onSelect callback', async () => {
134138

135139
const onSelect = jest.fn();
136140
render(
137-
<Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
141+
<Dropdown isOpen onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
138142
{dropdownChildren}
139143
</Dropdown>
140144
);

‎packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
exports[`match snapshot 1`] = `
44
<DocumentFragment>
5-
<div>
5+
<div
6+
data-testid="popper"
7+
>
68
<div
79
class="customClass"
810
data-ouia-component-id="dropdown"
@@ -35,7 +37,27 @@ exports[`match snapshot 1`] = `
3537
<p>
3638
isOpen: true
3739
</p>
38-
<div>
40+
<p>
41+
enableFlip: undefined
42+
</p>
43+
<p>
44+
placement: undefined
45+
</p>
46+
<p>
47+
appendTo: undefined
48+
</p>
49+
<p>
50+
distance: undefined
51+
</p>
52+
<p>
53+
flipBehavior: undefined
54+
</p>
55+
<p>
56+
minWidth: undefined
57+
</p>
58+
<div
59+
data-testid="trigger"
60+
>
3961
<button>
4062
Dropdown
4163
</button>

‎packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx‎

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,118 @@
11
import React from 'react';
22
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
34
import { Tooltip } from '../Tooltip';
45

6+
jest.mock('../../../helpers/Popper/Popper');
7+
58
test('Does not render by default', () => {
69
render(<Tooltip content="Test content" />);
710

8-
expect(screen.queryByText('Test content')).not.toBeInTheDocument();
11+
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
912
});
1013

11-
// Need to pass isVisible and make test callbacks async in order to render tooltip
12-
13-
test('Renders with content', async () => {
14+
test('Renders when isVisible is true', async () => {
1415
render(<Tooltip isVisible content="Test content" />);
1516

16-
const tooltip = await screen.findByText('Test content');
17-
expect(tooltip.parentElement).toBeVisible();
17+
const tooltip = await screen.findByRole('tooltip');
18+
expect(tooltip).toBeVisible();
1819
});
1920

2021
test('Renders with class name pf-v5-c-tooltip by default', async () => {
2122
render(<Tooltip isVisible content="Test content" />);
2223

23-
const tooltip = await screen.findByText('Test content');
24-
expect(tooltip.parentElement).toHaveClass('pf-v5-c-tooltip');
24+
const tooltip = await screen.findByRole('tooltip');
25+
expect(tooltip).toHaveClass('pf-v5-c-tooltip');
2526
});
2627

2728
test('Renders with custom class names provided via prop', async () => {
2829
render(<Tooltip isVisible className="test-class" content="Test content" />);
2930

30-
const tooltip = await screen.findByText('Test content');
31-
expect(tooltip.parentElement).toHaveClass('test-class');
32-
});
33-
34-
test('Renders with role of tooltip', async () => {
35-
render(<Tooltip isVisible content="Test content" />);
36-
37-
const tooltip = await screen.findByText('Test content');
38-
expect(tooltip.parentElement).toHaveAttribute('role', 'tooltip');
31+
const tooltip = await screen.findByRole('tooltip');
32+
expect(tooltip).toHaveClass('test-class');
3933
});
4034

4135
test('Renders with aria-live of off by default when triggerRef is not passed', async () => {
4236
render(<Tooltip isVisible content="Test content" />);
4337

44-
const tooltip = await screen.findByText('Test content');
45-
expect(tooltip.parentElement).toHaveAttribute('aria-live', 'off');
38+
const tooltip = await screen.findByRole('tooltip');
39+
expect(tooltip).toHaveAttribute('aria-live', 'off');
4640
});
4741

4842
test('Renders with aria-live of polite by default when triggerRef is passed', async () => {
4943
const triggerRef = React.createRef();
5044
render(<Tooltip triggerRef={triggerRef} isVisible content="Test content" />);
5145

52-
const tooltip = await screen.findByText('Test content');
53-
expect(tooltip.parentElement).toHaveAttribute('aria-live', 'polite');
46+
const tooltip = await screen.findByRole('tooltip');
47+
expect(tooltip).toHaveAttribute('aria-live', 'polite');
5448
});
5549

5650
test('Renders with value passed to aria-live prop', async () => {
5751
render(<Tooltip aria-live="polite" isVisible content="Test content" />);
5852

59-
const tooltip = await screen.findByText('Test content');
60-
expect(tooltip.parentElement).toHaveAttribute('aria-live', 'polite');
53+
const tooltip = await screen.findByRole('tooltip');
54+
expect(tooltip).toHaveAttribute('aria-live', 'polite');
6155
});
6256

6357
test('Renders with value passed to id prop', async () => {
6458
render(<Tooltip id="custom-id" isVisible content="Test content" />);
6559

66-
const tooltip = await screen.findByText('Test content');
67-
expect(tooltip.parentElement).toHaveAttribute('id', 'custom-id');
60+
const tooltip = await screen.findByRole('tooltip');
61+
expect(tooltip).toHaveAttribute('id', 'custom-id');
62+
});
63+
64+
test('Passes zIndex to Popper', async () => {
65+
render(<Tooltip zIndex={10} content="Test content" />);
66+
67+
const contentPassedToPopper = await screen.findByText('zIndex: 10');
68+
expect(contentPassedToPopper).toBeVisible();
69+
});
70+
71+
test('Passes enableFlip to Popper', async () => {
72+
render(<Tooltip enableFlip content="Test content" />);
73+
74+
const contentPassedToPopper = await screen.findByText('enableFlip: true');
75+
expect(contentPassedToPopper).toBeVisible();
76+
});
77+
78+
test('Passes position as placement to Popper', async () => {
79+
render(<Tooltip position="left-start" content="Test content" />);
80+
81+
const contentPassedToPopper = await screen.findByText('placement: left-start');
82+
expect(contentPassedToPopper).toBeVisible();
83+
});
84+
85+
test('Passes appendTo to Popper', async () => {
86+
render(<Tooltip appendTo={() => document.body} content="Test content" />);
87+
88+
const contentPassedToPopper = await screen.findByText('appendTo: () => document.body');
89+
expect(contentPassedToPopper).toBeVisible();
90+
});
91+
92+
test('Passes distance to Popper', async () => {
93+
render(<Tooltip distance={5} content="Test content" />);
94+
95+
const contentPassedToPopper = await screen.findByText('distance: 5');
96+
expect(contentPassedToPopper).toBeVisible();
97+
});
98+
99+
test('Passes flipBehavior to Popper', async () => {
100+
render(<Tooltip flipBehavior="flip" content="Test content" />);
101+
102+
const contentPassedToPopper = await screen.findByText('flipBehavior: flip');
103+
expect(contentPassedToPopper).toBeVisible();
104+
});
105+
106+
test('Passes minWidth to Popper', async () => {
107+
render(<Tooltip minWidth="100px" content="Test content" />);
108+
109+
const contentPassedToPopper = await screen.findByText('minWidth: 100px');
110+
expect(contentPassedToPopper).toBeVisible();
111+
});
112+
113+
test('Matches snapshot', async () => {
114+
render(<Tooltip id="custom-id" isVisible content="Test content" />);
115+
116+
const tooltip = await screen.findByRole('tooltip');
117+
expect(tooltip).toMatchSnapshot();
68118
});

‎packages/react-core/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Matches snapshot 1`] = `
4+
<div
5+
aria-live="off"
6+
class="pf-v5-c-tooltip"
7+
id="custom-id"
8+
role="tooltip"
9+
style="opacity: 1;"
10+
>
11+
<div
12+
class="pf-v5-c-tooltip__arrow"
13+
/>
14+
<div
15+
class="pf-v5-c-tooltip__content"
16+
>
17+
Test content
18+
</div>
19+
</div>
20+
`;

‎packages/react-core/src/helpers/Popper/__mocks__/Popper.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
11
import React from 'react';
22
import { PopperProps } from '../Popper';
33

4-
export const Popper = ({ popper, zIndex, isVisible, trigger }: PopperProps) => (
4+
export const Popper = ({
5+
popper,
6+
zIndex,
7+
placement,
8+
trigger,
9+
enableFlip,
10+
appendTo,
11+
distance,
12+
flipBehavior,
13+
isVisible,
14+
minWidth
15+
}: PopperProps) => (
516
<>
6-
<div>{popper}</div>
17+
<div data-testid="popper">{isVisible && popper}</div>
718
<p>{`zIndex: ${zIndex}`}</p>
819
<p>{`isOpen: ${isVisible}`}</p>
9-
<div>{trigger}</div>
20+
<p>{`enableFlip: ${enableFlip}`}</p>
21+
<p>{`placement: ${placement}`}</p>
22+
<p>{`appendTo: ${appendTo}`}</p>
23+
<p>{`distance: ${distance}`}</p>
24+
<p>{`flipBehavior: ${flipBehavior}`}</p>
25+
<p>{`minWidth: ${minWidth}`}</p>
26+
<div data-testid="trigger">{trigger}</div>
1027
</>
1128
);
29+
30+
export const getOpacityTransition = () => {};

0 commit comments

Comments
 (0)