honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): process creation mode deeply before running update mode (#27744)

Browse Source 
Prior to this commit, we had two different modes for change detection
execution for Ivy, depending on whether you called `bootstrap()` or
`renderComponent()`. In the former case, we would complete creation
mode for all components in the tree before beginning update mode for
any component. In the latter case, we would run creation mode and
update mode together for each component individually.

Maintaining code to support these two different execution orders was
unnecessarily complex, so this commit aligns the two bootstrapping
mechanisms to execute in the same order. Now creation mode always
runs for all components before update mode begins.

This change also simplifies our rendering logic so that we use
`LView` flags as the source of truth for rendering mode instead of
`rf` function arguments. This fixed some related bugs (e.g. calling
`ViewRef.detectChanges` synchronously after the view's creation
would create view nodes twice, view queries would execute twice, etc).

PR Close #27744
This commit is contained in:
Kara Erickson
2018-12-19 15:10:16 -05:00
committed by Matias Niemelä
parent f48a00fb0c
commit a20b2f72f2
25 changed files with 384 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/test/BUILD.bazel
+1
View File
@@ -15,6 +15,7 @@ ts_library(
"//packages/platform-browser",
"//packages/platform-browser-dynamic",
"//packages/platform-browser/testing",
"//packages/private/testing",
],
)
packages/common/test/directives/ng_component_outlet_spec.ts
+14 -10
View File
@@ -11,6 +11,7 @@ import {NgComponentOutlet} from '@angular/common/src/directives/ng_component_out
import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
import {TestBed, async} from '@angular/core/testing';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {modifiedInIvy} from '@angular/private/testing';
describe('insert/remove', () => {
@@ -106,17 +107,20 @@ describe('insert/remove', () => {
}));
it('should resolve a with injector', async(() => {
let fixture = TestBed.createComponent(TestComponent);
fixture.componentInstance.cmpRef = null;
fixture.componentInstance.currentComponent = InjectedComponent;
fixture.detectChanges();
let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
expect(cmpRef).toBeAnInstanceOf(ComponentRef);
expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
expect(cmpRef.instance.testToken).toBeNull();
}));
modifiedInIvy('Static ViewChild and ContentChild queries are resolved in update mode')
.it('should resolve with an injector', async(() => {
let fixture = TestBed.createComponent(TestComponent);
// We are accessing a ViewChild (ngComponentOutlet) before change detection has run
fixture.componentInstance.cmpRef = null;
fixture.componentInstance.currentComponent = InjectedComponent;
fixture.detectChanges();
let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef !;
expect(cmpRef).toBeAnInstanceOf(ComponentRef);
expect(cmpRef.instance).toBeAnInstanceOf(InjectedComponent);
expect(cmpRef.instance.testToken).toBeNull();
}));
it('should render projectable nodes, if supplied', async(() => {
const template = `<ng-template>projected foo</ng-template>${TEST_CMP_TEMPLATE}`;
packages/core/src/render3/bindings.ts
+2 -2
View File
@@ -11,7 +11,7 @@ import {devModeEqual} from '../change_detection/change_detection_util';
import {assertDataInRange, assertLessThan, assertNotEqual} from './assert';
import {throwErrorIfNoChangesMode} from './errors';
import {BINDING_INDEX, LView} from './interfaces/view';
import {getCheckNoChangesMode, getCreationMode} from './state';
import {getCheckNoChangesMode, isCreationMode} from './state';
import {NO_CHANGE} from './tokens';
import {isDifferent} from './util';
@@ -44,7 +44,7 @@ export function bindingUpdated(lView: LView, bindingIndex: number, value: any):
} else if (isDifferent(lView[bindingIndex], value)) {
if (ngDevMode && getCheckNoChangesMode()) {
if (!devModeEqual(lView[bindingIndex], value)) {
throwErrorIfNoChangesMode(getCreationMode(), lView[bindingIndex], value);
throwErrorIfNoChangesMode(isCreationMode(lView), lView[bindingIndex], value);
}
}
lView[bindingIndex] = value;
packages/core/src/render3/component.ts
+4 -2
View File
@@ -22,7 +22,7 @@ import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition'
import {TElementNode, TNode, TNodeFlags, TNodeType} from './interfaces/node';
import {PlayerHandler} from './interfaces/player';
import {RElement, Renderer3, RendererFactory3, domRendererFactory3} from './interfaces/renderer';
import {CONTEXT, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
import {CONTEXT, FLAGS, HEADER_OFFSET, HOST, HOST_NODE, LView, LViewFlags, RootContext, RootContextFlags, TVIEW} from './interfaces/view';
import {enterView, getPreviousOrParentTNode, leaveView, resetComponentState, setCurrentDirectiveDef} from './state';
import {defaultScheduler, getRootView, readPatchedLView, stringify} from './util';
@@ -133,7 +133,9 @@ export function renderComponent<T>(
component = createRootComponent(
componentView, componentDef, rootView, rootContext, opts.hostFeatures || null);
refreshDescendantViews(rootView, null);
refreshDescendantViews(rootView); // creation mode pass
rootView[FLAGS] &= ~LViewFlags.CreationMode;
refreshDescendantViews(rootView); // update mode pass
} finally {
leaveView(oldView);
if (rendererFactory.end) rendererFactory.end();
packages/core/src/render3/component_ref.ts
+2 -3
View File
@@ -208,10 +208,9 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
addToViewTree(rootLView, HEADER_OFFSET, componentView);
refreshDescendantViews(rootLView, RenderFlags.Create);
refreshDescendantViews(rootLView);
} finally {
leaveView(oldLView, true);
leaveView(oldLView);
if (rendererFactory.end) rendererFactory.end();
}
packages/core/src/render3/hooks.ts
+11 -8
View File
@@ -93,9 +93,10 @@ function queueDestroyHooks(def: DirectiveDef<any>, tView: TView, i: number): voi
*
* @param currentView The current view
*/
export function executeInitHooks(currentView: LView, tView: TView, creationMode: boolean): void {
if (currentView[FLAGS] & LViewFlags.RunInit) {
executeHooks(currentView, tView.initHooks, tView.checkHooks, creationMode);
export function executeInitHooks(
currentView: LView, tView: TView, checkNoChangesMode: boolean): void {
if (!checkNoChangesMode && currentView[FLAGS] & LViewFlags.RunInit) {
executeHooks(currentView, tView.initHooks, tView.checkHooks, checkNoChangesMode);
currentView[FLAGS] &= ~LViewFlags.RunInit;
}
}
@@ -106,17 +107,19 @@ export function executeInitHooks(currentView: LView, tView: TView, creationMode:
* @param currentView The current view
*/
export function executeHooks(
data: LView, allHooks: HookData | null, checkHooks: HookData | null,
creationMode: boolean): void {
const hooksToCall = creationMode ? allHooks : checkHooks;
currentView: LView, allHooks: HookData | null, checkHooks: HookData | null,
checkNoChangesMode: boolean): void {
if (checkNoChangesMode) return;
const hooksToCall = currentView[FLAGS] & LViewFlags.FirstLViewPass ? allHooks : checkHooks;
if (hooksToCall) {
callHooks(data, hooksToCall);
callHooks(currentView, hooksToCall);
}
}
/**
* Calls lifecycle hooks with their contexts, skipping init hooks if it's not
* creation mode.
* the first LView pass.
*
* @param currentView The current view
* @param arr The array in which the hooks are found
packages/core/src/render3/instructions.ts
+85 -82
View File
File diff suppressed because it is too large Load Diff
packages/core/src/render3/interfaces/view.ts
+16 -7
View File
@@ -221,16 +221,25 @@ export const enum LViewFlags {
* back into the parent view, `data` will be defined and `creationMode` will be
* improperly reported as false.
*/
CreationMode = 0b0000001,
CreationMode = 0b000000001,
/**
* Whether or not this LView instance is on its first processing pass.
*
* An LView instance is considered to be on its "first pass" until it
* has completed one creation mode run and one update mode run. At this
* time, the flag is turned off.
*/
FirstLViewPass = 0b000000010,
/** Whether this view has default change detection strategy (checks always) or onPush */
CheckAlways = 0b0000010,
CheckAlways = 0b000000100,
/** Whether or not this view is currently dirty (needing check) */
Dirty = 0b0000100,
Dirty = 0b000001000,
/** Whether or not this view is currently attached to change detection tree. */
Attached = 0b0001000,
Attached = 0b000010000,
/**
* Whether or not the init hooks have run.
@@ -239,13 +248,13 @@ export const enum LViewFlags {
* runs OR the first cR() instruction that runs (so inits are run for the top level view before
* any embedded views).
*/
RunInit = 0b0010000,
RunInit = 0b000100000,
/** Whether or not this view is destroyed. */
Destroyed = 0b0100000,
Destroyed = 0b001000000,
/** Whether or not this view is the root view */
IsRoot = 0b1000000,
IsRoot = 0b010000000,
}
/**
packages/core/src/render3/pure_function.ts
+2 -2
View File
@@ -7,7 +7,7 @@
*/
import {bindingUpdated, bindingUpdated2, bindingUpdated3, bindingUpdated4, getBinding, updateBinding} from './bindings';
import {getBindingRoot, getCreationMode, getLView} from './state';
import {getBindingRoot, getLView, isCreationMode} from './state';
@@ -42,7 +42,7 @@ export function pureFunction0<T>(slotOffset: number, pureFn: () => T, thisArg?:
// TODO(kara): use bindingRoot instead of bindingStartIndex when implementing host bindings
const bindingIndex = getBindingRoot() + slotOffset;
const lView = getLView();
return getCreationMode() ?
return isCreationMode() ?
updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :
getBinding(lView, bindingIndex);
}
packages/core/src/render3/state.ts
+11 -20
View File
@@ -186,14 +186,9 @@ export function getOrCreateCurrentQueries(
return currentQueries || (lView[QUERIES] = new QueryType(null, null, null));
}
/**
* This property gets set before entering a template.
*/
let creationMode: boolean;
export function getCreationMode(): boolean {
// top level variables should not be exported for performance reasons (PERF_NOTES.md)
return creationMode;
/** Checks whether a given view is in creation mode */
export function isCreationMode(view: LView = lView): boolean {
return (view[FLAGS] & LViewFlags.CreationMode) === LViewFlags.CreationMode;
}
/**
@@ -276,8 +271,6 @@ export function enterView(newView: LView, hostTNode: TElementNode | TViewNode |
const oldView = lView;
if (newView) {
const tView = newView[TVIEW];
creationMode = (newView[FLAGS] & LViewFlags.CreationMode) === LViewFlags.CreationMode;
firstTemplatePass = tView.firstTemplatePass;
bindingRootIndex = tView.bindingStartIndex;
}
@@ -320,19 +313,17 @@ export function resetComponentState() {
* the direction of traversal (up or down the view tree) a bit clearer.
*
* @param newView New state to become active
* @param creationOnly An optional boolean to indicate that the view was processed in creation mode
* only, i.e. the first update will be done later. Only possible for dynamically created views.
*/
export function leaveView(newView: LView, creationOnly?: boolean): void {
export function leaveView(newView: LView): void {
const tView = lView[TVIEW];
if (!creationOnly) {
if (!checkNoChangesMode) {
executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, creationMode);
}
if (isCreationMode(lView)) {
lView[FLAGS] &= ~LViewFlags.CreationMode;
} else {
executeHooks(lView, tView.viewHooks, tView.viewCheckHooks, checkNoChangesMode);
// Views are clean and in update mode after being checked, so these bits are cleared
lView[FLAGS] &= ~(LViewFlags.CreationMode | LViewFlags.Dirty);
lView[FLAGS] &= ~(LViewFlags.Dirty | LViewFlags.FirstLViewPass);
lView[FLAGS] |= LViewFlags.RunInit;
lView[BINDING_INDEX] = tView.bindingStartIndex;
}
lView[FLAGS] |= LViewFlags.RunInit;
lView[BINDING_INDEX] = tView.bindingStartIndex;
enterView(newView, null);
}
packages/core/src/render3/view_engine_compatibility.ts
+1 -1
View File
@@ -112,7 +112,7 @@ export function createTemplateRef<T>(
if (container) {
insertView(lView, container, hostView !, index !, hostTNode !.index);
}
renderEmbeddedTemplate(lView, this._tView, context, RenderFlags.Create);
renderEmbeddedTemplate(lView, this._tView, context);
const viewRef = new ViewRef(lView, context, -1);
viewRef._tViewNode = lView[HOST_NODE] as TViewNode;
return viewRef;
packages/core/src/render3/view_ref.ts
+2 -11
View File
@@ -11,7 +11,7 @@ import {ChangeDetectorRef as viewEngine_ChangeDetectorRef} from '../change_detec
import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_container_ref';
import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, InternalViewRef as viewEngine_InternalViewRef} from '../linker/view_ref';
import {checkNoChanges, checkNoChangesInRootView, detectChangesInRootView, detectChangesInternal, markViewDirty, storeCleanupFn, viewAttached} from './instructions';
import {checkNoChanges, checkNoChangesInRootView, checkView, detectChangesInRootView, detectChangesInternal, markViewDirty, storeCleanupFn, viewAttached} from './instructions';
import {TNode, TNodeType, TViewNode} from './interfaces/node';
import {FLAGS, HOST, HOST_NODE, LView, LViewFlags, PARENT, RENDERER_FACTORY} from './interfaces/view';
import {destroyLView} from './node_manipulation';
@@ -244,16 +244,7 @@ export class ViewRef<T> implements viewEngine_EmbeddedViewRef<T>, viewEngine_Int
*
* See {@link ChangeDetectorRef#detach detach} for more information.
*/
detectChanges(): void {
const rendererFactory = this._lView[RENDERER_FACTORY];
if (rendererFactory.begin) {
rendererFactory.begin();
}
detectChangesInternal(this._lView, this.context, null);
if (rendererFactory.end) {
rendererFactory.end();
}
}
detectChanges(): void { detectChangesInternal(this._lView, this.context); }
/**
* Checks the change detector and its children, and throws if any changes are detected.
packages/core/test/animation/animation_integration_spec.ts
+5 -1
View File
@@ -13,7 +13,7 @@ import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {ɵDomRendererFactory2} from '@angular/platform-browser';
import {ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {fixmeIvy} from '@angular/private/testing';
import {fixmeIvy, ivyEnabled} from '@angular/private/testing';
const DEFAULT_NAMESPACE_ID = 'id';
const DEFAULT_COMPONENT_ID = '1';
@@ -3110,6 +3110,10 @@ const DEFAULT_COMPONENT_ID = '1';
expect(element.style['height']).toEqual(height);
}
// In Ivy, change detection needs to run before the ViewQuery for cmp.element will
// resolve. Keeping this test enabled since we still want to test the animation logic.
if (ivyEnabled) fixture.detectChanges();
const cmp = fixture.componentInstance;
const element = cmp.element.nativeElement;
fixture.detectChanges();
packages/core/test/animation/animation_query_integration_spec.ts
+6 -1
View File
@@ -14,7 +14,7 @@ import {CommonModule} from '@angular/common';
import {Component, HostBinding, ViewChild} from '@angular/core';
import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {fixmeIvy} from '@angular/private/testing';
import {fixmeIvy, ivyEnabled} from '@angular/private/testing';
import {HostListener} from '../../src/metadata/directives';
@@ -1706,6 +1706,11 @@ import {HostListener} from '../../src/metadata/directives';
TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
const fixture = TestBed.createComponent(ParentCmp);
const cmp = fixture.componentInstance;
// In Ivy, change detection needs to run before the ViewQuery for cmp.child will resolve.
// Keeping this test enabled since we still want to test the animation logic in Ivy.
if (ivyEnabled) fixture.detectChanges();
cmp.child.items = [4, 5, 6];
fixture.detectChanges();
packages/core/test/animation/animations_with_css_keyframes_animations_integration_spec.ts
+5
View File
@@ -11,6 +11,7 @@ import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_gr
import {Component, ViewChild} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
import {ivyEnabled} from '@angular/private/testing';
import {TestBed} from '../../testing';
@@ -290,6 +291,10 @@ import {TestBed} from '../../testing';
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
// In Ivy, change detection needs to run before the ViewQuery for cmp.element will resolve.
// Keeping this test enabled since we still want to test the animation logic in Ivy.
if (ivyEnabled) fixture.detectChanges();
const elm = cmp.element.nativeElement;
const foo = elm.querySelector('.foo') as HTMLElement;
packages/core/test/application_ref_spec.ts
+6 -1
View File
@@ -15,7 +15,7 @@ import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {DOCUMENT} from '@angular/platform-browser/src/dom/dom_tokens';
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {fixmeIvy} from '@angular/private/testing';
import {fixmeIvy, ivyEnabled, modifiedInIvy} from '@angular/private/testing';
import {NoopNgZone} from '../src/zone/ng_zone';
import {ComponentFixtureNoNgZone, TestBed, async, inject, withModule} from '../testing';
@@ -421,6 +421,11 @@ class SomeComponent {
it('should detach attached embedded views if they are destroyed', () => {
const comp = TestBed.createComponent(EmbeddedViewComp);
const appRef: ApplicationRef = TestBed.get(ApplicationRef);
// In Ivy, change detection needs to run before the ViewQuery for tplRef will resolve.
// Keeping this test enabled since we still want to test this destroy logic in Ivy.
if (ivyEnabled) comp.detectChanges();
const embeddedViewRef = comp.componentInstance.tplRef.createEmbeddedView({});
appRef.attachView(embeddedViewRef);
packages/core/test/bundling/hello_world/bundle.golden_symbols.json
+6 -6
View File
@@ -170,6 +170,9 @@
{
"name": "checkNoChangesMode"
},
{
"name": "checkView"
},
{
"name": "componentRefresh"
},
@@ -209,9 +212,6 @@
{
"name": "defineComponent"
},
{
"name": "detectChangesInternal"
},
{
"name": "diPublicInInjector"
},
@@ -254,9 +254,6 @@
{
"name": "getContainerRenderParent"
},
{
"name": "getCreationMode"
},
{
"name": "getDirectiveDef"
},
@@ -353,6 +350,9 @@
{
"name": "isComponentDef"
},
{
"name": "isCreationMode"
},
{
"name": "isFactory"
},
packages/core/test/bundling/todo/bundle.golden_symbols.json
+6 -3
View File
@@ -437,6 +437,9 @@
{
"name": "checkNoChangesMode"
},
{
"name": "checkView"
},
{
"name": "cleanUpView"
},
@@ -659,9 +662,6 @@
{
"name": "getContextLView"
},
{
"name": "getCreationMode"
},
{
"name": "getCurrentView"
},
@@ -896,6 +896,9 @@
{
"name": "isContextDirty"
},
{
"name": "isCreationMode"
},
{
"name": "isCssClassMatching"
},
packages/core/test/linker/query_integration_spec.ts
+60 -59
View File
@@ -112,23 +112,21 @@ describe('Query API', () => {
expect(directive.child.text).toEqual('foo');
});
fixmeIvy('FW-782 - View queries are executed twice in some cases')
.it('should contain the first view child', () => {
const template = '<needs-view-child #q></needs-view-child>';
const view = createTestCmpAndDetectChanges(MyComp0, template);
it('should contain the first view child', () => {
const template = '<needs-view-child #q></needs-view-child>';
const view = createTestCmpAndDetectChanges(MyComp0, template);
const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
q.shouldShow = false;
view.detectChanges();
expect(q.logs).toEqual([
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null],
['check', null]
]);
});
q.shouldShow = false;
view.detectChanges();
expect(q.logs).toEqual([
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
]);
});
fixmeIvy('FW-782 - View queries are executed twice in some cases')
modifiedInIvy('Static ViewChild and ContentChild queries are resolved in update mode')
.it('should set static view and content children already after the constructor call', () => {
const template =
'<needs-static-content-view-child #q><div text="contentFoo"></div></needs-static-content-view-child>';
@@ -142,34 +140,33 @@ describe('Query API', () => {
expect(q.viewChild.text).toEqual('viewFoo');
});
fixmeIvy('FW-782 - View queries are executed twice in some cases')
.it('should contain the first view child across embedded views', () => {
TestBed.overrideComponent(
MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
TestBed.overrideComponent(NeedsViewChild, {
set: {
template:
'<div *ngIf="true"><div *ngIf="shouldShow" text="foo"></div></div><div *ngIf="shouldShow2" text="bar"></div>'
}
});
const view = TestBed.createComponent(MyComp0);
it('should contain the first view child across embedded views', () => {
TestBed.overrideComponent(
MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
TestBed.overrideComponent(NeedsViewChild, {
set: {
template:
'<div *ngIf="true"><div *ngIf="shouldShow" text="foo"></div></div><div *ngIf="shouldShow2" text="bar"></div>'
}
});
const view = TestBed.createComponent(MyComp0);
view.detectChanges();
const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
view.detectChanges();
const q: NeedsViewChild = view.debugElement.children[0].references !['q'];
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
q.shouldShow = false;
q.shouldShow2 = true;
q.logs = [];
view.detectChanges();
expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
q.shouldShow = false;
q.shouldShow2 = true;
q.logs = [];
view.detectChanges();
expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
q.shouldShow = false;
q.shouldShow2 = false;
q.logs = [];
view.detectChanges();
expect(q.logs).toEqual([['setter', null], ['check', null]]);
});
q.shouldShow = false;
q.shouldShow2 = false;
q.logs = [];
view.detectChanges();
expect(q.logs).toEqual([['setter', null], ['check', null]]);
});
fixmeIvy(
'FW-781 - Directives invocation sequence on root and nested elements is different in Ivy')
@@ -589,31 +586,35 @@ describe('Query API', () => {
});
// Note: this test is just document our current behavior, which we do for performance reasons.
fixmeIvy('FW-782 - View queries are executed twice in some cases')
.it('should not affected queries for projected templates if views are detached or moved', () => {
const template =
'<manual-projecting #q><ng-template let-x="x"><div [text]="x"></div></ng-template></manual-projecting>';
const view = createTestCmpAndDetectChanges(MyComp0, template);
const q = view.debugElement.children[0].references !['q'] as ManualProjecting;
expect(q.query.length).toBe(0);
fixmeIvy('FW-853: Query results are cleared if embedded views are detached / moved')
.it('should not affect queries for projected templates if views are detached or moved',
() => {
const template = `<manual-projecting #q>
<ng-template let-x="x">
<div [text]="x"></div>
</ng-template>
</manual-projecting>`;
const view = createTestCmpAndDetectChanges(MyComp0, template);
const q = view.debugElement.children[0].references !['q'] as ManualProjecting;
expect(q.query.length).toBe(0);
const view1 = q.vc.createEmbeddedView(q.template, {'x': '1'});
const view2 = q.vc.createEmbeddedView(q.template, {'x': '2'});
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
const view1 = q.vc.createEmbeddedView(q.template, {'x': '1'});
const view2 = q.vc.createEmbeddedView(q.template, {'x': '2'});
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
q.vc.detach(1);
q.vc.detach(0);
q.vc.detach(1);
q.vc.detach(0);
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
q.vc.insert(view2);
q.vc.insert(view1);
q.vc.insert(view2);
q.vc.insert(view1);
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
});
view.detectChanges();
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2']);
});
fixmeIvy('unknown').it(
'should remove manually projected templates if their parent view is destroyed', () => {
packages/core/test/render3/change_detection_spec.ts
+111 -67
View File
@@ -87,73 +87,6 @@ describe('change detection', () => {
await whenRendered(myComp);
expect(getRenderedText(myComp)).toEqual('updated');
}));
it('should support detectChanges on components that have LContainers', () => {
let structuralComp !: StructuralComp;
function FooTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
}
}
class StructuralComp {
tmp !: TemplateRef<any>;
value = 'one';
constructor(public vcr: ViewContainerRef) {}
create() { return this.vcr.createEmbeddedView(this.tmp, this); }
static ngComponentDef = defineComponent({
type: StructuralComp,
selectors: [['structural-comp']],
factory: () => structuralComp =
new StructuralComp(directiveInject(ViewContainerRef as any)),
inputs: {tmp: 'tmp'},
consts: 1,
vars: 1,
template: FooTemplate
});
}
/**
* <ng-template #foo>{{ value }}</ng-template>
* <structural-comp [tmp]="foo"></structural-comp>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(0, FooTemplate, 2, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp');
}
if (rf & RenderFlags.Update) {
const foo = reference(1) as any;
elementProperty(2, 'tmp', bind(foo));
}
}, 3, 1, [StructuralComp]);
const fixture = new ComponentFixture(App);
fixture.update();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>');
const viewRef: EmbeddedViewRef<any> = structuralComp.create();
fixture.update();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>one');
// check embedded view update
structuralComp.value = 'two';
viewRef.detectChanges();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>two');
// check root view update
structuralComp.value = 'three';
fixture.update();
expect(fixture.html).toEqual('<structural-comp>three</structural-comp>three');
});
});
describe('onPush', () => {
@@ -662,6 +595,117 @@ describe('change detection', () => {
expect(getRenderedText(comp)).toEqual('1');
});
describe('dynamic views', () => {
let structuralComp: StructuralComp|null = null;
beforeEach(() => structuralComp = null);
class StructuralComp {
tmp !: TemplateRef<any>;
value = 'one';
constructor(public vcr: ViewContainerRef) {}
create() { return this.vcr.createEmbeddedView(this.tmp, this); }
static ngComponentDef = defineComponent({
type: StructuralComp,
selectors: [['structural-comp']],
factory: () => structuralComp =
new StructuralComp(directiveInject(ViewContainerRef as any)),
inputs: {tmp: 'tmp'},
consts: 1,
vars: 1,
template: function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
}
}
});
}
it('should support ViewRef.detectChanges()', () => {
function FooTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, bind(ctx.value));
}
}
/**
* <ng-template #foo>{{ value }}</ng-template>
* <structural-comp [tmp]="foo"></structural-comp>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, FooTemplate, 1, 1, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp');
}
if (rf & RenderFlags.Update) {
const foo = reference(1) as any;
elementProperty(2, 'tmp', bind(foo));
}
}, 3, 1, [StructuralComp]);
const fixture = new ComponentFixture(App);
fixture.update();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>');
const viewRef: EmbeddedViewRef<any> = structuralComp !.create();
fixture.update();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>one');
// check embedded view update
structuralComp !.value = 'two';
viewRef.detectChanges();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>two');
// check root view update
structuralComp !.value = 'three';
fixture.update();
expect(fixture.html).toEqual('<structural-comp>three</structural-comp>three');
});
it('should support ViewRef.detectChanges() directly after creation', () => {
function FooTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
text(0, 'Template text');
}
}
/**
* <ng-template #foo>Template text</ng-template>
* <structural-comp [tmp]="foo"></structural-comp>
*/
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
template(
0, FooTemplate, 1, 0, 'ng-template', null, ['foo', ''], templateRefExtractor);
element(2, 'structural-comp');
}
if (rf & RenderFlags.Update) {
const foo = reference(1) as any;
elementProperty(2, 'tmp', bind(foo));
}
}, 3, 1, [StructuralComp]);
const fixture = new ComponentFixture(App);
fixture.update();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>');
const viewRef: EmbeddedViewRef<any> = structuralComp !.create();
viewRef.detectChanges();
expect(fixture.html).toEqual('<structural-comp>one</structural-comp>Template text');
});
});
});
describe('attach/detach', () => {
packages/core/test/render3/component_spec.ts
+3
View File
@@ -498,6 +498,8 @@ describe('recursive components', () => {
class NgIfTree {
data: TreeNode = _buildTree(0);
ngDoCheck() { events.push('check' + this.data.value); }
ngOnDestroy() { events.push('destroy' + this.data.value); }
static ngComponentDef = defineComponent({
@@ -628,6 +630,7 @@ describe('recursive components', () => {
const fixture = new ComponentFixture(App);
expect(getRenderedText(fixture.component)).toEqual('6201534');
expect(events).toEqual(['check6', 'check2', 'check0', 'check1', 'check5', 'check3', 'check4']);
events = [];
fixture.component.skipContent = true;
packages/core/test/render3/control_flow_spec.ts
+1 -1
View File
@@ -38,8 +38,8 @@ describe('JS control flow', () => {
embeddedViewEnd();
}
}
containerRefreshEnd();
}
containerRefreshEnd();
}, 2);
const fixture = new ComponentFixture(App);
packages/core/test/render3/integration_spec.ts
+1 -3
View File
@@ -115,9 +115,7 @@ describe('render3 integration test', () => {
function Template(rf: RenderFlags, value: string) {
if (rf & RenderFlags.Create) {
text(0);
}
if (rf & RenderFlags.Update) {
textBinding(0, rf & RenderFlags.Create ? value : NO_CHANGE);
textBinding(0, value);
}
}
expect(renderToHtml(Template, 'once', 1, 1)).toEqual('once');
packages/core/test/render3/properties_spec.ts
+1 -3
View File
@@ -49,9 +49,7 @@ describe('elementProperty', () => {
function Template(rf: RenderFlags, ctx: string) {
if (rf & RenderFlags.Create) {
element(0, 'span');
}
if (rf & RenderFlags.Update) {
elementProperty(0, 'id', rf & RenderFlags.Create ? expensive(ctx) : NO_CHANGE);
elementProperty(0, 'id', expensive(ctx));
}
}
packages/core/test/render3/renderer_factory_spec.ts
+22 -10
View File
@@ -37,10 +37,13 @@ describe('renderer factory lifecycle', () => {
consts: 1,
vars: 0,
template: function(rf: RenderFlags, ctx: SomeComponent) {
logs.push('component');
if (rf & RenderFlags.Create) {
logs.push('component create');
text(0, 'foo');
}
if (rf & RenderFlags.Update) {
logs.push('component update');
}
},
factory: () => new SomeComponent
});
@@ -61,31 +64,38 @@ describe('renderer factory lifecycle', () => {
}
function Template(rf: RenderFlags, ctx: any) {
logs.push('function');
if (rf & RenderFlags.Create) {
logs.push('function create');
text(0, 'bar');
}
if (rf & RenderFlags.Update) {
logs.push('function update');
}
}
const directives = [SomeComponent, SomeComponentWhichThrows];
function TemplateWithComponent(rf: RenderFlags, ctx: any) {
logs.push('function_with_component');
if (rf & RenderFlags.Create) {
logs.push('function_with_component create');
text(0, 'bar');
element(1, 'some-component');
}
if (rf & RenderFlags.Update) {
logs.push('function_with_component update');
}
}
beforeEach(() => { logs = []; });
it('should work with a component', () => {
const component = renderComponent(SomeComponent, {rendererFactory});
expect(logs).toEqual(['create', 'create', 'begin', 'component', 'end']);
expect(logs).toEqual(
['create', 'create', 'begin', 'component create', 'component update', 'end']);
logs = [];
tick(component);
expect(logs).toEqual(['begin', 'component', 'end']);
expect(logs).toEqual(['begin', 'component update', 'end']);
});
it('should work with a component which throws', () => {
@@ -95,21 +105,23 @@ describe('renderer factory lifecycle', () => {
it('should work with a template', () => {
renderToHtml(Template, {}, 1, 0, null, null, rendererFactory);
expect(logs).toEqual(['create', 'begin', 'function', 'end']);
expect(logs).toEqual(['create', 'begin', 'function create', 'function update', 'end']);
logs = [];
renderToHtml(Template, {});
expect(logs).toEqual(['begin', 'function', 'end']);
expect(logs).toEqual(['begin', 'function update', 'end']);
});
it('should work with a template which contains a component', () => {
renderToHtml(TemplateWithComponent, {}, 2, 0, directives, null, rendererFactory);
expect(logs).toEqual(
['create', 'begin', 'function_with_component', 'create', 'component', 'end']);
expect(logs).toEqual([
'create', 'begin', 'function_with_component create', 'create', 'component create',
'function_with_component update', 'component update', 'end'
]);
logs = [];
renderToHtml(TemplateWithComponent, {}, 2, 0, directives);
expect(logs).toEqual(['begin', 'function_with_component', 'component', 'end']);
expect(logs).toEqual(['begin', 'function_with_component update', 'component update', 'end']);
});
});