Add tests for monitoring with redux enhancer

Author: zalmoxisus

package.json

@@ -16,7 +16,7 @@
     "test:app": "cross-env BABEL_ENV=test mocha --require test/app/setup.js --recursive test/app",
     "test:chrome": "gulp test:chrome",
     "test:electron": "gulp test:electron && rm -rf test/electron/tmp",
-    "test": "npm run build:extension && npm run test:app && npm run test:chrome && npm run test:electron"
+    "test": "npm run test:app && npm run build:extension && npm run test:chrome && npm run test:electron"
   },
   "repository": {
     "type": "git",

src/browser/extension/utils/contentScriptMsg.js

@@ -41,7 +41,7 @@ export function sendMessage(action, state, shouldStringify, id) {
 }
 
 function handleMessages(event) {
-  if (!event || event.source !== window) return;
+  if (process.env.BABEL_ENV !== 'test' && (!event || event.source !== window)) return;
   const message = event.data;
   if (!message || message.source !== '@devtools-extension') return;
   Object.keys(listeners).forEach(id => {

test/app/inject/enhancer.spec.js

@@ -19,13 +19,129 @@ describe('Redux enhancer', () => {
       expect(window.store).toBeA('object');
     });
     expect(message.type).toBe('INIT_INSTANCE');
+    expect(window.store.getState()).toBe(0);
   });
 
-  it('should perform actions', () => {
-    expect(window.store.getState()).toBe(0);
-    window.store.dispatch({ type: 'INCREMENT' });
-    expect(window.store.getState()).toBe(1);
-    window.store.dispatch({ type: 'INCREMENT' });
+  it('should start monitoring', async () => {
+    let message = await listenMessage(() => {
+      window.postMessage({ type: 'START', source: '@devtools-extension' }, '*');
+    });
+    expect(message.type).toBe('START');
+
+    message = await listenMessage();
+    expect(message.type).toBe('STATE');
+    expect(message.payload.actionsById[0].action.type).toBe('@@INIT');
+    expect(message.payload.computedStates[0].state).toBe(0);
+  });
+
+  it('should perform actions', async () => {
+    let message = await listenMessage(() => {
+      window.store.dispatch({ type: 'INCREMENT' });
+      expect(window.store.getState()).toBe(1);
+    });
+    expect(message.type).toBe('ACTION');
+    expect(message.action.action.type).toBe('INCREMENT');
+    expect(message.payload).toBe(1);
+
+    message = await listenMessage(() => {
+      window.store.dispatch({ type: 'INCREMENT' });
+      expect(window.store.getState()).toBe(2);
+    });
+    expect(message.type).toBe('ACTION');
+    expect(message.action.action.type).toBe('INCREMENT');
+    expect(message.payload).toBe(2);
+  });
+
+  it('should dispatch actions remotely', async () => {
+    let message = await listenMessage(() => {
+      window.postMessage({
+        type: 'ACTION',
+        payload: { type: 'INCREMENT' },
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('ACTION');
+
+    message = await listenMessage();
+    expect(message.type).toBe('ACTION');
+    expect(message.action.action.type).toBe('INCREMENT');
+    expect(message.payload).toBe(3);
+  });
+
+  it('should cancel (toggle) action', async () => {
+    let message = await listenMessage(() => {
+      window.postMessage({
+        type: 'DISPATCH',
+        payload: {type: 'TOGGLE_ACTION', id: 1},
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('DISPATCH');
+
+    message = await listenMessage();
+    expect(message.type).toBe('STATE');
+    expect(message.payload.computedStates[message.payload.computedStates.length - 1].state).toBe(2);
+    expect(window.store.getState()).toBe(2);
+
+    message = await listenMessage(() => {
+      window.postMessage({
+        type: 'DISPATCH',
+        payload: {type: 'TOGGLE_ACTION', id: 1},
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('DISPATCH');
+
+    message = await listenMessage();
+    expect(message.type).toBe('STATE');
+    expect(window.store.getState()).toBe(3);
+  });
+
+  it('should move back and forward (time travel)', async () => {
+    let message = await listenMessage(() => {
+      window.postMessage({
+        type: 'DISPATCH',
+        payload: {type: 'JUMP_TO_STATE', index: 2},
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('DISPATCH');
+    expect(window.store.getState()).toBe(2);
+
+    message = await listenMessage(() => {
+      window.postMessage({
+        type: 'DISPATCH',
+        payload: {type: 'JUMP_TO_STATE', index: 3},
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('DISPATCH');
+    expect(window.store.getState()).toBe(3);
+  });
+
+  it('should import state history', async () => {
+    let message = await listenMessage(() => {
+      window.postMessage({
+        type: 'IMPORT',
+        state: JSON.stringify({
+          monitorState: {},
+          actionsById: {
+            '0': { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
+            '1': { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } },
+            '2': { type: 'PERFORM_ACTION', action: { type: 'INCREMENT' } }
+          },
+          nextActionId: 3,
+          stagedActionIds: [ 0, 1, 2 ],
+          skippedActionIds: [],
+          currentStateIndex: 2,
+          computedStates: [ { state: 0 }, { state: 1 }, { state: 2 } ]
+        }),
+        source: '@devtools-extension'
+      }, '*');
+    });
+    expect(message.type).toBe('IMPORT');
+    message = await listenMessage();
+    expect(message.type).toBe('STATE');
     expect(window.store.getState()).toBe(2);
   });
 

test/utils/inject.js

@@ -12,6 +12,6 @@ export function listenMessage(f) {
       resolve(message);
     };
     window.addEventListener('message', listener);
-    f();
+    if (f) f();
   });
 }