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