From 17da891beadb0c8502ffc9a9d1b01498c9147ea5 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 18 Oct 2017 02:34:42 +0800
Subject: [PATCH] Fix issue 59 (#60)

* e2e test - will dispatch different data if props changed

* Fix Issue #59 dispatch after state updates should be reflected in tracking data

* Fix eslint

* Fix eslint

* Fix eslint
---
 src/__tests__/e2e.test.js             | 53 +++++++++++++++++++++++++++
 src/withTrackingComponentDecorator.js | 30 +++++++++------
 2 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/e2e.test.js b/src/__tests__/e2e.test.js
index ff2982b..d237f0e 100644
--- a/src/__tests__/e2e.test.js
+++ b/src/__tests__/e2e.test.js
@@ -442,4 +442,57 @@ describe('e2e', () => {
 
     expect(global.console.error).toHaveBeenCalledTimes(1);
   });
+
+  it('will dispatch different data if props changed', () => {
+    @track(props => ({ data: props.data }))
+    class Top extends React.Component {
+      render() {
+        return this.props.children;
+      }
+    }
+
+    @track({ page: 'Page' })
+    class Page extends React.Component {
+      @track({ event: 'buttonClick' })
+      handleClick = jest.fn();
+      render() {
+        return <span onClick={this.handleClick}>Click Me</span>; // eslint-disable-line jsx-a11y/no-static-element-interactions
+      }
+    }
+
+    @track({}, { dispatch })
+    class App extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { data: 1 };
+      }
+      render() {
+        return (
+          <div>
+            <button onClick={() => this.setState({ data: 2 })} />
+            <Top data={this.state.data}>
+              <Page />
+            </Top>
+          </div>
+        );
+      }
+    }
+
+    const wrappedApp = mount(<App />);
+
+    wrappedApp.find('span').simulate('click');
+    expect(dispatch).toHaveBeenCalledWith({
+      data: 1,
+      event: 'buttonClick',
+      page: 'Page',
+    });
+
+    wrappedApp.find('button').simulate('click');
+    wrappedApp.find('span').simulate('click');
+    expect(dispatch).toHaveBeenCalledWith({
+      data: 2,
+      event: 'buttonClick',
+      page: 'Page',
+    });
+  });
 });
diff --git a/src/withTrackingComponentDecorator.js b/src/withTrackingComponentDecorator.js
index 8946dca..dc15046 100644
--- a/src/withTrackingComponentDecorator.js
+++ b/src/withTrackingComponentDecorator.js
@@ -30,17 +30,7 @@ export default function withTrackingComponentDecorator(
           );
         }
 
-        this.ownTrackingData =
-          typeof trackingData === 'function'
-            ? trackingData(props)
-            : trackingData;
-        this.contextTrackingData =
-          (this.context.tracking && this.context.tracking.data) || {};
-        this.trackingData = merge(
-          {},
-          this.contextTrackingData,
-          this.ownTrackingData
-        );
+        this.computeTrackingData(props, context);
       }
 
       static displayName = `WithTracking(${decoratedComponentName})`;
@@ -64,6 +54,20 @@ export default function withTrackingComponentDecorator(
         );
       }
 
+      computeTrackingData(props, context) {
+        this.ownTrackingData =
+          typeof trackingData === 'function'
+            ? trackingData(props)
+            : trackingData;
+        this.contextTrackingData =
+          (context.tracking && context.tracking.data) || {};
+        this.trackingData = merge(
+          {},
+          this.contextTrackingData,
+          this.ownTrackingData
+        );
+      }
+
       getChildContext() {
         return {
           tracking: {
@@ -103,6 +107,10 @@ export default function withTrackingComponentDecorator(
         }
       }
 
+      componentWillReceiveProps(nextProps, nextContext) {
+        this.computeTrackingData(nextProps, nextContext);
+      }
+
       tracking = {
         trackEvent: this.trackEvent,
         getTrackingData: () => this.trackingData,