perf(Breadcrumb): move computer of ElementType to method on BreadcrumbSection

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -60,21 +61,21 @@ export default class BreadcrumbSection extends Component {
     parent: 'Breadcrumb',
   }
 
-  handleClick = (e) => {
-    const { onClick } = this.props
+  computeElementType = () => {
+    const { link, onClick } = this.props
 
-    if (onClick) onClick(e, this.props)
+    if (link || onClick) return 'a'
   }
 
+  handleClick = e => _.invoke(this.props, 'onClick', e, this.props)
+
   render() {
     const {
       active,
       children,
       className,
       content,
       href,
-      link,
-      onClick,
     } = this.props
 
     const classes = cx(
@@ -83,9 +84,7 @@ export default class BreadcrumbSection extends Component {
       className,
     )
     const rest = getUnhandledProps(BreadcrumbSection, this.props)
-    const ElementType = getElementType(BreadcrumbSection, this.props, () => {
-      if (link || onClick) return 'a'
-    })
+    const ElementType = getElementType(BreadcrumbSection, this.props, this.computeElementType)
 
     return (
       <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>

test/specs/collections/Breadcrumb/BreadcrumbSection-test.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import BreadcrumbSection from 'src/collections/Breadcrumb/BreadcrumbSection'
 import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 describe('BreadcrumbSection', () => {
   common.isConformant(BreadcrumbSection)
@@ -10,28 +11,42 @@ describe('BreadcrumbSection', () => {
   common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
 
   it('renders as a div by default', () => {
-    shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
+    shallow(<BreadcrumbSection />)
       .should.have.tagName('div')
   })
 
   describe('link', () => {
     it('is should be `a` when has prop link', () => {
-      shallow(<BreadcrumbSection link>Home</BreadcrumbSection>)
+      shallow(<BreadcrumbSection link />)
         .should.have.tagName('a')
     })
   })
 
   describe('href', () => {
     it('is not present by default', () => {
-      shallow(<BreadcrumbSection>Home</BreadcrumbSection>)
+      shallow(<BreadcrumbSection />)
         .should.not.have.attr('href')
     })
 
     it('should have attr `href` when has prop', () => {
-      const section = shallow(<BreadcrumbSection href='http://google.com'>Home</BreadcrumbSection>)
+      const section = shallow(<BreadcrumbSection href='http://google.com' />)
 
       section.should.have.tagName('a')
       section.should.have.attr('href').and.equal('http://google.com')
     })
   })
+
+  describe('onClick', () => {
+    it('is called with (e, props) when clicked', () => {
+      const onClick = sandbox.spy()
+      const event = { target: null }
+      const props = { active: true, content: 'home' }
+
+      shallow(<BreadcrumbSection onClick={onClick} {...props} />)
+        .simulate('click', event)
+
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event, props)
+    })
+  })
 })