From f83461e22917e27d2029a678d0047af945a640d6 Mon Sep 17 00:00:00 2001
From: Ian Stewart <IanCStewart@users.noreply.github.com>
Date: Thu, 12 Oct 2017 14:26:35 +0200
Subject: [PATCH] Issue #552 badge (#908)

* Fixed Badge getStyle test.

* New structure for correct testing.

* Fixed Badge component test.
---
 src/badge/{index.jsx => component.jsx} | 10 +--------
 src/badge/index.js                     | 11 ++++++++++
 test/badge/get-styles.test.js          |  1 +
 test/badge/index.test.js               | 29 ++++++++++++++------------
 4 files changed, 29 insertions(+), 22 deletions(-)
 rename src/badge/{index.jsx => component.jsx} (84%)
 create mode 100644 src/badge/index.js

diff --git a/src/badge/index.jsx b/src/badge/component.jsx
similarity index 84%
rename from src/badge/index.jsx
rename to src/badge/component.jsx
index 809f718a..40c7a539 100644
--- a/src/badge/index.jsx
+++ b/src/badge/component.jsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
-import compose from 'recompose/compose';
 import isNumber from 'lodash/isNumber';
 import getStyles from './get-styles';
-import themeable from '../themeable';
 
 /** Used for displaying a (notification) counter */
 const Badge = ({ value, maxValue, inverted, style, color, ...custom }) => {
@@ -43,9 +40,4 @@ Badge.defaultProps = {
   maxValue: null
 };
 
-const enhance = compose(
-  themeable(),
-  Radium
-);
-
-export default enhance(Badge);
+export default Badge;
diff --git a/src/badge/index.js b/src/badge/index.js
new file mode 100644
index 00000000..1dae9f21
--- /dev/null
+++ b/src/badge/index.js
@@ -0,0 +1,11 @@
+import Radium from 'radium';
+import compose from 'recompose/compose';
+import themeable from '../themeable';
+import Badge from './component';
+
+const enhance = compose(
+  themeable(),
+  Radium
+);
+
+export default enhance(Badge);
diff --git a/test/badge/get-styles.test.js b/test/badge/get-styles.test.js
index f517daf1..7271d867 100644
--- a/test/badge/get-styles.test.js
+++ b/test/badge/get-styles.test.js
@@ -27,6 +27,7 @@ describe('Badge.getStyles', () => {
       const style = getStyles.root('red', true);
 
       expect(style).to.have.property('backgroundColor', '#FEFEFE');
+      expect(style).to.have.property('color', 'red');
     });
   });
 });
diff --git a/test/badge/index.test.js b/test/badge/index.test.js
index 8bb156e3..10bcae3b 100644
--- a/test/badge/index.test.js
+++ b/test/badge/index.test.js
@@ -5,7 +5,7 @@ import chai, { expect } from 'chai';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import Badge from '../../src/badge';
+import Badge from '../../src/badge/component';
 import getStyles from '../../src/badge/get-styles';
 
 chai.use(sinonChai);
@@ -27,30 +27,33 @@ describe('Badge', () => {
     global.navigator = undefined;
   });
 
-  it('should always render a span element', () => {
-    const wrapper = shallow(<Badge {...props} />).dive();
+  it('should render a span element', () => {
+    const component = shallow(<Badge {...props} />);
 
-    expect(wrapper.find('span')).to.have.length(1);
+    expect(component.find('span')).to.have.length(1);
   });
 
-  it('should pass the content prop to the span element if the value prop is not greater than the maxValue prop', () => {
-    const wrapper = shallow(<Badge {...props} />).dive();
+  it('should render content element', () => {
+    const component = shallow(<Badge {...props} />);
 
-    expect(wrapper.containsMatchingElement(<span>{1}</span>)).to.equal(true);
+    expect(component.find('span').containsMatchingElement(1)).to.equal(true);
   });
 
-  it('should pass the content prop to the span element if the value prop is greater than the maxValue prop', () => {
-    props.value = 3;
-    const wrapper = shallow(<Badge {...props} />).dive();
+  it('should render maxValue+ element', () => {
+    const combinedProps = {
+      ...props,
+      value: 3
+    };
 
-    expect(wrapper.containsMatchingElement(<span>2+</span>)).to.equal(true);
-    props.value = 1;
+    const component = shallow(<Badge {...combinedProps} />);
+
+    expect(component.find('span').containsMatchingElement('2+')).to.equal(true);
   });
 
   it('should get root styles', () => {
     const spy = sinon.spy(getStyles, 'root');
 
-    shallow(<Badge {...props} />).dive();
+    shallow(<Badge {...props} />);
     expect(spy).to.have.been.calledWith(
       props.color, props.inverted, props.style
     );