feat(decorator): add onContextMenu to decorator (#1102)

* fix(decorator): add oncontextmenu * fix(decorator): added tests * Update src/components/DataDecorator/Decorator/__tests__/Decorator-test.js Co-authored-by: Simon Finney <simonjfinney@gmail.com> * Update src/components/DataDecorator/Decorator/__tests__/Decorator-test.js Co-authored-by: Simon Finney <simonjfinney@gmail.com> Co-authored-by: Paul Balchin <paul.balchin@gmail.com> Co-authored-by: Simon Finney <simonjfinney@gmail.com>
carbon-design-system · Sep 13, 2021 · 46f29da · 46f29da
1 parent bac9757
commit 46f29da
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/src/components/DataDecorator/Decorator/Decorator.js b/src/components/DataDecorator/Decorator/Decorator.js
@@ -116,7 +116,11 @@ class Decorator extends Component {
 
     if (href) {
       return (
-        <a href={href} className={decoratorClasses} tabIndex={0}>
+        <a
+          href={href}
+          className={decoratorClasses}
+          onContextMenu={this.handleContextMenuClick}
+          tabIndex={0}>
           {decorator}
         </a>
       );
@@ -134,7 +138,13 @@ class Decorator extends Component {
       );
     }
 
-    return <span className={decoratorClasses}>{decorator}</span>;
+    return (
+      <span
+        className={decoratorClasses}
+        onContextMenu={this.handleContextMenuClick}>
+        {decorator}
+      </span>
+    );
   }
 }
 

diff --git a/src/components/DataDecorator/Decorator/__tests__/Decorator-test.js b/src/components/DataDecorator/Decorator/__tests__/Decorator-test.js
@@ -3,8 +3,8 @@
  * @copyright IBM Security 2019 - 2021
  */
 
+import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { render } from '@testing-library/react';
 
 import React from 'react';
 
@@ -142,6 +142,47 @@ describe('Decorator', () => {
     // the MD5 hash -- the data decorator.
     expect(queryAllByText(/0f3deda483df…243b/i).length === 1);
   });
+
+  test('should invoke context menu mock when a non-interactive ("span") decorator is right-clicked', () => {
+    const onContextMenuMock = jest.fn();
+    const { getByText } = render(
+      <Decorator type="IP" value="10.0.0.0" onContextMenu={onContextMenuMock} />
+    );
+
+    fireEvent.contextMenu(getByText(/10.0.0.0/i).closest('span'));
+    expect(onContextMenuMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('should invoke context menu mock when an href ("a") decorator is right-clicked', () => {
+    const onContextMenuMock = jest.fn();
+    const { getByText } = render(
+      <Decorator
+        type="IP"
+        value="10.0.0.0"
+        href="#"
+        onContextMenu={onContextMenuMock}
+      />
+    );
+
+    fireEvent.contextMenu(getByText(/10.0.0.0/i).closest('a'));
+    expect(onContextMenuMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('should invoke context menu mock when an interactive ("button") decorator is right-clicked', () => {
+    const onClickMock = jest.fn();
+    const onContextMenuMock = jest.fn();
+    const { getByText } = render(
+      <Decorator
+        type="IP"
+        value="10.0.0.0"
+        onClick={onClickMock}
+        onContextMenu={onContextMenuMock}
+      />
+    );
+
+    fireEvent.contextMenu(getByText(/10.0.0.0/i).closest('button'));
+    expect(onContextMenuMock).toHaveBeenCalledTimes(1);
+  });
 });
 
 Object.keys(icons).forEach((icon) => {