fix toggle bug and add some tests (#86)

bsidelinger912 · May 13, 2020 · 463a99c · 463a99c
1 parent 158ba77
commit 463a99c
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -169,6 +169,11 @@ You can pass in props to define tip direction, styling, etc.  Content is the onl
       <td>number</td>
       <td>Number in pixels of the size of the arrow, defaults to 10</td>
     </tr>
+    <tr>
+      <td>arrowContent</td>
+      <td>node (text or html)</td>
+      <td>custom arrow contents, such as an SVG</td>
+    </tr>
     <tr>
       <td>distance</td>
       <td>number</td>

diff --git a/example/index.css b/example/index.css
@@ -156,3 +156,24 @@ a {
   padding-top: 100px;
   height: 400px;
 }
+
+.arrow-content-tooltip .react-tooltip-lite {
+  box-sizing: border-box;
+  border: 1px solid gray;
+  border-radius: 8px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+}
+
+.arrow-content-tooltip .react-tooltip-lite-down-arrow svg {
+  transform: translateY(1px);
+}
+
+.arrow-content-tooltip .react-tooltip-lite-right-arrow svg {
+  transform: rotate(270deg) translateY(-4px) translateX(-4px);
+}
+.arrow-content-tooltip .react-tooltip-lite-up-arrow svg {
+  transform: rotate(180deg) translateY(1px);
+}
+.arrow-content-tooltip .react-tooltip-lite-left-arrow svg {
+  transform: rotate(90deg) translateY(5px) translateX(4px);
+}
diff --git a/example/index.jsx b/example/index.jsx
@@ -161,6 +161,27 @@ class App extends React.Component {
           >
             css stylesheet.
           </Tooltip>
+          &nbsp;
+          With the arrowContent prop you have&nbsp;
+          <Tooltip
+            content="Event more customizations possible via the arrowContent prop"
+            className="target"
+            background="white"
+            color="black"
+            tipContentClassName="arrow-content-tooltip"
+            spacing={0}
+            tagName="span"
+            arrowContent={(
+              <svg style={{ display: 'block' }} viewBox="0 0 21 11" width="20px" height="10px">
+                <path
+                  d="M0,11 L9.43630703,1.0733987 L9.43630703,1.0733987 C10.1266203,0.3284971 11.2459708,0 11.936284,1.0733987 L20,11"
+                  style={{ stroke: 'gray', fill: 'white' }}
+                />
+              </svg>
+            )}
+          >
+            even more control.
+          </Tooltip>
         </section>
 
         <section>

diff --git a/src/__tests__/Tooltip.test.jsx b/src/__tests__/Tooltip.test.jsx
@@ -59,6 +59,51 @@ describe('Tooltip', () => {
     );
 
     assertTipVisible(getByText);
+
+    rerender(
+      <Tooltip content={tipContent} isOpen={false}>
+        {targetContent}
+      </Tooltip>
+    );
+
+    jest.runAllTimers();
+
+    assertTipHidden(getByText);
+  });
+
+  it('should not open the tip when isVisible goes from false to undefined', () => {
+    const { rerender, getByText } = render(
+      <Tooltip content={tipContent}>
+        {targetContent}
+      </Tooltip>
+    );
+
+    const target = getByText(targetContent);
+    fireEvent.mouseOver(target);
+
+    jest.runAllTimers();
+
+    assertTipVisible(getByText);
+
+    rerender(
+      <Tooltip content={tipContent} isOpen={false}>
+        {targetContent}
+      </Tooltip>
+    );
+
+    jest.runAllTimers();
+
+    assertTipHidden(getByText);
+
+    rerender(
+      <Tooltip content={tipContent} isOpen={false}>
+        {targetContent}
+      </Tooltip>
+    );
+
+    jest.runAllTimers();
+
+    assertTipHidden(getByText);
   });
 
   it('should handle null as undefined for isOpen prop', () => {
@@ -226,6 +271,19 @@ describe('Tooltip', () => {
     expect(spy).toHaveBeenCalledWith(false);
   });
 
+  it('should not call onToggle when the state is not actually changing', () => {
+    const spy = jest.fn();
+    const { container } = render(
+      <Tooltip content={tipContent} onToggle={spy}>
+        {targetContent}
+      </Tooltip>
+    );
+
+    fireEvent.touchStart(container);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
   it('should support zIndex prop', () => {
     const { getByText } = render(
       <Tooltip content={tipContent} zIndex={5000}>
@@ -242,4 +300,29 @@ describe('Tooltip', () => {
     const styles = window.getComputedStyle(tip);
     expect(styles['z-index']).toEqual('5000');
   });
+
+  it('should support the arrowContent prop', () => {
+    const { getByText, getByTestId } = render(
+      <Tooltip
+        content={tipContent}
+        arrowContent={(
+          <svg data-testid="my-arrow" style={{ display: 'block' }} viewBox="0 0 21 11" width="20px" height="10px">
+            <path
+              d="M0,11 L9.43630703,1.0733987 L9.43630703,1.0733987 C10.1266203,0.3284971 11.2459708,0 11.936284,1.0733987 L20,11"
+              style={{ stroke: 'gray', fill: 'white' }}
+            />
+          </svg>
+        )}
+      >
+        {targetContent}
+      </Tooltip>
+    );
+
+    const target = getByText(targetContent);
+    fireEvent.mouseOver(target);
+
+    jest.runAllTimers();
+
+    getByTestId('my-arrow');
+  });
 });
diff --git a/src/index.jsx b/src/index.jsx
@@ -202,20 +202,25 @@ class Tooltip extends React.Component {
       return this.setState({ hasBeenShown: true });
     }
 
-    this.setState({ showTip: true }, () => {
-      if (typeof this.props.onToggle === 'function') {
-        this.props.onToggle(this.state.showTip);
-      }
-    });
+    if (!this.state.showTip) {
+      this.setState({ showTip: true }, () => {
+        if (typeof this.props.onToggle === 'function') {
+          this.props.onToggle(this.state.showTip);
+        }
+      });
+    }
   }
 
   hideTip() {
     this.setState({ hasHover: false });
-    this.setState({ showTip: false }, () => {
-      if (typeof this.props.onToggle === 'function') {
-        this.props.onToggle(this.state.showTip);
-      }
-    });
+
+    if (this.state.showTip) {
+      this.setState({ showTip: false }, () => {
+        if (typeof this.props.onToggle === 'function') {
+          this.props.onToggle(this.state.showTip);
+        }
+      });
+    }
   }
 
   startHover() {