Skip to content

Commit

Permalink
fix(DropdownToggle): ensures color attribute is not leaked
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
virgofx authored and eddywashere committed Jun 27, 2017
1 parent c40b89f commit d1448e0
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/DropdownToggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -75,6 +75,7 @@ class DropdownToggle extends React.Component {
props.href = '#';
} else if (!tag) {
Tag = Button;
props.color = color;
} else {
Tag = tag;
}
Expand Down
62 changes: 62 additions & 0 deletions src/__tests__/DropdownToggle.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down

0 comments on commit d1448e0

Please sign in to comment.