diff --git a/packages/react/src/components/Popover/index.test.tsx b/packages/react/src/components/Popover/index.test.tsx
index 77cc3ad61..2ed66bc4e 100644
--- a/packages/react/src/components/Popover/index.test.tsx
+++ b/packages/react/src/components/Popover/index.test.tsx
@@ -5,31 +5,12 @@ import axe from '../../axe';
import Popover from '../Popover';
import AriaIsolate from '../../utils/aria-isolate';
-let wrapperNode: HTMLDivElement | null;
-let mountNode: HTMLElement | null;
-beforeEach(() => {
- wrapperNode = document.createElement('div');
- wrapperNode.innerHTML = `
-
-
- `;
- document.body.appendChild(wrapperNode);
- mountNode = document.getElementById('mount');
-});
-
-afterEach(() => {
- document.body.innerHTML = '';
- wrapperNode = null;
- mountNode = null;
-});
-
-const Wrapper = ({
- buttonProps = {},
- tooltipProps = {}
-}: {
+interface PopoverProps {
buttonProps?: React.HTMLAttributes;
tooltipProps?: Omit>, 'variant'>;
-}) => {
+}
+
+const Wrapper = ({ buttonProps = {}, tooltipProps = {} }: PopoverProps) => {
const ref = useRef(null);
const onClose = jest.fn();
@@ -37,7 +18,7 @@ const Wrapper = ({
<>
Popover title
{
const ref = useRef(null);
const onClose = jest.fn();
+
return (
-
+ <>
{
-
+ >
);
};
const WrapperPrompt = ({
buttonProps = {},
tooltipProps = {}
-}: {
- buttonProps?: React.HTMLAttributes;
- tooltipProps?: Omit>, 'variant'>;
-}) => {
+}: PopoverProps) => {
const ref = useRef(null);
const onClose = jest.fn();
const onApply = jest.fn();
return (
-
+ <>
-
+ >
);
};
@@ -114,7 +93,7 @@ test('renders without blowing up', async () => {
test('should auto-generate id', async () => {
render();
const popover = screen.getByRole('dialog');
- const button = screen.getByText('button');
+ const button = screen.getByText('Popover button');
expect(popover).toBeTruthy();
const id = popover?.getAttribute('id');
expect(id).toBeTruthy();
@@ -126,7 +105,7 @@ test('should attach attribute aria-expanded correctly based on shown state', asy
expect(
screen.queryByRole('button', {
- name: 'button',
+ name: 'Popover button',
hidden: true,
expanded: true
})
@@ -134,7 +113,7 @@ test('should attach attribute aria-expanded correctly based on shown state', asy
rerender();
expect(
screen.queryByRole('button', {
- name: 'button',
+ name: 'Popover button',
hidden: false,
expanded: false
})
@@ -154,7 +133,7 @@ test('should not overwrite user provided id and aria-describedby', async () => {
const tooltipProps = { id: 'popoverid' };
render();
const popover = screen.getByRole('dialog');
- const button = screen.getByText('button');
+ const button = screen.getByText('Popover button');
expect(popover).toHaveAttribute('id', 'popoverid');
expect(button.getAttribute('aria-describedby')).toEqual('foo popoverid');
});
@@ -169,12 +148,8 @@ test('should call onClose on escape keypress', async () => {
test('should call onClose on clicking outside', async () => {
const onClose = jest.fn();
const user = userEvent.setup();
- render(, {
- container: mountNode as HTMLElement
- });
- const outsideButton = await screen.findByText(/Click Me!/i);
- expect(outsideButton).toBeTruthy();
- await user.click(outsideButton);
+ render();
+ await user.click(document.body);
await waitFor(() => expect(onClose).toBeCalled());
});
@@ -197,13 +172,23 @@ test('onClose should be called, when close button in prompt popover is clicked',
const handleClose = jest.fn();
render();
fireEvent.click(screen.getByText('Close'));
- await waitFor(() => expect(handleClose).toHaveBeenCalled());
+ await waitFor(() => expect(handleClose).toHaveBeenCalledTimes(1));
+});
+
+test('close opened popover when clicking on the popover trigger button', async () => {
+ const handleClose = jest.fn();
+ render();
+ const popoverTriggerButton = screen.getByText('Popover button');
+ const popoverContent = screen.getByText('Popover content');
+ fireEvent.click(popoverTriggerButton);
+ expect(popoverContent).not.toBeInTheDocument();
});
test('onApply should be called, when apply button in prompt popover is clicked', async () => {
const applyFunc = jest.fn();
+ const user = userEvent.setup();
render();
- fireEvent.click(screen.getByText('Apply'));
+ await user.click(screen.getByText('Apply'));
await waitFor(() => expect(applyFunc).toHaveBeenCalled());
});