Merge pull request component#64 from ianstormtaylor/fix-tests

fixed tests from domify change
matthewmueller · Jun 23, 2013 · ed3afdb · ed3afdb
2 parents ae2de43 + 8c66b21
commit ed3afdb
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 43 deletions.
diff --git a/Makefile b/Makefile
@@ -13,4 +13,7 @@ components: component.json
 clean:
 	rm -fr build components template.js
 
-.PHONY: clean reactive.js
+test: build
+	open test/index.html
+
+.PHONY: clean reactive.js test
diff --git a/test/adapters.js b/test/adapters.js
@@ -23,7 +23,7 @@ describe('reactive.subscribe(fn)', function(){
       obj.unbind('change ' + prop);
     });
 
-    var el = domify('<div><h1 data-text="name"></h1></div>')[0];
+    var el = domify('<div><h1 data-text="name"></h1></div>');
     reactive(el, user);
     user.name = 'Tobi';
     user.trigger('change name');

diff --git a/test/attr-interpolation.js b/test/attr-interpolation.js
@@ -6,21 +6,21 @@ var assert = require('assert');
 
 describe('attr interpolation', function(){
   it('should support initialization', function(){
-    var el = domify('<a href="/download/{id}"></a>')[0];
+    var el = domify('<a href="/download/{id}"></a>');
     var user = { id: '1234' };
     var view = reactive(el, user);
     assert('/download/1234' == el.getAttribute('href'));
   })
 
   it('should ignore whitespace', function(){
-    var el = domify('<a href="/download/{ id }"></a>')[0];
+    var el = domify('<a href="/download/{ id }"></a>');
     var user = { id: '1234' };
     var view = reactive(el, user);
     assert('/download/1234' == el.getAttribute('href'));
   })
 
   it('should react to changes', function(){
-    var el = domify('<a href="/download/{id}"></a>')[0];
+    var el = domify('<a href="/download/{id}"></a>');
     var user = { id: '1234' };
     Emitter(user);
     var view = reactive(el, user);
@@ -33,7 +33,7 @@ describe('attr interpolation', function(){
   })
 
   it('should support multiple attributes', function(){
-    var el = domify('<a href="/download/{id}" id="file-{id}">Download {file}</a>')[0];
+    var el = domify('<a href="/download/{id}" id="file-{id}">Download {file}</a>');
     var user = { id: '1234' };
     Emitter(user);
     var view = reactive(el, user);
@@ -48,7 +48,7 @@ describe('attr interpolation', function(){
   })
 
   it('should support multiple properties', function(){
-    var el = domify('<a href="/download/{id}-{file}"></a>')[0];
+    var el = domify('<a href="/download/{id}-{file}"></a>');
     var user = { id: '1234', file: 'something' };
     Emitter(user);
     var view = reactive(el, user);

diff --git a/test/bindings.js b/test/bindings.js
@@ -11,7 +11,7 @@ describe('reactive.bind(name, fn)', function(){
       done();
     });
 
-    var el = domify('<div><h1 data-editable="/item/12">Title</h1></div>')[0];
+    var el = domify('<div><h1 data-editable="/item/12">Title</h1></div>');
     reactive(el, {});
   })
 })
@@ -25,14 +25,14 @@ describe('reactive.bind(obj)', function(){
       }
     });
 
-    var el = domify('<div><h1 hello="world">Title</h1></div>')[0];
+    var el = domify('<div><h1 hello="world">Title</h1></div>');
     reactive(el, {});
   })
 })
 
 describe('Reactive#bind(name, fn)', function(){
   it('should define a view-specific binding', function(done){
-    var el = domify('<ul><li removable></li></ul>')[0];
+    var el = domify('<ul><li removable></li></ul>');
     var view = reactive(el, {});
 
     view.bind('removable', function(el){
@@ -44,7 +44,7 @@ describe('Reactive#bind(name, fn)', function(){
 
 describe('Reactive#bind(obj)', function(){
   it('should define several view-specific bindings', function(done){
-    var el = domify('<div><form action="/login" autosubmit></form></div>')[0];
+    var el = domify('<div><form action="/login" autosubmit></form></div>');
     var view = reactive(el, {});
 
     view.bind({

diff --git a/test/computed.js b/test/computed.js
@@ -23,7 +23,7 @@ var user = new User('Tobi', 'Ferret');
 
 describe('computed properties', function(){
   it('should work with multiple properties', function(){
-    var el = domify('<p><em data-text="fullname < first last"></em></p>')[0];
+    var el = domify('<p><em data-text="fullname < first last"></em></p>');
     var user = new User('Tobi', 'Ferret');
     var view = reactive(el, user);
     var em = el.children[0];
@@ -32,7 +32,7 @@ describe('computed properties', function(){
   })
 
   it('should react to changes', function(){
-    var el = domify('<p><em data-text="fullname < first last"></em></p>')[0];
+    var el = domify('<p><em data-text="fullname < first last"></em></p>');
     var user = new User('Tobi', 'Ferret');
     var view = reactive(el, user);
     var em = el.children[0];
@@ -49,7 +49,7 @@ describe('computed properties', function(){
   })
 
   it('should work with .value() only', function(){
-    var el = domify('<p><em data-hide="removed < removed_at"></em></p>')[0];
+    var el = domify('<p><em data-hide="removed < removed_at"></em></p>');
     var user = new User('Tobi', 'Ferret');
     var view = reactive(el, user);
     var em = el.children[0];

diff --git a/test/reactive.js b/test/reactive.js
@@ -7,22 +7,22 @@ var assert = require('assert');
 
 describe('reactive(el, obj)', function(){
   it('should set values on initialization', function(){
-    var el = domify('<div><p data-text="name"></p></div>')[0];
+    var el = domify('<div><p data-text="name"></p></div>');
     var user = { name: 'Tobi' };
     var view = reactive(el, user);
     assert('Tobi' == el.children[0].textContent);
   })
 
   it('should work with multiple bindings', function(){
-    var el = domify('<div><span data-text="first"></span><span data-text="last"></span></div>')[0];
+    var el = domify('<div><span data-text="first"></span><span data-text="last"></span></div>');
     var user = { first: 'Tobi', last: 'Ferret' };
     var view = reactive(el, user);
     assert('Tobi' == el.children[0].textContent);
     assert('Ferret' == el.children[1].textContent);
   })
 
   it('should support getter methods', function(){
-    var el = domify('<div><p data-text="first"></p></div>')[0];
+    var el = domify('<div><p data-text="first"></p></div>');
 
     var user = {
       _first: 'Tobi',
@@ -35,7 +35,7 @@ describe('reactive(el, obj)', function(){
   });
 
   it('should support computed values on views', function(){
-    var el = domify('<div><p data-text="name"></p></div>')[0];
+    var el = domify('<div><p data-text="name"></p></div>');
 
     var user = {
       first: 'Tobi',
@@ -62,7 +62,7 @@ describe('reactive(el, obj)', function(){
 
 describe('on "change <name>"', function(){
   it('should update bindings', function(){
-    var el = domify('<div><p data-text="name"></p></div>')[0];
+    var el = domify('<div><p data-text="name"></p></div>');
 
     function User(name) {
       this.name = name;
@@ -83,14 +83,14 @@ describe('on "change <name>"', function(){
 
 describe('data-text', function(){
   it('should set element text', function(){
-    var el = domify('<div><p data-text="name"></p></div>')[0];
+    var el = domify('<div><p data-text="name"></p></div>');
     var user = { name: 'Tobi' };
     var view = reactive(el, user);
     assert('Tobi' == el.children[0].textContent);
   })
 
   it('should support formatters', function(){
-    var el = domify('<div><p data-text="created_at | date:\'%Y/%M/%d\'"></p></div>')[0];
+    var el = domify('<div><p data-text="created_at | date:\'%Y/%M/%d\'"></p></div>');
     var now = new Date;
     var user = { created_at: now };
 
@@ -108,14 +108,14 @@ describe('data-text', function(){
 
 describe('data-html', function(){
   it('should set element html', function(){
-    var el = domify('<div><p data-html="name"></p></div>')[0];
+    var el = domify('<div><p data-html="name"></p></div>');
     var user = { name: '<strong>Tobi</strong>' };
     var view = reactive(el, user);
     assert('<strong>Tobi</strong>' == el.children[0].innerHTML);
   })
 
   it('should support computed values', function(){
-    var el = domify('<div><ul data-html="fruits"></ul></div>')[0];
+    var el = domify('<div><ul data-html="fruits"></ul></div>');
     var user = { diet : [ 'apples', 'pears', 'oranges' ] };
     var view = reactive(el, user, {
       fruits : function(fruits) {
@@ -134,14 +134,14 @@ describe('data-html', function(){
 
 describe('data-show', function(){
   it('should add .show when truthy', function(){
-    var el = domify('<div><p data-show="file">Has a file</p></div>')[0];
+    var el = domify('<div><p data-show="file">Has a file</p></div>');
     var item = { file: 'some.png' };
     var view = reactive(el, item);
     assert('show' == el.children[0].className);
   })
 
   it('should remove .hide when truthy', function(){
-    var el = domify('<div><p data-show="file" class="file hide">Has a file</p></div>')[0];
+    var el = domify('<div><p data-show="file" class="file hide">Has a file</p></div>');
     var item = { file: 'some.png' };
     var view = reactive(el, item);
     assert('file show' == el.children[0].className);
@@ -150,14 +150,14 @@ describe('data-show', function(){
 
 describe('data-hide', function(){
   it('should add .hide when truthy', function(){
-    var el = domify('<div><p data-hide="file">Has a file</p></div>')[0];
+    var el = domify('<div><p data-hide="file">Has a file</p></div>');
     var item = { file: 'some.png' };
     var view = reactive(el, item);
     assert('hide' == el.children[0].className);
   })
 
   it('should remove .show when truthy', function(){
-    var el = domify('<div><p data-hide="file" class="file show">Has a file</p></div>')[0];
+    var el = domify('<div><p data-hide="file" class="file show">Has a file</p></div>');
     var item = { file: 'some.png' };
     var view = reactive(el, item);
     assert('file hide' == el.children[0].className);
@@ -166,14 +166,14 @@ describe('data-hide', function(){
 
 describe('data-checked', function(){
   it('should check when truthy', function(){
-    var el = domify('<div><input data-checked="agree" /></div>')[0];
+    var el = domify('<div><input data-checked="agree" /></div>');
     var user = { agree: true };
     var view = reactive(el, user);
     assert('checked' == el.children[0].getAttribute('checked'));
   })
 
   it('should uncheck when falsey', function(){
-    var el = domify('<div><input data-checked="agree" /></div>')[0];
+    var el = domify('<div><input data-checked="agree" /></div>');
     var user = { agree: false };
     var view = reactive(el, user);
     assert(null == el.children[0].getAttribute('checked'));
@@ -182,8 +182,8 @@ describe('data-checked', function(){
 
 describe('data-append', function(){
   it('should append an element', function(){
-    var li = domify('<li>li</li>')[0];
-    var el = domify('<div><ul data-append="msg"></ul></div>')[0];
+    var li = domify('<li>li</li>');
+    var el = domify('<div><ul data-append="msg"></ul></div>');
     var view = reactive(el, {}, { msg: li });
     assert(li == el.children[0].children[0]);
   })
@@ -192,22 +192,22 @@ describe('data-append', function(){
 describe('data-replace', function(){
   it('should replace an element', function(){
     var canvas = document.createElement('canvas');
-    var el = domify('<div><div data-replace="canvas"></div></div>')[0];
+    var el = domify('<div><div data-replace="canvas"></div></div>');
     var view = reactive(el, {}, { canvas: canvas });
     assert(canvas == el.children[0]);
   })
 })
 
 describe('data-[attr]', function(){
   it('should set attribute value', function(){
-    var el = domify('<div><input type="text" data-value="name" /></div>')[0];
+    var el = domify('<div><input type="text" data-value="name" /></div>');
     var user = { name: 'Tobi' };
     var view = reactive(el, user);
     assert('Tobi' == el.children[0].value);
   })
 
   it('should support formatters', function(){
-    var el = domify('<div><a data-href="url | proxied" data-text="url"></a></div>')[0];
+    var el = domify('<div><a data-href="url | proxied" data-text="url"></a></div>');
     var now = new Date;
     var link = { url: 'http://google.com' };
 
@@ -223,7 +223,7 @@ describe('data-[attr]', function(){
   })
 
   it('should update bindings with formatters', function(){
-    var el = domify('<div><p data-text="name | toUpper"></p></div>')[0];
+    var el = domify('<div><p data-text="name | toUpper"></p></div>');
 
     function User(name) {
       this.name = name;

diff --git a/test/text-interpolation.js b/test/text-interpolation.js
@@ -6,21 +6,21 @@ var assert = require('assert');
 
 describe('text interpolation', function(){
   it('should support initialization', function(){
-    var el = domify('<div><a href="/download/{id}"><strong>Download</strong> {file}</a></div>')[0];
+    var el = domify('<div><a href="/download/{id}"><strong>Download</strong> {file}</a></div>');
     var user = { id: '1234', file: 'tobi.png' };
     var view = reactive(el, user);
     assert('Download tobi.png' == el.children[0].textContent);
   })
 
   it('should ignore whitespace', function(){
-    var el = domify('<div><a href="/download/{ id }"><strong>Download</strong> { file }</a></div>')[0];
+    var el = domify('<div><a href="/download/{ id }"><strong>Download</strong> { file }</a></div>');
     var user = { id: '1234', file: 'tobi.png' };
     var view = reactive(el, user);
     assert('Download tobi.png' == el.children[0].textContent);
   })
 
   it('should react to changes', function(){
-    var el = domify('<div><a href="/download/{id}"><strong>Download</strong> {file}</a></div>')[0];
+    var el = domify('<div><a href="/download/{id}"><strong>Download</strong> {file}</a></div>');
     var user = { id: '1234', file: 'tobi.png' };
     Emitter(user);
 
@@ -33,14 +33,14 @@ describe('text interpolation', function(){
   })
 
   it('should support multiple properties', function(){
-    var el = domify('<div><p>{first} {last} is a {species}</p></div>')[0];
+    var el = domify('<div><p>{first} {last} is a {species}</p></div>');
     var pet = { first: 'tobi', last: 'holowaychuk', species: 'ferret' };
     var view = reactive(el, pet);
     assert('tobi holowaychuk is a ferret' == el.children[0].textContent);
   })
 
   it('should support multiple properties in a single expression', function(){
-    var el = domify('<p>{first + " " + last}</p>')[0];
+    var el = domify('<p>{first + " " + last}</p>');
     var pet = { first: 'tobi', last: 'holowaychuk' };
     Emitter(pet)
 
@@ -53,7 +53,7 @@ describe('text interpolation', function(){
   })
 
   it('should support model method calls', function(){
-    var el = domify('<p>first: {first()}</p>')[0];
+    var el = domify('<p>first: {first()}</p>');
 
     var pet = {
       first: function(){
@@ -66,7 +66,7 @@ describe('text interpolation', function(){
   })
 
   it('should support complex expressions', function(){
-    var el = domify('<p>first: {siblings[0]}, last: {siblings[siblings.length - 1]}</p>')[0];
+    var el = domify('<p>first: {siblings[0]}, last: {siblings[siblings.length - 1]}</p>');
 
     var pet = {
       siblings: [
@@ -88,7 +88,7 @@ describe('text interpolation', function(){
   })
 
   it('should support the root element', function(){
-    var el = domify('<p>Hello {name}</a>')[0];
+    var el = domify('<p>Hello {name}</a>');
     var user = { name: 'Tobi' };
     reactive(el, user);
     assert('Hello Tobi' == el.textContent);