feat(View): add support for styleUrls and styles

fixes #2382
2015-06-10 14:40:24 +02:00
parent f065a2ecb7
commit ac3e624d0f
12 changed files with 220 additions and 102 deletions
@@ -100,30 +100,45 @@ export function main() {
               });
         }));

-      it('should fill absUrl given inline templates', inject([AsyncTestCompleter], (async) => {
+      it('should fill templateAbsUrl given inline templates',
+         inject([AsyncTestCompleter], (async) => {
           cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
           captureTemplate(new viewAnn.View({template: '<div></div>'}))
               .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toEqual('http://www.app.com/mainComponent');
+                 expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/mainComponent');
                 async.done();
               });
         }));

-      it('should not fill absUrl given no inline template or template url',
+      it('should not fill templateAbsUrl given no inline template or template url',
         inject([AsyncTestCompleter], (async) => {
           cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
           captureTemplate(new viewAnn.View({template: null, templateUrl: null}))
               .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toBe(null);
+                 expect(renderTpl.templateAbsUrl).toBe(null);
                 async.done();
               });
         }));

-      it('should fill absUrl given url template', inject([AsyncTestCompleter], (async) => {
+      it('should fill templateAbsUrl given url template', inject([AsyncTestCompleter], (async) => {
           cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
           captureTemplate(new viewAnn.View({templateUrl: '/someTemplate'}))
               .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toEqual('http://www.app.com/mainComponent/someTemplate');
+                 expect(renderTpl.templateAbsUrl)
+                     .toEqual('http://www.app.com/mainComponent/someTemplate');
+                 async.done();
+               });
+         }));
+
+      it('should fill styleAbsUrls given styleUrls', inject([AsyncTestCompleter], (async) => {
+           cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
+           captureTemplate(new viewAnn.View({styleUrls: ['/1.css', '/2.css']}))
+               .then((renderTpl) => {
+                 expect(renderTpl.styleAbsUrls)
+                     .toEqual([
+                       'http://www.app.com/mainComponent/1.css',
+                       'http://www.app.com/mainComponent/2.css'
+                     ]);
                 async.done();
               });
         }));
@@ -13,7 +13,7 @@ import {

 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {List, ListWrapper, Map, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {Type, isBlank, stringify, isPresent} from 'angular2/src/facade/lang';
+import {Type, isBlank, stringify, isPresent, BaseException} from 'angular2/src/facade/lang';
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';

 import {DomCompiler} from 'angular2/src/render/dom/compiler/compiler';
@@ -90,7 +90,7 @@ export function runCompilerCommonTests() {
      it('should load url templates', inject([AsyncTestCompleter], (async) => {
           var urlData = MapWrapper.createFromStringMap({'someUrl': 'url component'});
           var compiler = createCompiler(EMPTY_STEP, urlData);
-           compiler.compile(new ViewDefinition({componentId: 'someId', absUrl: 'someUrl'}))
+           compiler.compile(new ViewDefinition({componentId: 'someId', templateAbsUrl: 'someUrl'}))
               .then((protoView) => {
                 expect(DOM.getInnerHTML(resolveInternalDomProtoView(protoView.render).element))
                     .toEqual('url component');
@@ -101,7 +101,8 @@ export function runCompilerCommonTests() {
      it('should report loading errors', inject([AsyncTestCompleter], (async) => {
           var compiler = createCompiler(EMPTY_STEP, MapWrapper.create());
           PromiseWrapper.catchError(
-               compiler.compile(new ViewDefinition({componentId: 'someId', absUrl: 'someUrl'})),
+               compiler.compile(
+                   new ViewDefinition({componentId: 'someId', templateAbsUrl: 'someUrl'})),
               (e) => {
                 expect(e.message).toEqual(
                     'Failed to load the template for "someId" : Failed to fetch url "someUrl"');
@@ -207,14 +208,14 @@ class FakeTemplateLoader extends TemplateLoader {
      return PromiseWrapper.resolve(DOM.createTemplate(template.template));
    }

-    if (isPresent(template.absUrl)) {
-      var content = MapWrapper.get(this._urlData, template.absUrl);
+    if (isPresent(template.templateAbsUrl)) {
+      var content = MapWrapper.get(this._urlData, template.templateAbsUrl);
      return isPresent(content) ?
                 PromiseWrapper.resolve(DOM.createTemplate(content)) :
-                 PromiseWrapper.reject(`Failed to fetch url "${template.absUrl}"`, null);
+                 PromiseWrapper.reject(`Failed to fetch url "${template.templateAbsUrl}"`, null);
    }

-    return PromiseWrapper.reject('Load failed', null);
+    throw new BaseException('View should have either the templateUrl or template property set');
  }
 }

@@ -27,62 +27,107 @@ export function main() {
      loader = new TemplateLoader(xhr, new FakeUrlResolver());
    });

-    it('should load inline templates', inject([AsyncTestCompleter], (async) => {
-         var template = new ViewDefinition({template: 'template template'});
-         loader.load(template).then((el) => {
-           expect(DOM.content(el)).toHaveText('template template');
-           async.done();
-         });
-       }));
+    describe('html', () => {
+      it('should load inline templates', inject([AsyncTestCompleter], (async) => {
+           var template = new ViewDefinition({template: 'template template'});
+           loader.load(template).then((el) => {
+             expect(DOM.content(el)).toHaveText('template template');
+             async.done();
+           });
+         }));

-    it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
-         xhr.expect('base/foo', 'xhr template');
-         var template = new ViewDefinition({absUrl: 'base/foo'});
-         loader.load(template).then((el) => {
-           expect(DOM.content(el)).toHaveText('xhr template');
-           async.done();
-         });
-         xhr.flush();
-       }));
+      it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
+           xhr.expect('base/foo.html', 'xhr template');
+           var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'});
+           loader.load(template).then((el) => {
+             expect(DOM.content(el)).toHaveText('xhr template');
+             async.done();
+           });
+           xhr.flush();
+         }));

-    it('should cache template loaded through XHR but clone it as the compiler might change it',
-       inject([AsyncTestCompleter], (async) => {
-         var firstEl;
-         // we have only one xhr.expect, so there can only be one xhr call!
-         xhr.expect('base/foo', 'xhr template');
-         var template = new ViewDefinition({absUrl: 'base/foo'});
-         loader.load(template)
-             .then((el) => {
-               expect(DOM.content(el)).toHaveText('xhr template');
-               firstEl = el;
-               return loader.load(template);
-             })
-             .then((el) => {
-               expect(el).not.toBe(firstEl);
-               expect(DOM.content(el)).toHaveText('xhr template');
-               async.done();
-             });
-         xhr.flush();
-       }));
+      it('should return a new template element on each call',
+         inject([AsyncTestCompleter], (async) => {
+           var firstEl;
+           // we have only one xhr.expect, so there can only be one xhr call!
+           xhr.expect('base/foo.html', 'xhr template');
+           var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'});
+           loader.load(template)
+               .then((el) => {
+                 expect(DOM.content(el)).toHaveText('xhr template');
+                 firstEl = el;
+                 return loader.load(template);
+               })
+               .then((el) => {
+                 expect(el).not.toBe(firstEl);
+                 expect(DOM.content(el)).toHaveText('xhr template');
+                 async.done();
+               });
+           xhr.flush();
+         }));

-    it('should throw when no template is defined', () => {
-      var template = new ViewDefinition({template: null, absUrl: null});
-      expect(() => loader.load(template))
-          .toThrowError('View should have either the url or template property set');
+      it('should throw when no template is defined', () => {
+        var template = new ViewDefinition({template: null, templateAbsUrl: null});
+        expect(() => loader.load(template))
+            .toThrowError('View should have either the templateUrl or template property set');
+      });
+
+      it('should return a rejected Promise when XHR loading fails',
+         inject([AsyncTestCompleter], (async) => {
+           xhr.expect('base/foo.html', null);
+           var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'});
+           PromiseWrapper.then(loader.load(template), function(_) { throw 'Unexpected response'; },
+                               function(error) {
+                                 expect(error.message)
+                                     .toEqual('Failed to fetch url "base/foo.html"');
+                                 async.done();
+                               });
+           xhr.flush();
+         }));
    });

-    it('should return a rejected Promise when xhr loading fails',
-       inject([AsyncTestCompleter], (async) => {
-         xhr.expect('base/foo', null);
-         var template = new ViewDefinition({absUrl: 'base/foo'});
-         PromiseWrapper.then(loader.load(template), function(_) { throw 'Unexpected response'; },
-                             function(error) {
-                               expect(error.message).toEqual('Failed to fetch url "base/foo"');
-                               async.done();
-                             });
-         xhr.flush();
-       }));
+    describe('css', () => {
+      it('should load inline styles', inject([AsyncTestCompleter], (async) => {
+           var template = new ViewDefinition({template: 'html', styles: ['style 1', 'style 2']});
+           loader.load(template).then((el) => {
+             expect(DOM.getInnerHTML(el))
+                 .toEqual(
+                     '<style type="text/css">style 1</style><style type="text/css">style 2</style>html');
+             async.done();
+           });
+         }));

+      it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
+           xhr.expect('base/foo.html', 'xhr template');
+           xhr.expect('base/foo-1.css', '1');
+           xhr.expect('base/foo-2.css', '2');
+           var template = new ViewDefinition({
+             templateAbsUrl: 'base/foo.html',
+             styles: ['i1'],
+             styleAbsUrls: ['base/foo-1.css', 'base/foo-2.css']
+           });
+           loader.load(template).then((el) => {
+             expect(DOM.getInnerHTML(el))
+                 .toEqual(
+                     '<style type="text/css">i1</style><style type="text/css">1</style><style type="text/css">2</style>xhr template');
+             async.done();
+           });
+           xhr.flush();
+         }));
+
+      it('should return a rejected Promise when XHR loading fails',
+         inject([AsyncTestCompleter], (async) => {
+           xhr.expect('base/foo.css', null);
+           var template = new ViewDefinition({template: '', styleAbsUrls: ['base/foo.css']});
+           PromiseWrapper.then(loader.load(template), function(_) { throw 'Unexpected response'; },
+                               function(error) {
+                                 expect(error.message)
+                                     .toEqual('Failed to fetch url "base/foo.css"');
+                                 async.done();
+                               });
+           xhr.flush();
+         }));
+    });
  });
 }