Add console methods to simplify triggering callbacks

Bug: 193062584
Bug: 193666575
Change-Id: I8e08aec3c2313f9965413d5a7eff3c5b2038bf1d

Author: Fleker

src/interactive-canvas.ts

@@ -32,7 +32,7 @@ export interface InteractiveCanvas {
  * Types for Interactive Canvas callbacks.
  * @see https://developers.google.com/assistant/interactivecanvas/reference#interactivecanvascallbacks
  */
-interface InteractiveCanvasCallbacks {
+export interface InteractiveCanvasCallbacks {
   onUpdate: (data: Object[]) => Promise<void> | undefined;
   onTtsMark: (markName: string) => void;
 }

src/types.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import {InteractiveCanvas} from './interactive-canvas';
+import {
+  InteractiveCanvas,
+  InteractiveCanvasCallbacks,
+} from './interactive-canvas';
 
 /**
  * A representation of Interactive Canvas events that appear in the History tab
@@ -85,6 +88,7 @@ export interface InteractiveCanvasWindow extends Window {
      */
     logoSrcData: string;
   };
+  interactiveCanvasDebug: InteractiveCanvasCallbacks;
   /**
    * JSYaml is a 3P library that converts YAML to JSON.
    * @see https://www.npmjs.com/package/js-yaml

src/webpage-script.ts

@@ -490,6 +490,36 @@ function addUnsupportedApiWarnings() {
   addPropertyWarning('webkitSpeechRecognition', window);
 }
 
+/**
+ * Add methods as `window.interactiveCanvasDebug` to trigger callbacks
+ * programmatically from the DevTools console.
+ */
+function addDebuggingMethodsInJsConsole() {
+  window.interactiveCanvasDebug = {
+    onUpdate: (data: Object[]) => {
+      const msgData = {
+        data: {
+          type: 'payload',
+          requestId: 'requestId',
+          data,
+        },
+      };
+      document.dispatchEvent(new MessageEvent('message', msgData));
+      return undefined;
+    },
+    onTtsMark: (markName: string) => {
+      const msgData = {
+        data: {
+          type: 'payload',
+          requestId: 'requestId',
+          data: markName,
+        },
+      };
+      document.dispatchEvent(new MessageEvent('message', msgData));
+    },
+  };
+}
+
 window.requestAnimationFrame(() => {
   const hasInteractiveCanvas = window.interactiveCanvas !== undefined;
 
@@ -528,6 +558,7 @@ window.requestAnimationFrame(() => {
 
   window.interactiveCanvasProcessSdk = processSdk;
   addUnsupportedApiWarnings();
+  addDebuggingMethodsInJsConsole();
 });
 
 document.addEventListener('message', (e: Event) => {