fix: BackgroundFlushPolicy doesn't flush the Application Backgrounded (#1050)

Author: sunitaprajapati89

examples/E2E/e2e/main.e2e.js

@@ -172,7 +172,7 @@ describe('#mainTest', () => {
 
     const platform = device.getPlatform();
 
-    expect(events).toHaveLength(platform === 'android' ? 4 : 3); // Track + Identify + App Launch (+ Backgrounded on Android)
+    expect(events).toHaveLength(4); // Track + Identify + App Launch + Backgrounded on Android
     expect(events).toHaveEventWith({ type: 'identify', userId: 'user_2' });
     expect(events).toHaveEventWith({ type: 'track', userId: 'user_2' });
     expect(events).toHaveEventWith({

packages/core/src/__tests__/internal/handleAppStateChange.test.ts

@@ -163,7 +163,7 @@ describe('SegmentClient #handleAppStateChange', () => {
     // @ts-ignore
     expect(client.appState).toBe('background');
 
-    expect(mockPlugin.execute).not.toHaveBeenCalled();
+    expect(mockPlugin.execute).toHaveBeenCalledTimes(1);
   });
 
   it('sends an event when unknown => inactive', async () => {
@@ -173,6 +173,6 @@ describe('SegmentClient #handleAppStateChange', () => {
     // @ts-ignore
     expect(client.appState).toBe('inactive');
 
-    expect(mockPlugin.execute).not.toHaveBeenCalled();
+    expect(mockPlugin.execute).toHaveBeenCalledTimes(1);
   });
 });

packages/core/src/analytics.ts

@@ -732,9 +732,10 @@ export class SegmentClient {
         void this.process(event);
         this.logger.info('TRACK (Application Opened) event saved', event);
       } else if (
-        this.appState === 'active' &&
+        (this.appState === 'active' || this.appState === 'unknown') && // Check if appState is 'active' or 'unknown'
         ['inactive', 'background'].includes(nextAppState)
       ) {
+        // Check if next app state is 'inactive' or 'background'
         const event = createTrackEvent({
           event: 'Application Backgrounded',
         });

packages/core/src/flushPolicies/__tests__/background-flush-policy.test.ts

@@ -1,35 +1,39 @@
-import { AppState, AppStateStatus } from 'react-native';
 import { BackgroundFlushPolicy } from '../background-flush-policy';
+import { FlushPolicyBase } from '../types';
+import { createTrackEvent } from '../../events';
 
 describe('BackgroundFlushPolicy', () => {
-  it('triggers a flush when reaching limit', () => {
-    let updateCallback = (_val: AppStateStatus) => {
-      return;
-    };
+  let policy: BackgroundFlushPolicy;
 
-    const addSpy = jest
-      .spyOn(AppState, 'addEventListener')
-      .mockImplementation((_action, callback) => {
-        updateCallback = callback;
-        return { remove: jest.fn() };
-      });
-
-    const policy = new BackgroundFlushPolicy();
-    policy.start();
-    const observer = jest.fn();
+  beforeEach(() => {
+    policy = new BackgroundFlushPolicy();
+  });
 
-    policy.shouldFlush.onChange(observer);
+  test('should be an instance of FlushPolicyBase', () => {
+    expect(policy).toBeInstanceOf(FlushPolicyBase);
+  });
 
-    expect(addSpy).toHaveBeenCalledTimes(1);
+  test('start() should do nothing', () => {
+    expect(policy.start()).toBeUndefined();
+  });
 
-    updateCallback('background');
-    expect(observer).toHaveBeenCalledWith(true);
-    observer.mockClear();
+  test('end() should do nothing', () => {
+    expect(policy.end()).toBeUndefined();
+  });
 
-    updateCallback('active');
-    expect(observer).not.toHaveBeenCalled();
+  test('onEvent() should set shouldFlush to true for "Application Backgrounded" event', () => {
+    const event = createTrackEvent({
+      event: 'Application Backgrounded',
+    });
+    policy.onEvent(event);
+    expect(policy.shouldFlush.value).toBe(true);
+  });
 
-    updateCallback('inactive');
-    expect(observer).toHaveBeenCalledWith(true);
+  test('onEvent() should not set shouldFlush for other events', () => {
+    const event = createTrackEvent({
+      event: 'Application Opened',
+    });
+    policy.onEvent(event);
+    expect(policy.shouldFlush.value).toBeFalsy();
   });
 });

packages/core/src/flushPolicies/background-flush-policy.ts

@@ -1,38 +1,21 @@
-import {
-  AppState,
-  AppStateStatus,
-  NativeEventSubscription,
-} from 'react-native';
 import type { SegmentEvent } from '../types';
 import { FlushPolicyBase } from './types';
 
 /**
  * StatupFlushPolicy triggers a flush right away on client startup
  */
 export class BackgroundFlushPolicy extends FlushPolicyBase {
-  private appStateSubscription?: NativeEventSubscription;
-  private appState: AppStateStatus = AppState.currentState;
-
   start() {
-    this.appStateSubscription = AppState.addEventListener(
-      'change',
-      (nextAppState) => {
-        if (
-          this.appState === 'active' &&
-          ['inactive', 'background'].includes(nextAppState)
-        ) {
-          // When the app goes into the background we will trigger a flush
-          this.shouldFlush.value = true;
-        }
-      }
-    );
+    // Nothing to do
   }
 
   onEvent(_event: SegmentEvent): void {
-    // Nothing to do
+    if ('event' in _event && _event.event === 'Application Backgrounded') {
+      this.shouldFlush.value = true;
+    }
   }
 
   end(): void {
-    this.appStateSubscription?.remove();
+    // Nothing to do
   }
 }