addons/web/static/test/Widget.js

   1 openerp.testing.section('Widget.proxy', {
   2     dependencies: ['web.corelib']
   3 }, function (test) {
   4     test('(String)', function (instance) {
   5         var W = instance.web.Widget.extend({
   6             exec: function () {
   7                 this.executed = true;
   8             }
   9         });
  10         var w = new W;
  11         var fn = w.proxy('exec');
  12         fn();
  13         ok(w.executed, 'should execute the named method in the right context');
  14     });
  15     test('(String)(*args)', function (instance) {
  16         var W = instance.web.Widget.extend({
  17             exec: function (arg) {
  18                 this.executed = arg;
  19             }
  20         });
  21         var w = new W;
  22         var fn = w.proxy('exec');
  23         fn(42);
  24         ok(w.executed, "should execute the named method in the right context");
  25         equal(w.executed, 42, "should be passed the proxy's arguments");
  26     });
  27     test('(String), include', function (instance) {
  28         // the proxy function should handle methods being changed on the class
  29         // and should always proxy "by name", to the most recent one
  30         var W = instance.web.Widget.extend({
  31             exec: function () {
  32                 this.executed = 1;
  33             }
  34         });
  35         var w = new W;
  36         var fn = w.proxy('exec');
  37         W.include({
  38             exec: function () { this.executed = 2; }
  39         });
  40
  41         fn();
  42         equal(w.executed, 2, "should be lazily resolved");
  43     });
  44
  45     test('(Function)', function (instance) {
  46         var w = new (instance.web.Widget.extend({ }));
  47
  48         var fn = w.proxy(function () { this.executed = true; });
  49         fn();
  50         ok(w.executed, "should set the function's context (like Function#bind)");
  51     });
  52     test('(Function)(*args)', function (instance) {
  53         var w = new (instance.web.Widget.extend({ }));
  54
  55         var fn = w.proxy(function (arg) { this.executed = arg; });
  56         fn(42);
  57         equal(w.executed, 42, "should be passed the proxy's arguments");
  58     });
  59 });
  60 openerp.testing.section('Widget.renderElement', {
  61     dependencies: ['web.corelib'],
  62     setup: function (instance) {
  63         instance.web.qweb = new QWeb2.Engine();
  64         instance.web.qweb.add_template(
  65             '<no>' +
  66                 '<t t-name="test.widget.template">' +
  67                     '<ol>' +
  68                         '<li t-foreach="5" t-as="counter" ' +
  69                             't-attf-class="class-#{counter}">' +
  70                             '<input/>' +
  71                             '<t t-esc="counter"/>' +
  72                         '</li>' +
  73                     '</ol>' +
  74                 '</t>' +
  75                 '<t t-name="test.widget.template-value">' +
  76                     '<p><t t-esc="widget.value"/></p>' +
  77                 '</t>' +
  78             '</no>');
  79     }
  80 }, function (test) {
  81     test('no template, default', function (instance) {
  82         var w = new (instance.web.Widget.extend({ }));
  83
  84         var $original = w.$el;
  85         ok($original, "should initially have a root element");
  86         w.renderElement();
  87         ok(w.$el, "should have generated a root element");
  88         ok($original !== w.$el, "should have generated a new root element");
  89         strictEqual(w.$el, w.$el, "should provide $el alias");
  90         ok(w.$el.is(w.el), "should provide raw DOM alias");
  91
  92         equal(w.el.nodeName, 'DIV', "should have generated the default element");
  93         equal(w.el.attributes.length, 0, "should not have generated any attribute");
  94         ok(_.isEmpty(w.$el.html(), "should not have generated any content"));
  95     });
  96     test('no template, custom tag', function (instance) {
  97         var w = new (instance.web.Widget.extend({
  98             tagName: 'ul'
  99         }));
 100         w.renderElement();
 101
 102         equal(w.el.nodeName, 'UL', "should have generated the custom element tag");
 103     });
 104     test('no template, @id', function (instance) {
 105         var w = new (instance.web.Widget.extend({
 106             id: 'foo'
 107         }));
 108         w.renderElement();
 109
 110         equal(w.el.attributes.length, 1, "should have one attribute");
 111         equal(w.$el.attr('id'), 'foo', "should have generated the id attribute");
 112         equal(w.el.id, 'foo', "should also be available via property");
 113     });
 114     test('no template, @className', function (instance) {
 115         var w = new (instance.web.Widget.extend({
 116             className: 'oe_some_class'
 117         }));
 118         w.renderElement();
 119
 120         equal(w.el.className, 'oe_some_class', "should have the right property");
 121         equal(w.$el.attr('class'), 'oe_some_class', "should have the right attribute");
 122     });
 123     test('no template, bunch of attributes', function (instance) {
 124         var w = new (instance.web.Widget.extend({
 125             attributes: {
 126                 'id': 'some_id',
 127                 'class': 'some_class',
 128                 'data-foo': 'data attribute',
 129                 'clark': 'gable',
 130                 'spoiler': 'snape kills dumbledore'
 131             }
 132         }));
 133         w.renderElement();
 134
 135         equal(w.el.attributes.length, 5, "should have all the specified attributes");
 136
 137         equal(w.el.id, 'some_id');
 138         equal(w.$el.attr('id'), 'some_id');
 139
 140         equal(w.el.className, 'some_class');
 141         equal(w.$el.attr('class'), 'some_class');
 142
 143         equal(w.$el.attr('data-foo'), 'data attribute');
 144         equal(w.$el.data('foo'), 'data attribute');
 145
 146         equal(w.$el.attr('clark'), 'gable');
 147         equal(w.$el.attr('spoiler'), 'snape kills dumbledore');
 148     });
 149
 150     test('template', function (instance) {
 151         var w = new (instance.web.Widget.extend({
 152             template: 'test.widget.template'
 153         }));
 154         w.renderElement();
 155
 156         equal(w.el.nodeName, 'OL');
 157         equal(w.$el.children().length, 5);
 158         equal(w.el.textContent, '01234');
 159     });
 160     test('repeated', { asserts: 4 }, function (instance, $fix) {
 161         var w = new (instance.web.Widget.extend({
 162             template: 'test.widget.template-value'
 163         }));
 164         w.value = 42;
 165         return w.appendTo($fix)
 166             .done(function () {
 167                 equal($fix.find('p').text(), '42', "DOM fixture should contain initial value");
 168                 equal(w.$el.text(), '42', "should set initial value");
 169                 w.value = 36;
 170                 w.renderElement();
 171                 equal($fix.find('p').text(), '36', "DOM fixture should use new value");
 172                 equal(w.$el.text(), '36', "should set new value");
 173             });
 174     });
 175 });
 176 openerp.testing.section('Widget.$', {
 177     dependencies: ['web.corelib'],
 178     setup: function (instance) {
 179         instance.web.qweb = new QWeb2.Engine();
 180         instance.web.qweb.add_template(
 181             '<no>' +
 182                 '<t t-name="test.widget.template">' +
 183                     '<ol>' +
 184                         '<li t-foreach="5" t-as="counter" ' +
 185                             't-attf-class="class-#{counter}">' +
 186                             '<input/>' +
 187                             '<t t-esc="counter"/>' +
 188                         '</li>' +
 189                     '</ol>' +
 190                 '</t>' +
 191             '</no>');
 192     }
 193 }, function (test) {
 194     test('basic-alias', function (instance) {
 195         var w = new (instance.web.Widget.extend({
 196             template: 'test.widget.template'
 197         }));
 198         w.renderElement();
 199
 200         ok(w.$('li:eq(3)').is(w.$el.find('li:eq(3)')),
 201            "should do the same thing as calling find on the widget root");
 202     });
 203 });
 204 openerp.testing.section('Widget.events', {
 205     dependencies: ['web.corelib'],
 206     setup: function (instance) {
 207         instance.web.qweb = new QWeb2.Engine();
 208         instance.web.qweb.add_template(
 209             '<no>' +
 210                 '<t t-name="test.widget.template">' +
 211                     '<ol>' +
 212                         '<li t-foreach="5" t-as="counter" ' +
 213                             't-attf-class="class-#{counter}">' +
 214                             '<input/>' +
 215                             '<t t-esc="counter"/>' +
 216                         '</li>' +
 217                     '</ol>' +
 218                 '</t>' +
 219             '</no>');
 220     }
 221 }, function (test) {
 222     test('delegate', function (instance) {
 223         var a = [];
 224         var w = new (instance.web.Widget.extend({
 225             template: 'test.widget.template',
 226             events: {
 227                 'click': function () {
 228                     a[0] = true;
 229                     strictEqual(this, w, "should trigger events in widget")
 230                 },
 231                 'click li.class-3': 'class3',
 232                 'change input': function () { a[2] = true; }
 233             },
 234             class3: function () { a[1] = true; }
 235         }));
 236         w.renderElement();
 237
 238         w.$el.click();
 239         w.$('li:eq(3)').click();
 240         w.$('input:last').val('foo').change();
 241
 242         for(var i=0; i<3; ++i) {
 243             ok(a[i], "should pass test " + i);
 244         }
 245     });
 246     test('undelegate', function (instance) {
 247         var clicked = false, newclicked = false;
 248         var w = new (instance.web.Widget.extend({
 249             template: 'test.widget.template',
 250             events: { 'click li': function () { clicked = true; } }
 251         }));
 252         w.renderElement();
 253         w.$el.on('click', 'li', function () { newclicked = true });
 254
 255         w.$('li').click();
 256         ok(clicked, "should trigger bound events");
 257         ok(newclicked, "should trigger bound events");
 258         clicked = newclicked = false;
 259
 260         w.undelegateEvents();
 261         w.$('li').click();
 262         ok(!clicked, "undelegate should unbind events delegated");
 263         ok(newclicked, "undelegate should only unbind events it created");
 264     });
 265 });