Updated integration tests

patternfly · Jul 6, 2023 · ba50001 · ba50001
1 parent 52f7c19
commit ba50001
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 14 deletions.
diff --git a/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx b/packages/react-core/src/components/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 
 jest.mock('../../../helpers/Popper/Popper');
@@ -89,6 +91,54 @@ test('Renders without aria-labelledby or aria-describedby on trigger when aria="
   expect(screen.getByRole('button')).not.toHaveAccessibleDescription('Test content');
 });
 
+test('Does not call onTooltipHidden when not passed', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
+      </Tooltip>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByRole('tooltip');
+  expect(onTooltipHiddenMock).not.toHaveBeenCalled();
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByText('isVisible: false');
+  expect(onTooltipHiddenMock).not.toHaveBeenCalled();
+});
+
+test('Calls onTooltipHidden when passed', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} onTooltipHidden={onTooltipHiddenMock} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
+      </Tooltip>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByRole('tooltip');
+  expect(onTooltipHiddenMock).not.toHaveBeenCalled();
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByText('isVisible: false');
+  expect(onTooltipHiddenMock).toHaveBeenCalled();
+});
+
 test('Does not pass isVisible to Popper by default', async () => {
   render(<Tooltip content="Test content" />);
 

diff --git a/packages/react-integration/cypress/integration/tooltip.spec.ts b/packages/react-integration/cypress/integration/tooltip.spec.ts
@@ -3,13 +3,87 @@ describe('Tooltip Demo Test', () => {
     cy.visit('http://localhost:3000/tooltip-demo-nav-link');
   });
 
-  it('Display Tooltip', () => {
-    ['tooltipTarget', 'tooltip-selector', 'tooltip-ref'].forEach((id) => {
-      cy.get(`[id="${id}"]`).then((tooltipLink: JQuery<HTMLDivElement>) => {
-        cy.get('.pf-v5-c-tooltip').should('not.exist');
-        cy.wrap(tooltipLink).trigger('mouseenter').get('.pf-v5-c-tooltip').should('exist');
+  const defaultEntryDelay = 300;
+  const defaultExitDelay = 300;
+
+  it('Renders Tooltip on hover by default', () => {
+    ['tooltip-children', 'tooltip-selector', 'tooltip-ref'].forEach((id) => {
+      cy.get(`[id="${id}-trigger"]`).then((tooltipTrigger: JQuery<HTMLButtonElement>) => {
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('not.exist');
+        cy.wrap(tooltipTrigger).trigger('mouseenter');
+        cy.wait(defaultEntryDelay);
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('exist');
+        cy.wrap(tooltipTrigger).trigger('mouseleave');
+        cy.wait(defaultExitDelay);
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('not.exist');
+      });
+    });
+  });
+
+  it('Renders Tooltip on focus by default', () => {
+    ['tooltip-children', 'tooltip-selector', 'tooltip-ref'].forEach((id) => {
+      cy.get(`[id="${id}-trigger"]`).then((tooltipTrigger: JQuery<HTMLButtonElement>) => {
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('not.exist');
+        cy.wrap(tooltipTrigger).trigger('focus');
+        cy.wait(defaultEntryDelay);
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('exist');
+        cy.wrap(tooltipTrigger).trigger('blur');
+        cy.wait(defaultExitDelay);
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('not.exist');
+      });
+    });
+  });
+
+  it('Remains rendered when Tooltip is hovered', () => {
+    ['tooltip-children', 'tooltip-selector', 'tooltip-ref'].forEach((id) => {
+      cy.get(`[id="${id}-trigger"]`).then((tooltipTrigger: JQuery<HTMLButtonElement>) => {
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('not.exist');
+        cy.wrap(tooltipTrigger).trigger('mouseenter');
+        cy.wait(defaultEntryDelay);
+        cy.get(`#${id}-content.pf-v5-c-tooltip`).should('exist');
       });
-      cy.get(`[id="${id}"]`).trigger('mouseleave');
+      cy.get(`#${id}-content.pf-v5-c-tooltip`).trigger('mouseenter');
+      cy.wait(defaultExitDelay + 100);
+      cy.get(`#${id}-content.pf-v5-c-tooltip`).should('exist');
+      cy.get(`#${id}-content.pf-v5-c-tooltip`).trigger('mouseleave').should('not.exist');
+    });
+  });
+
+  it('Renders tooltip on click', () => {
+    cy.get('#tooltip-click-trigger').trigger('mouseenter');
+    cy.get('#tooltip-click-content.pf-v5-c-tooltip').should('not.exist');
+    cy.get('#tooltip-click-trigger').trigger('focus');
+    cy.get('#tooltip-click-content.pf-v5-c-tooltip').should('not.exist');
+    cy.get('#tooltip-click-trigger').click();
+    cy.wait(defaultEntryDelay);
+    cy.get('#tooltip-click-content.pf-v5-c-tooltip').should('exist');
+    cy.get('#tooltip-click-content.pf-v5-c-tooltip').click();
+    cy.wait(defaultExitDelay);
+    cy.get('#tooltip-click-content.pf-v5-c-tooltip').should('not.exist');
+  });
+
+  it('Renders with passed in entryDelay and exitDelay', () => {
+    cy.get('#tooltip-delay-trigger').trigger('mouseenter');
+    cy.wait(defaultEntryDelay);
+    cy.get('#tooltip-delay-content.pf-v5-c-tooltip').should('not.exist');
+    cy.wait(200);
+    cy.get('#tooltip-delay-content.pf-v5-c-tooltip').should('exist');
+    cy.get('#tooltip-delay-trigger').trigger('mouseleave');
+    cy.wait(defaultExitDelay);
+    cy.get('#tooltip-delay-content.pf-v5-c-tooltip').should('exist');
+    cy.wait(200);
+    cy.get('#tooltip-delay-content.pf-v5-c-tooltip').should('not.exist');
+  });
+
+  it('Renders with passed in animationDuration styling', () => {
+    cy.get('#tooltip-animationDuration-trigger').trigger('mouseenter');
+    cy.wait(defaultEntryDelay);
+    cy.get('#tooltip-animationDuration-content.pf-v5-c-tooltip').then((tooltipContent) => {
+      expect(tooltipContent)
+        .to.have.attr('style')
+        .match(/transition: opacity 500ms/);
     });
+    cy.get('#tooltip-animationDuration-trigger').trigger('mouseleave');
+    cy.wait(defaultExitDelay);
   });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TooltipDemo/TooltipDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TooltipDemo/TooltipDemo.tsx
@@ -20,20 +20,53 @@ export class TooltipDemo extends Component {
   render() {
     return (
       <div>
-        <Tooltip content={this.myTooltipProps.content}>{this.myTooltipProps.children}</Tooltip>
         <div>
-          <button ref={this.tooltipRef} id="tooltip-ref">
-            Tooltip attached via react ref
+          <Tooltip id="tooltip-children-content" content={<div>Tooltip content attached via children</div>}>
+            <button id="tooltip-children-trigger">Tooltip trigger attached via children</button>
+          </Tooltip>
+        </div>
+        <div>
+          <button ref={this.tooltipRef} id="tooltip-ref-trigger">
+            Tooltip trigger attached via react ref
           </button>
-          <Tooltip content={<div>Tooltip attached via react ref</div>} triggerRef={this.tooltipRef} />
+          <Tooltip
+            id="tooltip-ref-content"
+            content={<div>Tooltip content attached via react ref</div>}
+            triggerRef={this.tooltipRef}
+          />
         </div>
         <div>
-          <button id="tooltip-selector">Tooltip attached via selector ref</button>
+          <button id="tooltip-selector-trigger">Tooltip trigger attached via selector ref</button>
           <Tooltip
-            content={<div>Tooltip attached via selector ref</div>}
-            triggerRef={() => document.getElementById('tooltip-selector')}
+            id="tooltip-selector-content"
+            content={<div>Tooltip content attached via selector ref</div>}
+            triggerRef={() => document.getElementById('tooltip-selector-trigger')}
           />
         </div>
+        <div>
+          <Tooltip id="tooltip-click-content" trigger="click" content={<div>Tooltip content with click trigger</div>}>
+            <button id="tooltip-click-trigger">Tooltip trigger with click</button>
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip
+            id="tooltip-delay-content"
+            entryDelay={500}
+            exitDelay={500}
+            content={<div>Tooltip content with custom delay</div>}
+          >
+            <button id="tooltip-delay-trigger">Tooltip trigger with custom delay</button>
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip
+            id="tooltip-animationDuration-content"
+            animationDuration={500}
+            content={<div>Tooltip content with animationDuration</div>}
+          >
+            <button id="tooltip-animationDuration-trigger">Tooltip trigger with animationDuration</button>
+          </Tooltip>
+        </div>
       </div>
     );
   }