Fix "ping" event

client/src/plugins/user-journey-statistics/UserJourneyStatistics.js

@@ -47,8 +47,6 @@ export default class UserJourneyStatistics extends PureComponent {
     this.MIXPANEL_TOKEN = Flags.get(MIXPANEL_TOKEN) || DEFINED_MIXPANEL_TOKEN;
     this.MIXPANEL_STAGE = Flags.get(MIXPANEL_STAGE) || DEFINED_MIXPANEL_STAGE;
 
-    this._isEnabled = false;
-
     this._buttonRef = React.createRef(null);
 
     this.mixpanel = MixpanelHandler.getInstance();
@@ -70,21 +68,27 @@ export default class UserJourneyStatistics extends PureComponent {
   }
 
   isEnabled = () => {
-    return this._isEnabled;
+    return MixpanelHandler.getInstance().isEnabled();
   };
 
   enable = () => {
     log('Enabling');
 
     this.mixpanel.enable(this.MIXPANEL_TOKEN, this._editorID, this.MIXPANEL_STAGE);
-    this._isEnabled = true;
+
+    this.emit('telemetry.enabled');
   };
 
+  emit(event, payload) {
+    this.props.triggerAction('emit-event', { type: event, payload });
+  }
+
   disable = () => {
     log('Disabling.');
 
     this.mixpanel.disable();
-    this._isEnabled = false;
+
+    this.emit('telemetry.disabled');
   };
 
   async setEditorId() {

client/src/plugins/user-journey-statistics/__tests__/UserJourneyStatisticsSpec.js

@@ -176,6 +176,8 @@ describe('<UserJourneyStatistics>', () => {
       }
     });
 
+    const emitSpy = sinon.stub(instance, 'emit');
+
     const mixpanel = instance.mixpanel;
 
     expect(mixpanel.isEnabled()).to.be.false;
@@ -185,6 +187,7 @@ describe('<UserJourneyStatistics>', () => {
 
     // then
     expect(mixpanel.isEnabled()).to.be.true;
+    expect(emitSpy).to.have.been.calledWith('telemetry.enabled');
   });
 
 
@@ -202,6 +205,8 @@ describe('<UserJourneyStatistics>', () => {
       }
     });
 
+    const emitSpy = sinon.stub(instance, 'emit');
+
     const mixpanel = instance.mixpanel;
 
     // when
@@ -211,6 +216,7 @@ describe('<UserJourneyStatistics>', () => {
 
     // then
     expect(mixpanel.isEnabled()).to.eql(false);
+    expect(emitSpy).to.have.been.calledWith('telemetry.disabled');
   });
 
 
@@ -363,7 +369,8 @@ function createJourneyStatistics(props = {}) {
         });
       }
     },
-    _getGlobal: () => ({})
+    _getGlobal: () => ({}),
+    triggerAction: () => {}
   });
 }
 

client/src/plugins/user-journey-statistics/event-handlers/PingEventHandler.js

@@ -16,7 +16,8 @@ export default class PingEventHandler {
   constructor(props) {
 
     const {
-      track
+      track,
+      subscribe
     } = props;
 
     this.track = track;
@@ -25,7 +26,13 @@ export default class PingEventHandler {
     this.sentInitially = false;
     this._intervalID = null;
 
-    this.configurePing();
+    subscribe('telemetry.enabled', () => {
+      this.configurePing();
+    });
+
+    subscribe('telemetry.disabled', () => {
+      clearInterval(this._intervalID);
+    });
   }
 
   getPlugins = () => {

client/src/plugins/user-journey-statistics/event-handlers/__tests__/PingEventHandlerSpec.js

@@ -19,23 +19,51 @@ import Flags from '../../../../util/Flags';
 describe('<PingEventHandlerSpec>', () => {
 
   let track = sinon.spy();
+  const subscribe = sinon.spy();
 
   beforeEach(() => {
     const getGlobal = () => ({
       appPlugins: [ { name: 'pluginName' } ]
     });
 
-    new PingEventHandler({ track, getGlobal });
+    new PingEventHandler({ track, getGlobal, subscribe });
 
     MixpanelHandler.getInstance().enable('token', 'id', 'stage');
   });
 
   afterEach(sinon.restore);
 
 
+  describe('should subscribe', () => {
+
+    it('should subscribe to telemetry.enabled', () => {
+      expect(subscribe.getCall(0).args[0]).to.eql('telemetry.enabled');
+    });
+
+
+    it('should subscribe to telemetry.disabled', () => {
+      expect(subscribe.getCall(1).args[0]).to.eql('telemetry.disabled');
+    });
+
+  });
+
+
   describe('should send', () => {
 
-    it('should send initially', () => {
+    it('should not send before enabled', async () => {
+
+      // then
+      expect(track).to.not.have.been.called;
+    });
+
+
+    it('should send initially', async () => {
+
+      // given
+      const handleTelemetryActivation = subscribe.getCall(0).args[1];
+
+      // when
+      await handleTelemetryActivation();
 
       // then
       expect(track).to.have.been.called;
@@ -57,7 +85,13 @@ describe('<PingEventHandlerSpec>', () => {
 
   describe('plugins', () => {
 
-    it('should send installed plugins', () => {
+    it('should send installed plugins', async () => {
+
+      // given
+      const handleTelemetryActivation = subscribe.getCall(0).args[1];
+
+      // when
+      await handleTelemetryActivation();
 
       // then
       expect(track).to.have.been.calledWith('ping', {
@@ -70,22 +104,32 @@ describe('<PingEventHandlerSpec>', () => {
 
   describe('flags', () => {
 
+    let track;
+
+    const handlePing = async () => {
+      track = sinon.spy();
+      const subscribe = sinon.spy();
+
+      new PingEventHandler({ track, getGlobal: () => ({}), subscribe });
+      const handleTelemetryActivation = subscribe.getCall(0).args[1];
+
+      await handleTelemetryActivation();
+    };
+
     afterEach(() => {
       Flags.reset();
     });
 
-    it('should send set flags', () => {
+    it('should send set flags', async () => {
 
       // given
       Flags.init({
         myFlagA: true,
         myFlagB: false
       });
 
-      const track = sinon.spy();
-
       // when
-      new PingEventHandler({ track, getGlobal: () => ({}) });
+      await handlePing();
 
       // then
       expect(track).to.have.been.calledWith('ping', {
@@ -98,17 +142,15 @@ describe('<PingEventHandlerSpec>', () => {
     });
 
 
-    it('should mask non-boolean flags', () => {
+    it('should mask non-boolean flags', async () => {
 
       // given
       Flags.init({
         flagWithPrivateDataSet: 'my/custom/filepath'
       });
 
-      const track = sinon.spy();
-
       // when
-      new PingEventHandler({ track, getGlobal: () => ({}) });
+      await handlePing();
 
       // then
       expect(track).to.have.been.calledWith('ping', {
@@ -118,17 +160,15 @@ describe('<PingEventHandlerSpec>', () => {
     });
 
 
-    it('should not overwrite original Flags through masking', () => {
+    it('should not overwrite original Flags through masking', async () => {
 
       // given
       Flags.init({
         flagWithPrivateDataSet: 'my/custom/filepath'
       });
 
-      const track = sinon.spy();
-
       // when
-      new PingEventHandler({ track, getGlobal: () => ({}) });
+      await handlePing();
 
       // then
       expect(Flags.data.flagWithPrivateDataSet).to.eql('my/custom/filepath');