Ersuo/adding send status telemetry

CHANGELOG.md

@@ -24,7 +24,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
--  Added ability for developers to customize Web Chat by extending the default UI without having to re-implement existing components. [@dawolff-ms](https://github.com/dawolff-ms) in PR [#4539](https://github.com/microsoft/BotFramework-WebChat/pull/4539)
+-  Added function to emit status change telemetry event for activities, by [@Erli-ms](https://github.com/Erli-ms), in PR [#4631](https://github.com/microsoft/BotFramework-WebChat/pull/4631)
+
+-  Added ability for developers to customize Web Chat by extending the default UI without having to re-implement existing components, by [@dawolff-ms](https://github.com/dawolff-ms), in PR [#4539](https://github.com/microsoft/BotFramework-WebChat/pull/4539)
 
 ### Fixed
 

__tests__/hooks/useTrackDimension.js

@@ -15,7 +15,7 @@ describe('useTrackDimension', () => {
           const { data, dimensions, duration, error, name, type } = event;
 
           name !== 'init' &&
-            (window.WebChatTest.telemetryMeasurements || (window.WebChatTest.telemetryMeasurements = [])).push({
+            window.WebChatTest.telemetryMeasurements.push({
               data,
               dimensions,
               duration,
@@ -24,6 +24,9 @@ describe('useTrackDimension', () => {
               type
             });
         }
+      },
+      setup: () => {
+        window.WebChatTest.telemetryMeasurements = [];
       }
     });
 
@@ -37,12 +40,18 @@ describe('useTrackDimension', () => {
     await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello', 'aloha'));
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements.length)).resolves.toBe(1);
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping').length)
+    ).resolves.toBe(1);
 
     await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello'));
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping2'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() =>
+        window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping' || name === 'ping2')
+      )
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -81,7 +90,9 @@ describe('useTrackDimension', () => {
     await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension(123, 'hello'));
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -105,7 +116,9 @@ describe('useTrackDimension', () => {
     await pageObjects.runHook('useTrackDimension', [], trackDimension => trackDimension('hello', 123));
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('ping'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,

__tests__/hooks/useTrackEvent.js

@@ -15,7 +15,7 @@ describe('useTrackEvent', () => {
           const { data, dimensions, duration, error, level, name, type } = event;
 
           name !== 'init' &&
-            (window.WebChatTest.telemetryMeasurements || (window.WebChatTest.telemetryMeasurements = [])).push({
+            window.WebChatTest.telemetryMeasurements.push({
               data,
               dimensions,
               duration,
@@ -25,6 +25,9 @@ describe('useTrackEvent', () => {
               type
             });
         }
+      },
+      setup: () => {
+        window.WebChatTest.telemetryMeasurements = [];
       }
     });
 
@@ -37,7 +40,9 @@ describe('useTrackEvent', () => {
   test('should track simple event', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -61,7 +66,9 @@ describe('useTrackEvent', () => {
   test('should track simple event using info explicitly', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.info('hello'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -85,7 +92,9 @@ describe('useTrackEvent', () => {
   test('should track numeric event', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.warn('hello', 123));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": 123,
@@ -109,7 +118,9 @@ describe('useTrackEvent', () => {
   test('should track numeric event', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.debug('hello', 'aloha'));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": "aloha",
@@ -133,7 +144,9 @@ describe('useTrackEvent', () => {
   test('should track complex event', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent.error('hello', { one: 1, hello: 'aloha' }));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": Object {
@@ -160,18 +173,24 @@ describe('useTrackEvent', () => {
   test('should not track event with boolean data', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello', true));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toBeFalsy();
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toHaveLength(0);
   });
 
   test('should not track event with incompatible complex data', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent('hello', { truthy: true }));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toBeFalsy();
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toHaveLength(0);
   });
 
   test('should not track event with invalid name', async () => {
     await pageObjects.runHook('useTrackEvent', [], trackEvent => trackEvent(123));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toBeFalsy();
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'hello'))
+    ).resolves.toHaveLength(0);
   });
 });

__tests__/hooks/useTrackException.js

@@ -15,16 +15,19 @@ describe('useTrackException', () => {
           const { data, dimensions, duration, error, fatal, name, type } = event;
 
           name !== 'init' &&
-            (window.WebChatTest.telemetryMeasurements || (window.WebChatTest.telemetryMeasurements = [])).push({
+            window.WebChatTest.telemetryMeasurements.push({
               data,
               dimensions,
               duration,
-              error: error.message,
+              error: error?.message,
               fatal,
               name,
               type
             });
         }
+      },
+      setup: () => {
+        window.WebChatTest.telemetryMeasurements = [];
       }
     });
 
@@ -37,7 +40,8 @@ describe('useTrackException', () => {
   test('should track exception', async () => {
     await pageObjects.runHook('useTrackException', [], trackException => trackException(new Error('artificial error')));
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ error }) => error)))
+      .resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -63,7 +67,8 @@ describe('useTrackException', () => {
       trackException(new Error('non-fatal error'), false)
     );
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ error }) => error)))
+      .resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,

__tests__/hooks/useTrackTiming.js

@@ -15,7 +15,7 @@ describe('useTrackTiming', () => {
           const { data, dimensions, duration, error, name, type } = event;
 
           name !== 'init' &&
-            (window.WebChatTest.telemetryMeasurements || (window.WebChatTest.telemetryMeasurements = [])).push({
+            window.WebChatTest.telemetryMeasurements.push({
               data,
               dimensions,
               duration,
@@ -25,10 +25,13 @@ describe('useTrackTiming', () => {
             });
         }
       },
-      setup: () =>
+      setup: () => {
         window.WebChatTest.loadScript('https://unpkg.com/lolex@4.0.1/lolex.js').then(() => {
           window.WebChatTest.clock = lolex.install();
-        })
+        });
+
+        window.WebChatTest.telemetryMeasurements = [];
+      }
     });
 
     driver = setup.driver;
@@ -43,7 +46,9 @@ describe('useTrackTiming', () => {
       pageObjects.runHook('useTrackTiming', [], trackTiming => trackTiming('ping', () => 123))
     ).resolves.toBe(123);
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,
@@ -88,7 +93,9 @@ describe('useTrackTiming', () => {
 
     await expect(driver.executeScript(() => window.WebChatTest.result)).resolves.toBe(123);
 
-    await expect(driver.executeScript(() => window.WebChatTest.telemetryMeasurements)).resolves.toMatchInlineSnapshot(`
+    await expect(
+      driver.executeScript(() => window.WebChatTest.telemetryMeasurements.filter(({ name }) => name === 'ping'))
+    ).resolves.toMatchInlineSnapshot(`
       Array [
         Object {
           "data": null,

__tests__/html/activityStatusTelemetry.ignoreStatusChange.incomingActivity.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(
+        async function () {
+          const store = testHelpers.createStore();
+
+          const directLine = testHelpers.createDirectLineEmulator(store);
+          const telemetryEventTracking = [];
+          WebChat.renderWebChat(
+            {
+              directLine,
+              store,
+              onTelemetry: (event) => {
+                if (event?.name === 'send-status:change') {
+                  telemetryEventTracking.push(event);
+                }
+              },
+            },
+            document.getElementById('webchat')
+          );
+
+          await pageConditions.uiConnected();
+
+          // GIVEN: Simulate an ingress activity of "Aloha!".
+          await directLine.emulateIncomingActivity('Aloha!');
+
+          // WHEN: The activity is rendered.
+          await pageConditions.numActivitiesShown(1);
+
+          // THEN: No status change event should be logged for incoming activities.
+          expect(telemetryEventTracking.length).toEqual(0);
+        }
+      );
+    </script>
+  </body>
+</html>

__tests__/html/activityStatusTelemetry.ignoreStatusChange.incomingActivity.js

@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('ActivityStatusTelemetry', () => {
+  test('activity status telemetry should not be logged when incoming activity received', () =>
+    runHTML('activityStatusTelemetry.ignoreStatusChange.incomingActivity.html'));
+});