diff --git a/packages/components/avatar/src/Avatar/Avatar.test.tsx b/packages/components/avatar/src/Avatar/Avatar.test.tsx index 961c1ff99f..5932129e36 100644 --- a/packages/components/avatar/src/Avatar/Avatar.test.tsx +++ b/packages/components/avatar/src/Avatar/Avatar.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import { CheckCircleIcon } from '@contentful/f36-icons'; import userEvent from '@testing-library/user-event'; import { Avatar } from './Avatar'; @@ -26,6 +26,8 @@ describe('Avatar', () => { it('renders an icon when it is provided', () => { const src = 'https://example.com/image.jpg'; render(} />); + + expect(screen.queryByTestId('cf-ui-avatar-icon')).toBeInTheDocument(); }); it('renders no tooltip when no props are provided', async () => { @@ -33,7 +35,9 @@ describe('Avatar', () => { render(); await user.hover(screen.getByTestId('cf-ui-avatar-fallback')); - expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument(); + await waitFor(() => + expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument(), + ); }); it('renders with tooltip when props are provided', async () => { @@ -41,6 +45,8 @@ describe('Avatar', () => { render(); await user.hover(screen.getByTestId('cf-ui-avatar-fallback')); - expect(screen.getByRole('tooltip').textContent).toBe('some content'); + await waitFor(() => + expect(screen.getByRole('tooltip').textContent).toBe('some content'), + ); }); }); diff --git a/packages/components/avatar/src/Avatar/Avatar.tsx b/packages/components/avatar/src/Avatar/Avatar.tsx index 0ff43e2126..95cf2fd943 100644 --- a/packages/components/avatar/src/Avatar/Avatar.tsx +++ b/packages/components/avatar/src/Avatar/Avatar.tsx @@ -87,7 +87,11 @@ function _Avatar( width="100%" /> )} - {!!icon && {icon}} + {!!icon && ( + + {icon} + + )} ); diff --git a/packages/components/avatar/src/AvatarGroup/AvatarGroup.test.tsx b/packages/components/avatar/src/AvatarGroup/AvatarGroup.test.tsx index ac4b40074e..25fdb46655 100644 --- a/packages/components/avatar/src/AvatarGroup/AvatarGroup.test.tsx +++ b/packages/components/avatar/src/AvatarGroup/AvatarGroup.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import UserEvent from '@testing-library/user-event/'; import { Avatar } from '../Avatar'; import { AvatarGroup } from './AvatarGroup'; @@ -87,7 +87,10 @@ describe('AvatarGroup', () => { // Renders the tooltip for the presented avatars await user.hover(screen.getAllByTestId('cf-ui-avatar')[0]); - expect(screen.getByRole('tooltip').textContent).toBe('Marge Simpson'); + + await waitFor(() => + expect(screen.getByRole('tooltip').textContent).toBe('Marge Simpson'), + ); }); it('renders the avatars with tooltip in dropdown', async () => { diff --git a/packages/components/tooltip/src/Tooltip.test.tsx b/packages/components/tooltip/src/Tooltip.test.tsx index 7b3b1b89ff..17ab56e5f4 100644 --- a/packages/components/tooltip/src/Tooltip.test.tsx +++ b/packages/components/tooltip/src/Tooltip.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { axe } from '@/scripts/test/axeHelper'; @@ -36,7 +36,9 @@ describe('Tooltip', () => { await user.hover(screen.getByText('Hover me')); - expect(screen.getByRole('tooltip').textContent).toBe('Tooltip content'); + await waitFor(() => + expect(screen.getByRole('tooltip').textContent).toBe('Tooltip content'), + ); }); it('renders the component with an additional class name', async () => { @@ -49,7 +51,9 @@ describe('Tooltip', () => { await user.hover(screen.getByText('Hover me')); - expect(screen.getByRole('tooltip')).toHaveClass('extra-class-name'); + await waitFor(() => + expect(screen.getByRole('tooltip')).toHaveClass('extra-class-name'), + ); }); it('renders the component with a target wrapper classname', async () => { @@ -80,9 +84,11 @@ describe('Tooltip', () => { await user.hover(screen.getByText('Hover me')); - expect( - screen.getByRole('tooltip').getAttribute('data-popper-placement'), - ).toBe('left'); + await waitFor(() => + expect( + screen.getByRole('tooltip').getAttribute('data-popper-placement'), + ).toBe('left'), + ); }); it('renders the component with a id attribute', async () => { @@ -95,7 +101,9 @@ describe('Tooltip', () => { await user.hover(screen.getByText('Hover me')); - expect(screen.getByRole('tooltip').getAttribute('id')).toBe('Tooltip'); + await waitFor(() => + expect(screen.getByRole('tooltip').getAttribute('id')).toBe('Tooltip'), + ); }); it('renders the component as span with a id attribute', async () => { @@ -108,9 +116,11 @@ describe('Tooltip', () => { await user.hover(screen.getByText('Hover me')); - const tooltip = screen.getByRole('tooltip'); - expect(tooltip.getAttribute('id')).toBe('Tooltip'); - expect(tooltip.nodeName).toMatch(/span/i); + await waitFor(() => { + const tooltip = screen.getByRole('tooltip'); + expect(tooltip.getAttribute('id')).toBe('Tooltip'); + expect(tooltip.nodeName).toMatch(/span/i); + }); }); it('has no a11y issues', async () => { @@ -144,9 +154,11 @@ describe('Tooltip', () => { const results = await axe(container); - expect(results).toHaveNoViolations(); - expect(screen.getByRole('tooltip').textContent).toBe( - 'Ich bin ein Paragraph', - ); + await waitFor(() => { + expect(results).toHaveNoViolations(); + expect(screen.getByRole('tooltip').textContent).toBe( + 'Ich bin ein Paragraph', + ); + }); }); }); diff --git a/packages/components/tooltip/src/Tooltip.tsx b/packages/components/tooltip/src/Tooltip.tsx index d50de787ad..f73bde6adc 100644 --- a/packages/components/tooltip/src/Tooltip.tsx +++ b/packages/components/tooltip/src/Tooltip.tsx @@ -25,7 +25,7 @@ export type WithEnhancedContent = { */ content?: ReactElement | string; /** - * Accesible label property, only required when using ReactElement as content + * Accessible label property, only required when using ReactElement as content */ label?: string; }; @@ -123,7 +123,7 @@ export const Tooltip = ({ onMouseLeave, onMouseOver, onKeyDown, - showDelay = 0, + showDelay = 375, targetWrapperClassName, maxWidth = 360, testId = 'cf-ui-tooltip',