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