Add event binding and refactor test suite

jgalilee · Sep 25, 2012 · f7aa733 · f7aa733
1 parent b429c0e
commit f7aa733
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 220 deletions.
diff --git a/README.markdown b/README.markdown
@@ -88,4 +88,52 @@ It applies the element settings to the leaf element.
     <img src="cat1.jpg"></img>
   </span>
 </div>
-````
+````
+
+
+I don't get it … why would I use this?
+-----------------------------------
+
+This is a good question. If you've ever built a full scale mobile or desktop application using one
+of the many available MVC frameworks
+
+Model.js
+
+````js
+
+/*
+ * Simple model that we will persist with local browser storage
+ */
+
+var Task = function(attributes) {
+  this._is = {
+    completed = true;
+  }
+  if(undefined !== attributes) {
+    this._attributes = attributes;
+  } else {
+    this._attributes = {};
+  }
+}
+
+Task.prototype.is = function(what) {
+  return this._is[what];
+}
+
+Task.prototype.complete = function() {
+  if(undefined === this.is('completed') || this.is('completed') == false) {
+    return this._is['completed'] = true;
+  } else {
+    return false;
+  }
+}
+
+````
+
+Controller.js
+
+````js
+
+
+
+````
diff --git a/jasmine.html b/jasmine.html
@@ -4,16 +4,15 @@
 <head>
   <title>Mastodom Testing Suite</title>
 
-  <link rel="stylesheet" type="text/css" href="../lib/jasmine/jasmine.css">
+  <link rel="stylesheet" type="text/css" href="lib/jasmine/jasmine.css">
   <script type="text/javascript" src="lib/jasmine/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine/jasmine-html.js"></script>
+  <!-- include source files here... -->
+  <script type="text/javascript" src="src/Mastodom.js"></script>
 
   <!-- include spec files here... -->
   <script type="text/javascript" src="spec/MastodomSpec.js"></script>
 
