OLD | NEW |
1 library templateurl_spec; | 1 library templateurl_spec; |
2 | 2 |
3 import '../_specs.dart'; | 3 import '../_specs.dart'; |
4 | 4 |
5 @NgComponent( | 5 @Component( |
6 selector: 'simple-url', | 6 selector: 'simple-url', |
7 templateUrl: 'simple.html') | 7 templateUrl: 'simple.html') |
8 class SimpleUrlComponent { | 8 class SimpleUrlComponent { |
9 } | 9 } |
10 | 10 |
11 @NgComponent( | 11 @Component( |
12 selector: 'html-and-css', | 12 selector: 'html-and-css', |
13 templateUrl: 'simple.html', | 13 templateUrl: 'simple.html', |
14 cssUrl: 'simple.css') | 14 cssUrl: 'simple.css') |
15 class HtmlAndCssComponent { | 15 class HtmlAndCssComponent { |
16 } | 16 } |
17 | 17 |
18 @NgComponent( | 18 @Component( |
19 selector: 'html-and-css', | 19 selector: 'html-and-css', |
20 templateUrl: 'simple.html', | 20 templateUrl: 'simple.html', |
21 cssUrl: const ['simple.css', 'another.css']) | 21 cssUrl: const ['simple.css', 'another.css']) |
22 class HtmlAndMultipleCssComponent { | 22 class HtmlAndMultipleCssComponent { |
23 } | 23 } |
24 | 24 |
25 @NgComponent( | 25 @Component( |
26 selector: 'inline-with-css', | 26 selector: 'inline-with-css', |
27 template: '<div>inline!</div>', | 27 template: '<div>inline!</div>', |
28 cssUrl: 'simple.css') | 28 cssUrl: 'simple.css') |
29 class InlineWithCssComponent { | 29 class InlineWithCssComponent { |
30 } | 30 } |
31 | 31 |
32 @NgComponent( | 32 @Component( |
33 selector: 'only-css', | 33 selector: 'only-css', |
34 cssUrl: 'simple.css') | 34 cssUrl: 'simple.css') |
35 class OnlyCssComponent { | 35 class OnlyCssComponent { |
36 } | 36 } |
37 | 37 |
38 class PrefixedUrlRewriter extends UrlRewriter { | 38 class PrefixedUrlRewriter extends UrlRewriter { |
39 call(url) => "PREFIX:$url"; | 39 call(url) => "PREFIX:$url"; |
40 } | 40 } |
41 | 41 |
42 main() => describe('template url', () { | 42 void main() { |
43 afterEach(inject((MockHttpBackend backend) { | 43 describe('template url', () { |
44 backend.verifyNoOutstandingRequest(); | 44 afterEach((MockHttpBackend backend) { |
45 })); | 45 backend.verifyNoOutstandingRequest(); |
46 | 46 }); |
47 describe('loading with http rewriting', () { | 47 |
48 beforeEach(module((Module module) { | 48 describe('loading with http rewriting', () { |
49 module | 49 beforeEachModule((Module module) { |
50 ..type(HtmlAndCssComponent) | 50 module |
51 ..type(UrlRewriter, implementedBy: PrefixedUrlRewriter); | 51 ..type(HtmlAndCssComponent) |
52 })); | 52 ..type(UrlRewriter, implementedBy: PrefixedUrlRewriter); |
53 | |
54 it('should use the UrlRewriter for both HTML and CSS URLs', async(inject((Ht
tp $http, | |
55 Compiler $compile, Scope $rootScope, Logger log, Injector injector, Ng
Zone zone, | |
56 MockHttpBackend backend, DirectiveMap directives) { | |
57 | |
58 backend | |
59 ..whenGET('PREFIX:simple.html').respond('<div log="SIMPLE">Simple!</di
v>') | |
60 ..whenGET('PREFIX:simple.css').respond('.hello{}'); | |
61 | |
62 var element = $('<div><html-and-css log>ignore</html-and-css><div>'); | |
63 zone.run(() { | |
64 $compile(element, directives)(injector, element); | |
65 }); | 53 }); |
66 | 54 |
67 backend.flush(); | 55 it('should use the UrlRewriter for both HTML and CSS URLs', async(inject( |
68 microLeap(); | 56 (Http http, Compiler compile, Scope rootScope, Logger log, |
69 | 57 Injector injector, VmTurnZone zone, MockHttpBackend backend, |
70 expect(renderedText(element)).toEqual('.hello{}Simple!'); | 58 DirectiveMap directives) { |
71 expect(element[0].nodes[0].shadowRoot.innerHtml).toEqual( | 59 |
72 '<style>.hello{}</style><div log="SIMPLE">Simple!</div>' | 60 backend |
73 ); | 61 ..whenGET('PREFIX:simple.html').respond('<div log="SIMPLE">Simple!</
div>') |
74 }))); | 62 ..whenGET('PREFIX:simple.css').respond('.hello{}'); |
| 63 |
| 64 var element = e('<div><html-and-css log>ignore</html-and-css><div>'); |
| 65 zone.run(() { |
| 66 compile([element], directives)(injector, [element]); |
| 67 }); |
| 68 |
| 69 backend.flush(); |
| 70 microLeap(); |
| 71 |
| 72 expect(element).toHaveText('.hello{}Simple!'); |
| 73 expect(element.children[0].shadowRoot).toHaveHtml( |
| 74 '<style>.hello{}</style><div log="SIMPLE">Simple!</div>' |
| 75 ); |
| 76 }))); |
| 77 }); |
| 78 |
| 79 |
| 80 describe('async template loading', () { |
| 81 beforeEachModule((Module module) { |
| 82 module |
| 83 ..type(LogAttrDirective) |
| 84 ..type(SimpleUrlComponent) |
| 85 ..type(HtmlAndCssComponent) |
| 86 ..type(OnlyCssComponent) |
| 87 ..type(InlineWithCssComponent); |
| 88 }); |
| 89 |
| 90 it('should replace element with template from url', async(inject( |
| 91 (Http http, Compiler compile, Scope rootScope, Logger log, |
| 92 Injector injector, MockHttpBackend backend, DirectiveMap directives)
{ |
| 93 backend.expectGET('simple.html').respond(200, '<div log="SIMPLE">Simple!
</div>'); |
| 94 |
| 95 var element = es('<div><simple-url log>ignore</simple-url><div>'); |
| 96 compile(element, directives)(injector, element); |
| 97 |
| 98 microLeap(); |
| 99 backend.flush(); |
| 100 microLeap(); |
| 101 |
| 102 expect(element[0]).toHaveText('Simple!'); |
| 103 rootScope.apply(); |
| 104 // Note: There is no ordering. It is who ever comes off the wire first! |
| 105 expect(log.result()).toEqual('LOG; SIMPLE'); |
| 106 }))); |
| 107 |
| 108 it('should load template from URL once', async(inject( |
| 109 (Http http, Compiler compile, Scope rootScope, Logger log, |
| 110 Injector injector, MockHttpBackend backend, DirectiveMap directives)
{ |
| 111 backend.whenGET('simple.html').respond(200, '<div log="SIMPLE">Simple!</
div>'); |
| 112 |
| 113 var element = es( |
| 114 '<div>' |
| 115 '<simple-url log>ignore</simple-url>' |
| 116 '<simple-url log>ignore</simple-url>' |
| 117 '<div>'); |
| 118 compile(element, directives)(injector, element); |
| 119 |
| 120 microLeap(); |
| 121 backend.flush(); |
| 122 microLeap(); |
| 123 |
| 124 expect(element.first).toHaveText('Simple!Simple!'); |
| 125 rootScope.apply(); |
| 126 |
| 127 // Note: There is no ordering. It is who ever comes off the wire first! |
| 128 expect(log.result()).toEqual('LOG; LOG; SIMPLE; SIMPLE'); |
| 129 }))); |
| 130 |
| 131 it('should load a CSS file into a style', async(inject( |
| 132 (Http http, Compiler compile, Scope rootScope, Logger log, |
| 133 Injector injector, MockHttpBackend backend, DirectiveMap directives)
{ |
| 134 backend |
| 135 ..expectGET('simple.css').respond(200, '.hello{}') |
| 136 ..expectGET('simple.html').respond(200, '<div log="SIMPLE">Simple!</
div>'); |
| 137 |
| 138 var element = e('<div><html-and-css log>ignore</html-and-css><div>'); |
| 139 compile([element], directives)(injector, [element]); |
| 140 |
| 141 microLeap(); |
| 142 backend.flush(); |
| 143 microLeap(); |
| 144 |
| 145 expect(element).toHaveText('.hello{}Simple!'); |
| 146 expect(element.children[0].shadowRoot).toHaveHtml( |
| 147 '<style>.hello{}</style><div log="SIMPLE">Simple!</div>' |
| 148 ); |
| 149 rootScope.apply(); |
| 150 // Note: There is no ordering. It is who ever comes off the wire first! |
| 151 expect(log.result()).toEqual('LOG; SIMPLE'); |
| 152 }))); |
| 153 |
| 154 it('should load a CSS file with a \$template', async(inject( |
| 155 (Http http, Compiler compile, Scope rootScope, Injector injector, |
| 156 MockHttpBackend backend, DirectiveMap directives) { |
| 157 var element = es('<div><inline-with-css log>ignore</inline-with-css><div
>'); |
| 158 backend.expectGET('simple.css').respond(200, '.hello{}'); |
| 159 compile(element, directives)(injector, element); |
| 160 |
| 161 microLeap(); |
| 162 backend.flush(); |
| 163 microLeap(); |
| 164 expect(element[0]).toHaveText('.hello{}inline!'); |
| 165 }))); |
| 166 |
| 167 it('should ignore CSS load errors ', async(inject( |
| 168 (Http http, Compiler compile, Scope rootScope, Injector injector, |
| 169 MockHttpBackend backend, DirectiveMap directives) { |
| 170 var element = es('<div><inline-with-css log>ignore</inline-with-css><div
>'); |
| 171 backend.expectGET('simple.css').respond(500, 'some error'); |
| 172 compile(element, directives)(injector, element); |
| 173 |
| 174 microLeap(); |
| 175 backend.flush(); |
| 176 microLeap(); |
| 177 expect(element.first).toHaveText( |
| 178 '/*\n' |
| 179 'HTTP 500: some error\n' |
| 180 '*/\n' |
| 181 'inline!'); |
| 182 }))); |
| 183 |
| 184 it('should load a CSS with no template', async(inject( |
| 185 (Http http, Compiler compile, Scope rootScope, Injector injector, |
| 186 MockHttpBackend backend, DirectiveMap directives) { |
| 187 var element = es('<div><only-css log>ignore</only-css><div>'); |
| 188 backend.expectGET('simple.css').respond(200, '.hello{}'); |
| 189 compile(element, directives)(injector, element); |
| 190 |
| 191 microLeap(); |
| 192 backend.flush(); |
| 193 microLeap(); |
| 194 expect(element[0]).toHaveText('.hello{}'); |
| 195 }))); |
| 196 |
| 197 it('should load the CSS before the template is loaded', async(inject( |
| 198 (Http http, Compiler compile, Scope rootScope, Injector injector, |
| 199 MockHttpBackend backend, DirectiveMap directives) { |
| 200 backend |
| 201 ..expectGET('simple.css').respond(200, '.hello{}') |
| 202 ..expectGET('simple.html').respond(200, '<div>Simple!</div>'); |
| 203 |
| 204 var element = es('<html-and-css>ignore</html-and-css>'); |
| 205 compile(element, directives)(injector, element); |
| 206 |
| 207 microLeap(); |
| 208 backend.flush(); |
| 209 microLeap(); |
| 210 expect(element.first).toHaveText('.hello{}Simple!'); |
| 211 }))); |
| 212 }); |
| 213 |
| 214 describe('multiple css loading', () { |
| 215 beforeEachModule((Module module) { |
| 216 module |
| 217 ..type(LogAttrDirective) |
| 218 ..type(HtmlAndMultipleCssComponent); |
| 219 }); |
| 220 |
| 221 it('should load multiple CSS files into a style', async(inject( |
| 222 (Http http, Compiler compile, Scope rootScope, Logger log, |
| 223 Injector injector, MockHttpBackend backend, DirectiveMap directives)
{ |
| 224 backend |
| 225 ..expectGET('simple.css').respond(200, '.hello{}') |
| 226 ..expectGET('another.css').respond(200, '.world{}') |
| 227 ..expectGET('simple.html').respond(200, '<div log="SIMPLE">Simple!</
div>'); |
| 228 |
| 229 var element = e('<div><html-and-css log>ignore</html-and-css><div>'); |
| 230 compile([element], directives)(injector, [element]); |
| 231 |
| 232 microLeap(); |
| 233 backend.flush(); |
| 234 microLeap(); |
| 235 |
| 236 expect(element).toHaveText('.hello{}.world{}Simple!'); |
| 237 expect(element.children[0].shadowRoot).toHaveHtml( |
| 238 '<style>.hello{}</style><style>.world{}</style><div log="SIMPLE">Sim
ple!</div>' |
| 239 ); |
| 240 rootScope.apply(); |
| 241 // Note: There is no ordering. It is who ever comes off the wire first! |
| 242 expect(log.result()).toEqual('LOG; SIMPLE'); |
| 243 }))); |
| 244 }); |
75 }); | 245 }); |
76 | 246 } |
77 | |
78 describe('async template loading', () { | |
79 beforeEach(module((Module module) { | |
80 module | |
81 ..type(LogAttrDirective) | |
82 ..type(SimpleUrlComponent) | |
83 ..type(HtmlAndCssComponent) | |
84 ..type(OnlyCssComponent) | |
85 ..type(InlineWithCssComponent); | |
86 })); | |
87 | |
88 it('should replace element with template from url', async(inject((Http $http
, | |
89 Compiler $compile, Scope $rootScope, Logger log, Injector injector, | |
90 MockHttpBackend backend, DirectiveMap directives) { | |
91 backend.expectGET('simple.html').respond('<div log="SIMPLE">Simple!</div>'
); | |
92 | |
93 var element = $('<div><simple-url log>ignore</simple-url><div>'); | |
94 $compile(element, directives)(injector, element); | |
95 | |
96 backend.flush(); | |
97 microLeap(); | |
98 | |
99 expect(renderedText(element)).toEqual('Simple!'); | |
100 $rootScope.apply(); | |
101 // Note: There is no ordering. It is who ever comes off the wire first! | |
102 expect(log.result()).toEqual('LOG; SIMPLE'); | |
103 }))); | |
104 | |
105 it('should load template from URL once', async(inject((Http $http, | |
106 Compiler $compile, Scope $rootScope, Logger log, Injector injector, | |
107 MockHttpBackend backend, DirectiveMap directives) { | |
108 backend.whenGET('simple.html').respond('<div log="SIMPLE">Simple!</div>'); | |
109 | |
110 var element = $( | |
111 '<div>' + | |
112 '<simple-url log>ignore</simple-url>' + | |
113 '<simple-url log>ignore</simple-url>' + | |
114 '<div>'); | |
115 $compile(element, directives)(injector, element); | |
116 | |
117 backend.flush(); | |
118 microLeap(); | |
119 | |
120 expect(renderedText(element)).toEqual('Simple!Simple!'); | |
121 $rootScope.apply(); | |
122 // Note: There is no ordering. It is who ever comes off the wire first! | |
123 expect(log.result()).toEqual('LOG; LOG; SIMPLE; SIMPLE'); | |
124 }))); | |
125 | |
126 it('should load a CSS file into a style', async(inject((Http $http, | |
127 Compiler $compile, Scope $rootScope, Logger log, Injector injector, | |
128 MockHttpBackend backend, DirectiveMap directives) { | |
129 backend | |
130 ..expectGET('simple.css').respond('.hello{}') | |
131 ..expectGET('simple.html').respond('<div log="SIMPLE">Simple!</div>'); | |
132 | |
133 var element = $('<div><html-and-css log>ignore</html-and-css><div>'); | |
134 $compile(element, directives)(injector, element); | |
135 | |
136 backend.flush(); | |
137 microLeap(); | |
138 | |
139 expect(renderedText(element)).toEqual('.hello{}Simple!'); | |
140 expect(element[0].nodes[0].shadowRoot.innerHtml).toEqual( | |
141 '<style>.hello{}</style><div log="SIMPLE">Simple!</div>' | |
142 ); | |
143 $rootScope.apply(); | |
144 // Note: There is no ordering. It is who ever comes off the wire first! | |
145 expect(log.result()).toEqual('LOG; SIMPLE'); | |
146 }))); | |
147 | |
148 it('should load a CSS file with a \$template', async(inject((Http $http, | |
149 Compiler $compile, Scope $rootScope, Injector injector, | |
150 MockHttpBackend backend, DirectiveMap directives) { | |
151 var element = $('<div><inline-with-css log>ignore</inline-with-css><div>')
; | |
152 backend.expectGET('simple.css').respond('.hello{}'); | |
153 $compile(element, directives)(injector, element); | |
154 | |
155 backend.flush(); | |
156 microLeap(); | |
157 expect(renderedText(element)).toEqual('.hello{}inline!'); | |
158 }))); | |
159 | |
160 it('should ignore CSS load errors ', async(inject((Http $http, | |
161 Compiler $compile, Scope $rootScope, Injector injector, | |
162 MockHttpBackend backend, DirectiveMap directives) { | |
163 var element = $('<div><inline-with-css log>ignore</inline-with-css><div>')
; | |
164 backend.expectGET('simple.css').respond(500, 'some error'); | |
165 $compile(element, directives)(injector, element); | |
166 | |
167 backend.flush(); | |
168 microLeap(); | |
169 expect(renderedText(element)).toEqual( | |
170 '/*\n' | |
171 'HTTP 500: some error\n' | |
172 '*/\n' | |
173 'inline!'); | |
174 }))); | |
175 | |
176 it('should load a CSS with no template', async(inject((Http $http, | |
177 Compiler $compile, Scope $rootScope, Injector injector, | |
178 MockHttpBackend backend, DirectiveMap directives) { | |
179 var element = $('<div><only-css log>ignore</only-css><div>'); | |
180 backend.expectGET('simple.css').respond('.hello{}'); | |
181 $compile(element, directives)(injector, element); | |
182 | |
183 backend.flush(); | |
184 microLeap(); | |
185 expect(renderedText(element)).toEqual('.hello{}'); | |
186 }))); | |
187 | |
188 it('should load the CSS before the template is loaded', async(inject((Http $
http, | |
189 Compiler $compile, Scope $rootScope, Injector injector, | |
190 MockHttpBackend backend, DirectiveMap directives) { | |
191 backend | |
192 ..expectGET('simple.css').respond('.hello{}') | |
193 ..expectGET('simple.html').respond('<div>Simple!</div>'); | |
194 | |
195 var element = $('<html-and-css>ignore</html-and-css>'); | |
196 $compile(element, directives)(injector, element); | |
197 | |
198 backend.flush(); | |
199 microLeap(); | |
200 expect(renderedText(element)).toEqual('.hello{}Simple!'); | |
201 }))); | |
202 }); | |
203 | |
204 describe('multiple css loading', () { | |
205 beforeEach(module((Module module) { | |
206 module | |
207 ..type(LogAttrDirective) | |
208 ..type(HtmlAndMultipleCssComponent); | |
209 })); | |
210 | |
211 it('should load multiple CSS files into a style', async(inject((Http $http, | |
212 Compiler $compile, Scope $rootScope, Logger log, Injector injector, | |
213 MockHttpBackend backend, DirectiveMap directives) { | |
214 backend | |
215 ..expectGET('simple.css').respond('.hello{}') | |
216 ..expectGET('another.css').respond('.world{}') | |
217 ..expectGET('simple.html').respond('<div log="SIMPLE">Simple!</div>'); | |
218 | |
219 var element = $('<div><html-and-css log>ignore</html-and-css><div>'); | |
220 $compile(element, directives)(injector, element); | |
221 | |
222 backend.flush(); | |
223 microLeap(); | |
224 | |
225 expect(renderedText(element)).toEqual('.hello{}.world{}Simple!'); | |
226 expect(element[0].nodes[0].shadowRoot.innerHtml).toEqual( | |
227 '<style>.hello{}.world{}</style><div log="SIMPLE">Simple!</div>' | |
228 ); | |
229 $rootScope.apply(); | |
230 // Note: There is no ordering. It is who ever comes off the wire first! | |
231 expect(log.result()).toEqual('LOG; SIMPLE'); | |
232 }))); | |
233 }); | |
234 }); | |
OLD | NEW |