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',