[CI-4365] Add Option to Pass Logged in User Id and other parameters to the JS-Client (#147)

* add option to pass ui to js-client

* lint

Author: Mudaafi

spec/hooks/useCioPlpProvider/useCioPlpProvider.server.test.js

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-filename-extension */
+import useCioPlpProvider from '../../../src/hooks/useCioPlpProvider';
+import { renderHookServerSide } from '../../test-utils.server';
+
+describe('Testing Hook on the server: useCioPlpProvider', () => {
+  beforeEach(() => {
+    const spy = jest.spyOn(console, 'error');
+    spy.mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it('Should return client when custom client is provided', () => {
+    const mockClient = { tracker: () => {} };
+    const { result } = renderHookServerSide(({ cioClient }) => useCioPlpProvider({ cioClient }), {
+      initialProps: { cioClient: mockClient },
+    });
+
+    expect(result.cioClient).toBe(mockClient);
+  });
+
+  it('Should return when clientOptions are provided', () => {
+    const key = 'test-key';
+    const clientOptions = {
+      serviceUrl: 'https://special.cnstrc.com',
+      quizzesServiceUrl: 'https://quizzes.cnstrc.com',
+      sessionId: 1,
+      clientId: 'id-1',
+      userId: 'ui-1',
+      segments: ['segment-1', 'segment-2'],
+      testCells: { test: 'cell' },
+      fetch: 'mock-fetch-fn',
+      trackingSendDelay: 400,
+      sendReferrerWithTrackingEvents: true,
+      beaconMode: false,
+      eventDispatcher: undefined,
+      networkParameters: { timeout: 1000 },
+    };
+
+    const { result } = renderHookServerSide(
+      ({ apiKey, options }) => useCioPlpProvider({ apiKey, options }),
+      {
+        initialProps: { apiKey: key, options: clientOptions },
+      },
+    );
+
+    expect(result.cioClient).toBe(null);
+  });
+});

spec/hooks/useCioPlpProvider/useCioPlpProvider.test.js

@@ -0,0 +1,65 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import useCioPlpProvider from '../../../src/hooks/useCioPlpProvider';
+
+describe('Testing Hook: useCioPlpProvider', () => {
+  it('Should return client when custom client is provided', () => {
+    const mockClient = { tracker: () => {} };
+    const { result } = renderHook(({ cioClient }) => useCioPlpProvider({ cioClient }), {
+      initialProps: { cioClient: mockClient },
+    });
+
+    expect(result.current.cioClient).toBe(mockClient);
+  });
+
+  test('Should pass custom client options if set', () => {
+    const key = 'test-key';
+    const clientOptions = {
+      serviceUrl: 'https://special.cnstrc.com',
+      quizzesServiceUrl: 'https://quizzes.cnstrc.com',
+      sessionId: 1,
+      clientId: 'id-1',
+      userId: 'ui-1',
+      segments: ['segment-1', 'segment-2'],
+      testCells: { test: 'cell' },
+      fetch: 'mock-fetch-fn',
+      trackingSendDelay: 400,
+      sendReferrerWithTrackingEvents: true,
+      beaconMode: false,
+      eventDispatcher: undefined,
+      networkParameters: { timeout: 1000 },
+    };
+
+    const { result } = renderHook(
+      ({ apiKey, options }) => useCioPlpProvider({ apiKey, cioClientOptions: options }),
+      {
+        initialProps: { apiKey: key, options: clientOptions },
+      },
+    );
+
+    const { cioClientOptions } = result.current;
+    expect(cioClientOptions).toEqual({
+      ...clientOptions,
+    });
+  });
+
+  test('Should update client if setCioClientOptions is called', async () => {
+    const key = 'test-key';
+
+    const { result } = renderHook(({ apiKey }) => useCioPlpProvider({ apiKey }), {
+      initialProps: { apiKey: key },
+    });
+
+    let firstRun = true;
+    await waitFor(() => {
+      const { cioClientOptions, setCioClientOptions, cioClient } = result.current;
+
+      if (firstRun) {
+        setCioClientOptions({ userId: 'test' });
+        firstRun = false;
+      }
+
+      expect(cioClientOptions.userId).toEqual('test');
+      expect(cioClient.options.userId).toEqual('test');
+    });
+  });
+});

src/hooks/useCioPlpProvider.ts

@@ -16,9 +16,10 @@ export default function useCioPlpProvider(
     urlHelpers,
     staticRequestConfigs = {},
     cioClient: customCioClient,
+    cioClientOptions: customCioClientOptions = {},
   } = props;
 
-  const [cioClientOptions, setCioClientOptions] = useState({});
+  const [cioClientOptions, setCioClientOptions] = useState(customCioClientOptions);
   const cioClient = useCioClient({ apiKey, cioClient: customCioClient, options: cioClientOptions });
 
   const contextValue = useMemo(

src/types.ts

@@ -211,6 +211,7 @@ export interface PlpBrowseResponse extends PlpSearchResponse {}
 export interface CioPlpProviderProps {
   apiKey: string;
   cioClient?: Nullable<ConstructorIOClient>;
+  cioClientOptions?: Omit<ConstructorClientOptions, 'apiKey' | 'version'>;
   formatters?: Partial<Formatters>;
   callbacks?: Partial<Callbacks>;
   itemFieldGetters?: Partial<ItemFieldGetters>;