fix(list-view): ensure templates are in a consistent state on itemLoa… (#10)

* fix(list-view): ensure templates are in a consistent state on itemLoading

* tests: add tests for listview with events

Author: edusperoni

apps/nativescript-demo-ng/nativescript.config.ts

@@ -1,16 +1,17 @@
 import { NativeScriptConfig } from '@nativescript/core';
 
 export default {
-	id: 'org.nativescript.demong',
-	appResourcesPath: 'App_Resources',
-	android: {
-		v8Flags: '--expose_gc',
+  id: 'org.nativescript.demong',
+  appResourcesPath: 'App_Resources',
+  android: {
+    v8Flags: '--expose_gc',
     markingMode: 'none',
     codeCache: true,
-    suppressCallJSMethodExceptions: false
+    suppressCallJSMethodExceptions: false,
+    discardUncaughtJsExceptions: true,
   },
   ios: {
-    discardUncaughtJsExceptions: false
+    discardUncaughtJsExceptions: true,
   },
-	appPath: 'src',
+  appPath: 'src',
 } as NativeScriptConfig;

apps/nativescript-demo-ng/src/tests/list-view-tests.ts

@@ -1,7 +1,6 @@
 import { Component, Input, NgModule, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { ListViewComponent, NativeScriptModule } from '@nativescript/angular';
-import { promiseWait } from '@nativescript/angular/testing';
 // import trace = require("trace");
 // trace.setCategories("ns-list-view, " + trace.categories.Navigation);
 // trace.enable();
@@ -75,6 +74,38 @@ export class TestListViewSelectorComponent {
   }
 }
 
+@Component({
+  selector: 'list-with-template-selector-with-events',
+  template: `
+    <GridLayout>
+      <ListView [items]="myItems" [itemTemplateSelector]="templateSelector" (itemLoading)="dummyEvent($event)">
+        <ng-template nsTemplateKey="first" let-item="item">
+          <StackLayout>
+            <Label [text]="item.name" (loaded)="dummyEvent($event)"></Label>
+            <item-component templateName="first"></item-component>
+          </StackLayout>
+        </ng-template>
+        <ng-template nsTemplateKey="second" let-item="item">
+          <StackLayout>
+            <Label [text]="item.name" (loaded)="dummyEvent($event)"></Label>
+            <item-component templateName="second"></item-component>
+          </StackLayout>
+        </ng-template>
+      </ListView>
+    </GridLayout>
+  `,
+})
+export class TestListViewSelectorWithEventsComponent {
+  public myItems: Array<DataItem> = ITEMS;
+  public templateSelector = (item: DataItem, index: number, items: any) => {
+    return item.id % 2 === 0 ? 'first' : 'second';
+  };
+  constructor() {
+    testTemplates = { first: 0, second: 0 };
+  }
+  dummyEvent(evt) {}
+}
+
 @Component({
   selector: 'list-view-default-item-template',
   template: `
@@ -97,8 +128,10 @@ export class TestDefaultItemTemplateComponent {
   }
 }
 
+const declarations = [TestListViewComponent, TestListViewSelectorComponent, ItemTemplateComponent, TestDefaultItemTemplateComponent, TestListViewSelectorWithEventsComponent];
+
 @NgModule({
-  declarations: [TestListViewComponent, TestListViewSelectorComponent, ItemTemplateComponent, TestDefaultItemTemplateComponent],
+  declarations: [...declarations],
   imports: [NativeScriptModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
@@ -107,7 +140,7 @@ export class ListViewModule {}
 describe('ListView-tests', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      declarations: [TestListViewComponent, TestListViewSelectorComponent, ItemTemplateComponent, TestDefaultItemTemplateComponent],
+      declarations: [...declarations],
       imports: [NativeScriptModule],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents()
@@ -134,6 +167,20 @@ describe('ListView-tests', () => {
     })
   );
 
+  it(
+    "itemTemplateSelector doesn't break with events",
+    waitForAsync(async () => {
+      try {
+        const fixture = TestBed.createComponent(TestListViewSelectorWithEventsComponent);
+        fixture.autoDetectChanges(true);
+        await fixture.whenRenderingDone();
+        expect(testTemplates).toEqual({ first: 2, second: 1 });
+      } catch (e) {
+        fail(e);
+      }
+    })
+  );
+
   it(
     "'defaultTemplate' does not throw when list-view is scrolled",
     waitForAsync(async () => {

packages/angular/src/lib/cdk/list-view/list-view.component.ts

@@ -1,5 +1,5 @@
-import { AfterContentInit, ContentChild, Directive, DoCheck, ElementRef, EmbeddedViewRef, EventEmitter, Host, Inject, InjectionToken, Input, IterableDiffer, IterableDiffers, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef, ɵisListLikeIterable as isListLikeIterable, NgZone, ɵmarkDirty, Component, ChangeDetectionStrategy } from '@angular/core';
-import { ObservableArray, View, KeyedTemplate, LayoutBase, ItemEventData, TemplatedItemsView, profile, ListView } from '@nativescript/core';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, Directive, DoCheck, ElementRef, EmbeddedViewRef, EventEmitter, Host, HostListener, Input, IterableDiffer, IterableDiffers, NgZone, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef, ɵisListLikeIterable as isListLikeIterable, ɵmarkDirty } from '@angular/core';
+import { ItemEventData, KeyedTemplate, LayoutBase, ListView, ObservableArray, profile, View } from '@nativescript/core';
 
 import { extractSingleViewRecursive } from '../../element-registry/registry';
 import { NativeScriptDebug } from '../../trace';
@@ -15,8 +15,7 @@ export class NsTemplatedItem<T> implements NgViewTemplate<{ index: number; data:
   constructor(private template: TemplateRef<ItemContext<T>>, public location: ViewContainerRef, private onCreate?: (view: View) => void) {}
   create(context?: { index: number; data: T }): View {
     const viewRef = this.location.createEmbeddedView(this.template, context ? this.setupItemContext(context) : new ItemContext());
-    viewRef.detach(); // create detached
-    viewRef.markForCheck();
+    viewRef.detach(); // create detached, just beware this doesn't always work and the view might run the first CD anyway.
     const resultView = getItemViewRoot(viewRef);
     resultView[NG_VIEW] = viewRef;
     if (this.onCreate) {
@@ -71,6 +70,7 @@ export class NsTemplatedItem<T> implements NgViewTemplate<{ index: number; data:
 
 export interface SetupItemViewArgs<T> {
   view: EmbeddedViewRef<ItemContext<T>>;
+  nativeElement: View;
   data: T;
   index: number;
   context: ItemContext<T>;
@@ -125,8 +125,6 @@ export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterCont
 
   constructor(_elementRef: ElementRef, private _iterableDiffers: IterableDiffers, private zone: NgZone) {
     this.templatedItemsView = _elementRef.nativeElement;
-
-    this.templatedItemsView.on('itemLoading', this.onItemLoading, this);
   }
 
   ngAfterContentInit() {
@@ -138,7 +136,6 @@ export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterCont
   }
 
   ngOnDestroy() {
-    this.templatedItemsView.off('itemLoading', this.onItemLoading, this);
     this.templatedItemsView = null;
 
     if (this._templateMap) {
@@ -166,7 +163,7 @@ export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterCont
       const templates: KeyedTemplate[] = [];
       this._templateMap.forEach((value, key) => {
         templates.push({
-          createView: value.create.bind(value),
+          createView: () => null, // we'll handle creation later, otherwise core will create an invalid template
           key,
         });
       });
@@ -189,6 +186,7 @@ export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterCont
     );
   }
 
+  @HostListener('itemLoading', ['$event'])
   @profile
   public onItemLoading(args: ItemEventData) {
     if (!this._templateMap) {
@@ -223,15 +221,15 @@ export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterCont
       template = this._templateMap.get(templateKey);
       args.view = template.create({ index, data: currentItem });
     }
-    this.setupViewRef(template.getEmbeddedViewRef(args.view), currentItem, index);
+    this.setupViewRef(template.getEmbeddedViewRef(args.view), currentItem, index, args.view);
 
     template.attach(args.view);
     ɵmarkDirty(this);
   }
 
-  public setupViewRef(viewRef: EmbeddedViewRef<ItemContext<T>>, data: T, index: number): void {
+  public setupViewRef(viewRef: EmbeddedViewRef<ItemContext<T>>, data: T, index: number, nativeElement: View): void {
     const context = viewRef.context;
-    this.setupItemView.next({ view: viewRef, data: data, index: index, context: context });
+    this.setupItemView.next({ view: viewRef, nativeElement, data: data, index: index, context: context });
   }
 
   ngDoCheck() {