fix(#1680): arrowClass not applied to arrow (#2772)

reactstrap · Oct 5, 2023 · aeaf180 · aeaf180
1 parent 86eb20a
commit aeaf180
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/src/Popover.js b/src/Popover.js
@@ -10,14 +10,14 @@ const defaultProps = {
 };
 
 function Popover(props) {
+  const arrowClasses = classNames('popover-arrow', props.arrowClassName);
   const popperClasses = classNames('popover', 'show', props.popperClassName);
-
   const classes = classNames('popover-inner', props.innerClassName);
 
   return (
     <TooltipPopoverWrapper
       {...props}
-      arrowClassName="popover-arrow"
+      arrowClassName={arrowClasses}
       popperClassName={popperClasses}
       innerClassName={classes}
     />

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -10,14 +10,14 @@ const defaultProps = {
 };
 
 function Tooltip(props) {
+  const arrowClasses = classNames('tooltip-arrow', props.arrowClassName);
   const popperClasses = classNames('tooltip', 'show', props.popperClassName);
-
   const classes = classNames('tooltip-inner', props.innerClassName);
 
   return (
     <TooltipPopoverWrapper
       {...props}
-      arrowClassName="tooltip-arrow"
+      arrowClassName={arrowClasses}
       popperClassName={popperClasses}
       innerClassName={classes}
     />

diff --git a/src/__tests__/Popover.spec.js b/src/__tests__/Popover.spec.js
@@ -4,11 +4,18 @@ import '@testing-library/jest-dom';
 import Popover from '../Popover';
 
 describe('Popover', () => {
-  it('should apply popperClassName to popper component', () => {
-    const div = document.createElement('div');
-    div.setAttribute('id', 'popover-target');
-    document.body.appendChild(div);
+  let element;
+  beforeEach(() => {
+    element = document.createElement('div');
+    element.setAttribute('id', 'popover-target');
+    document.body.appendChild(element);
+  });
 
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('should apply popperClassName to popper component', () => {
     render(
       <Popover target="popover-target" popperClassName="boba-was-here" isOpen>
         Bo-Katan Kryze
@@ -19,4 +26,14 @@ describe('Popover', () => {
       'popover show boba-was-here',
     );
   });
+
+  it('should apply arrowClassName to arrow', () => {
+    const { debug } = render(
+      <Popover target="popover-target" arrowClassName="boba-was-here" isOpen>
+        Bo-Katan Kryze
+      </Popover>,
+    );
+    debug();
+    expect(document.querySelector('.arrow')).toHaveClass('boba-was-here');
+  });
 });
diff --git a/src/__tests__/Tooltip.spec.js b/src/__tests__/Tooltip.spec.js
@@ -4,11 +4,18 @@ import '@testing-library/jest-dom';
 import Tooltip from '../Tooltip';
 
 describe('Tooltip', () => {
-  it('should apply popperClassName to popper component', () => {
-    const div = document.createElement('div');
-    div.setAttribute('id', 'tooltip-target');
-    document.body.appendChild(div);
+  let element;
+  beforeEach(() => {
+    element = document.createElement('div');
+    element.setAttribute('id', 'tooltip-target');
+    document.body.appendChild(element);
+  });
 
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  it('should apply popperClassName to popper component', () => {
     render(
       <Tooltip target="tooltip-target" popperClassName="boba-was-here" isOpen>
         Bo-Katan Kryze
@@ -19,4 +26,14 @@ describe('Tooltip', () => {
       'tooltip show boba-was-here',
     );
   });
+
+  it('should apply arrowClassName to arrow', () => {
+    const { debug } = render(
+      <Tooltip target="tooltip-target" arrowClassName="boba-was-here" isOpen>
+        Bo-Katan Kryze
+      </Tooltip>,
+    );
+    debug();
+    expect(document.querySelector('.arrow')).toHaveClass('boba-was-here');
+  });
 });