From 9698590ab016372ab5e2e886fd8aa3c4f0cb9849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Lenoir?= Date: Wed, 18 Dec 2024 14:11:38 +0100 Subject: [PATCH 1/4] chore: update tooltip default delay --- packages/components/tooltip/src/Tooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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', From cd8f89415b6ede054bf5c077a31e432a6e402b57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Lenoir?= Date: Wed, 18 Dec 2024 15:03:28 +0100 Subject: [PATCH 2/4] test(Tooltip): accommodate default delay --- .../components/tooltip/src/Tooltip.test.tsx | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) 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', + ); + }); }); }); From 370a5e1b870fb833ee45d724fc3ffa49c6f9a8e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Lenoir?= Date: Wed, 18 Dec 2024 15:04:53 +0100 Subject: [PATCH 3/4] test(AvatarGroup): accommodate default tooltip delay --- .../components/avatar/src/AvatarGroup/AvatarGroup.test.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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 () => { From 181c09826e584a0a00f5398477853e153f485ed8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Lenoir?= Date: Wed, 18 Dec 2024 15:09:49 +0100 Subject: [PATCH 4/4] test(Avatar): accommodate default tooltip delay + add icon test-id --- .../components/avatar/src/Avatar/Avatar.test.tsx | 12 +++++++++--- packages/components/avatar/src/Avatar/Avatar.tsx | 6 +++++- 2 files changed, 14 insertions(+), 4 deletions(-) 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} + + )} );