refactor(upgrade): spec cleanup

This commit is contained in:
Victor Berchet 2016-10-27 10:40:02 -07:00 committed by vsavkin
parent fa93fd672e
commit d520fae70e

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {Class, Component, EventEmitter, NO_ERRORS_SCHEMA, NgModule, Testability, destroyPlatform, forwardRef} from '@angular/core'; import {Class, Component, EventEmitter, NO_ERRORS_SCHEMA, NgModule, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core';
import {async, fakeAsync, flushMicrotasks} from '@angular/core/testing'; import {async, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {BrowserModule} from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@ -24,38 +24,36 @@ export function main() {
let adapter: UpgradeAdapter; let adapter: UpgradeAdapter;
beforeEach(() => { beforeEach(() => {
const ng1Module = angular.module('ng1', []); angular.module('ng1', []);
const ng2Component = const ng2Component = Component({
Component({selector: 'ng2', template: `<BAD TEMPLATE div></div>`}).Class({ selector: 'ng2',
constructor: function() {} template: `<BAD TEMPLATE div></div>`,
}); }).Class({constructor: function() {}});
const Ng2Module = NgModule({declarations: [ng2Component], imports: [BrowserModule]}).Class({ const Ng2Module = NgModule({
constructor: function() {} declarations: [ng2Component],
}); imports: [BrowserModule],
}).Class({constructor: function() {}});
adapter = new UpgradeAdapter(Ng2Module); adapter = new UpgradeAdapter(Ng2Module);
}); });
it('should throw an uncaught error', fakeAsync(() => { it('should throw an uncaught error', fakeAsync(() => {
const element = html('<ng2></ng2>');
const resolveSpy = jasmine.createSpy('resolveSpy'); const resolveSpy = jasmine.createSpy('resolveSpy');
spyOn(console, 'log'); spyOn(console, 'log');
expect(() => { expect(() => {
adapter.bootstrap(element, ['ng1']).ready(resolveSpy); adapter.bootstrap(html('<ng2></ng2>'), ['ng1']).ready(resolveSpy);
flushMicrotasks(); flushMicrotasks();
}).toThrowError(); }).toThrowError();
expect(resolveSpy).not.toHaveBeenCalled(); expect(resolveSpy).not.toHaveBeenCalled();
})); }));
it('should properly log to the console and re throw', fakeAsync(() => { it('should properly log to the console and re-throw', fakeAsync(() => {
const element = html('<ng2></ng2>');
spyOn(console, 'log'); spyOn(console, 'log');
expect(() => { expect(() => {
adapter.bootstrap(element, ['ng1']); adapter.bootstrap(html('<ng2></ng2>'), ['ng1']);
flushMicrotasks(); flushMicrotasks();
}).toThrowError(); }).toThrowError();
expect(console.log).toHaveBeenCalled(); expect(console.log).toHaveBeenCalled();
@ -68,7 +66,7 @@ export function main() {
const Ng2 = Component({ const Ng2 = Component({
selector: 'ng2', selector: 'ng2',
template: `{{ 'NG2' }}(<ng-content></ng-content>)` template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
}).Class({constructor: function() {}}); }).Class({constructor: function() {}});
const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({ const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
@ -148,15 +146,15 @@ export function main() {
it('should interleave scope and component expressions', async(() => { it('should interleave scope and component expressions', async(() => {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
const log: any[] /** TODO #9100 */ = []; const log: string[] = [];
const l = (value: any /** TODO #9100 */) => { const l = (value: string) => {
log.push(value); log.push(value);
return value + ';'; return value + ';';
}; };
ng1Module.directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'})); ng1Module.directive('ng1a', () => ({template: '{{ l(\'ng1a\') }}'}));
ng1Module.directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'})); ng1Module.directive('ng1b', () => ({template: '{{ l(\'ng1b\') }}'}));
ng1Module.run(($rootScope: any /** TODO #9100 */) => { ng1Module.run(($rootScope: any) => {
$rootScope.l = l; $rootScope.l = l;
$rootScope.reset = () => log.length = 0; $rootScope.reset = () => log.length = 0;
}); });
@ -193,7 +191,7 @@ export function main() {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
ng1Module.run(($rootScope: any /** TODO #9100 */) => { ng1Module.run(($rootScope: any) => {
$rootScope.dataA = 'A'; $rootScope.dataA = 'A';
$rootScope.dataB = 'B'; $rootScope.dataB = 'B';
$rootScope.modelA = 'initModelA'; $rootScope.modelA = 'initModelA';
@ -228,14 +226,14 @@ export function main() {
this.twoWayAEmitter = new EventEmitter(); this.twoWayAEmitter = new EventEmitter();
this.twoWayBEmitter = new EventEmitter(); this.twoWayBEmitter = new EventEmitter();
}, },
ngOnChanges: function(changes: any /** TODO #9100 */) { ngOnChanges: function(changes: SimpleChanges) {
const assert = (prop: any /** TODO #9100 */, value: any /** TODO #9100 */) => { const assert = (prop: string, value: any) => {
if (this[prop] != value) { if (this[prop] != value) {
throw new Error(`Expected: '${prop}' to be '${value}' but was '${this[prop]}'`); throw new Error(`Expected: '${prop}' to be '${value}' but was '${this[prop]}'`);
} }
}; };
const assertChange = (prop: any /** TODO #9100 */, value: any /** TODO #9100 */) => { const assertChange = (prop: string, value: any) => {
assert(prop, value); assert(prop, value);
if (!changes[prop]) { if (!changes[prop]) {
throw new Error(`Changes record for '${prop}' not found.`); throw new Error(`Changes record for '${prop}' not found.`);
@ -308,8 +306,7 @@ export function main() {
ng1Module.directive('ng1', () => { ng1Module.directive('ng1', () => {
return { return {
template: '<div ng-if="!destroyIt"><ng2></ng2></div>', template: '<div ng-if="!destroyIt"><ng2></ng2></div>',
controller: function( controller: function($rootScope: any, $timeout: Function) {
$rootScope: any /** TODO #9100 */, $timeout: any /** TODO #9100 */) {
$timeout(() => { $rootScope.destroyIt = true; }); $timeout(() => { $rootScope.destroyIt = true; });
} }
}; };
@ -340,11 +337,9 @@ export function main() {
ng1Module.directive('ng1', [ ng1Module.directive('ng1', [
'$compile', '$compile',
($compile: any /** TODO #9100 */) => { ($compile: Function) => {
return { return {
link: function( link: function($scope: any, $element: any, $attrs: any) {
$scope: any /** TODO #9100 */, $element: any /** TODO #9100 */,
$attrs: any /** TODO #9100 */) {
const compiled = $compile('<ng2></ng2>'); const compiled = $compile('<ng2></ng2>');
const template = compiled($scope); const template = compiled($scope);
$element.append(template); $element.append(template);
@ -380,8 +375,8 @@ export function main() {
return { return {
template: 'Hello {{fullName}}; A: {{dataA}}; B: {{dataB}}; C: {{modelC}}; | ', template: 'Hello {{fullName}}; A: {{dataA}}; B: {{dataB}}; C: {{modelC}}; | ',
scope: {fullName: '@', modelA: '=dataA', modelB: '=dataB', modelC: '=', event: '&'}, scope: {fullName: '@', modelA: '=dataA', modelB: '=dataB', modelC: '=', event: '&'},
link: function(scope: any /** TODO #9100 */) { link: function(scope: any) {
scope.$watch('dataB', (v: any /** TODO #9100 */) => { scope.$watch('dataB', (v: string) => {
if (v == 'Savkin') { if (v == 'Savkin') {
scope.dataB = 'SAVKIN'; scope.dataB = 'SAVKIN';
scope.event('WORKS'); scope.event('WORKS');
@ -485,9 +480,7 @@ export function main() {
restrict: 'E', restrict: 'E',
template: '{{someText}} - Length: {{data.length}}', template: '{{someText}} - Length: {{data.length}}',
scope: {data: '='}, scope: {data: '='},
controller: function($scope: any /** TODO #9100 */) { controller: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; }
$scope.someText = 'ng1 - Data: ' + $scope.data;
}
}; };
}; };
@ -533,9 +526,7 @@ export function main() {
restrict: 'E', restrict: 'E',
template: '{{someText}} - Length: {{data.length}}', template: '{{someText}} - Length: {{data.length}}',
scope: {data: '='}, scope: {data: '='},
link: function($scope: any /** TODO #9100 */) { link: function($scope: any) { $scope.someText = 'ng1 - Data: ' + $scope.data; }
$scope.someText = 'ng1 - Data: ' + $scope.data;
}
}; };
}; };
@ -576,9 +567,9 @@ export function main() {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
ng1Module.value( ng1Module.value(
'$httpBackend', (method: any /** TODO #9100 */, url: any /** TODO #9100 */, '$httpBackend', (method: string, url: string, post: any, cbFn: Function) => {
post: any /** TODO #9100 */, cbFn(200, `${method}:${url}`);
cbFn: any /** TODO #9100 */) => { cbFn(200, `${method}:${url}`); }); });
const ng1 = () => { return {templateUrl: 'url.html'}; }; const ng1 = () => { return {templateUrl: 'url.html'}; };
ng1Module.directive('ng1', ng1); ng1Module.directive('ng1', ng1);
@ -604,9 +595,9 @@ export function main() {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
ng1Module.value( ng1Module.value(
'$httpBackend', (method: any /** TODO #9100 */, url: any /** TODO #9100 */, '$httpBackend', (method: string, url: string, post: any, cbFn: Function) => {
post: any /** TODO #9100 */, cbFn(200, `${method}:${url}`);
cbFn: any /** TODO #9100 */) => { cbFn(200, `${method}:${url}`); }); });
const ng1 = () => { return {templateUrl() { return 'url.html'; }}; }; const ng1 = () => { return {templateUrl() { return 'url.html'; }}; };
ng1Module.directive('ng1', ng1); ng1Module.directive('ng1', ng1);
@ -681,8 +672,7 @@ export function main() {
it('should support templateUrl fetched from $templateCache', async(() => { it('should support templateUrl fetched from $templateCache', async(() => {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
ng1Module.run( ng1Module.run(($templateCache: any) => $templateCache.put('url.html', 'WORKS'));
($templateCache: any /** TODO #9100 */) => $templateCache.put('url.html', 'WORKS'));
const ng1 = () => { return {templateUrl: 'url.html'}; }; const ng1 = () => { return {templateUrl: 'url.html'}; };
ng1Module.directive('ng1', ng1); ng1Module.directive('ng1', ng1);
@ -716,8 +706,7 @@ export function main() {
'{{ctl.scope}}; {{ctl.isClass}}; {{ctl.hasElement}}; {{ctl.isPublished()}}', '{{ctl.scope}}; {{ctl.isClass}}; {{ctl.hasElement}}; {{ctl.isPublished()}}',
controllerAs: 'ctl', controllerAs: 'ctl',
controller: Class({ controller: Class({
constructor: function( constructor: function($scope: any, $element: any) {
$scope: any /** TODO #9100 */, $element: any /** TODO #9100 */) {
(<any>this).verifyIAmAClass(); (<any>this).verifyIAmAClass();
this.scope = $scope.$parent.$parent == $scope.$root ? 'scope' : 'wrong-scope'; this.scope = $scope.$parent.$parent == $scope.$root ? 'scope' : 'wrong-scope';
this.hasElement = $element[0].nodeName; this.hasElement = $element[0].nodeName;
@ -820,7 +809,7 @@ export function main() {
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
const ng1Module = angular.module('ng1', []); const ng1Module = angular.module('ng1', []);
const ng1 = ($rootScope: any /** TODO #9100 */) => { const ng1 = ($rootScope: any) => {
return { return {
scope: {title: '@'}, scope: {title: '@'},
bindToController: true, bindToController: true,
@ -828,9 +817,7 @@ export function main() {
require: 'ng1', require: 'ng1',
controllerAs: 'ctrl', controllerAs: 'ctrl',
controller: Class({constructor: function() { this.status = 'WORKS'; }}), controller: Class({constructor: function() { this.status = 'WORKS'; }}),
link: function( link: function(scope: any, element: any, attrs: any, linkController: any) {
scope: any /** TODO #9100 */, element: any /** TODO #9100 */,
attrs: any /** TODO #9100 */, linkController: any /** TODO #9100 */) {
expect(scope.$root).toEqual($rootScope); expect(scope.$root).toEqual($rootScope);
expect(element[0].nodeName).toEqual('NG1'); expect(element[0].nodeName).toEqual('NG1');
expect(linkController.status).toEqual('WORKS'); expect(linkController.status).toEqual('WORKS');
@ -873,9 +860,7 @@ export function main() {
require: ['ng1', '^parent', '?^^notFound'], require: ['ng1', '^parent', '?^^notFound'],
controllerAs: 'ctrl', controllerAs: 'ctrl',
controller: Class({constructor: function() { this.status = 'WORKS'; }}), controller: Class({constructor: function() { this.status = 'WORKS'; }}),
link: function( link: function(scope: any, element: any, attrs: any, linkControllers: any) {
scope: any /** TODO #9100 */, element: any /** TODO #9100 */,
attrs: any /** TODO #9100 */, linkControllers: any /** TODO #9100 */) {
expect(linkControllers[0].status).toEqual('WORKS'); expect(linkControllers[0].status).toEqual('WORKS');
expect(linkControllers[1].parent).toEqual('PARENT'); expect(linkControllers[1].parent).toEqual('PARENT');
expect(linkControllers[2]).toBe(undefined); expect(linkControllers[2]).toBe(undefined);
@ -1152,13 +1137,16 @@ export function main() {
} }
function multiTrim(text: string): string { function multiTrim(text: string): string {
return text.replace(/\n/g, '').replace(/\s\s+/g, ' ').trim(); return text.replace(/\n/g, '').replace(/\s{2,}/g, ' ').trim();
} }
function html(html: string): Element { function html(html: string): Element {
const body = document.body; const body = document.body;
body.innerHTML = html; body.innerHTML = html;
if (body.childNodes.length == 1 && body.firstChild instanceof HTMLElement)
if (body.childNodes.length == 1 && body.firstChild instanceof HTMLElement) {
return <Element>body.firstChild; return <Element>body.firstChild;
}
return body; return body;
} }