add custom step tests

lib/ChatBot.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Random from 'random-id';
 import { CustomStep, OptionsStep, TextStep } from './steps/steps';
@@ -268,6 +269,7 @@ class ChatBot extends Component {
 
   renderStep(step, index) {
     const { renderedSteps, previousSteps } = this.state;
+    const { customStyle } = this.props;
     const { options, component } = step;
     const steps = {};
     const stepIndex = renderedSteps.map(s => s.id).indexOf(step.id);
@@ -289,6 +291,7 @@ class ChatBot extends Component {
           key={index}
           step={step}
           steps={steps}
+          style={customStyle}
           previousStep={previousStep}
           triggerNextStep={this.triggerNextStep}
         />
@@ -371,6 +374,7 @@ ChatBot.propTypes = {
   contentStyle: PropTypes.object,
   footerStyle: PropTypes.object,
   inputStyle: PropTypes.object,
+  customStyle: PropTypes.object,
   botAvatar: PropTypes.string,
   botBubbleColor: PropTypes.string,
   botFontColor: PropTypes.string,
@@ -388,6 +392,7 @@ ChatBot.defaultProps = {
   contentStyle: {},
   footerStyle: {},
   inputStyle: {},
+  customStyle: {},
   botBubbleColor: '#eee',
   botFontColor: '#000',
   userBubbleColor: '#baf5fd',

lib/steps/CustomStep.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styles from './CustomStep.styles';
 
 class CustomStep extends Component {
@@ -36,10 +37,16 @@ class CustomStep extends Component {
 
   render() {
     const { loading } = this.state;
+    const { style } = this.props;
+    const customStyle = Object.assign(
+      {},
+      styles.customStep,
+      style,
+    );
     return (
       <div
         className="custom-step"
-        style={styles.customStep}
+        style={customStyle}
       >
         { loading ? (
           <span style={styles.loading}>Loading ...</span>
@@ -52,6 +59,7 @@ class CustomStep extends Component {
 CustomStep.propTypes = {
   step: PropTypes.object.isRequired,
   steps: PropTypes.object.isRequired,
+  style: PropTypes.object.isRequired,
   previousStep: PropTypes.object.isRequired,
   triggerNextStep: PropTypes.func.isRequired,
 };

lib/steps/OptionsStep.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import _ from 'lodash';
 import styles from './OptionsStep.styles';
 

lib/steps/TextStep.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styles from './TextStep.styles';
 
 class TextStep extends Component {

package.json

@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.4",
+    "prop-types": "^15.5.8",
     "random-id": "0.0.2",
     "react": "^15.0.1",
     "react-dom": "^15.0.1"

tests/lib/steps/CustomStep.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import { CustomStep } from '../../../lib/steps/steps';
+
+const Example = () => (
+  <div className="example">
+    Example
+  </div>
+);
+
+describe('CustomStep', () => {
+  const steps = {
+    step1: {
+      id: '1',
+      component: <Example />,
+    },
+  };
+  const step = steps.step1;
+  const settings = {
+    step,
+    steps,
+    style: {
+      border: 0,
+    },
+    previousStep: step,
+    triggerNextStep: () => {},
+  };
+
+  const wrapper = shallow(<CustomStep {...settings} />);
+  wrapper.setState({ loading: false });
+
+  it('should render', () => {
+    expect(wrapper.hasClass('custom-step')).to.be.equal(true);
+  });
+
+  it('should render without border', () => {
+    expect(wrapper.find('.custom-step').prop('style').border).to.be.equal(0);
+  });
+
+  it('should render with Example component', () => {
+    expect(wrapper.find(Example)).to.have.length(1);
+  });
+});