Skip to content

Commit

Permalink
Just ignore href on active BreadcrumbItem
Browse files Browse the repository at this point in the history
Makes it easier to use with react-router-bootstrap
  • Loading branch information
taion committed Dec 24, 2015
1 parent fd8fc48 commit 2d13f89
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/Breadcrumb.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Breadcrumb = React.createClass({
},

renderBreadcrumbItem(child, index) {
return cloneElement( child, { key: child.key ? child.key : index } );
return cloneElement(child, { key: child.key || index });
}
});

Expand Down
3 changes: 0 additions & 3 deletions src/BreadcrumbItem.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import classNames from 'classnames';
import React from 'react';
import warning from 'warning';

import SafeAnchor from './SafeAnchor';

Expand Down Expand Up @@ -56,8 +55,6 @@ const BreadcrumbItem = React.createClass({
target,
...props } = this.props;

warning(!(href && active), '[react-bootstrap] `href` and `active` properties cannot be set at the same time');

const linkProps = {
href,
title,
Expand Down
29 changes: 12 additions & 17 deletions test/BreadcrumbItemSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,7 @@ import ReactDOM from 'react-dom';

import BreadcrumbItem from '../src/BreadcrumbItem';

import { shouldWarn } from './helpers';

describe('BreadcrumbItem', () => {
it('Should warn if `active` and `href` attributes set', () => {
ReactTestUtils.renderIntoDocument(
<BreadcrumbItem href='#' active>
Crumb
</BreadcrumbItem>
);

shouldWarn('[react-bootstrap] `href` and `active` properties cannot be set at the same time');
});

it('Should render `a` as inner element when is not active', () => {
const instance = ReactTestUtils.renderIntoDocument(
<BreadcrumbItem href='#'>
Expand All @@ -28,24 +16,31 @@ describe('BreadcrumbItem', () => {
assert.notInclude(ReactDOM.findDOMNode(instance).className, 'active');
});

it('Should add `active` class with `active` attribute set.', () => {
it('Should render `span.active` with `active` attribute set.', () => {
const instance = ReactTestUtils.renderIntoDocument(
<BreadcrumbItem active>
Active Crumb
</BreadcrumbItem>
);

assert.include(ReactDOM.findDOMNode(instance).className, 'active');
assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
});

it('Should render `span` as inner element when is active', () => {
it('Should render `span.active` when active and has href', () => {
const instance = ReactTestUtils.renderIntoDocument(
<BreadcrumbItem active>
Crumb
<BreadcrumbItem href="#" active>
Active Crumb
</BreadcrumbItem>
);

assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
assert.include(ReactDOM.findDOMNode(instance).className, 'active');

const spanNode = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span');
assert.ok(spanNode);
assert.notOk(spanNode.hasAttribute('href'));

assert.lengthOf(ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a'), 0);
});

it('Should add custom classes onto `li` wrapper element', () => {
Expand Down

0 comments on commit 2d13f89

Please sign in to comment.