fix(upgrade): bring the dynamic version closer to the static one
(#17971) This commit changes the dynamic version of ngUpgrade to use `UpgradeHelper`, thus bringing its behavior (wrt upgraded components) much closer to `upgrade/static`. Fixes/features include: - Fix template compilation: Now takes place in the correct DOM context, instead of in a detached node (thus has access to required ancestors etc). - Fix support for the `$onInit()` lifecycle hook. - Fix single-slot transclusion (including optional transclusion and fallback content). - Add support for multi-slot transclusion (inclusing optional slots and fallback content). - Add support for binding required controllers to the directive's controller (and make the `require` behavior more consistent with AngularJS). - Add support for pre-/post-linking functions. (This also ports the fixes from #16627 to the dynamic version.) Fixes #11044
This commit is contained in:
Georgios Kalpakas
committed by
Jason Aden
Jason Aden
parent
0193be7c9b
commit
11db3bd85e
@ -1974,6 +1974,633 @@ export function main() {
|
||||
}));
|
||||
});
|
||||
|
||||
describe('linking', () => {
|
||||
it('should run the pre-linking after instantiating the controller', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const log: string[] = [];
|
||||
|
||||
// Define `ng1Directive`
|
||||
const ng1Directive: angular.IDirective = {
|
||||
template: '',
|
||||
link: {pre: () => log.push('ng1-pre')},
|
||||
controller: class {constructor() { log.push('ng1-ctrl'); }}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1></ng1>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1', [])
|
||||
.directive('ng1', () => ng1Directive)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready(() => {
|
||||
expect(log).toEqual(['ng1-ctrl', 'ng1-pre']);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should run the pre-linking function before linking', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const log: string[] = [];
|
||||
|
||||
// Define `ng1Directive`
|
||||
const ng1DirectiveA: angular.IDirective = {
|
||||
template: '<ng1-b></ng1-b>',
|
||||
link: {pre: () => log.push('ng1A-pre')}
|
||||
};
|
||||
|
||||
const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1', [])
|
||||
.directive('ng1A', () => ng1DirectiveA)
|
||||
.directive('ng1B', () => ng1DirectiveB)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready(() => {
|
||||
expect(log).toEqual(['ng1A-pre', 'ng1B-post']);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should run the post-linking function after linking (link: object)', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const log: string[] = [];
|
||||
|
||||
// Define `ng1Directive`
|
||||
const ng1DirectiveA: angular.IDirective = {
|
||||
template: '<ng1-b></ng1-b>',
|
||||
link: {post: () => log.push('ng1A-post')}
|
||||
};
|
||||
|
||||
const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1', [])
|
||||
.directive('ng1A', () => ng1DirectiveA)
|
||||
.directive('ng1B', () => ng1DirectiveB)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready(() => {
|
||||
expect(log).toEqual(['ng1B-post', 'ng1A-post']);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should run the post-linking function after linking (link: function)', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const log: string[] = [];
|
||||
|
||||
// Define `ng1Directive`
|
||||
const ng1DirectiveA: angular.IDirective = {
|
||||
template: '<ng1-b></ng1-b>',
|
||||
link: () => log.push('ng1A-post')
|
||||
};
|
||||
|
||||
const ng1DirectiveB: angular.IDirective = {link: () => log.push('ng1B-post')};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1-a></ng1-a>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1', [])
|
||||
.directive('ng1A', () => ng1DirectiveA)
|
||||
.directive('ng1B', () => ng1DirectiveB)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1A'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready(() => {
|
||||
expect(log).toEqual(['ng1B-post', 'ng1A-post']);
|
||||
});
|
||||
}));
|
||||
|
||||
it('should run the post-linking function before `$postLink`', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const log: string[] = [];
|
||||
|
||||
// Define `ng1Directive`
|
||||
const ng1Directive: angular.IDirective = {
|
||||
template: '',
|
||||
link: () => log.push('ng1-post'),
|
||||
controller: class {$postLink() { log.push('ng1-$post'); }}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1></ng1>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1', [])
|
||||
.directive('ng1', () => ng1Directive)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1']).ready(() => {
|
||||
expect(log).toEqual(['ng1-post', 'ng1-$post']);
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('transclusion', () => {
|
||||
it('should support single-slot transclusion', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng2ComponentAInstance: Ng2ComponentA;
|
||||
let ng2ComponentBInstance: Ng2ComponentB;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template: 'ng1(<div ng-transclude></div>)',
|
||||
transclude: true
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2A',
|
||||
template: 'ng2A(<ng1>{{ value }} | <ng2B *ngIf="showB"></ng2B></ng1>)'
|
||||
})
|
||||
class Ng2ComponentA {
|
||||
value = 'foo';
|
||||
showB = false;
|
||||
constructor() { ng2ComponentAInstance = this; }
|
||||
}
|
||||
|
||||
@Component({selector: 'ng2B', template: 'ng2B({{ value }})'})
|
||||
class Ng2ComponentB {
|
||||
value = 'bar';
|
||||
constructor() { ng2ComponentBInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2A', adapter.downgradeNg2Component(Ng2ComponentA));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2ComponentA, Ng2ComponentB]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2-a></ng2-a>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready((ref) => {
|
||||
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(foo | ))');
|
||||
|
||||
ng2ComponentAInstance.value = 'baz';
|
||||
ng2ComponentAInstance.showB = true;
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(bar)))');
|
||||
|
||||
ng2ComponentBInstance.value = 'qux';
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent)).toBe('ng2A(ng1(baz | ng2B(qux)))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support single-slot transclusion with fallback content', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng1ControllerInstances: any[] = [];
|
||||
let ng2ComponentInstance: Ng2Component;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template: 'ng1(<div ng-transclude>{{ $ctrl.value }}</div>)',
|
||||
transclude: true,
|
||||
controller: class {
|
||||
value = 'from-ng1'; constructor() { ng1ControllerInstances.push(this); }
|
||||
}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2',
|
||||
template: `
|
||||
ng2(
|
||||
<ng1><div>{{ value }}</div></ng1> |
|
||||
|
||||
<!-- Interpolation-only content should still be detected as transcluded content. -->
|
||||
<ng1>{{ value }}</ng1> |
|
||||
|
||||
<ng1></ng1>
|
||||
)`
|
||||
})
|
||||
class Ng2Component {
|
||||
value = 'from-ng2';
|
||||
constructor() { ng2ComponentInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(from-ng2)|ng1(from-ng2)|ng1(from-ng1))');
|
||||
|
||||
ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-foo');
|
||||
ng2ComponentInstance.value = 'ng2-bar';
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(ng2-bar)|ng1(ng2-bar)|ng1(ng1-foo))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support multi-slot transclusion', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng2ComponentInstance: Ng2Component;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template:
|
||||
'ng1(x(<div ng-transclude="slotX"></div>) | y(<div ng-transclude="slotY"></div>))',
|
||||
transclude: {slotX: 'contentX', slotY: 'contentY'}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2',
|
||||
template: `
|
||||
ng2(
|
||||
<ng1>
|
||||
<content-x>{{ x }}1</content-x>
|
||||
<content-y>{{ y }}1</content-y>
|
||||
<content-x>{{ x }}2</content-x>
|
||||
<content-y>{{ y }}2</content-y>
|
||||
</ng1>
|
||||
)`
|
||||
})
|
||||
class Ng2Component {
|
||||
x = 'foo';
|
||||
y = 'bar';
|
||||
constructor() { ng2ComponentInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(x(foo1foo2)|y(bar1bar2)))');
|
||||
|
||||
ng2ComponentInstance.x = 'baz';
|
||||
ng2ComponentInstance.y = 'qux';
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(x(baz1baz2)|y(qux1qux2)))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support default slot (with fallback content)', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng1ControllerInstances: any[] = [];
|
||||
let ng2ComponentInstance: Ng2Component;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template: 'ng1(default(<div ng-transclude="">fallback-{{ $ctrl.value }}</div>))',
|
||||
transclude: {slotX: 'contentX', slotY: 'contentY'},
|
||||
controller:
|
||||
class {value = 'ng1'; constructor() { ng1ControllerInstances.push(this); }}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2',
|
||||
template: `
|
||||
ng2(
|
||||
<ng1>
|
||||
({{ x }})
|
||||
<content-x>ignored x</content-x>
|
||||
{{ x }}-<span>{{ y }}</span>
|
||||
<content-y>ignored y</content-y>
|
||||
<span>({{ y }})</span>
|
||||
</ng1> |
|
||||
|
||||
<!--
|
||||
Remove any whitespace, because in AngularJS versions prior to 1.6
|
||||
even whitespace counts as transcluded content.
|
||||
-->
|
||||
<ng1><content-x>ignored x</content-x><content-y>ignored y</content-y></ng1> |
|
||||
|
||||
<!--
|
||||
Interpolation-only content should still be detected as transcluded content.
|
||||
-->
|
||||
<ng1>{{ x }}<content-x>ignored x</content-x>{{ y + x }}<content-y>ignored y</content-y>{{ y }}</ng1>
|
||||
)`
|
||||
})
|
||||
class Ng2Component {
|
||||
x = 'foo';
|
||||
y = 'bar';
|
||||
constructor() { ng2ComponentInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe(
|
||||
'ng2(ng1(default((foo)foo-bar(bar)))|ng1(default(fallback-ng1))|ng1(default(foobarfoobar)))');
|
||||
|
||||
ng1ControllerInstances.forEach(ctrl => ctrl.value = 'ng1-plus');
|
||||
ng2ComponentInstance.x = 'baz';
|
||||
ng2ComponentInstance.y = 'qux';
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe(
|
||||
'ng2(ng1(default((baz)baz-qux(qux)))|ng1(default(fallback-ng1-plus))|ng1(default(bazquxbazqux)))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support optional transclusion slots (with fallback content)', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng1ControllerInstances: any[] = [];
|
||||
let ng2ComponentInstance: Ng2Component;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template: `
|
||||
ng1(
|
||||
x(<div ng-transclude="slotX">{{ $ctrl.x }}</div>) |
|
||||
y(<div ng-transclude="slotY">{{ $ctrl.y }}</div>)
|
||||
)`,
|
||||
transclude: {slotX: '?contentX', slotY: '?contentY'},
|
||||
controller: class {
|
||||
x = 'ng1X'; y = 'ng1Y'; constructor() { ng1ControllerInstances.push(this); }
|
||||
}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2',
|
||||
template: `
|
||||
ng2(
|
||||
<ng1><content-x>{{ x }}</content-x></ng1> |
|
||||
<ng1><content-y>{{ y }}</content-y></ng1>
|
||||
)`
|
||||
})
|
||||
class Ng2Component {
|
||||
x = 'ng2X';
|
||||
y = 'ng2Y';
|
||||
constructor() { ng2ComponentInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(x(ng2X)|y(ng1Y))|ng1(x(ng1X)|y(ng2Y)))');
|
||||
|
||||
ng1ControllerInstances.forEach(ctrl => {
|
||||
ctrl.x = 'ng1X-foo';
|
||||
ctrl.y = 'ng1Y-bar';
|
||||
});
|
||||
ng2ComponentInstance.x = 'ng2X-baz';
|
||||
ng2ComponentInstance.y = 'ng2Y-qux';
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true))
|
||||
.toBe('ng2(ng1(x(ng2X-baz)|y(ng1Y-bar))|ng1(x(ng1X-foo)|y(ng2Y-qux)))');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should throw if a non-optional slot is not filled', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let errorMessage: string;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template: '',
|
||||
transclude: {slotX: '?contentX', slotY: 'contentY'}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({selector: 'ng2', template: '<ng1></ng1>'})
|
||||
class Ng2Component {
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module =
|
||||
angular.module('ng1Module', [])
|
||||
.value('$exceptionHandler', (error: Error) => errorMessage = error.message)
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(errorMessage)
|
||||
.toContain('Required transclusion slot \'slotY\' on directive: ng1');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should support structural directives in transcluded content', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
let ng2ComponentInstance: Ng2Component;
|
||||
|
||||
// Define `ng1Component`
|
||||
const ng1Component: angular.IComponent = {
|
||||
template:
|
||||
'ng1(x(<div ng-transclude="slotX"></div>) | default(<div ng-transclude=""></div>))',
|
||||
transclude: {slotX: 'contentX'}
|
||||
};
|
||||
|
||||
// Define `Ng2Component`
|
||||
@Component({
|
||||
selector: 'ng2',
|
||||
template: `
|
||||
ng2(
|
||||
<ng1>
|
||||
<content-x><div *ngIf="show">{{ x }}1</div></content-x>
|
||||
<div *ngIf="!show">{{ y }}1</div>
|
||||
<content-x><div *ngIf="!show">{{ x }}2</div></content-x>
|
||||
<div *ngIf="show">{{ y }}2</div>
|
||||
</ng1>
|
||||
)`
|
||||
})
|
||||
class Ng2Component {
|
||||
x = 'foo';
|
||||
y = 'bar';
|
||||
show = true;
|
||||
constructor() { ng2ComponentInstance = this; }
|
||||
}
|
||||
|
||||
// Define `ng1Module`
|
||||
const ng1Module = angular.module('ng1Module', [])
|
||||
.component('ng1', ng1Component)
|
||||
.directive('ng2', adapter.downgradeNg2Component(Ng2Component));
|
||||
|
||||
// Define `Ng2Module`
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [adapter.upgradeNg1Component('ng1'), Ng2Component],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
})
|
||||
class Ng2Module {
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
const element = html(`<ng2></ng2>`);
|
||||
|
||||
adapter.bootstrap(element, ['ng1Module']).ready(ref => {
|
||||
expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(foo1)|default(bar2)))');
|
||||
|
||||
ng2ComponentInstance.x = 'baz';
|
||||
ng2ComponentInstance.y = 'qux';
|
||||
ng2ComponentInstance.show = false;
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz2)|default(qux1)))');
|
||||
|
||||
ng2ComponentInstance.show = true;
|
||||
$digest(ref);
|
||||
|
||||
expect(multiTrim(element.textContent, true)).toBe('ng2(ng1(x(baz1)|default(qux2)))');
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
it('should bind input properties (<) of components', async(() => {
|
||||
const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
|
||||
const ng1Module = angular.module('ng1', []);
|
||||
|
||||
Reference in New Issue
Block a user