AB testing client condition calculation (#297)

Also now we know how to handle predicates in conditions
+ tests
fixes descope/etc#2333

packages/core-js-sdk/src/sdk/types.ts

@@ -239,6 +239,7 @@ export type Options = {
   samlIdpStateId?: string;
   samlIdpUsername?: string;
   ssoAppId?: string;
+  abTestingKey?: number;
 };
 
 export type ResponseData = Record<string, any>;

packages/web-component/src/lib/descope-wc/DescopeWc.ts

@@ -24,6 +24,7 @@ import {
 } from '../helpers';
 import { calculateConditions, calculateCondition } from '../helpers/conditions';
 import { getLastAuth, setLastAuth } from '../helpers/lastAuth';
+import { getABTestingKey } from '../helpers/abTestingKey';
 import { IsChanged } from '../helpers/state';
 import { disableWebauthnButtons } from '../helpers/templates';
 import {
@@ -160,6 +161,7 @@ class DescopeWc extends BaseDescopeWc {
 
     let startScreenId: string;
     let conditionInteractionId: string;
+    const abTestingKey = getABTestingKey();
     const loginId = this.sdk.getLastUserLoginId();
     const flowConfig = await this.getFlowConfig();
 
@@ -175,13 +177,13 @@ class DescopeWc extends BaseDescopeWc {
     if (!executionId) {
       if (flowConfig.conditions) {
         ({ startScreenId, conditionInteractionId } = calculateConditions(
-          { loginId, code, token },
+          { loginId, code, token, abTestingKey },
           flowConfig.conditions
         ));
       } else if (flowConfig.condition) {
         ({ startScreenId, conditionInteractionId } = calculateCondition(
           flowConfig.condition,
-          { loginId, code, token }
+          { loginId, code, token, abTestingKey }
         ));
       } else {
         startScreenId = flowConfig.startScreenId;
@@ -219,6 +221,7 @@ class DescopeWc extends BaseDescopeWc {
             ssoAppId,
             ...(redirectUrl && { redirectUrl }),
             lastAuth: getLastAuth(loginId),
+            abTestingKey,
           },
           conditionInteractionId,
           '',
@@ -421,6 +424,7 @@ class DescopeWc extends BaseDescopeWc {
             ssoAppId,
             lastAuth,
             preview: this.preview,
+            abTestingKey,
             ...(redirectUrl && { redirectUrl }),
           },
           conditionInteractionId,

packages/web-component/src/lib/helpers/abTestingKey.ts

@@ -0,0 +1,11 @@
+const LOCAL_STORAGE_AB_TESTING_KEY = 'dls_ab_testing_id';
+
+export const getABTestingKey = (): number => {
+  const abTestingKey = localStorage.getItem(LOCAL_STORAGE_AB_TESTING_KEY);
+  if (!abTestingKey) {
+    const generatedKey = Math.floor(Math.random() * 100 + 1);
+    localStorage.setItem(LOCAL_STORAGE_AB_TESTING_KEY, generatedKey.toString());
+    return generatedKey;
+  }
+  return Number(abTestingKey);
+};

packages/web-component/src/lib/helpers/conditions.ts

@@ -15,6 +15,12 @@ const conditionsMap: ConditionsMap = {
     'is-true': (ctx) => !!ctx.token,
     'is-false': (ctx) => !ctx.token,
   },
+  abTestingKey: {
+    'greater-than': (ctx, predicate: number) =>
+      (ctx.abTestingKey || 0) > predicate,
+    'less-than': (ctx, predicate: number) =>
+      (ctx.abTestingKey || 0) < predicate,
+  },
 };
 
 export const calculateCondition = (
@@ -25,7 +31,9 @@ export const calculateCondition = (
   if (!checkFunc) {
     return {};
   }
-  const conditionResult = checkFunc(ctx) ? condition.met : condition.unmet;
+  const conditionResult = checkFunc(ctx, condition.predicate)
+    ? condition.met
+    : condition.unmet;
   return {
     startScreenId: conditionResult?.screenId,
     conditionInteractionId: conditionResult?.interactionId,
@@ -37,12 +45,12 @@ export const calculateConditions = (
   ctx: Context,
   conditions?: ClientCondition[]
 ) => {
-  const conditionResult = conditions?.find(({ key, operator }) => {
+  const conditionResult = conditions?.find(({ key, operator, predicate }) => {
     if (key === elseInteractionId) {
       return true;
     }
     const checkFunc = conditionsMap[key]?.[operator];
-    return !!checkFunc?.(ctx);
+    return !!checkFunc?.(ctx, predicate);
   });
   return !conditionResult
     ? {}

packages/web-component/src/lib/types.ts

@@ -110,6 +110,7 @@ export interface ClientConditionResult {
 export interface ClientCondition {
   operator: Operator;
   key: string;
+  predicate?: string | number;
   met: ClientConditionResult;
   unmet?: ClientConditionResult;
 }
@@ -118,9 +119,13 @@ export type AutoFocusOptions = true | false | 'skipFirstScreen';
 
 export type ThemeOptions = 'light' | 'dark' | 'os';
 
-export type Key = 'lastAuth.loginId' | 'idpInitiated' | 'externalToken';
+export type Key =
+  | 'lastAuth.loginId'
+  | 'idpInitiated'
+  | 'externalToken'
+  | 'abTestingKey';
 
-type CheckFunction = (ctx: Context) => boolean;
+type CheckFunction = (ctx: Context, predicate?: string | number) => boolean;
 
 export type ConditionsMap = {
   [key in Key]: {
@@ -132,6 +137,7 @@ export interface Context {
   loginId?: string;
   code?: string;
   token?: string;
+  abTestingKey?: number;
 }
 
 export interface ILogger {

packages/web-component/test/descope-wc.test.ts

@@ -29,6 +29,7 @@ import DescopeWc from '../src/lib/descope-wc';
 import * as helpers from '../src/lib/helpers/helpers';
 // eslint-disable-next-line import/no-namespace
 import { generateSdkResponse } from './testUtils';
+import { getABTestingKey } from '../src/lib/helpers/abTestingKey';
 
 jest.mock('@descope/web-js-sdk');
 
@@ -97,6 +98,8 @@ Object.defineProperty(window.history, 'replaceState', {
   },
 });
 
+const abTestingKey = getABTestingKey();
+
 describe('web-component', () => {
   beforeEach(() => {
     configContent = {
@@ -540,6 +543,7 @@ describe('web-component', () => {
       expect(startMock).toHaveBeenCalledWith(
         'sign-in',
         {
+          abTestingKey,
           lastAuth: {},
           redirectUrl: 'http://custom.url',
           oidcIdpStateId: null,
@@ -1829,6 +1833,7 @@ describe('web-component', () => {
         expect(startMock).toBeCalledWith(
           'sign-in',
           {
+            abTestingKey,
             lastAuth: { authMethod: 'otp' },
             oidcIdpStateId: null,
             samlIdpStateId: null,
@@ -1876,6 +1881,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             samlIdpStateId: null,
             samlIdpUsername: null,
@@ -1962,6 +1968,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             redirectAuth: undefined,
             tenant: undefined,
@@ -2032,6 +2039,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             samlIdpStateId: null,
             samlIdpUsername: null,
@@ -2068,6 +2076,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             redirectAuth: { callbackUrl: callback, codeChallenge: challenge },
             tenant: undefined,
@@ -2102,6 +2111,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: 'abcdefgh',
             samlIdpStateId: null,
             samlIdpUsername: null,
@@ -2217,6 +2227,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             samlIdpStateId: 'abcdefgh',
             samlIdpUsername: null,
@@ -2253,6 +2264,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             samlIdpStateId: 'abcdefgh',
             samlIdpUsername: 'dummyUser',
@@ -2314,6 +2326,7 @@ describe('web-component', () => {
         expect(startMock).toHaveBeenCalledWith(
           'sign-in',
           {
+            abTestingKey,
             oidcIdpStateId: null,
             samlIdpStateId: null,
             samlIdpUsername: null,
@@ -2363,6 +2376,7 @@ describe('web-component', () => {
       expect(startMock).toHaveBeenCalledWith(
         'sign-in',
         {
+          abTestingKey,
           oidcIdpStateId: null,
           samlIdpStateId: null,
           samlIdpUsername: null,
@@ -2422,6 +2436,7 @@ describe('web-component', () => {
       expect(startMock).toHaveBeenCalledWith(
         'sign-in',
         {
+          abTestingKey,
           oidcIdpStateId: null,
           samlIdpStateId: null,
           samlIdpUsername: null,
@@ -2441,7 +2456,7 @@ describe('web-component', () => {
     );
   });
 
-  it('Should fetch met screen when second condition is met', async () => {
+  it('Should fetch met screen when second condition is met (also checks conditions with predicates)', async () => {
     startMock.mockReturnValueOnce(generateSdkResponse());
     localStorage.setItem(
       DESCOPE_LAST_AUTH_LOCAL_STORAGE_KEY,
@@ -2465,12 +2480,13 @@ describe('web-component', () => {
               },
             },
             {
-              key: 'lastAuth.loginId',
+              key: 'abTestingKey',
               met: {
                 interactionId: 'gbutpyzvtgs',
                 screenId: 'met',
               },
-              operator: 'not-empty',
+              operator: 'greater-than',
+              predicate: abTestingKey - 1,
               unmet: {
                 interactionId: 'ELSE',
                 screenId: 'unmet',

packages/web-js-sdk/src/sdk/flow.ts

@@ -12,6 +12,7 @@ type Options = Pick<
   | 'samlIdpUsername'
   | 'ssoAppId'
   | 'preview'
+  | 'abTestingKey'
 > & {
   lastAuth?: Omit<CoreSdkFlowStartArgs[1]['lastAuth'], 'loginId' | 'name'>;
 };