test(refactor): cleanup test to use the new UrlMapper

This commit is contained in:
Victor Berchet 2015-06-24 10:27:53 +02:00
parent 0a2f6ddc64
commit b89c0672e6
4 changed files with 87 additions and 106 deletions

View File

@ -60,7 +60,7 @@ export function main() {
function createCompiler(renderCompileResults: List<renderApi.ProtoViewDto>, function createCompiler(renderCompileResults: List<renderApi.ProtoViewDto>,
protoViewFactoryResults: List<List<AppProtoView>>) { protoViewFactoryResults: List<List<AppProtoView>>) {
var urlResolver = new FakeUrlResolver(); var urlResolver = new UrlResolver();
renderCompileRequests = []; renderCompileRequests = [];
renderCompiler.spy('compile').andCallFake((view) => { renderCompiler.spy('compile').andCallFake((view) => {
renderCompileRequests.push(view); renderCompileRequests.push(view);
@ -111,17 +111,17 @@ export function main() {
it('should fill templateAbsUrl given inline templates', it('should fill templateAbsUrl given inline templates',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent'); cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
captureTemplate(new viewAnn.View({template: '<div></div>'})) captureTemplate(new viewAnn.View({template: '<div></div>'}))
.then((renderTpl) => { .then((renderTpl) => {
expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/mainComponent'); expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/cmp/main.js');
async.done(); async.done();
}); });
})); }));
it('should not fill templateAbsUrl given no inline template or template url', it('should not fill templateAbsUrl given no inline template or template url',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent'); cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
captureTemplate(new viewAnn.View({template: null, templateUrl: null})) captureTemplate(new viewAnn.View({template: null, templateUrl: null}))
.then((renderTpl) => { .then((renderTpl) => {
expect(renderTpl.templateAbsUrl).toBe(null); expect(renderTpl.templateAbsUrl).toBe(null);
@ -130,23 +130,23 @@ export function main() {
})); }));
it('should fill templateAbsUrl given url template', inject([AsyncTestCompleter], (async) => { it('should fill templateAbsUrl given url template', inject([AsyncTestCompleter], (async) => {
cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent'); cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
captureTemplate(new viewAnn.View({templateUrl: '/someTemplate'})) captureTemplate(new viewAnn.View({templateUrl: 'tpl/main.html'}))
.then((renderTpl) => { .then((renderTpl) => {
expect(renderTpl.templateAbsUrl) expect(renderTpl.templateAbsUrl)
.toEqual('http://www.app.com/mainComponent/someTemplate'); .toEqual('http://www.app.com/cmp/tpl/main.html');
async.done(); async.done();
}); });
})); }));
it('should fill styleAbsUrls given styleUrls', inject([AsyncTestCompleter], (async) => { it('should fill styleAbsUrls given styleUrls', inject([AsyncTestCompleter], (async) => {
cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent'); cmpUrlMapper.setComponentUrl(MainComponent, '/cmp/main.js');
captureTemplate(new viewAnn.View({styleUrls: ['/1.css', '/2.css']})) captureTemplate(new viewAnn.View({styleUrls: ['css/1.css', 'css/2.css']}))
.then((renderTpl) => { .then((renderTpl) => {
expect(renderTpl.styleAbsUrls) expect(renderTpl.styleAbsUrls)
.toEqual([ .toEqual([
'http://www.app.com/mainComponent/1.css', 'http://www.app.com/cmp/css/1.css',
'http://www.app.com/mainComponent/2.css' 'http://www.app.com/cmp/css/2.css'
]); ]);
async.done(); async.done();
}); });
@ -566,17 +566,10 @@ class SpyRenderCompiler extends SpyObject {
noSuchMethod(m) { return super.noSuchMethod(m) } noSuchMethod(m) { return super.noSuchMethod(m) }
} }
class FakeUrlResolver extends UrlResolver {
constructor() { super(); }
resolve(baseUrl: string, url: string): string { return baseUrl + url; }
}
class FakeAppRootUrl extends AppRootUrl { class FakeAppRootUrl extends AppRootUrl {
get value() { return 'http://www.app.com'; } get value() { return 'http://www.app.com'; }
} }
class FakeTemplateResolver extends TemplateResolver { class FakeTemplateResolver extends TemplateResolver {
_cmpViews: Map<Type, viewAnn.View> = new Map(); _cmpViews: Map<Type, viewAnn.View> = new Map();

View File

@ -5,8 +5,13 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
export function main() { export function main() {
describe('StyleUrlResolver', () => { describe('StyleUrlResolver', () => {
let styleUrlResolver;
beforeEach(() => {
styleUrlResolver = new StyleUrlResolver(new UrlResolver());
});
it('should resolve "url()" urls', () => { it('should resolve "url()" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = ` var css = `
.foo { .foo {
background-image: url("double.jpg"); background-image: url("double.jpg");
@ -15,64 +20,57 @@ export function main() {
}`; }`;
var expectedCss = ` var expectedCss = `
.foo { .foo {
background-image: url('base/double.jpg'); background-image: url('http://ng.io/double.jpg');
background-image: url('base/simple.jpg'); background-image: url('http://ng.io/simple.jpg');
background-image: url('base/noquote.jpg'); background-image: url('http://ng.io/noquote.jpg');
}`; }`;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base'); var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
expect(resolvedCss).toEqual(expectedCss); expect(resolvedCss).toEqual(expectedCss);
}); });
it('should resolve "@import" urls', () => { it('should resolve "@import" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = ` var css = `
@import '1.css'; @import '1.css';
@import "2.css"; @import "2.css";
`; `;
var expectedCss = ` var expectedCss = `
@import 'base/1.css'; @import 'http://ng.io/1.css';
@import 'base/2.css'; @import 'http://ng.io/2.css';
`; `;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base'); var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
expect(resolvedCss).toEqual(expectedCss); expect(resolvedCss).toEqual(expectedCss);
}); });
it('should resolve "@import url()" urls', () => { it('should resolve "@import url()" urls', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = ` var css = `
@import url('3.css'); @import url('3.css');
@import url("4.css"); @import url("4.css");
@import url(5.css); @import url(5.css);
`; `;
var expectedCss = ` var expectedCss = `
@import url('base/3.css'); @import url('http://ng.io/3.css');
@import url('base/4.css'); @import url('http://ng.io/4.css');
@import url('base/5.css'); @import url('http://ng.io/5.css');
`; `;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base'); var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
expect(resolvedCss).toEqual(expectedCss); expect(resolvedCss).toEqual(expectedCss);
}); });
it('should support media query in "@import"', () => { it('should support media query in "@import"', () => {
var styleUrlResolver = new StyleUrlResolver(new FakeUrlResolver());
var css = ` var css = `
@import 'print.css' print; @import 'print.css' print;
@import url(print.css) print; @import url(print.css) print;
`; `;
var expectedCss = ` var expectedCss = `
@import 'base/print.css' print; @import 'http://ng.io/print.css' print;
@import url('base/print.css') print; @import url('http://ng.io/print.css') print;
`; `;
var resolvedCss = styleUrlResolver.resolveUrls(css, 'base'); var resolvedCss = styleUrlResolver.resolveUrls(css, 'http://ng.io');
expect(resolvedCss).toEqual(expectedCss); expect(resolvedCss).toEqual(expectedCss);
}); });
}); });
} }
class FakeUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string { return baseUrl + '/' + url; }
}

View File

@ -18,7 +18,6 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
import {ViewDefinition} from 'angular2/src/render/api'; import {ViewDefinition} from 'angular2/src/render/api';
import {PromiseWrapper, Promise} from 'angular2/src/facade/async'; import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
import {StringWrapper, isBlank, isPresent} from 'angular2/src/facade/lang';
import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection'; import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {XHR} from 'angular2/src/render/xhr'; import {XHR} from 'angular2/src/render/xhr';
import {MockXHR} from 'angular2/src/render/xhr_mock'; import {MockXHR} from 'angular2/src/render/xhr_mock';
@ -29,7 +28,7 @@ export function main() {
beforeEach(() => { beforeEach(() => {
xhr = new MockXHR(); xhr = new MockXHR();
urlResolver = new FakeUrlResolver(); urlResolver = new UrlResolver();
styleUrlResolver = new StyleUrlResolver(urlResolver); styleUrlResolver = new StyleUrlResolver(urlResolver);
let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver); loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver);
@ -37,17 +36,17 @@ export function main() {
describe('html', () => { describe('html', () => {
it('should load inline templates', inject([AsyncTestCompleter], (async) => { it('should load inline templates', inject([AsyncTestCompleter], (async) => {
var template = new ViewDefinition({template: 'template template'}); var view = new ViewDefinition({template: 'template template'});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.content(el)).toHaveText('template template'); expect(DOM.content(el)).toHaveText('template template');
async.done(); async.done();
}); });
})); }));
it('should load templates through XHR', inject([AsyncTestCompleter], (async) => { it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
xhr.expect('base/foo.html', 'xhr template'); xhr.expect('http://ng.io/foo.html', 'xhr template');
var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'}); var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.content(el)).toHaveText('xhr template'); expect(DOM.content(el)).toHaveText('xhr template');
async.done(); async.done();
}); });
@ -55,12 +54,12 @@ export function main() {
})); }));
it('should resolve urls in styles', inject([AsyncTestCompleter], (async) => { it('should resolve urls in styles', inject([AsyncTestCompleter], (async) => {
xhr.expect('base/foo.html', xhr.expect('http://ng.io/foo.html',
'<style>.foo { background-image: url("double.jpg"); }</style>'); '<style>.foo { background-image: url("double.jpg"); }</style>');
var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'}); var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.content(el)) expect(DOM.content(el))
.toHaveText(".foo { background-image: url('/base/double.jpg'); }"); .toHaveText(".foo { background-image: url('http://ng.io/double.jpg'); }");
async.done(); async.done();
}); });
xhr.flush(); xhr.flush();
@ -68,14 +67,14 @@ export function main() {
it('should inline styles', inject([AsyncTestCompleter], (async) => { it('should inline styles', inject([AsyncTestCompleter], (async) => {
let xhr = new FakeXHR(); let xhr = new FakeXHR();
xhr.reply('base/foo.html', '<style>@import "foo.css";</style>'); xhr.reply('http://ng.io/foo.html', '<style>@import "foo.css";</style>');
xhr.reply('/base/foo.css', '/* foo.css */'); xhr.reply('http://ng.io/foo.css', '/* foo.css */');
let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
let loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver); let loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver);
var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'}); var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style>"); expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style>");
async.done(); async.done();
}); });
@ -85,13 +84,13 @@ export function main() {
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
var firstEl; var firstEl;
// we have only one xhr.expect, so there can only be one xhr call! // we have only one xhr.expect, so there can only be one xhr call!
xhr.expect('base/foo.html', 'xhr template'); xhr.expect('http://ng.io/foo.html', 'xhr template');
var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'}); var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
loader.load(template) loader.load(view)
.then((el) => { .then((el) => {
expect(DOM.content(el)).toHaveText('xhr template'); expect(DOM.content(el)).toHaveText('xhr template');
firstEl = el; firstEl = el;
return loader.load(template); return loader.load(view);
}) })
.then((el) => { .then((el) => {
expect(el).not.toBe(firstEl); expect(el).not.toBe(firstEl);
@ -102,19 +101,19 @@ export function main() {
})); }));
it('should throw when no template is defined', () => { it('should throw when no template is defined', () => {
var template = new ViewDefinition({template: null, templateAbsUrl: null}); var view = new ViewDefinition({template: null, templateAbsUrl: null});
expect(() => loader.load(template)) expect(() => loader.load(view))
.toThrowError('View should have either the templateUrl or template property set'); .toThrowError('View should have either the templateUrl or template property set');
}); });
it('should return a rejected Promise when XHR loading fails', it('should return a rejected Promise when XHR loading fails',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
xhr.expect('base/foo.html', null); xhr.expect('http://ng.io/foo.html', null);
var template = new ViewDefinition({templateAbsUrl: 'base/foo.html'}); var view = new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'});
PromiseWrapper.then(loader.load(template), function(_) { throw 'Unexpected response'; }, PromiseWrapper.then(loader.load(view), function(_) { throw 'Unexpected response'; },
function(error) { function(error) {
expect(error.message) expect(error.message)
.toEqual('Failed to fetch url "base/foo.html"'); .toEqual('Failed to fetch url "http://ng.io/foo.html"');
async.done(); async.done();
}); });
xhr.flush(); xhr.flush();
@ -123,8 +122,8 @@ export function main() {
describe('css', () => { describe('css', () => {
it('should load inline styles', inject([AsyncTestCompleter], (async) => { it('should load inline styles', inject([AsyncTestCompleter], (async) => {
var template = new ViewDefinition({template: 'html', styles: ['style 1', 'style 2']}); var view = new ViewDefinition({template: 'html', styles: ['style 1', 'style 2']});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.getInnerHTML(el)) expect(DOM.getInnerHTML(el))
.toEqual('<style>style 1</style><style>style 2</style>html'); .toEqual('<style>style 1</style><style>style 2</style>html');
async.done(); async.done();
@ -132,25 +131,30 @@ export function main() {
})); }));
it('should resolve urls in inline styles', inject([AsyncTestCompleter], (async) => { it('should resolve urls in inline styles', inject([AsyncTestCompleter], (async) => {
var template = new ViewDefinition( xhr.expect('http://ng.io/foo.html', 'html');
{template: 'html', styles: ['.foo { background-image: url("double.jpg"); }']}); var view = new ViewDefinition({
loader.load(template).then((el) => { templateAbsUrl: 'http://ng.io/foo.html',
styles: ['.foo { background-image: url("double.jpg"); }']
});
loader.load(view).then((el) => {
expect(DOM.getInnerHTML(el)) expect(DOM.getInnerHTML(el))
.toEqual("<style>.foo { background-image: url('/double.jpg'); }</style>html"); .toEqual(
"<style>.foo { background-image: url('http://ng.io/double.jpg'); }</style>html");
async.done(); async.done();
}); });
xhr.flush();
})); }));
it('should load templates through XHR', inject([AsyncTestCompleter], (async) => { it('should load templates through XHR', inject([AsyncTestCompleter], (async) => {
xhr.expect('base/foo.html', 'xhr template'); xhr.expect('http://ng.io/foo.html', 'xhr template');
xhr.expect('base/foo-1.css', '1'); xhr.expect('http://ng.io/foo-1.css', '1');
xhr.expect('base/foo-2.css', '2'); xhr.expect('http://ng.io/foo-2.css', '2');
var template = new ViewDefinition({ var view = new ViewDefinition({
templateAbsUrl: 'base/foo.html', templateAbsUrl: 'http://ng.io/foo.html',
styles: ['i1'], styles: ['i1'],
styleAbsUrls: ['base/foo-1.css', 'base/foo-2.css'] styleAbsUrls: ['http://ng.io/foo-1.css', 'http://ng.io/foo-2.css']
}); });
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.getInnerHTML(el)) expect(DOM.getInnerHTML(el))
.toEqual('<style>i1</style><style>1</style><style>2</style>xhr template'); .toEqual('<style>i1</style><style>1</style><style>2</style>xhr template');
async.done(); async.done();
@ -160,15 +164,15 @@ export function main() {
it('should inline styles', inject([AsyncTestCompleter], (async) => { it('should inline styles', inject([AsyncTestCompleter], (async) => {
let xhr = new FakeXHR(); let xhr = new FakeXHR();
xhr.reply('base/foo.html', '<p>template</p>'); xhr.reply('http://ng.io/foo.html', '<p>template</p>');
xhr.reply('/base/foo.css', '/* foo.css */'); xhr.reply('http://ng.io/foo.css', '/* foo.css */');
let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver);
let loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver); let loader = new TemplateLoader(xhr, styleInliner, styleUrlResolver);
var template = new ViewDefinition( var view = new ViewDefinition(
{templateAbsUrl: 'base/foo.html', styles: ['@import "foo.css";']}); {templateAbsUrl: 'http://ng.io/foo.html', styles: ['@import "foo.css";']});
loader.load(template).then((el) => { loader.load(view).then((el) => {
expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style><p>template</p>"); expect(DOM.getInnerHTML(el)).toEqual("<style>/* foo.css */\n</style><p>template</p>");
async.done(); async.done();
}); });
@ -177,12 +181,12 @@ export function main() {
it('should return a rejected Promise when XHR loading fails', it('should return a rejected Promise when XHR loading fails',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
xhr.expect('base/foo.css', null); xhr.expect('http://ng.io/foo.css', null);
var template = new ViewDefinition({template: '', styleAbsUrls: ['base/foo.css']}); var view = new ViewDefinition({template: '', styleAbsUrls: ['http://ng.io/foo.css']});
PromiseWrapper.then(loader.load(template), function(_) { throw 'Unexpected response'; }, PromiseWrapper.then(loader.load(view), function(_) { throw 'Unexpected response'; },
function(error) { function(error) {
expect(error.message) expect(error.message)
.toEqual('Failed to fetch url "base/foo.css"'); .toEqual('Failed to fetch url "http://ng.io/foo.css"');
async.done(); async.done();
}); });
xhr.flush(); xhr.flush();
@ -193,21 +197,6 @@ export function main() {
class SomeComponent {} class SomeComponent {}
class FakeUrlResolver extends UrlResolver {
constructor() { super(); }
resolve(baseUrl: string, url: string): string {
if (url.length > 0 && url[0] == '/') return url;
if (!isPresent(baseUrl)) return `/${url}`;
var parts: List<string> = baseUrl.split('/');
if (parts.length > 1) {
ListWrapper.removeLast(parts);
}
parts.push(url);
return '/' + parts.join('/');
}
}
class FakeXHR extends XHR { class FakeXHR extends XHR {
_responses: Map<string, string> = new Map(); _responses: Map<string, string> = new Map();

View File

@ -53,11 +53,12 @@ export function main() {
}); });
describe('relative base url', () => { describe('relative base url', () => {
it('should add a relative path to the base url', it('should add a relative path to the base url', () => {
() => { expect(resolver.resolve('foo/', './bar')).toEqual('foo/bar'); }); expect(resolver.resolve('foo/', './bar')).toEqual('foo/bar');
expect(resolver.resolve('foo/baz', './bar')).toEqual('foo/bar');
expect(resolver.resolve('foo/baz', 'bar')).toEqual('foo/bar');
it('should replace the base path', });
() => { expect(resolver.resolve('foo/baz', './bar')).toEqual('foo/bar'); });
it('should support ".." in the path', () => { it('should support ".." in the path', () => {
expect(resolver.resolve('foo/baz', '../bar')).toEqual('bar'); expect(resolver.resolve('foo/baz', '../bar')).toEqual('bar');