diff --git a/packages/circuit-ui/components/Popover/Popover.spec.tsx b/packages/circuit-ui/components/Popover/Popover.spec.tsx index b50ef88be7..9bfc4f93ac 100644 --- a/packages/circuit-ui/components/Popover/Popover.spec.tsx +++ b/packages/circuit-ui/components/Popover/Popover.spec.tsx @@ -15,7 +15,8 @@ /* eslint-disable react/display-name */ -import { Delete, Add, Download } from '@sumup/icons'; +import { FC } from 'react'; +import { Delete, Add, Download, IconProps } from '@sumup/icons'; import { Placement } from '@popperjs/core'; import * as Collector from '@sumup/collector'; @@ -41,7 +42,10 @@ describe('PopoverItem', () => { return renderFn(); } - const baseProps = { children: 'PopoverItem' }; + const baseProps = { + children: 'PopoverItem', + icon: Download as FC, + }; describe('styles', () => { it('should render as Link when an href (and onClick) is passed', () => { @@ -49,7 +53,6 @@ describe('PopoverItem', () => { ...baseProps, href: 'https://sumup.com', onClick: jest.fn(), - icon: Download, }; const { container } = renderPopoverItem(render, props); const anchorEl = container.querySelector('a'); @@ -57,7 +60,7 @@ describe('PopoverItem', () => { }); it('should render as a `button` when an onClick is passed', () => { - const props = { ...baseProps, onClick: jest.fn(), icon: Download }; + const props = { ...baseProps, onClick: jest.fn() }; const { container } = renderPopoverItem(render, props); const buttonEl = container.querySelector('button'); expect(buttonEl).toBeVisible(); @@ -65,19 +68,18 @@ describe('PopoverItem', () => { }); describe('business logic', () => { - it('should call onClick when rendered as Link', () => { + it('should call onClick when rendered as Link', async () => { const props = { ...baseProps, href: 'https://sumup.com', onClick: jest.fn((event: ClickEvent) => { event.preventDefault(); }), - icon: Download, }; const { container } = renderPopoverItem(render, props); const anchorEl = container.querySelector('a'); if (anchorEl) { - userEvent.click(anchorEl); + await userEvent.click(anchorEl); } expect(props.onClick).toHaveBeenCalledTimes(1); }); @@ -109,13 +111,13 @@ describe('Popover', () => { { onClick: jest.fn(), children: 'Add', - icon: Add, + icon: Add as FC, }, { type: 'divider' }, { onClick: jest.fn(), children: 'Remove', - icon: Delete, + icon: Delete as FC, destructive: true, }, ], @@ -125,6 +127,10 @@ describe('Popover', () => { }; describe('styles', () => { + /** + * FIXME: some of these tests, including style snapshots, throw act() + * warnings. We should look into it. + */ it('should render with default styles', () => { const { baseElement } = renderPopover(baseProps); expect(baseElement).toMatchSnapshot(); @@ -143,109 +149,95 @@ describe('Popover', () => { }); describe('business logic', () => { - it('should open the popover when clicking the trigger element', () => { + it('should open the popover when clicking the trigger element', async () => { const isOpen = false; const onToggle = jest.fn(createStateSetter(isOpen)); const { getByRole } = renderPopover({ ...baseProps, isOpen, onToggle }); const popoverTrigger = getByRole('button'); - act(() => { - userEvent.click(popoverTrigger); - }); + await userEvent.click(popoverTrigger); expect(onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }); it.each([ - ['space', '{space}'], - ['enter', '{enter}'], - ['arrow down', '{arrowDown}'], - ['arrow up', '{arrowUp}'], + ['space', '{ }'], + ['enter', '{Enter}'], + ['arrow down', '{ArrowDown}'], + ['arrow up', '{ArrowUp}'], ])( 'should open the popover when pressing the %s key on the trigger element', - (_, key) => { + async (_, key) => { const isOpen = false; const onToggle = jest.fn(createStateSetter(isOpen)); const { getByRole } = renderPopover({ ...baseProps, isOpen, onToggle }); const popoverTrigger = getByRole('button'); - act(() => { - popoverTrigger.focus(); - userEvent.keyboard(key); - }); + popoverTrigger.focus(); + await userEvent.keyboard(key); expect(onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }, ); - it('should close the popover when clicking outside', () => { + it('should close the popover when clicking outside', async () => { renderPopover(baseProps); - act(() => { - userEvent.click(document.body); - }); + await userEvent.click(document.body); expect(baseProps.onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }); - it('should close the popover when clicking the trigger element', () => { + it('should close the popover when clicking the trigger element', async () => { const { getByRole } = renderPopover(baseProps); const popoverTrigger = getByRole('button'); - act(() => { - userEvent.click(popoverTrigger); - }); + await userEvent.click(popoverTrigger); expect(baseProps.onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }); it.each([ - ['space', '{space}'], - ['enter', '{enter}'], - ['arrow up', '{arrowUp}'], + ['space', '{ }'], + ['enter', '{Enter}'], + ['arrow up', '{ArrowUp}'], ])( 'should close the popover when pressing the %s key on the trigger element', - (_, key) => { + async (_, key) => { const { getByRole } = renderPopover(baseProps); const popoverTrigger = getByRole('button'); - act(() => { - popoverTrigger.focus(); - userEvent.keyboard(key); - }); + popoverTrigger.focus(); + await userEvent.keyboard(key); expect(baseProps.onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }, ); - it('should close the popover when clicking the escape key', () => { + it('should close the popover when clicking the escape key', async () => { renderPopover(baseProps); - act(() => { - userEvent.keyboard('{escape}'); - }); + await userEvent.keyboard('{Escape}'); expect(baseProps.onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); }); - it('should close the popover when clicking a popover item', () => { + it('should close the popover when clicking a popover item', async () => { const { getAllByRole } = renderPopover(baseProps); const popoverItems = getAllByRole('menuitem'); - act(() => { - userEvent.click(popoverItems[0]); - }); + await userEvent.click(popoverItems[0]); expect(baseProps.onToggle).toHaveBeenCalledTimes(1); expect(dispatch).toHaveBeenCalledTimes(1); diff --git a/packages/circuit-ui/jest.setup.js b/packages/circuit-ui/jest.setup.js index 4471d2296f..d3da0aa4df 100644 --- a/packages/circuit-ui/jest.setup.js +++ b/packages/circuit-ui/jest.setup.js @@ -35,18 +35,6 @@ global.render = render; global.renderToHtml = renderToHtml; global.create = create; -// react-popper relies on document.createRange -if (global.document) { - document.createRange = () => ({ - setStart: () => {}, - setEnd: () => {}, - commonAncestorContainer: { - nodeName: 'BODY', - ownerDocument: document, - }, - }); -} - // Add custom matchers expect.extend(toHaveNoViolations);