feat(Controller): flush async state changes

cerebral · Dec 3, 2016 · 720009f · 720009f
1 parent d81c2c4
commit 720009f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/packages/cerebral/src/Controller.js b/packages/cerebral/src/Controller.js
@@ -82,6 +82,10 @@ class Controller extends EventEmitter {
   flush (force) {
     const changes = this.model.flush()
 
+    if (!force && !Object.keys(changes).length) {
+      return
+    }
+
     this.updateComputeds(changes, force)
     this.updateComponents(changes, force)
     this.emit('flush', changes, Boolean(force))

diff --git a/packages/cerebral/src/Controller.test.js b/packages/cerebral/src/Controller.test.js
@@ -154,7 +154,11 @@ describe('Controller', () => {
         ]
       }
     })
-    controller.on('flush', () => flushCount++)
+    const originFlush = controller.flush
+    controller.flush = function (...args) {
+      flushCount++
+      originFlush.apply(this, args)
+    }
     controller.runTree.once('end', () => {
       assert.equal(flushCount, 3)
       done()
@@ -171,6 +175,20 @@ describe('Controller', () => {
         }
       }
     })
-    assert.deepEqual(controller.model.flush(), {})
+    assert.deepEqual(controller.model.changedPaths, [])
+  })
+  it('should flush async mutations', (done) => {
+    const controller = new Controller({
+      signals: {
+        test: [
+          ({state}) => setTimeout(() => state.set('foo', 'bar'))
+        ]
+      }
+    })
+    controller.on('flush', (changes) => {
+      assert.deepEqual(changes, {foo: true})
+      done()
+    })
+    controller.getSignal('test')()
   })
 })
diff --git a/packages/cerebral/src/providers/Recorder.js b/packages/cerebral/src/providers/Recorder.js
@@ -77,7 +77,7 @@ export default function RecorderProvider (options = {}) {
         if (event.type === 'mutation') {
           mutate(event)
         } else if (event.type === 'flush') {
-          controller.flush(currentEventIndex === 0)
+          controller.flush()
         }
 
         lastEventTimestamp = event.timestamp
@@ -140,6 +140,7 @@ export default function RecorderProvider (options = {}) {
             originalRunSignal.apply(controller, args)
           }
         }
+        controller.flush(true)
         runNextEvent()
       },
       record (options = {}) {

diff --git a/packages/cerebral/src/providers/Recorder.test.js b/packages/cerebral/src/providers/Recorder.test.js
@@ -39,7 +39,7 @@ describe('Recorder', () => {
           assert.equal(recording.initialState[0].value, JSON.stringify({
             foo: 'bar'
           }))
-          assert.equal(recording.events.length, 4)
+          assert.equal(recording.events.length, 3)
         }]
       },
       providers: [RecorderProvider({
@@ -170,7 +170,6 @@ describe('Recorder', () => {
           initialState: ['foo']
         })],
         update: [({state}) => state.set('foo', 'bar2')],
-        update2: [({state}) => state.set('foo', 'bar3')],
         stop: [({recorder}) => recorder.stop()],
         play: [({recorder}) => recorder.play({
           allowedSignals: ['stop']
@@ -183,24 +182,20 @@ describe('Recorder', () => {
     controller.getSignal('record')()
     controller.getSignal('update')()
     controller.getSignal('stop')()
-    controller.getSignal('play')()
-    controller.once('flush', (changes) => {
-      assert.deepEqual(changes, {})
-    })
-    timeout.tick()
-    timeout.tick()
     controller.once('flush', (changes) => {
       assert.deepEqual(changes, {
         foo: true
       })
     })
+    controller.getSignal('play')()
     timeout.tick()
     controller.once('flush', (changes) => {
-      assert.deepEqual(changes, {})
+      assert.deepEqual(changes, {
+        foo: true
+      })
       controller.getSignal('stop')()
       done()
     })
-    timeout.tick()
   })
   it('should be able to pause and continue playback', () => {
     const timeout = timeoutMock()

diff --git a/packages/cerebral/src/providers/State.js b/packages/cerebral/src/providers/State.js
@@ -18,6 +18,7 @@ function StateProviderFactory () {
 
   function createProvider (context) {
     const model = context.controller.model
+    let asyncTimeout = null
 
     return methods.reduce((currentStateContext, methodKey) => {
       if (methodKey === 'compute') {
@@ -26,6 +27,11 @@ function StateProviderFactory () {
         currentStateContext[methodKey] = (...args) => {
           const path = ensurePath(args.shift())
 
+          if (methodKey !== 'get') {
+            clearTimeout(asyncTimeout)
+            asyncTimeout = setTimeout(() => context.controller.flush())
+          }
+
           return model[methodKey].apply(model, [path].concat(args))
         }
       }