[FSSDK-9605] add sendBeacon event dispatcher and test (#873)

Author: raju-opti

packages/optimizely-sdk/jest.config.js

@@ -1,8 +1,16 @@
 module.exports = {
   "transform": {
-    "^.+\\.tsx?$": "ts-jest"
+    "^.+\\.(ts|tsx|js|jsx)$": "ts-jest",
   },
   "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.tsx?$",
+  moduleNameMapper: {
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    "uuid": require.resolve('uuid'),
+  },
+  "testPathIgnorePatterns" : [
+    "tests/testUtils.ts",
+    "dist"
+  ],
   "moduleFileExtensions": [
     "ts",
     "tsx",
@@ -11,4 +19,6 @@ module.exports = {
     "json",
     "node"
   ],
+  "resetMocks": false,
+  testEnvironment: "jsdom"
 }

packages/optimizely-sdk/lib/plugins/event_dispatcher/send_beacon_dispatcher.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2023, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EventDispatcher } from '../../shared_types';
+
+export type Event = {
+  url: string;
+  httpVerb: 'POST';
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  params: any;
+}
+
+/**
+ * Sample event dispatcher implementation for tracking impression and conversions
+ * Users of the SDK can provide their own implementation
+ * @param  {Event}    eventObj
+ * @param  {Function} callback
+ */
+export const dispatchEvent = function(
+  eventObj: Event,
+  callback: (response: { statusCode: number; }) => void
+): void {
+  const { params, url } = eventObj;
+  const blob = new Blob([JSON.stringify(params)], {
+    type: "application/json",
+  });
+
+  const success = navigator.sendBeacon(url, blob);
+  callback({
+    statusCode: success ? 200 : 500,
+  });
+}
+
+const eventDispatcher : EventDispatcher = {
+  dispatchEvent,
+}
+
+export default eventDispatcher;

packages/optimizely-sdk/package-lock.json

@@ -80,6 +80,7 @@
     "sinon": "^2.3.1",
     "ts-jest": "^23.10.5",
     "ts-loader": "^7.0.5",
+    "ts-mockito": "^2.6.1",
     "ts-node": "^8.10.2",
     "typescript": "^4.0.3",
     "webpack": "^4.42.1"

packages/optimizely-sdk/package.json

@@ -0,0 +1,105 @@
+/**
+ * Copyright 2023, Optimizely
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import sendBeaconDispatcher, { Event } from '../lib/plugins/event_dispatcher/send_beacon_dispatcher';
+import { anyString, anything, capture, instance, mock, reset, when } from 'ts-mockito';
+
+describe('dispatchEvent', function() {
+  const mockNavigator = mock<Navigator>();
+
+  afterEach(function() {
+    reset(mockNavigator);
+  });
+
+  it('should call sendBeacon with correct url, data and type', async () => {
+    var eventParams = { testParam: 'testParamValue' };
+    var eventObj: Event = {
+      url: 'https://cdn.com/event',
+      httpVerb: 'POST',
+      params: eventParams,
+    };
+
+    when(mockNavigator.sendBeacon(anyString(), anything())).thenReturn(true);
+    const navigator = instance(mockNavigator);
+    if (!global.navigator) {
+      global.navigator = navigator;
+    }
+
+    global.navigator.sendBeacon = navigator.sendBeacon;
+
+    sendBeaconDispatcher.dispatchEvent(eventObj, () => {});
+
+    const [url, data] = capture(mockNavigator.sendBeacon).last();
+    const blob = data as Blob;
+
+    const reader = new FileReader();
+    reader.readAsBinaryString(blob);
+
+    const sentParams = await new Promise((resolve) => {
+      reader.onload = () => {``
+        resolve(reader.result);
+      };
+    });
+
+
+    expect(url).toEqual(eventObj.url);
+    expect(blob.type).toEqual('application/json');
+    expect(sentParams).toEqual(JSON.stringify(eventObj.params));
+  });
+
+  it('should call call callback with status 200 on sendBeacon success', (done) => {
+    var eventParams = { testParam: 'testParamValue' };
+    var eventObj: Event = {
+      url: 'https://cdn.com/event',
+      httpVerb: 'POST',
+      params: eventParams,
+    };
+
+    when(mockNavigator.sendBeacon(anyString(), anything())).thenReturn(true);
+    const navigator = instance(mockNavigator);
+    global.navigator.sendBeacon = navigator.sendBeacon;
+
+    sendBeaconDispatcher.dispatchEvent(eventObj, (res: { statusCode: number }) => {
+      try {
+        expect(res.statusCode).toEqual(200);
+        done();
+      } catch(err) {
+        done(err);
+      }
+    });
+  });
+
+  it('should call call callback with status 200 on sendBeacon failure', (done) => {
+    var eventParams = { testParam: 'testParamValue' };
+    var eventObj: Event = {
+      url: 'https://cdn.com/event',
+      httpVerb: 'POST',
+      params: eventParams,
+    };
+
+    when(mockNavigator.sendBeacon(anyString(), anything())).thenReturn(false);
+    const navigator = instance(mockNavigator);
+    global.navigator.sendBeacon = navigator.sendBeacon;
+
+    sendBeaconDispatcher.dispatchEvent(eventObj, (res: { statusCode: number }) => {
+      try {
+        expect(res.statusCode).toEqual(500);
+        done();
+      } catch(err) {
+        done(err);
+      }
+    });
+  });
+});