added some asyncronous transitions to demo page... not really happy with the declaration model yet.

Author: jakesgordon

demo/demo.css

@@ -2,6 +2,7 @@
 
 #controls { text-align: center; }
 
+#demo #notes   { margin-bottom: 1em; }
 #demo #diagram { width: 400px; height: 275px; }
 #demo #output  { width: 100%;  height: 30em;  }
 

demo/demo.js

@@ -26,12 +26,32 @@ Demo = {
 
   onleavegreen:    function() { this.log("LEAVE STATE: green");  },
   onleaveyellow:   function() { this.log("LEAVE STATE: yellow"); },
-  onleavered:      function() { this.log("LEAVE STATE: red");    },
+  onleavered:      function() { this.log("LEAVE STATE: red");    this.asyncTransition(); return false; },
 
   ongreen:         function() { this.log("ENTER STATE: green");  },
   onyellow:        function() { this.log("ENTER STATE: yellow"); },
   onred:           function() { this.log("ENTER STATE: red");    },
 
+  asyncTransition: function() {
+    var self = this;
+    self.logTransition(3);
+    setTimeout(function() {
+      self.logTransition(2);
+      setTimeout(function() {
+        self.logTransition(1);
+        setTimeout(function() {
+          self.logTransition(0);
+          self.transition();
+        }, 1000);
+      }, 1000);
+    }, 1000);
+  },
+
+  logTransition: function(n) {
+    if (n)
+      this.log("PENDING " + this.transition.event + " from " + this.transition.from + " to " + this.transition.to + " in : " + n + "...");
+  },
+
   log: function(msg, separate) {
     this.count = (this.count || 0) + (separate ? 1 : 0);
 

demo/images/alerts.green.png

@@ -22,6 +22,10 @@ <h1> Finite State Machine </h1>
     <div id="diagram">
     </div>
 
+    <div id="notes">
+      <i>dashed lines are async events that take 3 seconds</i>
+    </div>
+
     <textarea id="output">
     </textarea>
 

demo/images/alerts.red.png

@@ -87,7 +87,7 @@ StateMachine = {
     return function() {
 
       if (this.transition)
-        throw "event " + name + " innapropriate because previous async transition from " + this.transition.from + " to " + this.transition.to + " did not complete"
+        throw "event " + name + " innapropriate because previous async transition (" + this.transition.event + ") from " + this.transition.from + " to " + this.transition.to + " did not complete"
 
       if (this.cannot(name))
         throw "event " + name + " innapropriate in current state " + this.current;
@@ -103,9 +103,10 @@ StateMachine = {
         if (false === StateMachine.beforeEvent.call(this, name, args))
           return;
 
-        this.transition      = function() { StateMachine.transition.call(self, name, from, to, args); self.transition = null; };
-        this.transition.from = from;
-        this.transition.to   = to;
+        this.transition       = function() { StateMachine.transition.call(self, name, from, to, args); self.transition = null; };
+        this.transition.event = name;
+        this.transition.from  = from;
+        this.transition.to    = to;
 
         if (false === StateMachine.leaveState.call(this, this.current, args))
           async = true;

demo/images/alerts.yellow.png

@@ -174,7 +174,10 @@ test("state transitions using onleavestate run-time return value instead of desi
 
   fsm.onleavegreen = function(async) {
     if (async) {
-      setTimeout(function() { fsm.transition() }, 10);
+      setTimeout(function() {
+        fsm.transition(); equals(fsm.current, 'yellow', "warn event should transition from green to yellow");
+        start(); // move on to next test
+      }, 10);
       return false;
     }
   }
@@ -183,7 +186,8 @@ test("state transitions using onleavestate run-time return value instead of desi
   fsm.warn(false);  equals(fsm.current, 'yellow', "expected synchronous transition from green to yellow");
   fsm.clear();      equals(fsm.current, 'green',  "clear event should transition from yellow to green");
   fsm.warn(true);   equals(fsm.current, 'green',  "should still be green because we haven't transitioned yet");
-  fsm.transition(); equals(fsm.current, 'yellow', "warn event should transition from green to yellow");
+
+  stop(); // doing async stuff - dont run next qunit test until I call start() in callback above
 
 });
 
@@ -206,7 +210,7 @@ test("state transition fired without completing previous transition", function()
   fsm.transition(); equals(fsm.current, 'yellow', "warn event should transition from green to yellow");
   fsm.panic();      equals(fsm.current, 'yellow', "should still be yellow because we haven't transitioned yet");
 
-  raises(fsm.calm.bind(fsm), /event calm innapropriate because previous async transition from yellow to red did not complete/);
+  raises(fsm.calm.bind(fsm), /event calm innapropriate because previous async transition \(panic\) from yellow to red did not complete/);
 
 });