Add tests for backbone examples

localForage · Mar 4, 2014 · 33156f9 · 33156f9
1 parent 9b70509
commit 33156f9
Show file tree

Hide file tree

Showing 5 changed files with 9,208 additions and 122 deletions.
diff --git a/examples/backbone-example.html b/examples/backbone-example.html
@@ -3,66 +3,79 @@
   <head>
     <meta charset="utf8" />
     <title>Simple Backbone.localForage example</title>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script src="../vendor/underscore.js"></script>
-    <script src="../vendor/backbone.js"></script>
-    <script src="../dist/localforage.js"></script>
-    <script src="../dist/backbone.localforage.js"></script> 
+    <script src="/jquery.js"></script>
+    <script src="/underscore.js"></script>
+    <script src="/backbone.js"></script>
+    <script src="/localforage.js"></script>
+    <script src="/backbone.localforage.js"></script> 
   </head>
   <body>
     <script type="template/form" id="formtpl">
-      <form>
-        <input type="text" name="content" />
-        <input type="submit" value="Create" />
-      </form>
+        <form>
+            <input type="text" name="content" />
+            <input type="submit" value="Create" />
+        </form>
     </script>
     <script>
       (function (Backbone, _) {
-        'use strict';
-        // Set driver (optional)
-        localforage.setDriver('localStorageWrapper');
-        // For the time being backbone.localforage works well better when operating with collections
-        var MyCollection = Backbone.Collection.extend({
-          sync: Backbone.localforage.sync('MyOfflineStore'),
-          model: Backbone.Model.extend({
-            sync: Backbone.localforage.sync()
-          })
-        });
-        // A view with a form and the collection contents
-        var MyFormView = Backbone.View.extend({
-          events: {
-            'submit form': 'handleSaveModel'
-          },
-          initialize: function (options) {
-            // For the sake of the example, this is very bad performance wise :)
-            this.listenTo(this.collection, 'add remove change sync', this.render);
-          },
-          createModel: function (model) {
-            return $("<div>", {
-              className: 'saved-data',
-              text: model.get('content')
-            });
-          },
-          handleSaveModel: function (event) {
-            event.preventDefault();
-            // It'll write on the localforage offline store
-            this.collection.create({content: this.$('[name="content"]').val()});
-          },
-          render: function () {
-            // Render the form template on this.$el and append the collection content
-            this.$el
-              .html(_.template($('#formtpl').html()))
-              .append(this.collection.map(this.createModel));
-          }
-        });
-        // Instancing the collection and the view
-        var myCollection = new MyCollection();
-        var myFormView = new MyFormView({
-          el: $('<div>', {className: 'content'}).appendTo(document.body),
-          collection: myCollection
-        });
-        myFormView.render();
-        myCollection.fetch();
+          'use strict';
+
+          // Set driver (optional, but we use localforage here so developers
+          // can more easily inspect it).
+          localforage.setDriver('localStorageWrapper');
+
+          // We store offline data inside a collection. This is how we tell
+          // a model/collection to store data offline with localForage.
+          var MyCollection = Backbone.Collection.extend({
+              sync: Backbone.localforage.sync('MyOfflineStore'),
+              model: Backbone.Model.extend({
+                  sync: Backbone.localforage.sync()
+              })
+          });
+
+          // A view with a form and the collection contents
+          var MyFormView = Backbone.View.extend({
+              events: {
+                  'submit form': 'handleSaveModel'
+              },
+
+              initialize: function (options) {
+                  // For the sake of the example, this is very bad
+                  // performance-wise :)
+                  this.listenTo(this.collection, 'add remove change sync', this.render);
+              },
+
+              createModel: function (model) {
+                  return $("<div>", {
+                      'class': 'saved-data',
+                      text: model.get('content')
+                  });
+              },
+
+              handleSaveModel: function (event) {
+                  event.preventDefault();
+                  // It'll write on the localforage offline store
+                  this.collection.create({content: this.$('[name="content"]').val()});
+              },
+
+              render: function () {
+                  // Render the form template on this.$el and append the
+                  // collection content
+                  this.$el
+                      .html(_.template($('#formtpl').html()))
+                      .append(this.collection.map(this.createModel));
+              }
+          });
+
+          // Instancing the collection and the view
+          var collectionInstance = new MyCollection();
+          var myFormView = new MyFormView({
+              el: $('<div>', {'class': 'content'}).appendTo(document.body),
+              collection: collectionInstance
+          });
+
+          myFormView.render();
+          collectionInstance.fetch();
       }(this.Backbone, this._));
     </script>
   </body>

diff --git a/examples/backbone.html b/examples/backbone.html
diff --git a/test/server.coffee b/test/server.coffee
@@ -16,6 +16,7 @@ app.configure ->
   # Public/static files directory. If you add more folders here,
   # they'll also be served statically from the root URL.
   app.use express.static("#{app_folder}/dist")
+  app.use express.static("#{app_folder}/examples")
   app.use express.static("#{app_folder}/test")
   app.use express.static("#{app_folder}/vendor")
 
@@ -32,6 +33,7 @@ console.log ''
 console.log "Listening on port #{port}"
 console.log 'Serving folders: '
 console.log " * #{app_folder}/dist"
+console.log " * #{app_folder}/examples"
 console.log " * #{app_folder}/test"
 console.log " * #{app_folder}/vendor"
 console.log ''

diff --git a/test/test.backbone.coffee b/test/test.backbone.coffee
@@ -46,5 +46,33 @@ casper.test.begin "Testing Backbone data adapter", (test) ->
       results.length is 0
     , "Backbone adapter should delete data after model is removed"
 
+  casper.thenOpen "#{casper.TEST_URL}backbone-example.html", ->
+    test.info "Test the Backbone example (examples/backbone-example.html)"
+
+    @waitForSelector '.content', ->
+      # Fill the content form and test it saves the content without error.
+      casper.fill '.content form', {content: 'testing'}, true
+
+  casper.reload()
+
+  casper.then ->
+    @waitForSelector '.content .saved-data', ->
+      test.assertEval ->
+        $('.saved-data').length is 1
+      , "Backbone example saves a piece of data between page loads"
+
+    @evaluate ->
+      localforage.clear()
+
+  casper.wait 200
+
+  casper.reload()
+
+  casper.then ->
+    @waitForSelector '.content', ->
+      test.assertEval ->
+        $('.saved-data').length is 0
+      , "After running clear() on localforage, no saved-data divs exist"
+
   casper.run ->
     test.done()