| OLD | NEW |
| 1 library ng_if_spec; | 1 library ng_if_spec; |
| 2 | 2 |
| 3 import '../_specs.dart'; | 3 import '../_specs.dart'; |
| 4 | 4 |
| 5 @NgDirective( | 5 @NgDirective( |
| 6 selector: '[child-controller]', | 6 selector: '[child-controller]', |
| 7 children: NgAnnotation.TRANSCLUDE_CHILDREN) | 7 children: NgAnnotation.TRANSCLUDE_CHILDREN) |
| 8 class ChildController { | 8 class ChildController { |
| 9 ChildController(BoundBlockFactory boundBlockFactory, | 9 ChildController(BoundBlockFactory boundBlockFactory, |
| 10 BlockHole blockHole, | 10 BlockHole blockHole, |
| 11 Scope scope) { | 11 Scope scope) { |
| 12 scope.context['setBy'] = 'childController'; | 12 scope.setBy = 'childController'; |
| 13 boundBlockFactory(scope).insertAfter(blockHole); | 13 boundBlockFactory(scope).insertAfter(blockHole); |
| 14 } | 14 } |
| 15 } | 15 } |
| 16 | 16 |
| 17 main() { | 17 main() { |
| 18 var compile, html, element, rootScope, logger, directives; | 18 var compile, html, element, rootScope, logger; |
| 19 | 19 |
| 20 void configInjector() { | 20 void configInjector() { |
| 21 module((Module module) { | 21 module((Module module) { |
| 22 module | 22 module |
| 23 ..type(ChildController) | 23 ..type(ChildController) |
| 24 ..type(LogAttrDirective); | 24 ..type(LogAttrDirective); |
| 25 }); | 25 }); |
| 26 } | 26 } |
| 27 | 27 |
| 28 void configState() { | 28 void configState() { |
| 29 inject((Scope scope, Compiler compiler, Injector injector, Logger _logger, D
irectiveMap _directives) { | 29 inject((Scope scope, Compiler compiler, Injector injector, Logger _logger) { |
| 30 rootScope = scope; | 30 rootScope = scope; |
| 31 logger = _logger; | 31 logger = _logger; |
| 32 compile = (html, [applyFn]) { | 32 compile = (html, [applyFn]) { |
| 33 element = $(html); | 33 element = $(html); |
| 34 compiler(element, _directives)(injector, element); | 34 compiler(element)(injector, element); |
| 35 scope.apply(applyFn); | 35 scope.$apply(applyFn); |
| 36 }; | 36 }; |
| 37 directives = _directives; | |
| 38 }); | 37 }); |
| 39 } | 38 } |
| 40 | 39 |
| 41 they(should, htmlForElements, callback, [exclusive=false]) { | 40 they(should, htmlForElements, callback) { |
| 42 htmlForElements.forEach((html) { | 41 htmlForElements.forEach((html) { |
| 43 var directiveName = html.contains('ng-if') ? 'ng-if' : 'ng-unless'; | 42 var directiveName = html.contains('ng-if') ? 'ng-if' : 'ng-unless'; |
| 44 describe(directiveName, () { | 43 describe(directiveName, () { |
| 45 beforeEach(configInjector); | 44 beforeEach(configInjector); |
| 46 beforeEach(configState); | 45 beforeEach(configState); |
| 47 (exclusive ? iit : it)(should, () { | 46 it(should, () { |
| 48 callback(html); | 47 callback(html); |
| 49 }); | 48 }); |
| 50 }); | 49 }); |
| 51 }); | 50 }); |
| 52 } | 51 } |
| 53 | 52 |
| 54 they('should add/remove the element', | 53 they('should add/remove the element', |
| 55 [ '<div><span ng-if="isVisible">content</span></div>', | 54 [ '<div><span ng-if="isVisible">content</span></div>', |
| 56 '<div><span ng-unless="!isVisible">content</span></div>'], | 55 '<div><span ng-unless="!isVisible">content</span></div>'], |
| 57 (html) { | 56 (html) { |
| 58 compile(html); | 57 compile(html); |
| 59 // The span node should NOT exist in the DOM. | 58 // The span node should NOT exist in the DOM. |
| 60 expect(element.contents().length).toEqual(1); | 59 expect(element.contents().length).toEqual(1); |
| 61 expect(element.find('span').html()).toEqual(''); | 60 expect(element.find('span').html()).toEqual(''); |
| 62 | 61 |
| 63 rootScope.apply(() { | 62 rootScope.$apply(() { |
| 64 rootScope.context['isVisible'] = true; | 63 rootScope['isVisible'] = true; |
| 65 }); | 64 }); |
| 66 | 65 |
| 67 // The span node SHOULD exist in the DOM. | 66 // The span node SHOULD exist in the DOM. |
| 68 expect(element.contents().length).toEqual(2); | 67 expect(element.contents().length).toEqual(2); |
| 69 expect(element.find('span').html()).toEqual('content'); | 68 expect(element.find('span').html()).toEqual('content'); |
| 70 | 69 |
| 71 rootScope.apply(() { | 70 rootScope.$apply(() { |
| 72 rootScope.context['isVisible'] = false; | 71 rootScope['isVisible'] = false; |
| 73 }); | 72 }); |
| 74 | 73 |
| 75 expect(element.find('span').html()).toEqual(''); | 74 expect(element.find('span').html()).toEqual(''); |
| 76 } | 75 } |
| 77 ); | 76 ); |
| 78 | 77 |
| 79 they('should create a child scope', | 78 they('should create a child scope', |
| 80 [ | 79 [ |
| 81 // ng-if | 80 // ng-if |
| 82 '<div>' + | 81 '<div>' + |
| 83 ' <div ng-if="isVisible">'.trim() + | 82 ' <div ng-if="isVisible">'.trim() + |
| 84 ' <span child-controller id="inside">{{setBy}}</span>'.trim() + | 83 ' <span child-controller id="inside">{{setBy}}</span>'.trim() + |
| 85 ' </div>'.trim() + | 84 ' </div>'.trim() + |
| 86 ' <span id="outside">{{setBy}}</span>'.trim() + | 85 ' <span id="outside">{{setBy}}</span>'.trim() + |
| 87 '</div>', | 86 '</div>', |
| 88 // ng-unless | 87 // ng-unless |
| 89 '<div>' + | 88 '<div>' + |
| 90 ' <div ng-unless="!isVisible">'.trim() + | 89 ' <div ng-unless="!isVisible">'.trim() + |
| 91 ' <span child-controller id="inside">{{setBy}}</span>'.trim() + | 90 ' <span child-controller id="inside">{{setBy}}</span>'.trim() + |
| 92 ' </div>'.trim() + | 91 ' </div>'.trim() + |
| 93 ' <span id="outside">{{setBy}}</span>'.trim() + | 92 ' <span id="outside">{{setBy}}</span>'.trim() + |
| 94 '</div>'], | 93 '</div>'], |
| 95 (html) { | 94 (html) { |
| 96 rootScope.context['setBy'] = 'topLevel'; | 95 rootScope['setBy'] = 'topLevel'; |
| 97 compile(html); | 96 compile(html); |
| 98 expect(element.contents().length).toEqual(2); | 97 expect(element.contents().length).toEqual(2); |
| 99 | 98 |
| 100 rootScope.apply(() { | 99 rootScope.$apply(() { |
| 101 rootScope.context['isVisible'] = true; | 100 rootScope['isVisible'] = true; |
| 102 }); | 101 }); |
| 103 expect(element.contents().length).toEqual(3); | 102 expect(element.contents().length).toEqual(3); |
| 104 // The value on the parent scope.context['should'] be unchanged. | 103 // The value on the parent scope should be unchanged. |
| 105 expect(rootScope.context['setBy']).toEqual('topLevel'); | 104 expect(rootScope['setBy']).toEqual('topLevel'); |
| 106 expect(element.find('#outside').html()).toEqual('topLevel'); | 105 expect(element.find('#outside').html()).toEqual('topLevel'); |
| 107 // A child scope.context['must'] have been created and hold a different va
lue. | 106 // A child scope must have been created and hold a different value. |
| 108 expect(element.find('#inside').html()).toEqual('childController'); | 107 expect(element.find('#inside').html()).toEqual('childController'); |
| 109 } | 108 } |
| 110 ); | 109 ); |
| 111 | 110 |
| 112 they('should play nice with other elements beside it', | 111 they('should play nice with other elements beside it', |
| 113 [ | 112 [ |
| 114 // ng-if | 113 // ng-if |
| 115 '<div>' + | 114 '<div>' + |
| 116 ' <div ng-repeat="i in values"></div>'.trim() + | 115 ' <div ng-repeat="i in values"></div>'.trim() + |
| 117 ' <div ng-if="values.length==4"></div>'.trim() + | 116 ' <div ng-if="values.length==4"></div>'.trim() + |
| 118 ' <div ng-repeat="i in values"></div>'.trim() + | 117 ' <div ng-repeat="i in values"></div>'.trim() + |
| 119 '</div>', | 118 '</div>', |
| 120 // ng-unless | 119 // ng-unless |
| 121 '<div>' + | 120 '<div>' + |
| 122 ' <div ng-repeat="i in values"></div>'.trim() + | 121 ' <div ng-repeat="i in values"></div>'.trim() + |
| 123 ' <div ng-unless="values.length!=4"></div>'.trim() + | 122 ' <div ng-unless="values.length!=4"></div>'.trim() + |
| 124 ' <div ng-repeat="i in values"></div>'.trim() + | 123 ' <div ng-repeat="i in values"></div>'.trim() + |
| 125 '</div>'], | 124 '</div>'], |
| 126 (html) { | 125 (html) { |
| 127 var values = rootScope.context['values'] = [1, 2, 3, 4]; | 126 var values = rootScope['values'] = [1, 2, 3, 4]; |
| 128 compile(html); | 127 compile(html); |
| 129 expect(element.contents().length).toBe(12); | 128 expect(element.contents().length).toBe(12); |
| 130 rootScope.apply(() { | 129 rootScope.$apply(() { |
| 131 values.removeRange(0, 1); | 130 values.removeRange(0, 1); |
| 132 }); | 131 }); |
| 133 expect(element.contents().length).toBe(9); | 132 expect(element.contents().length).toBe(9); |
| 134 rootScope.apply(() { | 133 rootScope.$apply(() { |
| 135 values.insert(0, 1); | 134 values.insert(0, 1); |
| 136 }); | 135 }); |
| 137 expect(element.contents().length).toBe(12); | 136 expect(element.contents().length).toBe(12); |
| 138 } | 137 } |
| 139 ); | 138 ); |
| 140 | 139 |
| 141 they('should restore the element to its compiled state', | 140 they('should restore the element to its compiled state', |
| 142 [ | 141 [ |
| 143 '<div><span class="my-class" ng-if="isVisible">content</span></div>', | 142 '<div><span class="my-class" ng-if="isVisible">content</span></div>', |
| 144 '<div><span class="my-class" ng-unless="!isVisible">content</span></div>']
, | 143 '<div><span class="my-class" ng-unless="!isVisible">content</span></div>']
, |
| 145 (html) { | 144 (html) { |
| 146 rootScope.context['isVisible'] = true; | 145 rootScope['isVisible'] = true; |
| 147 compile(html); | 146 compile(html); |
| 148 expect(element.contents().length).toEqual(2); | 147 expect(element.contents().length).toEqual(2); |
| 149 element.find('span').removeClass('my-class'); | 148 element.find('span').removeClass('my-class'); |
| 150 expect(element.find('span').hasClass('my-class')).not.toBe(true); | 149 expect(element.find('span').hasClass('my-class')).not.toBe(true); |
| 151 rootScope.apply(() { | 150 rootScope.$apply(() { |
| 152 rootScope.context['isVisible'] = false; | 151 rootScope['isVisible'] = false; |
| 153 }); | 152 }); |
| 154 expect(element.contents().length).toEqual(1); | 153 expect(element.contents().length).toEqual(1); |
| 155 rootScope.apply(() { | 154 rootScope.$apply(() { |
| 156 rootScope.context['isVisible'] = true; | 155 rootScope['isVisible'] = true; |
| 157 }); | 156 }); |
| 158 // The newly inserted node should be a copy of the compiled state. | 157 // The newly inserted node should be a copy of the compiled state. |
| 159 expect(element.find('span').hasClass('my-class')).toBe(true); | 158 expect(element.find('span').hasClass('my-class')).toBe(true); |
| 160 } | 159 } |
| 161 ); | 160 ); |
| 162 | 161 |
| 163 they('should not cause ng-click to throw an exception', | 162 they('should not cause ng-click to throw an exception', |
| 164 [ | 163 [ |
| 165 '<div><span ng-click="click" ng-if="isVisible">content</span></div>', | 164 '<div><span ng-click="click" ng-if="isVisible">content</span></div>', |
| 166 '<div><span ng-click="click" ng-unless="!isVisible">content</span></div>']
, | 165 '<div><span ng-click="click" ng-unless="!isVisible">content</span></div>']
, |
| 167 (html) { | 166 (html) { |
| 168 compile(html); | 167 compile(html); |
| 169 rootScope.apply(() { | 168 rootScope.$apply(() { |
| 170 rootScope.context['isVisible'] = false; | 169 rootScope['isVisible'] = false; |
| 171 }); | 170 }); |
| 172 expect(element.find('span').html()).toEqual(''); | 171 expect(element.find('span').html()).toEqual(''); |
| 173 } | 172 } |
| 174 ); | 173 ); |
| 175 | 174 |
| 176 they('should prevent other directives from running when disabled', | 175 they('should prevent other directives from running when disabled', |
| 177 [ | 176 [ |
| 178 '<div><li log="ALWAYS"></li><span log="JAMES" ng-if="isVisible">content</s
pan></div>', | 177 '<div><li log="ALWAYS"></li><span log="JAMES" ng-if="isVisible">content</s
pan></div>', |
| 179 '<div><li log="ALWAYS"></li><span log="JAMES" ng-unless="!isVisible">conte
nt</span></div>'], | 178 '<div><li log="ALWAYS"></li><span log="JAMES" ng-unless="!isVisible">conte
nt</span></div>'], |
| 180 (html) { | 179 (html) { |
| 181 compile(html); | 180 compile(html); |
| 182 expect(element.find('span').html()).toEqual(''); | 181 expect(element.find('span').html()).toEqual(''); |
| 183 | 182 |
| 184 rootScope.apply(() { | 183 rootScope.$apply(() { |
| 185 rootScope.context['isVisible'] = false; | 184 rootScope['isVisible'] = false; |
| 186 }); | 185 }); |
| 187 expect(element.find('span').html()).toEqual(''); | 186 expect(element.find('span').html()).toEqual(''); |
| 188 expect(logger.result()).toEqual('ALWAYS'); | 187 expect(logger.result()).toEqual('ALWAYS'); |
| 189 | 188 |
| 190 | 189 |
| 191 rootScope.apply(() { | 190 rootScope.$apply(() { |
| 192 rootScope.context['isVisible'] = true; | 191 rootScope['isVisible'] = true; |
| 193 }); | 192 }); |
| 194 expect(element.find('span').html()).toEqual('content'); | 193 expect(element.find('span').html()).toEqual('content'); |
| 195 expect(logger.result()).toEqual('ALWAYS; JAMES'); | 194 expect(logger.result()).toEqual('ALWAYS; JAMES'); |
| 196 } | 195 } |
| 197 ); | 196 ); |
| 198 | |
| 199 they('should prevent other directives from running when disabled', | |
| 200 [ | |
| 201 '<div><div ng-if="a"><div ng-if="b">content</div></div></div>', | |
| 202 '<div><div ng-unless="!a"><div ng-unless="!b">content</div></div></div>'], | |
| 203 (html) { | |
| 204 compile(html); | |
| 205 expect(element.find('span').html()).toEqual(''); | |
| 206 | |
| 207 expect(() { | |
| 208 rootScope.apply(() { | |
| 209 rootScope.context['a'] = true; | |
| 210 rootScope.context['b'] = false; | |
| 211 }); | |
| 212 }).not.toThrow(); | |
| 213 expect(element.find('span').html()).toEqual(''); | |
| 214 | |
| 215 | |
| 216 expect(() { | |
| 217 rootScope.apply(() { | |
| 218 rootScope.context['a'] = false; | |
| 219 rootScope.context['b'] = true; | |
| 220 }); | |
| 221 }).not.toThrow(); | |
| 222 expect(element.find('span').html()).toEqual(''); | |
| 223 } | |
| 224 ); | |
| 225 } | 197 } |
| OLD | NEW |