#9553: add unit tests for handleLongTextEnhancer

web/client/components/misc/enhancers/__tests__/handleLongTextEnhancer-test.jsx

@@ -25,21 +25,48 @@ describe("handleLongTextEnhancer enhancer", () => {
         setTimeout(done);
     });
 
-    it('handleLongTextEnhancer with defaults [with no formatter]', () => {
-        const Enhancer = handleLongTextEnhancer();
+    it('handleLongTextEnhancer by passing formatter as wrapper', () => {
+        const EnhancerWithFormatter = ()=> handleLongTextEnhancer(StringFormatter)({ value: "test12334567899999" });
         ReactDOM.render(
-            <Enhancer value={"test12334567899999"} />,
+            <EnhancerWithFormatter />,
             document.getElementById("container")
         );
         expect(document.getElementById("container").innerHTML).toExist();
         expect(document.getElementsByTagName('span').length).toEqual(2);
         expect(document.getElementsByTagName('span')[1].innerHTML).toExist();
     });
 
-    it('handleLongTextEnhancer with formatter', () => {
-        const EnhancerWithFormatter = handleLongTextEnhancer(StringFormatter);
+    it('handleLongTextEnhancer with by passing td as wrapper', () => {
+        const wrapper = () => (<td>15234568965</td>);
+        const EnhancerWithFormatter = ()=> handleLongTextEnhancer(wrapper)({ value: "15234568965" });
         ReactDOM.render(
-            <EnhancerWithFormatter value={"test12334567899999"} />,
+            <EnhancerWithFormatter />,
+            document.getElementById("container")
+        );
+        expect(document.getElementById("container").innerHTML).toExist();
+        expect(document.getElementsByTagName('span').length).toEqual(2);
+        expect(document.getElementsByTagName('span')[1].innerHTML).toExist();
+    });
+
+
+    it('handleLongTextEnhancer with by passing span as wrapper', () => {
+        const wrapper = () => (<span>15234568965</span>);
+        const EnhancerWithFormatter = ()=> handleLongTextEnhancer(wrapper)({ value: "15234568965" });
+        ReactDOM.render(
+            <EnhancerWithFormatter />,
+            document.getElementById("container")
+        );
+        expect(document.getElementById("container").innerHTML).toExist();
+        expect(document.getElementsByTagName('span').length).toEqual(3);
+        expect(document.getElementsByTagName('span')[1].innerHTML).toExist();
+    });
+
+
+    it('handleLongTextEnhancer with by passing td div wrapper', () => {
+        const wrapper = () => (<div>test</div>);
+        const EnhancerWithFormatter = ()=> handleLongTextEnhancer(wrapper)({ value: "test" });
+        ReactDOM.render(
+            <EnhancerWithFormatter />,
             document.getElementById("container")
         );
         expect(document.getElementById("container").innerHTML).toExist();

web/client/components/misc/enhancers/handleLongTextEnhancer.jsx

@@ -9,9 +9,24 @@
 import React from "react";
 import OverlayTrigger from "../OverlayTrigger";
 import { Tooltip } from "react-bootstrap";
-
-export  const handleLongTextEnhancer = (RenderFormatter) => (props) => {
-    const { value } = props;
+/**
+ * handleLongTextEnhancer enhancer. Enhances a long text content by adding a tooltip.
+ * @type {function}
+ * @name handleLongTextEnhancer
+ * @memberof components.misc.enhancers
+ * Wraps [wrapped component with content] to add tooltip for long content if shown content less than the main content
+ * @param {Component} Wrapped the wrapper to add tooltip for its long content
+ * @param {object} props the props that contains value content
+ * @return {Component} the rendered component that renders the content with the tooltip if the content is long or renders the content with no tooltip if not long
+ * @example
+ * const wrapper = () = > <span>testtttttttttt</span>
+ * const Component = ()=> handleLongTextEnhancer(wrapper)(props);
+ * render (){
+ * return <Component />
+ * }
+ *
+ */
+export const handleLongTextEnhancer = (Wrapped) => (props) => {
     const cellRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const [isContentOverflowing, setIsContentOverflowing] = React.useState(false);
@@ -24,11 +39,11 @@ export  const handleLongTextEnhancer = (RenderFormatter) => (props) => {
 
     return (<OverlayTrigger
         placement="top"
-        overlay={isContentOverflowing ? <Tooltip id="tooltip">{RenderFormatter ? <RenderFormatter {...props} /> : value}</Tooltip> : <></>}
+        overlay={isContentOverflowing ? <Tooltip id="tooltip">{<Wrapped {...props} />}</Tooltip> : <></>}
     >
         <div ref={cellRef} onMouseEnter={handleMouseEnter}>
             <span ref={contentRef}>
-                <span>{RenderFormatter ? <RenderFormatter {...props} /> : value}</span>
+                <span>{<Wrapped {...props} />}</span>
             </span>
         </div>
     </OverlayTrigger>);