test(upgrade): reorganise test layout (#13812)
This commit is contained in:
Peter Bacon Darwin
Miško Hevery
parent
5237b1c98c
commit
4dea347101
|
|
@ -18,7 +18,89 @@ export function main() {
|
|||
beforeEach(() => destroyPlatform());
|
||||
afterEach(() => destroyPlatform());
|
||||
|
||||
it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));
|
||||
describe('(basic use)', () => {
|
||||
it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));
|
||||
|
||||
it('should instantiate ng2 in ng1 template and project content', async(() => {
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
const element =
|
||||
html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1[NG2(~ng-content~)]');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should instantiate ng1 in ng2 template and project content', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
|
||||
}).Class({constructor: function Ng2() {}});
|
||||
|
||||
const Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule],
|
||||
}).Class({constructor: function Ng2Module() {}});
|
||||
|
||||
ng1Module.directive('ng1', () => {
|
||||
return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
|
||||
});
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
const element = html('<div>{{\'ng1(\'}}<ng2></ng2>{{\')\'}}</div>');
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1(ng2(ng1(transclude)))');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
it('supports the compilerOptions argument', async(() => {
|
||||
const platformRef = platformBrowserDynamic();
|
||||
spyOn(platformRef, '_bootstrapModuleWithZone').and.callThrough();
|
||||
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'NG2' }}(<ng-content></ng-content>)`
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
const element =
|
||||
html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
|
||||
|
||||
const Ng2AppModule =
|
||||
NgModule({
|
||||
declarations: [Ng2],
|
||||
imports: [BrowserModule],
|
||||
}).Class({constructor: function Ng2AppModule() {}, ngDoBootstrap: function() {}});
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2AppModule, {providers: []});
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect((platformRef as any)._bootstrapModuleWithZone)
|
||||
.toHaveBeenCalledWith(
|
||||
jasmine.any(Function), {providers: []}, jasmine.any(Object),
|
||||
jasmine.any(Function));
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('bootstrap errors', () => {
|
||||
let adapter: UpgradeAdapter;
|
||||
|
|
@ -51,98 +133,18 @@ export function main() {
|
|||
}));
|
||||
|
||||
it('should output an error message to the console and re-throw', fakeAsync(() => {
|
||||
let consoleErrorSpy: jasmine.Spy = spyOn(console, 'error');
|
||||
const consoleErrorSpy: jasmine.Spy = spyOn(console, 'error');
|
||||
expect(() => {
|
||||
adapter.bootstrap(html('<ng2></ng2>'), ['ng1']);
|
||||
flushMicrotasks();
|
||||
}).toThrowError();
|
||||
let args: any[] = consoleErrorSpy.calls.mostRecent().args;
|
||||
const args: any[] = consoleErrorSpy.calls.mostRecent().args;
|
||||
expect(consoleErrorSpy).toHaveBeenCalled();
|
||||
expect(args.length).toBeGreaterThan(0);
|
||||
expect(args[0]).toEqual(jasmine.any(Error));
|
||||
}));
|
||||
});
|
||||
|
||||
it('should instantiate ng2 in ng1 template and project content', async(() => {
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
|
||||
constructor: function() {}
|
||||
});
|
||||
|
||||
const element =
|
||||
html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2Module);
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1[NG2(~ng-content~)]');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should instantiate ng1 in ng2 template and project content', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
|
||||
}).Class({constructor: function Ng2() {}});
|
||||
|
||||
const Ng2Module = NgModule({
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
|
||||
imports: [BrowserModule],
|
||||
}).Class({constructor: function Ng2Module() {}});
|
||||
|
||||
ng1Module.directive('ng1', () => {
|
||||
return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
|
||||
});
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
|
||||
const element = html('<div>{{\'ng1(\'}}<ng2></ng2>{{\')\'}}</div>');
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect(document.body.textContent).toEqual('ng1(ng2(ng1(transclude)))');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
it('supports the compilerOptions argument', async(() => {
|
||||
const platformRef = platformBrowserDynamic();
|
||||
spyOn(platformRef, '_bootstrapModuleWithZone').and.callThrough();
|
||||
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
const Ng2 = Component({
|
||||
selector: 'ng2',
|
||||
template: `{{ 'NG2' }}(<ng-content></ng-content>)`
|
||||
}).Class({constructor: function() {}});
|
||||
|
||||
const element =
|
||||
html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
|
||||
|
||||
const Ng2AppModule =
|
||||
NgModule({
|
||||
declarations: [Ng2],
|
||||
imports: [BrowserModule],
|
||||
}).Class({constructor: function Ng2AppModule() {}, ngDoBootstrap: function() {}});
|
||||
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2AppModule, {providers: []});
|
||||
ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
|
||||
adapter.bootstrap(element, ['ng1']).ready((ref) => {
|
||||
expect((platformRef as any)._bootstrapModuleWithZone)
|
||||
.toHaveBeenCalledWith(
|
||||
jasmine.any(Function), {providers: []}, jasmine.any(Object),
|
||||
jasmine.any(Function));
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
describe('scope/component change-detection', () => {
|
||||
it('should interleave scope and component expressions', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
|
|
@ -388,6 +390,31 @@ export function main() {
|
|||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should allow attribute selectors for components in ng2', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
|
||||
const ng1Module = angular.module('myExample', []);
|
||||
|
||||
@Component({selector: '[works]', template: 'works!'})
|
||||
class WorksComponent {
|
||||
}
|
||||
|
||||
@Component({selector: 'root-component', template: 'It <div works></div>'})
|
||||
class RootComponent {
|
||||
}
|
||||
|
||||
@NgModule({imports: [BrowserModule], declarations: [RootComponent, WorksComponent]})
|
||||
class MyNg2Module {
|
||||
}
|
||||
|
||||
ng1Module.directive('rootComponent', adapter.downgradeNg2Component(RootComponent));
|
||||
|
||||
document.body.innerHTML = '<root-component></root-component>';
|
||||
adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('It works!');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('upgrade ng1 component', () => {
|
||||
|
|
@ -1627,31 +1654,6 @@ export function main() {
|
|||
}));
|
||||
});
|
||||
|
||||
it('should allow attribute selectors for components in ng2', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
|
||||
const ng1Module = angular.module('myExample', []);
|
||||
|
||||
@Component({selector: '[works]', template: 'works!'})
|
||||
class WorksComponent {
|
||||
}
|
||||
|
||||
@Component({selector: 'root-component', template: 'It <div works></div>'})
|
||||
class RootComponent {
|
||||
}
|
||||
|
||||
@NgModule({imports: [BrowserModule], declarations: [RootComponent, WorksComponent]})
|
||||
class MyNg2Module {
|
||||
}
|
||||
|
||||
ng1Module.directive('rootComponent', adapter.downgradeNg2Component(RootComponent));
|
||||
|
||||
document.body.innerHTML = '<root-component></root-component>';
|
||||
adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => {
|
||||
expect(multiTrim(document.body.textContent)).toEqual('It works!');
|
||||
ref.dispose();
|
||||
});
|
||||
}));
|
||||
|
||||
describe('examples', () => {
|
||||
it('should verify UpgradeAdapter example', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
|
|
|
|||
Loading…
Reference in New Issue