Release v1.13.0

CHANGES.txt

@@ -1,3 +1,8 @@
+1.13.0 (May 24, 2024)
+ - Added a new `getStatus` helper function to retrieve the status properties of the SDK manager and clients: `isReady`, `isReadyFromCache`, `hasTimedout`, and `isDestroyed`.
+ - Added new `selectTreatmentAndStatus` and `selectTreatmentWithConfigAndStatus` selectors as alternatives to the `selectTreatmentValue` and `selectTreatmentWithConfig` selectors, respectively.
+   The new selectors retrieve an object with the treatment and the status properties of the client associated with the provided key, allowing conditional rendering based on the SDK status.
+
 1.12.0 (May 10, 2024)
  - Updated @splitsoftware/splitio package to version 10.26.0 that includes minor updates:
       - Added support for targeting rules based on semantic versions (https://semver.org/).
@@ -55,7 +60,7 @@
 
 1.6.0 (Jul 7, 2022)
  - Updated @splitsoftware/splitio dependency to version 10.20.0, which includes:
-      - Added a new config option to control the tasks that listen or poll for updates on feature flags and segments, via the new config sync.enabled . Running online Split will always pull the most recent updates upon initialization, this only affects updates fetching on a running instance. Useful when a consistent session experience is a must or to save resources when updates are not being used.
+      - Added a new config option to control the tasks that listen or poll for updates on feature flags and segments, via the new config `sync.enabled`. Running online Split will always pull the most recent updates upon initialization, this only affects updates fetching on a running instance. Useful when a consistent session experience is a must or to save resources when updates are not being used.
       - Updated telemetry logic to track the anonymous config for user consent flag set to declined or unknown.
       - Updated submitters logic, to avoid duplicating the post of impressions to Split cloud when the SDK is destroyed while its periodic post of impressions is running.
       - Added `scheduler.telemetryRefreshRate` property to SDK configuration, and deprecated `scheduler.metricsRefreshRate` property.
@@ -76,7 +81,7 @@
       - Updated localhost mode to emit SDK_READY_FROM_CACHE event in Browser when using localStorage (issue https://github.com/splitio/react-client/issues/34).
       - Updated streaming logic to use the newest version of our streaming service, including:
             - Integration with Auth service V2, connecting to the new channels and applying the received connection delay.
-            - Implemented handling of the new MySegmentsV2 notification types (SegmentRemoval, KeyList, Bounded and Unbounded)
+            - Implemented handling of the new MySegmentsV2 notification types (SegmentRemoval, KeyList, Bounded and Unbounded).
             - New control notification for environment scoped streaming reset.
  - Updated Enzyme and Jest development dependencies to fix vulnerabilities.
 
@@ -104,13 +109,13 @@
  - Added an optional callback parameter to `destroySplitSdk` action creator: `onDestroy`, to listen when the SDK has gracefully shut down.
 
 1.1.0 (May 11, 2020)
- - Bugfixing - incorrect evaluation of feature flags on browser when using `getTreatments` with a different user key than the default, caused by not waiting the fetch of segments.
+ - Bugfixing - Incorrect evaluation of feature flags on browser when using `getTreatments` with a different user key than the default, caused by not waiting the fetch of segments (Related to issue https://github.com/splitio/redux-client/issues/9).
  - Added `destroySplitSdk` action creator to gracefully shutdown the SDK.
  - Added two new status properties to split's piece of state: `hasTimedout` and `isDestroyed` to better reflect the current state of the associated factory.
 
 1.0.1 (April 6, 2020)
- - Updated dependencies to fix vulnerabilities
- - Bugfixing - support numbers as user keys
+ - Updated dependencies to fix vulnerabilities.
+ - Bugfixing - Support numbers as user keys.
 
 1.0.0 (January 24, 2020)
  - Initial public release!

README.md

@@ -21,7 +21,7 @@ import React from 'react';
 import { createStore, applyMiddleware, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
 import { splitReducer, initSplitSdk, getTreatments,
-  selectTreatmentValue, connectSplit } from '@splitsoftware/splitio-redux'
+  selectTreatmentAndStatus, connectSplit } from '@splitsoftware/splitio-redux'
 
 // Init Redux store
 const store = createStore(
@@ -47,12 +47,12 @@ store.dispatch(getTreatments({ splitNames: 'FEATURE_FLAG_NAME' }))
 
 // Connect your component to splitio's piece of state
 const MyComponent = connectSplit()(({ splitio }) => {
-  // Check SDK readiness using isReady property
-  if (!splitio.isReady)
-    return <div>Loading SDK ...</div>;
-
   // Select a treatment value
-  const treatment = selectTreatmentValue(splitio, 'FEATURE_FLAG_NAME')
+  const { treatment, isReady } = selectTreatmentAndStatus(splitio, 'FEATURE_FLAG_NAME')
+
+  // Check SDK client readiness using isReady property
+  if (!isReady) return <div>Loading SDK ...</div>;
+
   if (treatment === 'on') {
     // return JSX for 'on' treatment
   } else if (treatment === 'off') {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splitsoftware/splitio-redux",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "A library to easily use Split JS SDK with Redux and React Redux",
   "main": "lib/index.js",
   "module": "es/index.js",

src/__tests__/helpers.browser.test.ts

@@ -1,12 +1,14 @@
 /** Mocks */
-import { mockSdk } from './utils/mockBrowserSplitSdk';
+import { mockSdk, Event } from './utils/mockBrowserSplitSdk';
 jest.mock('@splitsoftware/splitio', () => {
   return { SplitFactory: mockSdk() };
 });
 
 /** Constants, types, utils */
 import { sdkBrowserConfig } from './utils/sdkConfigs';
+import { STATUS_INITIAL } from './utils/storeState';
 import {
+  getTreatments,
   initSplitSdk,
   splitSdk,
 } from '../asyncActions';
@@ -18,6 +20,7 @@ import {
   getSplit,
   getSplits,
   track,
+  getStatus,
 } from '../helpers';
 
 const featureFlagNames: string[] = ['split_1', 'split_2'];
@@ -171,3 +174,35 @@ describe('track', () => {
   });
 
 });
+
+describe('getStatus', () => {
+
+  beforeEach(() => {
+    splitSdk.factory = null;
+  });
+
+  it('should return the default status if the SDK was not initialized', () => {
+    expect(getStatus()).toEqual(STATUS_INITIAL);
+  });
+
+  it('should return the status of the client associated to the provided key', () => {
+    initSplitSdk({ config: sdkBrowserConfig });
+    getTreatments({ key: 'user_2', splitNames: ['split_1'] });
+    (splitSdk.factory as any).client().__emitter__.emit(Event.SDK_READY);
+    (splitSdk.factory as any).client('user_2').__emitter__.emit(Event.SDK_READY_FROM_CACHE);
+
+    // Main client
+    const MAIN_CLIENT_STATUS = { ...STATUS_INITIAL, isReady: true, isOperational: true };
+    expect(getStatus()).toEqual(MAIN_CLIENT_STATUS);
+    expect(getStatus(sdkBrowserConfig.core.key)).toEqual(MAIN_CLIENT_STATUS);
+    expect(getStatus({ matchingKey: sdkBrowserConfig.core.key as string, bucketingKey: '' })).toEqual(MAIN_CLIENT_STATUS);
+
+    // Client for user_2
+    const USER_2_STATUS = { ...STATUS_INITIAL, isReadyFromCache: true, isOperational: true };
+    expect(getStatus('user_2')).toEqual(USER_2_STATUS);
+    expect(getStatus({ matchingKey: 'user_2', bucketingKey: '' })).toEqual(USER_2_STATUS);
+
+    // Non-existing client
+    expect(getStatus('non_existing_key')).toEqual(STATUS_INITIAL);
+  });
+});

src/__tests__/helpers.node.test.ts

@@ -1,11 +1,12 @@
 /** Mocks */
-import { mockSdk } from './utils/mockNodeSplitSdk';
+import { mockSdk, Event } from './utils/mockNodeSplitSdk';
 jest.mock('@splitsoftware/splitio', () => {
   return { SplitFactory: mockSdk() };
 });
 
 /** Constants, types, utils */
 import { sdkNodeConfig } from './utils/sdkConfigs';
+import { STATUS_INITIAL } from './utils/storeState';
 import {
   initSplitSdk,
   splitSdk,
@@ -18,6 +19,7 @@ import {
   getSplit,
   getSplits,
   track,
+  getStatus,
 } from '../helpers';
 
 const featureFlagNames: string[] = ['split_1', 'split_2'];
@@ -143,3 +145,23 @@ describe('track', () => {
   });
 
 });
+
+describe('getStatus', () => {
+
+  beforeEach(() => {
+    splitSdk.factory = null;
+  });
+
+  it('should return the default status if the SDK was not initialized', () => {
+    expect(getStatus()).toEqual(STATUS_INITIAL);
+  });
+
+  it('should return the status of the main client', () => {
+    initSplitSdk({ config: sdkNodeConfig });
+    (splitSdk.factory as any).client().__emitter__.emit(Event.SDK_READY);
+
+    const MAIN_CLIENT_STATUS = { ...STATUS_INITIAL, isReady: true, isOperational: true };
+    expect(getStatus()).toEqual(MAIN_CLIENT_STATUS);
+    expect(getStatus('ignored_key_in_server_side')).toEqual(MAIN_CLIENT_STATUS);
+  });
+});

src/__tests__/index.test.ts

@@ -10,6 +10,8 @@ import {
   getSplits as exportedGetSplits,
   selectTreatmentValue as exportedSelectTreatmentValue,
   selectTreatmentWithConfig as exportedSelectTreatmentWithConfig,
+  selectTreatmentAndStatus as exportedSelectTreatmentAndStatus,
+  selectTreatmentWithConfigAndStatus as exportedSelectTreatmentWithConfigAndStatus,
   connectSplit as exportedConnectSplit,
   connectToggler as exportedConnectToggler,
   mapTreatmentToProps as exportedMapTreatmentToProps,
@@ -21,7 +23,7 @@ import {
 import { splitReducer } from '../reducer';
 import { initSplitSdk, getTreatments, destroySplitSdk, splitSdk } from '../asyncActions';
 import { track, getSplitNames, getSplit, getSplits } from '../helpers';
-import { selectTreatmentValue, selectTreatmentWithConfig } from '../selectors';
+import { selectTreatmentValue, selectTreatmentWithConfig, selectTreatmentAndStatus, selectTreatmentWithConfigAndStatus } from '../selectors';
 import { connectSplit } from '../react-redux/connectSplit';
 import { connectToggler, mapTreatmentToProps, mapIsFeatureOnToProps } from '../react-redux/connectToggler';
 
@@ -38,6 +40,8 @@ it('index should export modules', () => {
   expect(exportedGetSplits).toBe(getSplits);
   expect(exportedSelectTreatmentValue).toBe(selectTreatmentValue);
   expect(exportedSelectTreatmentWithConfig).toBe(selectTreatmentWithConfig);
+  expect(exportedSelectTreatmentAndStatus).toBe(selectTreatmentAndStatus);
+  expect(exportedSelectTreatmentWithConfigAndStatus).toBe(selectTreatmentWithConfigAndStatus);
   expect(exportedConnectSplit).toBe(connectSplit);
   expect(exportedConnectToggler).toBe(connectToggler);
   expect(exportedMapTreatmentToProps).toBe(mapTreatmentToProps);

src/__tests__/selectors.test.ts

@@ -35,7 +35,7 @@ describe('selectTreatmentValue', () => {
     expect(selectTreatmentValue(STATE_READY.splitio, SPLIT_INVALID, USER_1, 'some_value')).toBe('some_value');
   });
 
-  it('returns "control" and log error if the given splitState is invalid', () => {
+  it('returns "control" and logs error if the given splitState is invalid', () => {
     const errorSpy = jest.spyOn(console, 'error');
     expect(selectTreatmentValue((STATE_READY as unknown as ISplitState), SPLIT_1, USER_INVALID)).toBe(CONTROL);
     expect(errorSpy).toBeCalledWith(ERROR_SELECTOR_NO_SPLITSTATE);
@@ -58,14 +58,14 @@ describe('selectTreatmentWithConfig', () => {
     expect(selectTreatmentWithConfig(STATE_READY.splitio, SPLIT_INVALID, USER_1)).toBe(CONTROL_WITH_CONFIG);
   });
 
-  it('returns the passed default treatment insteaad of "control" if the given feature flag name or key are invalid', () => {
+  it('returns the passed default treatment instead of "control" if the given feature flag name or key are invalid', () => {
     const DEFAULT_TREATMENT = { treatment: 'some_value', config: 'some_config' };
 
     expect(selectTreatmentWithConfig(STATE_READY.splitio, SPLIT_1, USER_INVALID, DEFAULT_TREATMENT)).toBe(DEFAULT_TREATMENT);
     expect(selectTreatmentWithConfig(STATE_READY.splitio, SPLIT_INVALID, USER_1, DEFAULT_TREATMENT)).toBe(DEFAULT_TREATMENT);
   });
 
-  it('returns "control" and log error if the given splitState is invalid', () => {
+  it('returns "control" and logs error if the given splitState is invalid', () => {
     const errorSpy = jest.spyOn(console, 'error');
     expect(selectTreatmentWithConfig((STATE_READY as unknown as ISplitState), SPLIT_1, USER_INVALID)).toBe(CONTROL_WITH_CONFIG);
     expect(errorSpy).toBeCalledWith(ERROR_SELECTOR_NO_SPLITSTATE);

src/__tests__/selectorsWithStatus.test.ts

@@ -0,0 +1,100 @@
+/** Mocks */
+import { SPLIT_1, SPLIT_2, STATE_READY, USER_1 } from './utils/storeState';
+import { mockSdk, Event } from './utils/mockBrowserSplitSdk';
+jest.mock('@splitsoftware/splitio', () => {
+  return { SplitFactory: mockSdk() };
+});
+
+import mockStore from './utils/mockStore';
+import { STATE_INITIAL, STATUS_INITIAL } from './utils/storeState';
+import { sdkBrowserConfig } from './utils/sdkConfigs';
+import { initSplitSdk, getTreatments, splitSdk } from '../asyncActions';
+
+/** Constants */
+import { ON, CONTROL, CONTROL_WITH_CONFIG, ERROR_SELECTOR_NO_SPLITSTATE } from '../constants';
+
+/** Test targets */
+import {
+  selectTreatmentAndStatus,
+  selectTreatmentWithConfigAndStatus
+} from '../selectors';
+
+describe('selectTreatmentAndStatus & selectTreatmentWithConfigAndStatus', () => {
+
+  const errorSpy = jest.spyOn(console, 'error');
+
+  beforeEach(() => {
+    errorSpy.mockClear();
+  });
+
+  it('if Split state is invalid or SDK was not initialized, returns default treatment and initial status', () => {
+    const DEFAULT_TREATMENT = { treatment: 'some_value', config: 'some_config' };
+
+    expect(selectTreatmentWithConfigAndStatus({} as any, SPLIT_1, USER_1, DEFAULT_TREATMENT)).toEqual({
+      treatment: DEFAULT_TREATMENT,
+      ...STATUS_INITIAL,
+    });
+    expect(errorSpy).toHaveBeenCalledWith(ERROR_SELECTOR_NO_SPLITSTATE);
+    errorSpy.mockClear();
+
+    expect(selectTreatmentAndStatus(STATE_INITIAL.splitio, SPLIT_1, USER_1, 'default_value')).toEqual({
+      treatment: 'default_value',
+      ...STATUS_INITIAL,
+    });
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
+  it('if getTreatments action was not dispatched for the provided feature flag and key, returns default treatment and client status', () => {
+    const store = mockStore(STATE_INITIAL);
+    store.dispatch<any>(initSplitSdk({ config: sdkBrowserConfig }));
+    (splitSdk.factory as any).client().__emitter__.emit(Event.SDK_READY);
+
+    expect(selectTreatmentAndStatus(STATE_INITIAL.splitio, SPLIT_1)).toEqual({
+      treatment: CONTROL,
+      // status of main client:
+      ...STATUS_INITIAL, isReady: true, isOperational: true,
+    });
+
+    expect(selectTreatmentAndStatus(STATE_INITIAL.splitio, SPLIT_1, USER_1, 'some_value')).toEqual({
+      treatment: 'some_value',
+      // USER_1 client has not been initialized yet:
+      ...STATUS_INITIAL,
+    });
+
+    store.dispatch<any>(getTreatments({ key: USER_1, splitNames: [SPLIT_2] }));
+    (splitSdk.factory as any).client(USER_1).__emitter__.emit(Event.SDK_READY_FROM_CACHE);
+
+    expect(selectTreatmentWithConfigAndStatus(STATE_INITIAL.splitio, SPLIT_2, USER_1)).toEqual({
+      treatment: CONTROL_WITH_CONFIG,
+      // status of shared client:
+      ...STATUS_INITIAL, isReadyFromCache: true, isOperational: true,
+    });
+
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
+  it('happy path: returns the treatment value and status of the client', () => {
+    // The following actions result in STATE_READY state:
+    const store = mockStore();
+    store.dispatch<any>(initSplitSdk({ config: sdkBrowserConfig }));
+    (splitSdk.factory as any).client().__emitter__.emit(Event.SDK_READY);
+    (splitSdk.factory as any).client(USER_1).__emitter__.emit(Event.SDK_READY_FROM_CACHE);
+    store.dispatch<any>(getTreatments({ splitNames: [SPLIT_1] }));
+    store.dispatch<any>(getTreatments({ key: USER_1, splitNames: [SPLIT_2] }));
+
+    expect(selectTreatmentAndStatus(STATE_READY.splitio, SPLIT_1)).toEqual({
+      treatment: ON,
+      ...STATUS_INITIAL,
+      isReady: true, isOperational: true,
+    });
+
+    expect(selectTreatmentWithConfigAndStatus(STATE_READY.splitio, SPLIT_2, USER_1)).toEqual({
+      treatment: STATE_READY.splitio.treatments[SPLIT_2][USER_1],
+      ...STATUS_INITIAL,
+      isReadyFromCache: true, isOperational: true,
+    });
+
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
+});

src/__tests__/utils/mockStore.ts

@@ -4,6 +4,7 @@ import configureMockStore from 'redux-mock-store';
 const middlewares: any[] = [thunk];
 
 /**
- * Utils to not call requires files every time that we need mock the store
+ * redux-mock-store is designed to test the action-related logic, not the reducer-related one. In other words, it does not update the Redux store.
+ * Use storeState.ts for mocks of the Redux store state.
  */
 export default configureMockStore(middlewares);