Merge pull request #135 from primer/circle-badge-tests

Improve CircleBadge test coverage, tidy up

Author: shawnbot

src/CircleBadge.js

@@ -2,20 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+const ICON_CLASS = 'CircleBadge-icon'
+
 const CircleBadge = ({tag: Tag = 'div', size = 'medium', bg, children, ...rest}) => {
-  const generateContent = () =>
-    React.Children.map(children, child => {
-      const {className = '', ...rest} = child.props
-      const newProps = {...rest}
-      if (!className || !className.includes('CircleBadge-icon')) {
-        newProps.className = classnames('CircleBadge-icon', className)
-      }
-      return React.cloneElement(child, newProps)
-    })
+  const mappedChildren = React.Children.map(children, child => {
+    let {className = ''} = child.props
+    if (!className.includes(ICON_CLASS)) {
+      className = classnames(ICON_CLASS, className)
+    }
+    return React.cloneElement(child, {className})
+  })
   const classes = classnames('CircleBadge', `CircleBadge--${size}`, bg && `bg-${bg}`)
   return (
     <Tag className={classes} {...rest}>
-      {generateContent()}
+      {mappedChildren}
     </Tag>
   )
 }

src/__tests__/CircleBadge.js

@@ -12,6 +12,7 @@ describe('CircleBadge', () => {
   it('renders medium by default', () => {
     expect(rendersClass(<CircleBadge />, 'CircleBadge--medium')).toEqual(true)
   })
+
   it('respects tag prop', () => {
     expect(
       render(
@@ -27,6 +28,7 @@ describe('CircleBadge', () => {
       )
     )
   })
+
   it('applies title', () => {
     expect(
       render(
@@ -36,29 +38,31 @@ describe('CircleBadge', () => {
       ).props['title']
     ).toEqual('primer logo')
   })
+
   it('adds bg class', () => {
     expect(rendersClass(<CircleBadge bg="blue" />, 'bg-blue')).toEqual(true)
   })
-  it('adds CircleBadge--icon class to children', () => {
-    const comp = mount(<CircleBadge>{imgInput}</CircleBadge>).render()
-    expect(
-      comp
-        .children()
-        .first()
-        .hasClass('CircleBadge-icon')
-    ).toEqual(true)
+
+  it('adds CircleBadge-icon class to children', () => {
+    const comp = mount(<CircleBadge>{imgInput}</CircleBadge>)
+    expect(comp.find('img').hasClass('CircleBadge-icon')).toEqual(true)
+  })
+
+  it('does not duplicate "CircleBadge-icon" classes', () => {
+    const comp = mount(
+      <CircleBadge>
+        <img className="CircleBadge-icon" alt="" src="primer.jpg" />
+      </CircleBadge>
+    )
+    expect(comp.find('img').props().className).toEqual('CircleBadge-icon')
   })
+
   it('preserves child class names', () => {
     const comp = mount(
       <CircleBadge>
         <img className="primer" alt="" src="primer.jpg" />
       </CircleBadge>
-    ).render()
-    expect(
-      comp
-        .children()
-        .first()
-        .hasClass('primer')
-    ).toEqual(true)
+    )
+    expect(comp.find('img').hasClass('primer')).toEqual(true)
   })
 })