-  <!-- include source files here... -->
-  <script type="text/javascript" src="src/Mastodom.js"></script>
-
   <script type="text/javascript">
     (function() {
       var jasmineEnv = jasmine.getEnv();

diff --git a/playground.html b/playground.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+  <title></title>
+  <script type="text/javascript" src="src/Mastodom.js"></script>
+</head>
+<body>
+
+</body>
+<script type="text/javascript">
+  Mn({
+    parent: document.body,
+    type: ['div', 'span', 'a'],
+    content: 'Hello World',
+    attributes: { href: '#' },
+    events: {
+      click: function(event) {
+        console.log('Hi there link!', event);
+      }
+    }
+  });
+
+  /*
+   * Yields
+   * --------------
+   * <div>
+   *   <span>
+   *     <a href="#">
+   *       Hello World
+   *     </a>
+   *   </span>
+   * </div>
+   */
+</script>
+</html>
diff --git a/spec/mastodomSpec.js b/spec/mastodomSpec.js
@@ -1,151 +1,103 @@
-describe("mastodom", function(){
-  "use strict";
+describe("mastodom.js", function(){
 
-  function fail(){
-    expect(false).toBeTruthy();
-  }
+  describe('library usage', function() {
 
-  it("provides Mn and Mastodom globals", function(){
-    expect(window.Mn).toBeDefined();
-    expect(window.Mastodom).toBeDefined();
-    expect(window.Mn).toEqual(window.Mastodom);
-  });
+    describe('type', function() {
 
-  it("has a default element type, which is a 'div'", function(){
-    expect(window.Mn.defaultElementType).toEqual('div');
-  });
+      it('creates a node for the defined type', function() {
+        var node = Mastodom({
+          type: ['span']
+        });
+        expect(node.tagName).toEqual('SPAN');
+        expect(node.parent).toBeUndefined();
+      });
 
-  it("allows the default element type to be customised", function(){
-    expect(window.Mn.defaultElementType).toBeDefined();
-    var newElementType = 'h1';
-    var oldElementType = 'div';
-    window.Mn.defaultElementType = newElementType;
-    expect(window.Mn.defaultElementType).toEqual(newElementType);
-    window.Mn.defaultElementType = oldElementType;
-  });
+      it('creates a tree for the defined array of types', function() {
+        var node = Mastodom({
+          type: ['div', 'span']
+        });
+        expect(node.tagName).toEqual('DIV');
+        expect(node.childNodes[0]).toBeDefined();
+        expect(node.childNodes[0].tagName).toEqual('SPAN');
+      });
 
-  it("creates a single html node", function(){
-    var parent = document.createElement('div');
-    var dom = {
-      parent: parent,
-      attributes: {
-      id: "testID",
-      class: "testClass",
-      "data-test": "testCustomAttributes"
-      }
-    };
-    window.Mn.createElement(dom);
-
-    var element = parent.childNodes[0];
-
-    expect(parent.childNodes.length).toEqual(1);
-    expect(element.localName).toEqual(window.Mn.defaultElementType);
-    expect(parent.childNodes[0].id).toEqual(dom.attributes.id);
-    expect(parent.childNodes[0].className).toEqual(dom.attributes.class);
-    expect(parent.childNodes[0].dataset["test"]).toEqual(dom.attributes["data-test"]);
-  });
+    });
 
-  it("creates nested nodes", function(){
+    describe('content', function() {
 
-    var parent = document.createElement('div');
-    var domToCreate = {
-      parent: parent,
-      children:[
-        {
-          children: [
-            {content: "content-00"},
-            {content: "content-01"}
-          ]
-        },
-        {
-          children: [
-            {content: "content-10"},
-            {content: "content-11"}
-          ]
-        }
-      ]
-    };
-    Mn.createElement(domToCreate);
-    var createdDom = parent.childNodes[0];
-
-    expect(createdDom).toBeDefined();
-    expect(createdDom.children.length).toEqual(domToCreate.children.length);
-
-    domToCreate.children.forEach(function(value, row1){
-      domToCreate.children[row1].children.forEach(function(value, row2){
-        expect(value.content).toEqual("content-" +row1 + row2 );
+      it('sets the content attribute as the inner html of the node', function() {
+        var node = Mastodom({
+          type: 'span',
+          content: 'Hello World'
+        });
+        expect(node.innerHTML).toEqual('Hello World');
       });
+
     });
-  });
 
-  it("allows a type to be set for the elements", function(){
-    var parent = document.createElement('div');
-    var domToCreate = {
-      parent: parent,
-      type: 'h1',
-      children: [
-        {
-        type: 'h2',
-        children: [
-          {type: 'h3'}
-        ]
-        }
-      ]
-    };
-    window.Mn.createElement(domToCreate);
-
-    var createdDom = parent.childNodes[0];
-    var node = createdDom;
-    var level = 1;
-    while (node){
-      expect(node.localName).toEqual('h'+level);
-      node = node.childNodes[0];
-      level++;
-    }
-  });
+    describe('attributes', function() {
+
+      it('adds each of the key, value attributes to the dom node', function() {
+        var node = Mastodom({
+          type: 'p',
+          content: 'Hello World',
+          attributes: {
+            id: 'hello-world-node',
+            class: 'hello world node'
+          }
+        });
+        expect(node.attributes.length).toEqual(2)
+      });
 
-  it("can created nested nodes with a type list", function(){
-    var parent = document.createElement('div');
-    var domToCreate = {
-    parent: parent,
-    type: ['h1', 'h2', 'h3']
-
-    };
-    window.Mn.createElement(domToCreate);
-    var createdDom = parent.childNodes[0];
-    var level = 1;
-    var node = createdDom;
-    while(node){
-      expect(node.localName).toEqual('h' + level);
-      level++;
-      node = node.children[0];
-    }
-  });
+    });
+
+    describe('events', function() {
+
+      it('binds each of the key, value events to the dom node', function() {
+        var clicked = false;
+        Mastodom({
+          type: 'a',
+          content: 'Click me!',
+          events: {
+            click: function(event) {
+              clicked = true;
+            }
+          }
+        }).click();
+        expect(clicked).toEqual(true);
+      });
+
+    });
+
+    describe('children', function() {
 
-  it("can handle children and list of types simultaneously",function(){
-    var parent = document.createElement('div');
-    var domToCreate = {
-      parent: parent,
-      type: ['h1', 'h2', 'h3'],
-      children: [
-        {
-        type: 'h4',
-        children: [
-          {type: 'h5'}
-        ]
-        }
-      ]
-    };
-    window.Mn.createElement(domToCreate);
-    var createdDom = parent.childNodes[0];
-    var level = 1;
-    var currentNode = createdDom;
-    while(currentNode){
-      expect(currentNode.localName).toEqual('h' + level);
-      currentNode = currentNode.childNodes[0];
-      level++;
-    }
-    expect(level - 1).toEqual(5);
+      it('accepts dom elements as children', function() {
+        expect(Mastodom({
+          type: 'div',
+          content: 'Hello World',
+          children: [
+            document.createElement('div')
+          ]
+        }).children.length).toEqual(1);
+      });
+
+      it('recursively parses new specifications as children', function() {
+        var nodes = Mastodom({
+          type: 'div',
+          content: 'Hello World',
+          children: [{
+            type: 'span',
+            children: [{
+              type: 'a',
+              content: 'Howdy!'
+            }]
+          }]
+        })
+        expect(nodes.children.length).toEqual(1);
+        expect(nodes.children[0].children.length).toEqual(1);
+      });
+
+    });
 
   });