iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(View): add support for styleUrls and styles

Browse Source 
fixes #2382
This commit is contained in:
Victor Berchet
2015-06-10 14:40:24 +02:00
parent f065a2ecb7
commit ac3e624d0f
12 changed files with 220 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/render/dom/compiler/compiler_common_tests.ts
+8 -7
View File
@@ -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');
}
}
modules/angular2/test/render/dom/compiler/template_loader_spec.ts
+95 -50
View File
@@ -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();
}));
});
});
}