import { AsyncTestCompleter, beforeEach, ddescribe, describe, el, expect, iit, inject, it, xit, } from 'angular2/test_lib'; import {ViewLoader, TemplateAndStyles} from 'angular2/src/render/dom/compiler/view_loader'; import {StyleInliner} from 'angular2/src/render/dom/compiler/style_inliner'; import {StyleUrlResolver} from 'angular2/src/render/dom/compiler/style_url_resolver'; import {UrlResolver} from 'angular2/src/services/url_resolver'; import {PromiseWrapper, Promise} from 'angular2/src/facade/async'; import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection'; import {XHR} from 'angular2/src/render/xhr'; import {MockXHR} from 'angular2/src/render/xhr_mock'; import {ViewDefinition} from 'angular2/src/render/api'; export function main() { describe('ViewLoader', () => { var loader: ViewLoader; var xhr, styleUrlResolver, urlResolver; beforeEach(() => { xhr = new MockXHR(); urlResolver = new UrlResolver(); styleUrlResolver = new StyleUrlResolver(urlResolver); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); loader = new ViewLoader(xhr, styleInliner, styleUrlResolver); }); describe('html', () => { it('should load inline templates', inject([AsyncTestCompleter], (async) => { loader.load(new ViewDefinition({template: 'template template'})) .then((el) => { expect(el.template).toEqual('template template'); async.done(); }); })); it('should load templates through XHR', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/foo.html', 'xhr template'); loader.load(new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'})) .then((el) => { expect(el.template).toEqual('xhr template'); async.done(); }); xhr.flush(); })); it('should resolve urls in styles', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/foo.html', ''); loader.load(new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'})) .then((el) => { expect(el.template).toEqual(''); expect(el.styles) .toEqual([".foo { background-image: url('http://ng.io/double.jpg'); }"]); async.done(); }); xhr.flush(); })); it('should inline styles', inject([AsyncTestCompleter], (async) => { let xhr = new FakeXHR(); xhr.reply('http://ng.io/foo.html', ''); xhr.reply('http://ng.io/foo.css', '/* foo.css */'); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); let loader = new ViewLoader(xhr, styleInliner, styleUrlResolver); loader.load(new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'})) .then((el) => { expect(el.template).toEqual(''); expect(el.styles).toEqual(["/* foo.css */\n"]); async.done(); }); })); it('should throw when no template is defined', () => { expect(() => loader.load(new ViewDefinition({template: null, templateAbsUrl: null}))) .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('http://ng.io/foo.html', null); PromiseWrapper.then( loader.load(new ViewDefinition({templateAbsUrl: 'http://ng.io/foo.html'})), function(_) { throw 'Unexpected response'; }, function(error) { expect(error.message).toEqual('Failed to fetch url "http://ng.io/foo.html"'); async.done(); }); xhr.flush(); })); it('should replace $baseUrl in attributes with the template base url', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/path/foo.html', ''); loader.load(new ViewDefinition({templateAbsUrl: 'http://ng.io/path/foo.html'})) .then((el) => { expect(el.template).toEqual(''); async.done(); }); xhr.flush(); })); }); describe('css', () => { it('should load inline styles', inject([AsyncTestCompleter], (async) => { loader.load(new ViewDefinition({template: 'html', styles: ['style 1', 'style 2']})) .then((el) => { expect(el.template).toEqual('html'); expect(el.styles).toEqual(['style 1', 'style 2']); async.done(); }); })); it('should resolve urls in inline styles', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/foo.html', 'html'); loader.load(new ViewDefinition({ templateAbsUrl: 'http://ng.io/foo.html', styles: ['.foo { background-image: url("double.jpg"); }'] })) .then((el) => { expect(el.template).toEqual('html'); expect(el.styles) .toEqual([".foo { background-image: url('http://ng.io/double.jpg'); }"]); async.done(); }); xhr.flush(); })); it('should load templates through XHR', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/foo.html', 'xhr template'); xhr.expect('http://ng.io/foo-1.css', '1'); xhr.expect('http://ng.io/foo-2.css', '2'); loader.load(new ViewDefinition({ templateAbsUrl: 'http://ng.io/foo.html', styles: ['i1'], styleAbsUrls: ['http://ng.io/foo-1.css', 'http://ng.io/foo-2.css'] })) .then((el) => { expect(el.template).toEqual('xhr template'); expect(el.styles).toEqual(['i1', '1', '2']); async.done(); }); xhr.flush(); })); it('should inline styles', inject([AsyncTestCompleter], (async) => { let xhr = new FakeXHR(); xhr.reply('http://ng.io/foo.html', '

template

'); xhr.reply('http://ng.io/foo.css', '/* foo.css */'); let styleInliner = new StyleInliner(xhr, styleUrlResolver, urlResolver); let loader = new ViewLoader(xhr, styleInliner, styleUrlResolver); loader.load( new ViewDefinition( {templateAbsUrl: 'http://ng.io/foo.html', styles: ['@import "foo.css";']})) .then((el) => { expect(el.template).toEqual("

template

"); expect(el.styles).toEqual(["/* foo.css */\n"]); async.done(); }); })); it('should return a rejected Promise when XHR loading fails', inject([AsyncTestCompleter], (async) => { xhr.expect('http://ng.io/foo.css', null); PromiseWrapper.then( loader.load( new ViewDefinition({template: '', styleAbsUrls: ['http://ng.io/foo.css']})), function(_) { throw 'Unexpected response'; }, function(error) { expect(error.message).toEqual('Failed to fetch url "http://ng.io/foo.css"'); async.done(); }); xhr.flush(); })); }); }); } class SomeComponent {} class FakeXHR extends XHR { _responses: Map = new Map(); constructor() { super(); } get(url: string): Promise { return this._responses.has(url) ? PromiseWrapper.resolve(this._responses.get(url)) : PromiseWrapper.reject('xhr error', null); } reply(url: string, response: string): void { this._responses.set(url, response); } }