| 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 |