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