sproutcore 1.5.0.pre.3 → 1.5.0.pre.4

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/template_view/handlebars.js

@@ -0,0 +1,295 @@
+/**
+  This module specifically tests integration with Handlebars and SproutCore-specific
+  Handlebars extensions.
+
+  If you add additional template support to SC.TemplateView, you should create a new
+  file in which to test.
+*/
+module("SC.TemplateView - handlebars integration");
+
+test("template view should call the function of the associated template", function() {
+  var view = SC.TemplateView.create({
+    templateName: 'test_template',
+    templates: SC.Object.create({
+      test_template: SC.Handlebars.compile("<h1 id='twas-called'>template was called</h1>")
+    })
+  });
+
+  view.createLayer();
+
+  ok(view.$('#twas-called').length, "the named template was called");
+});
+
+test("template view should call the function of the associated template with itself as the context", function() {
+  var view = SC.TemplateView.create({
+    templateName: 'test_template',
+
+    _personName: "Tom DAAAALE",
+    _i: 0,
+
+    personName: function() {
+      this._i++;
+      return this._personName + this._i;
+    }.property().cacheable(),
+
+    templates: SC.Object.create({
+      test_template: SC.Handlebars.compile("<h1 id='twas-called'>template was called for {{personName}}. Yea {{personName}}</h1>")
+    })
+  });
+
+  view.createLayer();
+
+  equals("template was called for Tom DAAAALE1. Yea Tom DAAAALE1", view.$('#twas-called').text(), "the named template was called with the view as the data source");
+});
+
+TemplateTests = {};
+
+test("child views can be inserted using the {{view}} Handlebars helper", function() {
+  var templates = SC.Object.create({
+    nester: SC.Handlebars.compile("<h1 id='hello-world'>Hello {{world}}</h1>{{view \"TemplateTests.LabelView\"}}"),
+    nested: SC.Handlebars.compile("<div id='child-view'>Goodbye {{cruel}} {{world}}</div>")
+  });
+
+  TemplateTests.LabelView = SC.TemplateView.extend({
+    tagName: "aside",
+    cruel: "cruel",
+    world: "world?",
+    templateName: 'nested',
+    templates: templates
+  });
+
+  var view = SC.TemplateView.create({
+    world: "world!",
+    templateName: 'nester',
+    templates: templates
+  });
+
+  view.createLayer();
+
+  ok(view.$("#hello-world:contains('Hello world!')").length, "The parent view renders its contents");
+  ok(view.$("#child-view:contains('Goodbye cruel world?')").length === 1, "The child view renders its content once");
+  ok(view.$().html().match(/Hello world!.*<aside.*Goodbye cruel world?/), "parent view should appear before the child view");
+
+});
+
+test("child views can be inserted inside a bind block", function() {
+  var templates = SC.Object.create({
+    nester: SC.Handlebars.compile("<h1 id='hello-world'>Hello {{world}}</h1>{{view \"TemplateTests.LabelView\"}}"),
+    nested: SC.Handlebars.compile("<div id='child-view'>Goodbye {{#bind \"content\"}}{{blah}} {{view \"TemplateTests.OtherView\"}}{{/bind}} {{world}}</div>"),
+    other: SC.Handlebars.compile("cruel")
+  });
+
+  TemplateTests.LabelView = SC.TemplateView.extend({
+    tagName: "aside",
+    cruel: "cruel",
+    world: "world?",
+    content: SC.Object.create({ blah: "wot" }),
+    templateName: 'nested',
+    templates: templates
+  });
+
+  TemplateTests.OtherView = SC.TemplateView.extend({
+    templates: templates,
+    templateName: 'other'
+  });
+
+  var view = SC.TemplateView.create({
+    world: "world!",
+    templateName: 'nester',
+    templates: templates
+  });
+
+  view.createLayer();
+
+  ok(view.$("#hello-world:contains('Hello world!')").length, "The parent view renders its contents");
+  ok(view.$("aside:contains('Goodbye wot cruel world?')").length === 1, "The child view renders its content once");
+  ok(view.$().html().match(/Hello world!.*<aside.*Goodbye.*wot.*cruel.*world?/), "parent view should appear before the child view");
+
+});
+
+test("SC.TemplateView updates when a property changes", function() {
+  var templates = SC.Object.create({
+   foo: SC.Handlebars.compile('<h1 id="first">{{#with content}}{{bind "wham"}}{{/with}}</h1>')
+  });
+
+  var view = SC.TemplateView.create({
+    templateName: 'foo',
+    templates: templates,
+
+    content: SC.Object.create({
+      wham: 'bam',
+      thankYou: "ma'am"
+    })
+  });
+
+  view.createLayer();
+
+  equals(view.$('#first').text(), "bam", "precond - view renders Handlebars template");
+
+  SC.run(function() { view.get('content').set('wham', 'bazam'); });
+
+  equals(view.$('#first').text(), "bazam", "view updates when a bound property changes");
+});
+
+
+test("Handlebars templates update properties if a content object changes", function() {
+  var templates;
+
+  templates = SC.Object.create({
+    menu: SC.Handlebars.compile('<h1>Today\'s Menu</h1>{{#bind "coffee"}}<h2>{{color}} coffee</h2><span id="price">{{bind "price"}}</span>{{/bind}}')
+  });
+
+  var view = SC.TemplateView.create({
+    templateName: 'menu',
+    templates: templates,
+
+    coffee: SC.Object.create({
+      color: 'brown',
+      price: '$4'
+    })
+  });
+
+  view.createLayer();
+
+  equals(view.$('h2').text(), "brown coffee", "precond - renders color correctly");
+  equals(view.$('#price').text(), '$4', "precond - renders price correctly");
+
+  view.set('coffee', SC.Object.create({
+    color: "mauve",
+    price: "$4.50"
+  }));
+
+  equals(view.$('h2').text(), "mauve coffee", "should update name field when content changes");
+  equals(view.$('#price').text(), "$4.50", "should update price field when content changes");
+
+  view.set('coffee', SC.Object.create({
+    color: "mauve",
+    price: "$5.50"
+  }));
+
+  equals(view.$('h2').text(), "mauve coffee", "should update name field when content changes");
+  equals(view.$('#price').text(), "$5.50", "should update price field when content changes");
+
+  view.setPath('coffee.price', "$5");
+
+  equals(view.$('#price').text(), "$5", "should update price field when price property is changed");
+});
+
+test("Template views return a no-op function if their template cannot be found", function() {
+  var view = SC.TemplateView.create({
+    templateName: 'cantBeFound'
+  });
+
+  var template = view.get('template');
+
+  ok(SC.typeOf(template) === 'function', 'template should be a function');
+  equals(template(), '', 'should return an empty string');
+});
+
+test("Template views can belong to a pane and a parent view", function() {
+  var templates = SC.Object.create({
+    toDo: SC.Handlebars.compile('<h1>{{title}}</h1> (Created at {{createdAt}})')
+  });
+
+  var didCreateLayerWasCalled = NO;
+
+  var pane = SC.MainPane.design({
+    childViews: ['container'],
+
+    container: SC.View.design({
+      childViews: ['normalView', 'template'],
+
+      normalView: SC.View,
+
+      template: SC.TemplateView.design({
+        templates: templates,
+
+        templateName: 'toDo',
+        title: 'Do dishes',
+        createdAt: "Today",
+
+        didCreateLayer: function() {
+          didCreateLayerWasCalled = YES;
+        }
+      })
+    })
+  });
+
+  pane = pane.create().append();
+
+  equals(pane.$().children().length, 1, "pane has one child DOM element");
+  equals(pane.$().children().children().length, 2, "container view has two child DOM elements");
+  equals(pane.$().children().children().eq(1).html(), "<h1>Do dishes</h1> (Created at Today)", "renders template to the correct DOM element");
+  ok(didCreateLayerWasCalled, "didCreateLayer gets called on a template view after it gets rendered");
+  pane.remove();
+});
+
+test("Template views add a layerId to child views created using the view helper", function() {
+  var templates = SC.Object.create({
+    parent: SC.Handlebars.compile('<aside>{{view "TemplateTests.ChildView"}}</aside>'),
+    child: SC.Handlebars.compile("I can't believe it's not butter.")
+  });
+
+  TemplateTests.ChildView = SC.TemplateView.extend({
+    templates: templates,
+    templateName: 'child'
+  });
+
+  var view = SC.TemplateView.create({
+    templates: templates,
+    templateName: 'parent'
+  });
+
+  view.createLayer();
+  var childView = view.getPath('childViews.firstObject');
+  equals(view.$().children().first().children().first().attr('id'), childView.get('layerId'));
+});
+
+test("Template views set the template of their children to a passed block", function() {
+  var templates = SC.Object.create({
+    parent: SC.Handlebars.compile('<h1>{{#view "TemplateTests.NoTemplateView"}}<span>It worked!</span>{{/view}}')
+  });
+
+  TemplateTests.NoTemplateView = SC.TemplateView.extend();
+
+  var view = SC.TemplateView.create({
+    templates: templates,
+    templateName: 'parent'
+  });
+
+  view.createLayer();
+  ok(view.$().html().match(/<h1>.*<span>.*<\/span>.*<\/h1>/), "renders the passed template inside the parent template");
+});
+
+test("Child views created using the view helper should have their parent view set properly", function() {
+  TemplateTests = {};
+
+  var template = '{{#view "SC.TemplateView"}}{{#view "SC.TemplateView"}}{{view "SC.TemplateView"}}{{/view}}{{/view}}';
+
+  var view = SC.TemplateView.create({
+    template: SC.Handlebars.compile(template)
+  });
+
+  view.createLayer();
+
+  var childView = view.childViews[0].childViews[0];
+  equals(childView, childView.childViews[0].parentView, 'parent view is correct');
+});
+
+test("Collection views that specify an example view class have their children be of that class", function() {
+  TemplateTests.ExampleViewCollection = SC.TemplateCollectionView.create({
+    itemView: SC.TemplateView.extend({
+      isCustom: YES
+    }),
+
+    content: ['foo']
+  });
+
+  var parentView = SC.TemplateView.create({
+    template: SC.Handlebars.compile('{{#collection "TemplateTests.ExampleViewCollection"}}OHAI{{/collection}}')
+  });
+
+  parentView.createLayer();
+
+  ok(parentView.childViews[0].childViews[0].isCustom, "uses the example view class");
+});

