fix(DropdownToggle): ensures color attribute is not leaked

* fix(DropdownToggle): Fixes #461 (reverting bad PR#402) which ensures color attribute is NOT leaked * fix(DropdownToggle): Adding tests for color attribute and fixing logic to ensure that the color attribute is used for Buttons only.
reactstrap · Jun 27, 2017 · d1448e0 · d1448e0
1 parent c40b89f
commit d1448e0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -55,7 +55,7 @@ class DropdownToggle extends React.Component {
   }
 
   render() {
-    const { className, cssModule, caret, split, nav, tag, ...props } = this.props;
+    const { className, color, cssModule, caret, split, nav, tag, ...props } = this.props;
     const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
     const classes = mapToCssModules(classNames(
       className,
@@ -75,6 +75,7 @@ class DropdownToggle extends React.Component {
       props.href = '#';
     } else if (!tag) {
       Tag = Button;
+      props.color = color;
     } else {
       Tag = tag;
     }

diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js
@@ -85,6 +85,68 @@ describe('DropdownToggle', () => {
     expect(wrapper.find('[data-toggle="dropdown"]').hasClass('dropdown-toggle')).toBe(true);
   });
 
+  describe('color', () => {
+    it('should render the dropdown as a BUTTON element with default color secondary', () => {
+      const wrapper = mount(
+        <DropdownToggle />,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('button').length).toBe(1);
+      expect(wrapper.find('button').hasClass('btn-secondary')).toBe(true);
+    });
+
+    it('should render the dropdown as a BUTTON element with explicit color success', () => {
+      const wrapper = mount(
+        <DropdownToggle color="success" />,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('button').length).toBe(1);
+      expect(wrapper.find('button').hasClass('btn-success')).toBe(true);
+    });
+
+    it('should render the dropdown as an A element with no color attribute', () => {
+      const wrapper = mount(
+        <DropdownToggle tag="a" />,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('a').length).toBe(1);
+      expect(wrapper.find('a[color]').length).toBe(0);
+    });
+
+    it('should render the dropdown as a DIV element with no color attribute', () => {
+      const wrapper = mount(
+        <DropdownToggle tag="div" color="success" />,
+        {
+          context: {
+            isOpen: isOpen,
+            toggle: toggle
+          }
+        }
+      );
+
+      expect(wrapper.find('div').length).toBe(1);
+      expect(wrapper.find('div[color]').length).toBe(0);
+    });
+  });
+
   it('should render a split', () => {
     const wrapper = mount(
       <DropdownToggle split>Ello world</DropdownToggle>,