cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): mark views dirty by default when events fire (#28474)

Browse Source 
In Ivy, we support a new manual mode that allows for stricter control
over change detection in OnPush components. Specifically, in this mode,
events do not automatically mark OnPush views as dirty. Only changed
inputs and manual calls to `markDirty()` actually mark a view dirty.

However, this mode cannot be the default for OnPush components if we
want to be backwards compatible with View Engine. This commit re-adds
the legacy logic for OnPush components where events always mark views
dirty and makes it the default behavior.

Note: It is still TODO to add a public API for manual change detection.

PR Close #28474
This commit is contained in:
Kara Erickson
2019-01-30 21:54:44 -08:00
committed by Matias Niemelä
parent 8930f60a4b
commit 5c4d95541e
5 changed files with 332 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/core/test/linker/integration_spec.ts
View File

@ -637,44 +637,43 @@ function declareTests(config?: {useJit: boolean}) {
}));
}
fixmeIvy('FW-758: OnPush events not marking view dirty when using renderer2')
.it('should be checked when an event is fired', () => {
TestBed.configureTestingModule(
{declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
it('should be checked when an event is fired', () => {
TestBed.configureTestingModule(
{declarations: [MyComp, PushCmp, EventCmp], imports: [CommonModule]});
const template = '<push-cmp [prop]="ctxProp" #cmp></push-cmp>';
TestBed.overrideComponent(MyComp, {set: {template}});
const fixture = TestBed.createComponent(MyComp);
const cmpEl = fixture.debugElement.children[0];
const cmp = cmpEl.componentInstance;
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
const cmpEl = fixture.debugElement.children[0];
const cmp = cmpEl.componentInstance;
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
// regular element
cmpEl.children[0].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(2);
// regular element
cmpEl.children[0].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(2);
// element inside of an *ngIf
cmpEl.children[1].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(3);
// element inside of an *ngIf
cmpEl.children[1].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(3);
// element inside a nested component
cmpEl.children[2].children[0].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(4);
// element inside a nested component
cmpEl.children[2].children[0].triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(4);
// host element
cmpEl.triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(5);
});
// host element
cmpEl.triggerEventHandler('click', <Event>{});
fixture.detectChanges();
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(5);
});
it('should not affect updating properties on the component', () => {
TestBed.configureTestingModule({declarations: [MyComp, [[PushCmpWithRef]]]});