chore(Tooltip): update default delay (#2965)

* chore: update tooltip default delay * test(Tooltip): accommodate default delay * test(AvatarGroup): accommodate default tooltip delay * test(Avatar): accommodate default tooltip delay + add icon test-id
contentful · Jan 8, 2025 · 5828ba2 · 5828ba2
1 parent ba911cf
commit 5828ba2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git 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,21 +26,27 @@ describe('Avatar', () => {
   it('renders an icon when it is provided', () => {
     const src = 'https://example.com/image.jpg';
     render(<Avatar src={src} icon={<CheckCircleIcon variant="positive" />} />);
+
+    expect(screen.queryByTestId('cf-ui-avatar-icon')).toBeInTheDocument();
   });
 
   it('renders no tooltip when no props are provided', async () => {
     const user = userEvent.setup();
     render(<Avatar />);
     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 () => {
     const user = userEvent.setup();
     render(<Avatar tooltipProps={{ content: 'some content' }} />);
     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
@@ -87,7 +87,11 @@ function _Avatar(
           width="100%"
         />
       )}
-      {!!icon && <span className={styles.overlayIcon}>{icon}</span>}
+      {!!icon && (
+        <span className={styles.overlayIcon} data-test-id={`${testId}-icon`}>
+          {icon}
+        </span>
+      )}
     </div>
   );
 

diff --git 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
@@ -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
@@ -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',