Merge pull request #57 from FormidableLabs/56-wait-for-connection-to-init

Wait for connection to be established before sending an init message

Author: andyrichardson

src/exchange.test.ts

@@ -67,17 +67,6 @@ describe('on mount', () => {
       expect(addMessageListener).toBeCalledTimes(1);
     });
   });
-
-  describe('init event', () => {
-    it('is dispatched', () => {
-      expect(sendMessage).toBeCalledTimes(1);
-      expect(sendMessage).toBeCalledWith({
-        type: 'connection-init',
-        source: 'exchange',
-        version,
-      });
-    });
-  });
 });
 
 describe('on debug message', () => {
@@ -95,7 +84,7 @@ describe('on debug message', () => {
     const subscriber = client.subscribeToDebugTarget.mock.calls[0][0];
     subscriber(event);
 
-    expect(sendMessage).toBeCalledTimes(2);
+    expect(sendMessage).toBeCalledTimes(1);
     expect(sendMessage).toBeCalledWith({
       type: 'debug-event',
       source: 'exchange',
@@ -119,7 +108,7 @@ describe('on operation', () => {
         publish
       );
       next(operation);
-      expect(sendMessage.mock.calls[1]).toMatchInlineSnapshot(`
+      expect(sendMessage.mock.calls[0]).toMatchInlineSnapshot(`
         Array [
           Object {
             "data": Object {
@@ -156,7 +145,7 @@ describe('on operation', () => {
         publish
       );
       next(operation);
-      expect(sendMessage.mock.calls[1]).toMatchInlineSnapshot(`
+      expect(sendMessage.mock.calls[0]).toMatchInlineSnapshot(`
         Array [
           Object {
             "data": Object {
@@ -227,7 +216,7 @@ describe('on operation response', () => {
       next(operation);
 
       // * call number two relates to the operation response
-      expect(sendMessage.mock.calls[2]).toMatchInlineSnapshot(`
+      expect(sendMessage.mock.calls[1]).toMatchInlineSnapshot(`
         Array [
           Object {
             "data": Object {
@@ -273,7 +262,7 @@ describe('on operation response', () => {
       );
       next(operation);
       // * call number two relates to the operation response
-      expect(sendMessage.mock.calls[2]).toMatchInlineSnapshot(`
+      expect(sendMessage.mock.calls[1]).toMatchInlineSnapshot(`
         Array [
           Object {
             "data": Object {
@@ -430,7 +419,7 @@ describe('on connection init message', () => {
 
   it('dispatches acknowledge event w/ version', () => {
     handler(getVersionMessage);
-    expect(sendMessage).toBeCalledTimes(2);
+    expect(sendMessage).toBeCalledTimes(1);
     expect(sendMessage).toBeCalledWith({
       type: 'connection-acknowledge',
       source: 'exchange',

src/exchange.ts

@@ -19,13 +19,6 @@ const curriedDevtoolsExchange: (a: Messenger) => Exchange = ({
   sendMessage,
   addMessageListener,
 }) => ({ client, forward }) => {
-  // Initialize connection
-  sendMessage({
-    type: 'connection-init',
-    source: 'exchange',
-    version: __pkg_version__,
-  });
-
   // Listen for messages from devtools
   addMessageListener((message) => {
     if (message.source !== 'devtools' || !(message.type in messageHandlers)) {

src/setupTests.ts

@@ -2,3 +2,4 @@ global.window = {
   addEventListener: jest.fn(),
   postMessage: jest.fn(),
 };
+(global as any).__pkg_version__ = '200.0.0';

src/utils/messaging.test.ts

@@ -25,6 +25,20 @@ describe('on create native messenger', () => {
     `);
   });
 
+  describe('on open', () => {
+    it('sends connection-init message', () => {
+      createNativeMessenger();
+      instance.send = jest.fn();
+      instance.onopen();
+      expect(instance.send).toBeCalledTimes(1);
+      expect(instance.send.mock.calls[0]).toMatchInlineSnapshot(`
+        Array [
+          "{\\"source\\":\\"exchange\\",\\"type\\":\\"connection-init\\",\\"version\\":\\"200.0.0\\"}",
+        ]
+      `);
+    });
+  });
+
   describe('on close', () => {
     it('tries to establish a new connection', () => {
       createNativeMessenger();
@@ -77,6 +91,24 @@ describe('on create browser messenger', () => {
   const addEventListener = jest.spyOn(window, 'addEventListener');
   const postMessage = jest.spyOn(window, 'postMessage');
 
+  describe('on create', () => {
+    it('sends connection-init message', () => {
+      createBrowserMessenger();
+
+      expect(postMessage).toBeCalledTimes(1);
+      expect(postMessage.mock.calls[0]).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "source": "exchange",
+            "type": "connection-init",
+            "version": "200.0.0",
+          },
+          "http://localhost",
+        ]
+      `);
+    });
+  });
+
   describe('on trusted message', () => {
     it('calls message listeners', () => {
       const data = {
@@ -126,8 +158,8 @@ describe('on create browser messenger', () => {
 
       const m = createBrowserMessenger();
       m.sendMessage(data as any);
-      expect(postMessage).toBeCalledTimes(1);
-      expect(postMessage.mock.calls[0][0]).toMatchInlineSnapshot(`
+      expect(postMessage).toBeCalledTimes(2);
+      expect(postMessage.mock.calls[1][0]).toMatchInlineSnapshot(`
         Object {
           "arg": 1234,
           "someString": "hello",

src/utils/messaging.ts

@@ -1,4 +1,8 @@
-import { ExchangeMessage, DevtoolsMessage } from '../types';
+import {
+  ExchangeMessage,
+  DevtoolsMessage,
+  ExchangeConnectionInitMessage,
+} from '../types';
 
 export interface Messenger {
   addMessageListener: (
@@ -7,6 +11,12 @@ export interface Messenger {
   sendMessage: (m: ExchangeMessage) => void;
 }
 
+const connectionInitMessage: ExchangeConnectionInitMessage = {
+  source: 'exchange',
+  type: 'connection-init',
+  version: __pkg_version__,
+};
+
 /** Create curried args for native environment. */
 export const createNativeMessenger = (): Messenger => {
   let listeners: Function[] = [];
@@ -17,6 +27,9 @@ export const createNativeMessenger = (): Messenger => {
     timeout = undefined;
     ws = new WebSocket('ws://localhost:7700');
 
+    ws.onopen = () => {
+      ws.send(JSON.stringify(connectionInitMessage));
+    };
     ws.onclose = () => {
       timeout = timeout || setTimeout(createConnection, 500);
     };
@@ -50,20 +63,26 @@ export const createNativeMessenger = (): Messenger => {
 };
 
 /** Create curried args for browser environment. */
-export const createBrowserMessenger = (): Messenger => ({
-  addMessageListener: (cb) => {
-    window.addEventListener('message', ({ data, isTrusted }) => {
-      if (!isTrusted || !data?.source) {
-        return;
-      }
+export const createBrowserMessenger = (): Messenger => {
+  let listeners: Function[] = [];
+
+  window.addEventListener('message', ({ data, isTrusted }) => {
+    if (!isTrusted || !data?.source) {
+      return;
+    }
 
-      cb(data as ExchangeMessage | DevtoolsMessage);
-    });
-  },
-  sendMessage: (message) => {
-    window.postMessage(
-      JSON.parse(JSON.stringify(message)),
-      window.location.origin
-    );
-  },
-});
+    listeners.forEach((cb) => cb(data));
+  });
+
+  const addMessageListener: Messenger['addMessageListener'] = (cb) =>
+    (listeners = [...listeners, cb]);
+  const sendMessage: Messenger['sendMessage'] = (m) =>
+    window.postMessage(JSON.parse(JSON.stringify(m)), window.location.origin);
+
+  sendMessage(connectionInitMessage);
+
+  return {
+    addMessageListener,
+    sendMessage,
+  };
+};