Added test to validate bugfix

Author: EmilianoSanchez

CHANGES.txt

@@ -2,6 +2,7 @@
  - Added support for targeting rules based on large segments for browsers.
  - Updated @splitsoftware/splitio package to version 11.0.0 that includes major updates, and updated some transitive dependencies for vulnerability fixes.
  - Renamed distribution folders from `/lib` to `/cjs` for CommonJS build, and `/es` to `/esm` for EcmaScript Modules build.
+ - Bugfixing - When the `config` prop is provided, the `SplitFactoryProvider` now makes the SDK factory and client instances available in the context immediately during the initial render, instead of waiting for the first SDK event. This change fixes a bug in the `useTrack` hook, which was not retrieving the client's `track` method during the initial render but rather a no-op function.
  - BREAKING CHANGES:
       - Updated error handling: using the library modules without wrapping them in a `SplitFactoryProvider` component will now throw an error instead of logging it, as the modules requires the `SplitContext` to work properly.
       - Removed the `core.trafficType` configuration option and the `trafficType` parameter from the SDK `client()` method, `useSplitClient`, `useTrack`, and `SplitClient` component. This is because traffic types can no longer be bound to SDK clients in JavaScript SDK v11.0.0, and so the traffic type must be provided as first argument in the `track` method calls.

package.json

@@ -26,7 +26,7 @@
     "check": "npm run check:lint && npm run check:types",
     "check:lint": "eslint 'src/**/*.ts*'",
     "check:types": "tsc --noEmit",
-    "test": "jest src",
+    "test": "jest src --silent",
     "test:watch": "npm test -- --watch",
     "test:coverage": "jest src --coverage",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",

src/__tests__/SplitClient.test.tsx

@@ -214,8 +214,7 @@ describe('SplitClient', () => {
             count++;
 
             // side effect in the render phase
-            if (!(client as IClientWithContext).__getStatus().isReady) {
-              console.log('emit');
+            if (!(client as any).__getStatus().isReady) {
               (client as any).__emitter__.emit(Event.SDK_READY);
             }
 

src/__tests__/useTrack.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { render, act } from '@testing-library/react';
 
 /** Mocks */
-import { mockSdk } from './testUtils/mockSplitFactory';
+import { mockSdk, Event, getLastInstance } from './testUtils/mockSplitFactory';
 jest.mock('@splitsoftware/splitio/client', () => {
   return { SplitFactory: mockSdk() };
 });
@@ -13,6 +13,7 @@ import { sdkBrowser } from './testUtils/sdkConfigs';
 import { SplitFactoryProvider } from '../SplitFactoryProvider';
 import { SplitClient } from '../SplitClient';
 import { useTrack } from '../useTrack';
+import { useSplitClient } from '../useSplitClient';
 import { EXCEPTION_NO_SFP } from '../constants';
 
 describe('useTrack', () => {
@@ -22,7 +23,34 @@ describe('useTrack', () => {
   const value = 10;
   const properties = { prop1: 'prop1' };
 
-  test('returns the track method of the client at Split context updated by SplitFactoryProvider.', () => {
+  test('returns the track method of the client at Split context updated by SplitFactoryProvider (config prop).', () => {
+    render(
+      <SplitFactoryProvider config={sdkBrowser} >
+        {React.createElement(() => {
+          const clientTrack = useTrack();
+
+          const { client } = useSplitClient();
+          expect(clientTrack).toBe(client!.track);
+
+          clientTrack(tt, eventType, value, properties);
+
+          useEffect(() => {
+            clientTrack(tt, eventType, value, properties);
+          }, [clientTrack]);
+          return null;
+        })}
+      </SplitFactoryProvider>,
+    );
+
+    act(() => getLastInstance(SplitFactory).client().__emitter__.emit(Event.SDK_READY_FROM_CACHE));
+    act(() => getLastInstance(SplitFactory).client().__emitter__.emit(Event.SDK_READY));
+
+    const track = getLastInstance(SplitFactory).client().track as jest.Mock;
+    expect(track).toBeCalledWith(tt, eventType, value, properties);
+    expect(track).toBeCalledTimes(4); // 3 from render + 1 from useEffect (`clientTrack` dependency doesn't change)
+  });
+
+  test('returns the track method of the client at Split context updated by SplitFactoryProvider (factory prop).', () => {
     const outerFactory = SplitFactory(sdkBrowser);
     let clientTrack;
     let trackResult;

src/useTrack.ts

@@ -4,10 +4,11 @@ import { useSplitClient } from './useSplitClient';
 const noOpFalse = () => false;
 
 /**
- * 'useTrack' is a hook that returns the track method from a Split client.
- * It uses the 'useContext' hook to access the client from the Split context.
+ * 'useTrack' is a hook that retrieves the track method from a Split client.
+ * It uses the 'useSplitClient' hook to access the client from the Split context.
+ * Basically, it is a shortcut for `const track = useSplitClient().client?.track || (() => false);`.
  *
- * @returns A track function bound to a Split client. If the client is not available, the result is a no-op function that returns false.
+ * @returns A track function of the Split client. If the client is not available, the result is a no-op function that returns false.
  *
  * @see {@link https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#track}
  */