fix: CheTooltip component

Signed-off-by: Oleksii Kurinnyi <[email protected]>

packages/dashboard-frontend/jest.config.js

@@ -34,7 +34,7 @@ module.exports = {
       },
     ],
   },
-  setupFilesAfterEnv: ['./jest.setup.ts'],
+  setupFilesAfterEnv: ['./jest.setup.tsx'],
   setupFiles: ['./src/inversify.config.ts'],
   collectCoverageFrom: [
     ...base.collectCoverageFrom,

packages/dashboard-frontend/jest.setup.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2018-2023 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import '@testing-library/jest-dom';
+
+import React from 'react';
+
+jest.mock('@patternfly/react-core', () => {
+  return {
+    ...jest.requireActual('@patternfly/react-core'),
+    // mock the Tooltip component from @patternfly/react-core
+    Tooltip: jest.fn(props => {
+      const { content, children, ...rest } = props;
+      return (
+        <div data-testid="patternfly-tooltip">
+          <span data-testid="tooltip-props">{JSON.stringify(rest)}</span>
+          <div data-testid="tooltip-content">{content}</div>
+          <div data-testid="tooltip-placed-to">{children}</div>
+        </div>
+      );
+    }),
+  };
+});
+
+jest.mock('@/components/CheTooltip', () => {
+  return {
+    CheTooltip: jest.fn(props => {
+      return React.createElement('div', null, props.children, props.content);
+    }),
+  };
+});

packages/dashboard-frontend/src/components/CheTooltip/__tests__/CheTooltip.spec.tsx

@@ -10,27 +10,60 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
+import { TooltipPosition } from '@patternfly/react-core';
 import React from 'react';
-import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
 
-import CheTooltip from '@/components/CheTooltip';
+import { CheTooltip, Props } from '@/components/CheTooltip';
+import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
+
+// use actual CheTooltip component
+jest.unmock('@/components/CheTooltip');
+
+const { createSnapshot, renderComponent } = getComponentRenderer(getComponent);
 
 describe('CheTooltip component', () => {
-  it('should render CheTooltip component correctly', () => {
-    const content = <span>Tooltip text.</span>;
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-    const component = (
-      <CheTooltip content={content}>
-        <>some text</>
-      </CheTooltip>
+  test('snapshot', () => {
+    const props = {
+      content: <span>Tooltip text.</span>,
+    };
+
+    const snapshot = createSnapshot(props);
+
+    expect(snapshot.toJSON()).toMatchSnapshot();
+  });
+
+  test('passed props', () => {
+    const props: Props = {
+      position: TooltipPosition.right,
+      exitDelay: 500,
+      content: <span>Tooltip text.</span>,
+    };
+
+    renderComponent(props);
+
+    const tooltipProps = screen.getByTestId('tooltip-props');
+    expect(tooltipProps).toHaveTextContent(
+      '{"isContentLeftAligned":true,"style":{"border":"1px solid","borderRadius":"3px","opacity":"0.9"},"position":"right","exitDelay":500}',
     );
 
-    expect(getComponentSnapshot(component)).toMatchSnapshot();
+    const tooltipContent = screen.getByTestId('tooltip-content');
+    expect(tooltipContent).toHaveTextContent('Tooltip text.');
+
+    const tooltipPlacedTo = screen.getByTestId('tooltip-placed-to');
+    expect(tooltipPlacedTo).toHaveTextContent('some text');
+
+    screen.debug();
   });
 });
 
-function getComponentSnapshot(
-  component: React.ReactElement,
-): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
-  return renderer.create(component).toJSON();
+function getComponent(props: Props): React.ReactElement {
+  return (
+    <CheTooltip {...props}>
+      <div>some text</div>
+    </CheTooltip>
+  );
 }

packages/dashboard-frontend/src/components/CheTooltip/__tests__/__snapshots__/CheTooltip.spec.tsx.snap

@@ -1,10 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CheTooltip component should render CheTooltip component correctly 1`] = `
-<div>
-  some text
-  <span>
-    Tooltip text.
+exports[`CheTooltip component snapshot 1`] = `
+<div
+  data-testid="patternfly-tooltip"
+>
+  <span
+    data-testid="tooltip-props"
+  >
+    {"isContentLeftAligned":true,"style":{"border":"1px solid","borderRadius":"3px","opacity":"0.9"}}
   </span>
+  <div
+    data-testid="tooltip-content"
+  >
+    <span>
+      Tooltip text.
+    </span>
+  </div>
+  <div
+    data-testid="tooltip-placed-to"
+  >
+    <div>
+      some text
+    </div>
+  </div>
 </div>
 `;

packages/dashboard-frontend/src/components/CheTooltip/index.tsx

@@ -10,31 +10,19 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { Tooltip, TooltipProps } from '@patternfly/react-core';
 import React from 'react';
 
-type Props = {
-  children: React.ReactElement;
-  content: React.ReactNode;
-  position?: TooltipPosition;
-};
+export type Props = Omit<TooltipProps, 'ref'>;
 
-class CheTooltip extends React.PureComponent<Props> {
+export class CheTooltip extends React.PureComponent<Props> {
   public render(): React.ReactElement {
-    const { content, position, children } = this.props;
-
     return (
       <Tooltip
-        exitDelay={3000}
         isContentLeftAligned={true}
-        position={position ? position : TooltipPosition.right}
-        content={content}
         style={{ border: '1px solid', borderRadius: '3px', opacity: '0.9' }}
-      >
-        {children}
-      </Tooltip>
+        {...this.props}
+      />
     );
   }
 }
-
-export default CheTooltip;

packages/dashboard-frontend/src/components/WorkspaceEvents/Item/__tests__/__snapshots__/index.spec.tsx.snap

@@ -30,11 +30,29 @@ exports[`WorkspaceEventsItem component snapshot 1`] = `
             <span
               data-testid="event-involved-object"
             >
-              <span
-                className="icon"
+              <div
+                data-testid="patternfly-tooltip"
               >
-                P
-              </span>
+                <span
+                  data-testid="tooltip-props"
+                >
+                  {"aria":"none","aria-live":"polite"}
+                </span>
+                <div
+                  data-testid="tooltip-content"
+                >
+                  Pod
+                </div>
+                <div
+                  data-testid="tooltip-placed-to"
+                >
+                  <span
+                    className="icon"
+                  >
+                    P
+                  </span>
+                </div>
+              </div>
               pod-name
             </span>
             <div>

packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/__tests__/GetStartedTab.spec.tsx

@@ -56,7 +56,7 @@ jest.mock('../SamplesListGallery', () => {
 
 describe('Samples list tab', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   const renderComponent = (preferredStorageType: che.WorkspaceStorageType): RenderResult => {

packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderIcon/index.tsx

@@ -11,7 +11,6 @@
  */
 
 import { api } from '@eclipse-che/common';
-import { TooltipPosition } from '@patternfly/react-core';
 import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
@@ -20,7 +19,7 @@ import {
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import CheTooltip from '@/components/CheTooltip';
+import { CheTooltip } from '@/components/CheTooltip';
 import { AppState } from '@/store';
 import * as GitOauthConfig from '@/store/GitOauthConfig';
 import {
@@ -78,29 +77,20 @@ export class ProviderIcon extends React.PureComponent<Props, State> {
     const { hasOauthToken, isSkipOauth } = this.state;
     if (hasOauthToken) {
       return (
-        <CheTooltip
-          content={<span>User has been authorized successfully.</span>}
-          position={TooltipPosition.top}
-        >
+        <CheTooltip content={<span>User has been authorized successfully.</span>}>
           <CheckCircleIcon color="var(--pf-global--success-color--100)" />
         </CheTooltip>
       );
     } else if (isSkipOauth) {
       return (
-        <CheTooltip
-          content={<span>Authorization has been rejected by user.</span>}
-          position={TooltipPosition.top}
-        >
+        <CheTooltip content={<span>Authorization has been rejected by user.</span>}>
           <ExclamationTriangleIcon color="var(--pf-global--warning-color--100)" />
         </CheTooltip>
       );
     }
 
     return (
-      <CheTooltip
-        content={<span>User has not been authorized yet.</span>}
-        position={TooltipPosition.top}
-      >
+      <CheTooltip content={<span>User has not been authorized yet.</span>}>
         <ResourcesEmptyIcon color="var(--pf-global--disabled-color--100)" />
       </CheTooltip>
     );

packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderWarning/index.tsx

@@ -13,7 +13,7 @@
 import { WarningTriangleIcon } from '@patternfly/react-icons';
 import React from 'react';
 
-import CheTooltip from '@/components/CheTooltip';
+import { CheTooltip } from '@/components/CheTooltip';
 
 type Props = {
   serverURI: string;