From 78653efb940ff4c67831957754a5b3dbeedd419d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 16 Nov 2023 17:47:34 -0800 Subject: [PATCH] Fix collapsed popovers not displaying descriptions as tooltips + silence `act()` errors caused by the fact that we load multiple versions of testing-library/DOM (tests still pass otherwise) --- scripts/jest/setup/throw_on_console_error.js | 11 ++++ .../collapsed_item_actions.test.tsx.snap | 52 +++++++++++-------- .../collapsed_item_actions.test.tsx | 10 ++-- .../basic_table/collapsed_item_actions.tsx | 2 + 4 files changed, 51 insertions(+), 24 deletions(-) diff --git a/scripts/jest/setup/throw_on_console_error.js b/scripts/jest/setup/throw_on_console_error.js index a0829e622c37..b0c208cd5b87 100644 --- a/scripts/jest/setup/throw_on_console_error.js +++ b/scripts/jest/setup/throw_on_console_error.js @@ -26,6 +26,17 @@ console.error = (message, ...rest) => { return; } + // Silence RTL act() errors, that appear to primarily come from the fact + // that we have multiple versions of `@testing-library/dom` installed + if ( + typeof message === 'string' && + message.startsWith( + 'Warning: The current testing environment is not configured to support act(...)' + ) + ) { + return; + } + // Print React validateDOMNesting warning as a console.warn instead // of throwing an error. // TODO: Remove when edge-case DOM nesting is fixed in all components diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index 06814083b1e6..5b6e87d26200 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CollapsedItemActions custom actions 1`] = ` - +
- - + default1 + + + + - - name xyz - - + + name xyz + + +
diff --git a/src/components/basic_table/collapsed_item_actions.test.tsx b/src/components/basic_table/collapsed_item_actions.test.tsx index 4055595c38a4..8d76caf5871e 100644 --- a/src/components/basic_table/collapsed_item_actions.test.tsx +++ b/src/components/basic_table/collapsed_item_actions.test.tsx @@ -12,6 +12,7 @@ import { render, waitForEuiPopoverOpen, waitForEuiPopoverClose, + waitForEuiToolTipVisible, } from '../../test/rtl'; import { CollapsedItemActions } from './collapsed_item_actions'; @@ -65,7 +66,7 @@ describe('CollapsedItemActions', () => { actionEnabled: () => true, }; - const { getByTestSubject, baseElement } = render( + const { getByTestSubject, getByText, baseElement } = render( ); fireEvent.click(getByTestSubject('euiCollapsedItemActionsButton')); @@ -73,8 +74,11 @@ describe('CollapsedItemActions', () => { expect(baseElement).toMatchSnapshot(); - expect(getByTestSubject('link-xyz')).toHaveAttribute('href', '#/xyz'); - expect(getByTestSubject('link-xyz')).toHaveTextContent('name xyz'); + expect(getByTestSubject('xyz-link')).toHaveAttribute('href', '#/xyz'); + expect(getByTestSubject('xyz-link')).toHaveTextContent('name xyz'); + fireEvent.mouseEnter(getByTestSubject('xyz-link')); + await waitForEuiToolTipVisible(); + expect(getByText('description xyz')).toBeInTheDocument(); fireEvent.click(getByTestSubject('defaultAction')); await waitForEuiPopoverClose(); diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 639e0c3d497d..8a81efd4d91f 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -82,6 +82,7 @@ export const CollapsedItemActions = ({ } const buttonContent = callWithItemIfFunction(item)(action.name); + const toolTipContent = callWithItemIfFunction(item)(action.description); const href = callWithItemIfFunction(item)(action.href); const dataTestSubj = callWithItemIfFunction(item)( action['data-test-subj'] @@ -101,6 +102,7 @@ export const CollapsedItemActions = ({ onClick={() => onClickItem(onClick ? () => onClick(item) : undefined) } + toolTipContent={toolTipContent} > {buttonContent}