add function option to message step

Author: LucasBassetti

lib/steps/text/TextStep.jsx

@@ -32,12 +32,17 @@ class TextStep extends Component {
   }
 
   renderMessage() {
-    const { previousValue, step } = this.props;
+    const {
+      previousValue,
+      step,
+      steps,
+      previousStep,
+      triggerNextStep,
+    } = this.props;
     const { component } = step;
     let { message } = step;
 
     if (component) {
-      const { steps, previousStep, triggerNextStep } = this.props;
       return React.cloneElement(component, {
         step,
         steps,
@@ -47,8 +52,9 @@ class TextStep extends Component {
     }
 
     // Account for message being a callback which returns a string
-    message = (typeof message === 'function') ? message() : message;
-    message = message.replace(/{previousValue}/g, previousValue);
+    message = (typeof message === 'function') ?
+      message({ previousValue, steps }) :
+      message.replace(/{previousValue}/g, previousValue);
 
     return message;
   }

lib/storage.js

@@ -1,5 +1,6 @@
 const JSON = require('circular-json');
 
+/* istanbul ignore next */
 const getData = ({ cache, firstStep, steps }, callback) => {
   const currentStep = firstStep;
   const renderedSteps = [steps[currentStep.id]];
@@ -45,6 +46,7 @@ const getData = ({ cache, firstStep, steps }, callback) => {
   };
 };
 
+/* istanbul ignore next */
 const setData = (data) => {
   localStorage.setItem('rsc_cache', JSON.stringify(data));
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-chatbot",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "React Simple Chatbot",
   "main": "dist/react-simple-chatbot.js",
   "scripts": {

tests/lib/ChatBot.spec.js

@@ -176,6 +176,11 @@ describe('ChatBot', () => {
           {
             id: '1',
             message: 'Hello World',
+            trigger: '2',
+          },
+          {
+            id: '2',
+            message: 'Bye',
             end: true,
           },
         ]}
@@ -196,6 +201,11 @@ describe('ChatBot', () => {
       wrapper.find(FloatButton).simulate('click');
       expect(wrapper.find(ChatBotContainer).props().opened).to.be.equal(true);
     });
+
+    it('should cache the steps', () => {
+      const data = JSON.parse(localStorage.getItem('rsc_cache'));
+      expect(data.renderedSteps.length).to.be.equal(2);
+    });
   });
 
   describe('Floating - Custom Opened', () => {
@@ -259,10 +269,5 @@ describe('ChatBot', () => {
       wrapper.find(FloatButton).simulate('click');
       expect(wrapper.find(ChatBotContainer).props().opened).to.be.equal(true);
     });
-
-    it('should cache the step', () => {
-      const data = JSON.parse(localStorage.getItem('rsc_cache'));
-      expect(data.renderedSteps.length).to.be.equal(1);
-    });
   });
 });

tests/lib/TextStep.spec.js

@@ -133,6 +133,38 @@ describe('TextStep', () => {
     });
   });
 
+  describe('Function text', () => {
+    const settings = {
+      step: {
+        id: '1',
+        message: () => 'Hello',
+        delay: 1000,
+        user: true,
+        bubbleColor: '#eee',
+        fontColor: '#000',
+        avatar: '',
+      },
+      isFirst: false,
+      isLast: true,
+      hideBotAvatar: false,
+      hideUserAvatar: false,
+      avatarStyle: {},
+      bubbleStyle: {},
+      triggerNextStep: () => {},
+    };
+
+    const wrapper = mount(<TextStep {...settings} />);
+    wrapper.setState({ loading: false });
+
+    it('should render bubble without avatar (not first)', () => {
+      expect(wrapper.find(Image).exists()).to.be.equal(false);
+    });
+
+    it('should render the message "Hello"', () => {
+      expect(wrapper.find(Bubble).text()).to.be.equal('Hello');
+    });
+  });
+
   describe('Component text', () => {
     const settings = {
       step: {