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