feat(compiler): Add an implementation for XHR that uses a template cache to load template files.
Useful for avoiding doing an actual XHR during testing. Part of the solution for #4051 (Other part is a Karma plugin that will create the template cache). Closes #7940
This commit is contained in:
parent
6cbf99086e
commit
a596b887ff
|
@ -1,6 +1,7 @@
|
||||||
export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
|
export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
|
||||||
export {
|
export {
|
||||||
BROWSER_PROVIDERS,
|
BROWSER_PROVIDERS,
|
||||||
|
CACHED_TEMPLATE_PROVIDER,
|
||||||
ELEMENT_PROBE_PROVIDERS,
|
ELEMENT_PROBE_PROVIDERS,
|
||||||
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
|
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
|
||||||
inspectNativeElement,
|
inspectNativeElement,
|
||||||
|
|
|
@ -2,12 +2,15 @@ import {
|
||||||
TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
|
TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
|
||||||
ADDITIONAL_TEST_BROWSER_PROVIDERS
|
ADDITIONAL_TEST_BROWSER_PROVIDERS
|
||||||
} from 'angular2/platform/testing/browser_static';
|
} from 'angular2/platform/testing/browser_static';
|
||||||
|
|
||||||
import {BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';
|
import {BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';
|
||||||
|
|
||||||
|
|
||||||
import {CONST_EXPR} from 'angular2/src/facade/lang';
|
import {CONST_EXPR} from 'angular2/src/facade/lang';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Providers for using template cache to avoid actual XHR.
|
||||||
|
* Re-exported here so that tests import from a single place.
|
||||||
|
*/
|
||||||
|
export {CACHED_TEMPLATE_PROVIDER} from 'angular2/platform/browser';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Default patform providers for testing.
|
* Default patform providers for testing.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
library angular2.src.services.xhr_cache;
|
||||||
|
|
||||||
|
import 'dart:async' show Future;
|
||||||
|
import 'dart:html';
|
||||||
|
import 'dart:js' as js;
|
||||||
|
import 'package:angular2/core.dart';
|
||||||
|
import 'package:angular2/src/compiler/xhr.dart';
|
||||||
|
import 'package:angular2/src/facade/exceptions.dart' show BaseException;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An implementation of XHR that uses a template cache to avoid doing an actual
|
||||||
|
* XHR.
|
||||||
|
*
|
||||||
|
* The template cache needs to be built and loaded into window.$templateCache
|
||||||
|
* via a separate mechanism.
|
||||||
|
*/
|
||||||
|
@Injectable()
|
||||||
|
class CachedXHR extends XHR {
|
||||||
|
js.JsObject _cache;
|
||||||
|
String _baseUri;
|
||||||
|
|
||||||
|
CachedXHR() {
|
||||||
|
if (js.context.hasProperty(r'$templateCache')) {
|
||||||
|
this._cache = js.context[r'$templateCache'];
|
||||||
|
} else {
|
||||||
|
throw new BaseException(
|
||||||
|
r'CachedXHR: Template cache was not found in $templateCache.');
|
||||||
|
}
|
||||||
|
this._baseUri = window.location.protocol +
|
||||||
|
'//' +
|
||||||
|
window.location.host +
|
||||||
|
window.location.pathname;
|
||||||
|
int lastSlash = this._baseUri.lastIndexOf('/');
|
||||||
|
this._baseUri = this._baseUri.substring(0, lastSlash + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<String> get(String url) {
|
||||||
|
if (url.startsWith(this._baseUri)) {
|
||||||
|
url = url.substring(this._baseUri.length);
|
||||||
|
}
|
||||||
|
if (this._cache.hasProperty(url)) {
|
||||||
|
return new Future.value(this._cache[url]);
|
||||||
|
} else {
|
||||||
|
return new Future.error(
|
||||||
|
'CachedXHR: Did not find cached template for ' + url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,31 @@
|
||||||
|
import {XHR} from 'angular2/src/compiler/xhr';
|
||||||
|
import {BaseException} from 'angular2/src/facade/exceptions';
|
||||||
|
import {global} from 'angular2/src/facade/lang';
|
||||||
|
import {PromiseWrapper} from 'angular2/src/facade/promise';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An implementation of XHR that uses a template cache to avoid doing an actual
|
||||||
|
* XHR.
|
||||||
|
*
|
||||||
|
* The template cache needs to be built and loaded into window.$templateCache
|
||||||
|
* via a separate mechanism.
|
||||||
|
*/
|
||||||
|
export class CachedXHR extends XHR {
|
||||||
|
private _cache: {[url: string]: string};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this._cache = (<any>global).$templateCache;
|
||||||
|
if (this._cache == null) {
|
||||||
|
throw new BaseException('CachedXHR: Template cache was not found in $templateCache.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get(url: string): Promise<string> {
|
||||||
|
if (this._cache.hasOwnProperty(url)) {
|
||||||
|
return PromiseWrapper.resolve(this._cache[url]);
|
||||||
|
} else {
|
||||||
|
return PromiseWrapper.reject('CachedXHR: Did not find cached template for ' + url, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
import {CONST_EXPR, IS_DART} from 'angular2/src/facade/lang';
|
import {CONST_EXPR, IS_DART} from 'angular2/src/facade/lang';
|
||||||
import {provide, Provider, Injector, OpaqueToken} from 'angular2/src/core/di';
|
import {provide, Provider, Injector, OpaqueToken} from 'angular2/src/core/di';
|
||||||
|
import {XHR} from 'angular2/src/compiler/xhr';
|
||||||
import {
|
import {
|
||||||
PLATFORM_INITIALIZER,
|
PLATFORM_INITIALIZER,
|
||||||
PLATFORM_DIRECTIVES,
|
PLATFORM_DIRECTIVES,
|
||||||
|
@ -28,6 +28,7 @@ import {BrowserDetails} from "angular2/src/animate/browser_details";
|
||||||
import {AnimationBuilder} from "angular2/src/animate/animation_builder";
|
import {AnimationBuilder} from "angular2/src/animate/animation_builder";
|
||||||
import {BrowserDomAdapter} from './browser/browser_adapter';
|
import {BrowserDomAdapter} from './browser/browser_adapter';
|
||||||
import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
|
import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
|
||||||
|
import {CachedXHR} from 'angular2/src/platform/browser/xhr_cache';
|
||||||
import {wtfInit} from 'angular2/src/core/profile/wtf_init';
|
import {wtfInit} from 'angular2/src/core/profile/wtf_init';
|
||||||
import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
|
import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
|
||||||
import {
|
import {
|
||||||
|
@ -94,6 +95,9 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
|
||||||
ELEMENT_PROBE_PROVIDERS
|
ELEMENT_PROBE_PROVIDERS
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
export const CACHED_TEMPLATE_PROVIDER: Array<any /*Type | Provider | any[]*/> =
|
||||||
|
CONST_EXPR([new Provider(XHR, {useClass: CachedXHR})]);
|
||||||
|
|
||||||
export function initDomAdapter() {
|
export function initDomAdapter() {
|
||||||
BrowserDomAdapter.makeCurrent();
|
BrowserDomAdapter.makeCurrent();
|
||||||
wtfInit();
|
wtfInit();
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import 'dart:js' as js;
|
||||||
|
|
||||||
|
void setTemplateCache(Map cache) {
|
||||||
|
if (cache == null) {
|
||||||
|
if (js.context.hasProperty(r'$templateCache')) {
|
||||||
|
js.context.deleteProperty(r'$templateCache');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
js.JsObject jsMap = new js.JsObject(js.context['Object']);
|
||||||
|
for (String key in cache.keys) {
|
||||||
|
jsMap[key] = cache[key];
|
||||||
|
}
|
||||||
|
js.context[r'$templateCache'] = jsMap;
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
export function setTemplateCache(cache): void {
|
||||||
|
(<any>window).$templateCache = cache;
|
||||||
|
}
|
|
@ -0,0 +1,83 @@
|
||||||
|
import {Component, provide} from 'angular2/core';
|
||||||
|
import {UrlResolver, XHR} from 'angular2/compiler';
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
beforeEachProviders,
|
||||||
|
ComponentFixture,
|
||||||
|
ddescribe,
|
||||||
|
describe,
|
||||||
|
expect,
|
||||||
|
fakeAsync,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
it,
|
||||||
|
TestComponentBuilder,
|
||||||
|
tick,
|
||||||
|
xit
|
||||||
|
} from 'angular2/testing_internal';
|
||||||
|
import {BaseException} from 'angular2/src/facade/exceptions';
|
||||||
|
import {CachedXHR} from 'angular2/src/platform/browser/xhr_cache';
|
||||||
|
import {setTemplateCache} from './xhr_cache_setter';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
describe('CachedXHR', () => {
|
||||||
|
var xhr: CachedXHR;
|
||||||
|
|
||||||
|
function createCachedXHR(): CachedXHR {
|
||||||
|
setTemplateCache({'test.html': '<div>Hello</div>'});
|
||||||
|
return new CachedXHR();
|
||||||
|
}
|
||||||
|
beforeEachProviders(() => [
|
||||||
|
provide(UrlResolver, {useClass: TestUrlResolver}),
|
||||||
|
provide(XHR, {useFactory: createCachedXHR})
|
||||||
|
]);
|
||||||
|
|
||||||
|
it('should throw exception if $templateCache is not found', () => {
|
||||||
|
setTemplateCache(null);
|
||||||
|
expect(() => { xhr = new CachedXHR(); })
|
||||||
|
.toThrowErrorWith('CachedXHR: Template cache was not found in $templateCache.');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should resolve the Promise with the cached file content on success',
|
||||||
|
inject([AsyncTestCompleter], (async) => {
|
||||||
|
setTemplateCache({'test.html': '<div>Hello</div>'});
|
||||||
|
xhr = new CachedXHR();
|
||||||
|
xhr.get('test.html')
|
||||||
|
.then((text) => {
|
||||||
|
expect(text).toEqual('<div>Hello</div>');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should reject the Promise on failure', inject([AsyncTestCompleter], (async) => {
|
||||||
|
xhr = new CachedXHR();
|
||||||
|
xhr.get('unknown.html')
|
||||||
|
.then((text) => { throw new BaseException('Not expected to succeed.'); })
|
||||||
|
.catch((error) => { async.done(); });
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should allow fakeAsync Tests to load components with templateUrl synchronously',
|
||||||
|
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
|
||||||
|
let fixture: ComponentFixture;
|
||||||
|
tcb.createAsync(TestComponent).then((f) => { fixture = f; });
|
||||||
|
|
||||||
|
// This should initialize the fixture.
|
||||||
|
tick();
|
||||||
|
|
||||||
|
expect(fixture.debugElement.children[0].nativeElement).toHaveText('Hello');
|
||||||
|
})));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp', templateUrl: 'test.html'})
|
||||||
|
class TestComponent {
|
||||||
|
}
|
||||||
|
|
||||||
|
class TestUrlResolver extends UrlResolver {
|
||||||
|
resolve(baseUrl: string, url: string): string {
|
||||||
|
// Don't use baseUrl to get the same URL as templateUrl.
|
||||||
|
// This is to remove any difference between Dart and TS tests.
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
}
|
|
@ -288,6 +288,7 @@ var NG_PLATFORM_BROWSER = [
|
||||||
'BROWSER_PROVIDERS',
|
'BROWSER_PROVIDERS',
|
||||||
'BrowserDomAdapter',
|
'BrowserDomAdapter',
|
||||||
'By',
|
'By',
|
||||||
|
'CACHED_TEMPLATE_PROVIDER',
|
||||||
'DOCUMENT',
|
'DOCUMENT',
|
||||||
'ELEMENT_PROBE_PROVIDERS',
|
'ELEMENT_PROBE_PROVIDERS',
|
||||||
'ELEMENT_PROBE_PROVIDERS_PROD_MODE',
|
'ELEMENT_PROBE_PROVIDERS_PROD_MODE',
|
||||||
|
|
Loading…
Reference in New Issue