Add more tests for angularFireCollection based chat

tests/test_chat.html

@@ -13,37 +13,43 @@
     <label for="">Your name: </label><input id="name" type="text" ng-model="username">
   </div>
   <p></p>
-  <div id="messagesDiv" auto-scroll="messages" style="height:500px;">
+  <div id="messagesDiv" style="height:500px;">
     <div ng-cloak ng-repeat="message in messages">
-      <em>{{message.from}}: </em>{{message.content}}
+      <span class="messageBlock">
+        <em>{{message.from}}: </em>
+        <span class="content">{{message.content}}</span>
+      </span>
     </div>
   </div>
   <form ng-submit="addMessage()">
     <input id="message" type="text" ng-model="message" placeholder="Message...">
     <input id="send" type="submit" id="submit" value="Send" style="font-size:24px;">
   </form>
   <script type="text/javascript">
-    var testModule;
-    var chatModule = angular.module("chat", ["firebase"]);
+    var _scope;
+    var _url = 'https://angularFireTests.firebaseio-demo.com/chat';
+    angular.module("chat", ["firebase"]);
     function Chat($scope, angularFireCollection) {
-      var url = 'https://angularFire.firebaseio-demo.com/chat';
-      $scope.messages = angularFireCollection(new Firebase(url).limit(50));
+      $scope.messages = angularFireCollection(new Firebase(_url).limit(2));
       $scope.username = 'Guest' + Math.floor(Math.random()*101);
       $scope.addMessage = function() {
         $scope.messages.add({from: $scope.username, content: $scope.message});
         $scope.message = "";
       }
-      testModule = new TestModule($scope);
+      _scope = $scope;
     }
-
-    function TestModule(scope) {
-      this._scope = scope;
+    function testIfInDOM(from, content, node) {
+      if (node.childNodes.length != 5) {
+        return false;
+      }
+      if (node.childNodes[1].innerHTML != from + ": ") {
+        return false;
+      }
+      if (node.childNodes[3].innerHTML != content) {
+        return false;
+      }
+      return true;
     }
-    TestModule.prototype.addMessage = function(from, msg) {
-      this._scope.username = from;
-      this._scope.message = msg;
-      this._scope.addMessage();
-    };
   </script>
 </body>
 </html>

tests/test_chat.js

@@ -1,27 +1,102 @@
 
-var system = require('system');
+var system = require("system");
 
-casper.test.comment('Testing Chat example with angularFireCollection');
+casper.test.comment("Testing Chat example with angularFireCollection");
 
-casper.start('tests/test_chat.html', function() {
-  this.test.assertTitle('AngularFire Chat Demo');
+casper.start("tests/test_chat.html", function() {
+  // Sanity test for the environment.
+  this.test.assertTitle("AngularFire Chat Demo");
+  this.test.assertEval(function() {
+    return Firebase ? true : false;
+  }, "Firebase exists");
   this.test.assertEval(function() {
     return AngularFire ? true : false;
   }, "AngularFire exists");
   this.test.assertEval(function() {
-    return testModule ? true : false;
-  }, "Test module exists");
+    return _scope ? true : false;
+  }, "Angular scope exists");
+});
+
+casper.thenEvaluate(function() {
+  // Clean up Firebase to start fresh test.
+  var fbRef = new Firebase(_url);
+  fbRef.set(null, function(err) {
+    window.__flag = true;
+  });
+});
+
+casper.waitFor(function() {
+  return this.getGlobal("__flag") === true;
 });
 
-casper.then(function(params) {
+casper.then(function() {
   var _testName = "TestGuest";
   var _testMessage = "This is a test message";
+
   this.test.assertEval(function(params) {
-    testModule.addMessage(params[0], params[1]);
-    return true;
+    _scope.username = params[0];
+    _scope.message = params[1];
+    _scope.addMessage();
+    return _scope.message == "";
   }, "Adding a new message", [_testName, _testMessage]);
+
+  this.waitForSelector(".messageBlock", function() {
+    this.test.assertEval(function(params) {
+      return testIfInDOM(
+        params[0], params[1], document.querySelector(".messageBlock")
+      );
+    }, "Testing if message is in the DOM", [_testName, _testMessage]);
+  });
+});
+
+casper.then(function() {
+  var _testName = "GuestTest";
+  var _testMessage = "This is another test message";
+
+  this.evaluate(function(params) {
+    window.__flag = false;
+    var ref = new Firebase(_url);
+    ref.push({from: params[0], content: params[1]}, function(err) {
+      window.__flag = true;
+    });
+  }, [_testName, _testMessage]);
+
+  this.waitFor(function() {
+    return this.getGlobal("__flag") === true;
+  }, function() {
+    this.test.assertEval(function(params) {
+      var msgs = document.querySelectorAll(".messageBlock");
+      if (msgs.length != 2) {
+        return false;
+      }
+      return testIfInDOM(params[0], params[1], msgs[1]);
+    }, "Testing if remote message is in the DOM", [_testName, _testMessage]);
+  });
+});
+
+casper.then(function() {
+  this.test.assertEval(function() {
+    _scope.message = "Limit Test";
+    _scope.addMessage();
+
+    var ref = new Firebase(_url);
+    ref.once("value", function(snapshot) {
+      window.__flag = snapshot.val();
+    });
+
+    return _scope.message == "";
+  }, "Adding limit message");
+
+  this.waitFor(function() {
+    return this.getGlobal("__flag") != true;
+  }, function() {
+    this.test.assertEval(function() {
+      var msgs = document.querySelectorAll(".messageBlock");
+      return msgs.length === 2;
+    }, "Testing if limits and queries work");
+  });
 });
 
 casper.run(function() {
-  this.test.done(4);
+  this.test.done(9);
 });