data/lib/frameworks/sproutcore/frameworks/{amber → core_foundation}/tests/views/view/animation.js

@@ -18,6 +18,7 @@ function transitionFor(view){
 
 var commonSetup = {
   setup: function() {
+
     SC.RunLoop.begin();
 
     pane = SC.Pane.create({
@@ -25,7 +26,7 @@ var commonSetup = {
       layout: { top: 0, right: 0, width: 200, height: 200, zIndex: 100 }
     });
     pane.append();
-    
+
     view = SC.View.create({
       backgroundColor: '#888',
       layout: { left: 0, top: 0, height: 100, width: 100 }
@@ -56,15 +57,15 @@ if (SC.platform.supportsCSSTransitions) {
     SC.RunLoop.begin();
     view.animate('left', 100, 1);
     SC.RunLoop.end();
-    equals(transitionFor(view), 'left 1s linear', 'add transition');  
+    equals(transitionFor(view), 'left 1s linear', 'add transition');
   });
 
   test("callbacks work in general", function(){
-    stop(1000);
+    stop(2000);
 
     SC.RunLoop.begin();
     // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, 'left', 100, .5, function() {
+    view.invokeLater('animate', 1, 'left', 100, 0.500, function() {
       start();
       ok(true, "Callback was called.");
     });
@@ -72,11 +73,11 @@ if (SC.platform.supportsCSSTransitions) {
   });
 
   test("callbacks should have appropriate data", function(){
-    stop(1000);
+    stop(2000);
 
     SC.RunLoop.begin();
     // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, 'left', 100, .5, function(data) {
+    view.invokeLater('animate', 1, 'left', 100, 0.500, function(data) {
       start();
 
       // TODO: Test this better
@@ -113,7 +114,7 @@ if (SC.platform.supportsCSSTransitions) {
 
   // Pretty sure this does the job
   test("callbacks should be called for each property", function(){
-    stop(1000);
+    stop(2000);
     var stopped = true;
 
     expect(2);
@@ -121,7 +122,7 @@ if (SC.platform.supportsCSSTransitions) {
 
     SC.RunLoop.begin();
     // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, { top: 100, left: 100 }, .5, function(data) {
+    view.invokeLater('animate', 1, { top: 100, left: 100 }, 0.500, function(data) {
       if (stopped) {
         start();
         stopped = false;
@@ -144,10 +145,10 @@ if (SC.platform.supportsCSSTransitions) {
     expect(2);
 
     SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', 100, 1, function(){
+    view.invokeLater('animate', 1, 'top', 100, 0.250, function(){
       ok(true, 'top finished');
     });
-    view.invokeLater('animate', 500, 'left', 100, .5, function(){
+    view.invokeLater('animate', 2, 'left', 100, 0.500, function(){
       ok(true, 'left finished');
       start();
     });
@@ -160,10 +161,10 @@ if (SC.platform.supportsCSSTransitions) {
     expect(2);
 
     SC.RunLoop.begin();
-    view.invokeLater('animate', 1, 'top', 100, 1, function(data){
+    view.invokeLater('animate', 1, 'top', 100, 0.500, function(data){
       equals(data.isCancelled, true, 'first cancelled');
     });
-    view.invokeLater('animate', 500, 'top', 0, .5, function(data){
+    view.invokeLater('animate', 250, 'top', 0, 0.500, function(data){
       equals(data.isCancelled, false, 'second not cancelled');
       start();
     });
@@ -176,7 +177,7 @@ if (SC.platform.supportsCSSTransitions) {
     SC.RunLoop.end();
     equals(transitionFor(view), '-'+SC.platform.cssPrefix+'-transform 1s linear', 'add transition');
     equals(styleFor(view)[SC.platform.domCSSPrefix+'Transform'], 'rotateX(45deg)', 'has both transforms');
-    equals(45, view.get('layout').rotateX, 'rotateX is 45deg'); 
+    equals(45, view.get('layout').rotateX, 'rotateX is 45deg');
   });
 
   test("should handle conflicting transform animations", function(){
@@ -202,12 +203,12 @@ if (SC.platform.supportsCSSTransitions) {
   test("should properly handle callbacks from conflicting transforms");
 
   test("removes animation property when done", function(){
-    stop(1500);
+    stop(2000);
 
     SC.RunLoop.begin();
-    view.invokeLater('animate', 1, { top: 100, scale: 2 }, 0.5);
+    view.invokeLater('animate', 1000, { top: 100, scale: 2 }, 0.500);
     SC.RunLoop.end();
-    
+
     setTimeout(function(){
       start();
       equals(view.get('layout').animateTop, undefined, "animateTop is undefined");
@@ -263,7 +264,7 @@ if (SC.platform.supportsCSSTransitions) {
   });
 
   test("callbacks should work properly with acceleration", function(){
-    stop(1000);
+    stop(2000);
     var stopped = true;
 
     expect(3);
@@ -271,7 +272,7 @@ if (SC.platform.supportsCSSTransitions) {
 
     SC.RunLoop.begin();
     // We shouldn't have to use invokeLater, but it's the only way to get this to work!
-    view.invokeLater('animate', 1, { top: 100, left: 100, scale: 2 }, .5, function(data) {
+    view.invokeLater('animate', 1, { top: 100, left: 100, scale: 2 }, 0.500, function(data) {
       if (stopped) {
         start();
         stopped = false;

data/lib/frameworks/sproutcore/frameworks/{amber → core_foundation}/tests/views/view/createChildViews.js

@@ -8,7 +8,7 @@
 
 // ..........................................................
 // createChildViews()
-// 
+//
 module("SC.View#createChildViews");
 
 test("calls createChildView() for each class or string in childViews array", function() {
@@ -16,24 +16,27 @@ test("calls createChildView() for each class or string in childViews array", fun
   var v = SC.View.create({
     childViews: [
       SC.View.extend({ key: 0 }), // class - should be called
-      SC.View.create({ key: 1 }), // NOT class - should NOT be called
-      'customClassName'           // string - should be called 
+      SC.View.create({ key: 1 }), // instance - will be called
+      'customClassName'           // string - should be called
     ],
 
     // this shuld be used for the 'customClassName' item above
     customClassName: SC.View.extend({ key: 2 }),
-    
+
     // patch to record results...
     createChildView: function(childView) {
-      called.push(childView.prototype.key);
-      ok(childView.isClass, "childView: %@ isClass".fmt(childView));
+      if(childView.isClass) {
+        called.push(childView.prototype.key);
+      } else {
+        called.push(childView.key);
+      }
       return sc_super();
     }
   });
-  
+
   // createChildViews() is called automatically during create.
-  same(called, [0,2], 'called createChildView for correct children');
-  
+  same(called, [0,1,2], 'called createChildView for correct children');
+
   // make sure childViews array is correct now.
   var cv = v.childViews, len = cv.length, idx;
   for(idx=0;idx<len;idx++) {
@@ -51,7 +54,7 @@ test("should not error when there is a dud view name in childViews list.", funct
     ],
     // this shuld be used for the 'customClassName' item above
     customClassName: SC.View.extend({ key: 2 }),
-    
+
     // patch to record results...
     createChildView: function(childView) {
       called.push(childView.prototype.key);
@@ -59,7 +62,7 @@ test("should not error when there is a dud view name in childViews list.", funct
       return sc_super();
     }
   });
-  
+
   // createChildViews() is called automatically during create.
   same(called, [2], 'called createChildView for correct children');
 });
@@ -72,9 +75,9 @@ test("should not throw error when there is an extra space in the childViews list
     customClassName: SC.View.extend({ key: 2 }),
     customKlassName: SC.View.extend({ key: 3 })
   });
-  
+
   ok(true, "called awake without issue.");
-  
+
 });
 
 test("should not create layer for created child views", function() {
@@ -87,12 +90,12 @@ test("should not create layer for created child views", function() {
 
 // ..........................................................
 // createChildView()
-// 
+//
 
 var view, myViewClass ;
 module("SC.View#createChildView", {
   setup: function() {
-    view = SC.View.create({ page: SC.Object.create() }); 
+    view = SC.View.create({ page: SC.Object.create() });
     myViewClass = SC.View.extend({ isMyView: YES, foo: 'bar' });
   }
 });

data/lib/frameworks/sproutcore/frameworks/{amber → core_foundation}/tests/views/view/didAppendToDocument.js

@@ -26,14 +26,17 @@ test("Check that didAppendToDocument gets called at the right moment", function(
        })
      ]
    });
-   equals(counter, 0, "");
+   equals(counter, 0, "precond - has not been called yet");
    pane.append(); // make sure there is a layer...
-   equals(counter, 1, "");
+   equals(counter, 1, "didAppendToDocument was called once");
    view  = pane.childViews[0];
-   view.displayDidChange();
-   SC.RunLoop.begin().end();
-   equals(counter, 2, "");  
- 
+
+   SC.run(function() {
+     view.updateLayer();
+   });
+
+   equals(counter, 2, "didAppendToDocument is called every time a new DOM element is created");
+
    var additionalView = SC.View.extend({
      didAppendToDocument: function(){
        counter++;
@@ -41,8 +44,8 @@ test("Check that didAppendToDocument gets called at the right moment", function(
    });
    additionalView = additionalView.create();
    pane.appendChild(additionalView);
- 
+
    SC.RunLoop.begin().end();
-   equals(counter, 3, "");  
+   equals(counter, 3, "");
    pane.remove();
 });

data/lib/frameworks/sproutcore/frameworks/{amber → core_foundation}/tests/views/view/isVisible.js

@@ -49,3 +49,31 @@ test("adding a new view to a visible pane should make it visible", function() {
   ok(!view.get('isVisible'), "after pane.appendChild(view), view.get('isVisible') === YES") ;
   ok(view.$().hasClass('hidden'), "after view.set('isVisible', NO), view.$().hasClass('hidden') should be true") ;
 });
+
+test("a view with visibility can have a child view without visibility", function() {
+  var pane = SC.Pane.create({
+    childViews: ['visibleChild'],
+
+    visibleChild: SC.View.design({
+      childViews: ['noVisibilityChild'],
+      noVisibilityChild: SC.CoreView
+    })
+  });
+
+  var errored = false;
+
+  try {
+    pane.append();
+    pane.remove();
+  } catch(e) {
+    errored = true;
+  } finally {
+    try {
+      pane.remove();
+    } catch(e2) {
+      errored = true;
+    }
+  }
+
+  ok(!errored, "Inserting a pane containing a child with visibility that itself has a child without visibility does not cause an error");
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/keyboard.js

@@ -0,0 +1,22 @@
+module("SC.View - Keyboard support");
+
+test("Views only attempt to call performKeyEquivalent on child views that support it", function() {
+  var performKeyEquivalentCalled = 0;
+
+  var view = SC.View.design({
+    childViews: ['unsupported', 'supported'],
+
+    unsupported: SC.CoreView,
+    supported: SC.View.design({
+      performKeyEquivalent: function(str) {
+        performKeyEquivalentCalled++;
+        return NO;
+      }
+    })
+  });
+
+  view = view.create();
+  view.performKeyEquivalent("ctrl_r");
+  
+  ok(performKeyEquivalentCalled > 0, "performKeyEquivalent is called on the view that supports it");
+});