1 <!DOCTYPE html> 2 <!-- 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found in the LICENSE file. 6 --> 7 8 <link rel="import" href="/tracing/ui/base/ui.html"> 9 10 <script> 11 'use strict'; 12 13 tr.b.unittest.testSuite(function() { 14 var TestElement = tr.ui.b.define('div'); 15 TestElement.prototype = { 16 __proto__: HTMLDivElement.prototype, 17 18 decorate: function() { 19 if (!this.decorateCallCount) 20 this.decorateCallCount = 0; 21 this.decorateCallCount++; 22 } 23 }; 24 25 var Base = tr.ui.b.define('div'); 26 Base.prototype = { 27 __proto__: HTMLDivElement.prototype, 28 decorate: function() { 29 this.decoratedAsBase = true; 30 }, 31 set baseProperty(v) { 32 this.basePropertySet = v; 33 } 34 }; 35 36 test('decorateOnceViaNew', function() { 37 var testElement = new TestElement(); 38 assert.equal(testElement.decorateCallCount, 1); 39 }); 40 41 test('decorateOnceDirectly', function() { 42 var testElement = document.createElement('div'); 43 tr.ui.b.decorate(testElement, TestElement); 44 assert.equal(testElement.decorateCallCount, 1); 45 }); 46 47 test('componentToString', function() { 48 assert.equal(Base.toString(), 'div'); 49 50 var Sub = tr.ui.b.define('Sub', Base); 51 assert.equal(Sub.toString(), 'div::sub'); 52 53 var SubSub = tr.ui.b.define('Marine', Sub); 54 assert.equal(SubSub.toString(), 'div::sub::marine'); 55 }); 56 57 test('basicDefines', function() { 58 var baseInstance = new Base(); 59 assert.instanceOf(baseInstance, Base); 60 assert.isTrue(baseInstance.decoratedAsBase); 61 62 assert.equal(baseInstance.constructor, Base); 63 assert.equal(baseInstance.constructor.toString(), 'div'); 64 65 baseInstance.basePropertySet = 7; 66 assert.equal(baseInstance.basePropertySet, 7); 67 }); 68 69 test('subclassing', function() { 70 var Sub = tr.ui.b.define('sub', Base); 71 Sub.prototype = { 72 __proto__: Base.prototype, 73 decorate: function() { 74 this.decoratedAsSub = true; 75 } 76 }; 77 78 var subInstance = new Sub(); 79 assert.instanceOf(subInstance, Sub); 80 assert.isTrue(subInstance.decoratedAsSub); 81 82 assert.instanceOf(subInstance, Base); 83 assert.isUndefined(subInstance.decoratedAsBase); 84 85 assert.equal(subInstance.constructor, Sub); 86 assert.equal(subInstance.constructor.toString(), 'div::sub'); 87 88 subInstance.baseProperty = true; 89 assert.isTrue(subInstance.basePropertySet); 90 }); 91 92 var NoArgs = tr.ui.b.define('div'); 93 NoArgs.prototype = { 94 __proto__: HTMLDivElement.prototype, 95 decorate: function() { 96 this.noArgsDecorated_ = true; 97 }, 98 get noArgsDecorated() { 99 return this.noArgsDecorated_; 100 } 101 }; 102 103 var Args = tr.ui.b.define('args', NoArgs); 104 Args.prototype = { 105 __proto__: NoArgs.prototype, 106 decorate: function(first) { 107 this.first_ = first; 108 this.argsDecorated_ = true; 109 }, 110 get first() { 111 return this.first_; 112 }, 113 get argsDecorated() { 114 return this.argsDecorated_; 115 } 116 }; 117 118 var ArgsChild = tr.ui.b.define('args-child', Args); 119 ArgsChild.prototype = { 120 __proto__: Args.prototype, 121 decorate: function(_, second) { 122 this.second_ = second; 123 this.argsChildDecorated_ = true; 124 }, 125 get second() { 126 return this.second_; 127 }, 128 get decorated() { 129 return this.decorated_; 130 }, 131 get argsChildDecorated() { 132 return this.argsChildDecorated_ = true; 133 } 134 }; 135 136 var ArgsDecoratingChild = tr.ui.b.define('args-decorating-child', Args); 137 ArgsDecoratingChild.prototype = { 138 __proto__: Args.prototype, 139 decorate: function(first, second) { 140 Args.prototype.decorate.call(this, first); 141 this.second_ = second; 142 this.argsDecoratingChildDecorated_ = true; 143 }, 144 get second() { 145 return this.second_; 146 }, 147 get decorated() { 148 return this.decorated_; 149 }, 150 get argsDecoratingChildDecorated() { 151 return this.argsChildDecorated_ = true; 152 } 153 }; 154 155 test('decorate_noArguments', function() { 156 var noArgs; 157 assert.doesNotThrow(function() { 158 noArgs = new NoArgs(); 159 }); 160 assert.isTrue(noArgs.noArgsDecorated); 161 }); 162 163 test('decorate_arguments', function() { 164 var args = new Args('this is first'); 165 assert.equal(args.first, 'this is first'); 166 assert.isTrue(args.argsDecorated); 167 assert.isUndefined(args.noArgsDecorated); 168 }); 169 170 test('decorate_subclassArguments', function() { 171 var argsChild = new ArgsChild('this is first', 'and second'); 172 assert.isUndefined(argsChild.first); 173 assert.equal(argsChild.second, 'and second'); 174 175 assert.isTrue(argsChild.argsChildDecorated); 176 assert.isUndefined(argsChild.argsDecorated); 177 assert.isUndefined(argsChild.noArgsDecorated); 178 }); 179 180 test('decorate_subClassCallsParentDecorate', function() { 181 var argsDecoratingChild = new ArgsDecoratingChild( 182 'this is first', 'and second'); 183 assert.equal(argsDecoratingChild.first, 'this is first'); 184 assert.equal(argsDecoratingChild.second, 'and second'); 185 assert.isTrue(argsDecoratingChild.argsDecoratingChildDecorated); 186 assert.isTrue(argsDecoratingChild.argsDecorated); 187 assert.isUndefined(argsDecoratingChild.noArgsDecorated); 188 }); 189 190 test('defineWithNamespace', function() { 191 var svgNS = 'http://www.w3.org/2000/svg'; 192 var cls = tr.ui.b.define('svg', undefined, svgNS); 193 cls.prototype = { 194 __proto__: HTMLUnknownElement.prototype, 195 196 decorate: function() { 197 this.setAttribute('width', 200); 198 this.setAttribute('height', 200); 199 this.setAttribute('viewPort', '0 0 200 200'); 200 var rectEl = document.createElementNS(svgNS, 'rect'); 201 rectEl.setAttribute('x', 10); 202 rectEl.setAttribute('y', 10); 203 rectEl.setAttribute('width', 180); 204 rectEl.setAttribute('height', 180); 205 this.appendChild(rectEl); 206 } 207 }; 208 var el = new cls(); 209 assert.equal(el.tagName, 'svg'); 210 assert.equal(el.namespaceURI, svgNS); 211 this.addHTMLOutput(el); 212 }); 213 214 test('defineSubclassWithNamespace', function() { 215 var svgNS = 'http://www.w3.org/2000/svg'; 216 var cls = tr.ui.b.define('svg', undefined, svgNS); 217 cls.prototype = { 218 __proto__: HTMLUnknownElement.prototype, 219 220 decorate: function() { 221 this.setAttribute('width', 200); 222 this.setAttribute('height', 200); 223 this.setAttribute('viewPort', '0 0 200 200'); 224 var rectEl = document.createElementNS(svgNS, 'rect'); 225 rectEl.setAttribute('x', 10); 226 rectEl.setAttribute('y', 10); 227 rectEl.setAttribute('width', 180); 228 rectEl.setAttribute('height', 180); 229 this.appendChild(rectEl); 230 } 231 }; 232 233 var subCls = tr.ui.b.define('sub', cls); 234 subCls.prototype = { 235 __proto__: cls.prototype 236 }; 237 assert.equal(subCls.toString(), 'svg::sub'); 238 239 var el = new subCls(); 240 this.addHTMLOutput(el); 241 assert.equal(el.tagName, 'svg'); 242 assert.equal(el.namespaceURI, svgNS); 243 }); 244 }); 245 </script> 246
