test(definitiontooltip): increase test coverage to 100% (#17434)

* test(definitiontooltip): increase test coverage to 100% * chore: correct typo * Apply suggestions from code review Co-authored-by: Alison Joseph <[email protected]> --------- Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: Preeti Bansal <[email protected]> Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Oct 8, 2024 · 21e4380 · 21e4380
1 parent df9ec56
commit 21e4380
Showing 1 changed file with 117 additions and 2 deletions.
diff --git a/packages/react/src/components/Tooltip/__tests__/DefinitionTooltip-test.js b/packages/react/src/components/Tooltip/__tests__/DefinitionTooltip-test.js
@@ -10,8 +10,8 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { DefinitionTooltip } from '../DefinitionTooltip';
 
-describe('DefintiionTooltip', () => {
-  it('should display onClick a defintion provided via prop', async () => {
+describe('DefinitionTooltip', () => {
+  it('should display onClick a definition provided via prop', async () => {
     const definition = 'Uniform Resource Locator';
     render(<DefinitionTooltip definition={definition}>URL</DefinitionTooltip>);
     await userEvent.click(screen.getByText('URL'));
@@ -29,6 +29,121 @@ describe('DefintiionTooltip', () => {
   });
 
   describe('Component API', () => {
+    it('should open onKeyDown', async () => {
+      const user = userEvent.setup();
+      const definition = 'Uniform Resource Locator';
+      render(
+        <DefinitionTooltip
+          data-testid="test"
+          definition={definition}
+          className="tooltip-class">
+          URL
+        </DefinitionTooltip>
+      );
+
+      const button = screen.getByRole('button');
+
+      await user.tab();
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+
+      await user.keyboard('[Escape]');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('should close when trigger is blurred', async () => {
+      const user = userEvent.setup();
+      const definition = 'Uniform Resource Locator';
+      render(
+        <DefinitionTooltip
+          data-testid="test"
+          definition={definition}
+          className="tooltip-class">
+          URL
+        </DefinitionTooltip>
+      );
+
+      const button = screen.getByRole('button');
+
+      await user.tab();
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      await user.tab();
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('should close on unhover/mouseout when openOnHover is false', async () => {
+      const user = userEvent.setup();
+      const definition = 'Uniform Resource Locator';
+      render(
+        <DefinitionTooltip
+          data-testid="test"
+          definition={definition}
+          className="tooltip-class"
+          defaultOpen>
+          URL
+        </DefinitionTooltip>
+      );
+
+      const content = screen.getByText(definition);
+
+      expect(content).toBeVisible();
+      await userEvent.unhover(content);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
+    it('should open on hover when openOnHover', async () => {
+      const user = userEvent.setup();
+      const definition = 'Uniform Resource Locator';
+      render(
+        <DefinitionTooltip
+          data-testid="test"
+          definition={definition}
+          className="tooltip-class"
+          openOnHover>
+          URL
+        </DefinitionTooltip>
+      );
+
+      const trigger = screen.getByRole('button');
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+      await user.hover(trigger);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      );
+      await user.unhover(trigger);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
+    it('should not open on hover by default', async () => {
+      const user = userEvent.setup();
+      const definition = 'Uniform Resource Locator';
+      render(
+        <DefinitionTooltip
+          data-testid="test"
+          definition={definition}
+          className="tooltip-class">
+          URL
+        </DefinitionTooltip>
+      );
+
+      const trigger = screen.getByRole('button');
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+      await user.hover(trigger);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
     it('should apply additional props to the underlying button element', () => {
       const definition = 'Uniform Resource Locator';
       render(