Merge pull request #2909 from NativeScript/its

ListView item template selector

tests/app/ui/list-view/list-view-tests.ts

@@ -8,6 +8,7 @@ import utils = require("utils/utils");
 import { Label } from "ui/label";
 import helper = require("../helper");
 import { Page } from "ui/page";
+import { View, KeyedTemplate } from "ui/core/view";
 
 // >> article-require-listview-module
 import listViewModule = require("ui/list-view");
@@ -581,7 +582,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         if (platform.isAndroid) {
             // simulates Angular way of removing views
             (<any>listView)._realizedItems.forEach((view, nativeView, map) => {
-                console.log("view: " + view);
+                //console.log("view: " + view);
                 listView._removeView(view);
             });
             this.tearDown();
@@ -640,6 +641,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         for (let i = 0; i < count; i++) {
             items.push({
                 text: "Item " + i,
+                age: i,
                 loadedCount: 0,
                 unloadedCount: 0,
                 onViewLoaded: function onViewLoaded(args) {
@@ -767,10 +769,143 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
     private waitUntilListViewReady(): void {
         TKUnit.waitUntilReady(() => this.getNativeViewCount(this.testView) === this.testView.items.length);
     }
+
+    // Multiple item templates tests
+    public test_ItemTemplateSelector_WhenWrongTemplateKeyIsSpecified_TheDefaultTemplateIsUsed() {
+        let listView = this.testView;
+        listView.height = 200;
+
+        listView.itemTemplate = "<Label text='default' minHeight='100' maxHeight='100'/>";
+        listView.itemTemplates = this._itemTemplatesString;
+        listView.itemTemplateSelector = "age % 2 === 0 ? 'wrong' : 'green'";
+        listView.items = ListViewTest.generateItemsForMultipleTemplatesTests(2);
+        TKUnit.wait(0.1);
+
+        let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0);
+        
+        TKUnit.assertEqual(firstNativeElementText, "default", "first element text");
+    }
+
+    public test_ItemTemplateSelector_IsCorrectlyParsedFromString() {
+        let listView = this.testView;
+        listView.itemTemplateSelector = "age % 2 === 0 ? 'red' : 'green'";
+        let items = ListViewTest.generateItemsForMultipleTemplatesTests(2);
+        let itemTemplateSelectorFunction = <any>listView.itemTemplateSelector;
+        TKUnit.wait(0.1);
+
+        let templateKey0 = itemTemplateSelectorFunction(items[0], 0, items);
+        TKUnit.assertEqual(templateKey0, "red", "itemTemplateSelector result for first item");
+
+        let templateKey1 = itemTemplateSelectorFunction(items[1], 1, items);
+        TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item");
+    }
+
+    public test_ItemTemplateSelector_ItemTemplatesAreCorrectlyParsedFromString() {
+        let listView = this.testView;
+        listView.itemTemplates = this._itemTemplatesString;
+        
+        let itemTemplatesArray = <any>listView.itemTemplates;
+
+        TKUnit.assertEqual(itemTemplatesArray.length, 3, "itemTemplates array length");
+        
+        let template0 = <KeyedTemplate>itemTemplatesArray[0];
+        TKUnit.assertEqual(template0.key, "red", "template0.key");
+        TKUnit.assertEqual((<Label>template0.createView()).text, "red", "template0 created view text");
+        
+        let template1 = <KeyedTemplate>itemTemplatesArray[1];
+        TKUnit.assertEqual(template1.key, "green", "template1.key");
+        TKUnit.assertEqual((<Label>template1.createView()).text, "green", "template1 created view text");
+        
+        let template2 = <KeyedTemplate>itemTemplatesArray[2];
+        TKUnit.assertEqual(template2.key, "blue", "template2.key");
+        TKUnit.assertEqual((<Label>template2.createView()).text, "blue", "template2 created view text");
+    }
+
+    public test_ItemTemplateSelector_CorrectTemplateIsUsed() {
+        let listView = this.testView;
+        listView.height = 200;
+
+        listView.itemTemplates = this._itemTemplatesString;
+        listView.itemTemplateSelector = "age % 2 === 0 ? 'red' : 'green'";
+        listView.items = ListViewTest.generateItemsForMultipleTemplatesTests(4);
+        TKUnit.wait(0.1);
+
+        let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0);
+        let secondNativeElementText = this.getTextFromNativeElementAt(listView, 1);
+        
+        TKUnit.assertEqual(firstNativeElementText, "red", "first element text");
+        TKUnit.assertEqual(secondNativeElementText, "green", "second element text");
+    }
+
+    public test_ItemTemplateSelector_TestVirtualization() {
+        let listView = this.testView;
+        listView.height = 300;
+
+        listView.itemTemplates = this._itemTemplatesString;
+        listView.itemTemplateSelector = "age % 2 === 0 ? 'red' : (age % 3 === 0 ? 'blue' : 'green')";
+        listView.items = ListViewTest.generateItemsForMultipleTemplatesTests(10);
+        TKUnit.wait(0.05);
+
+        // Forward
+        for(let i = 0, length = listView.items.length; i < length; i++){
+            listView.scrollToIndex(i);
+            TKUnit.wait(0.05);
+        }
+        
+        // Back
+        for(let i = listView.items.length - 1; i >= 0; i--){
+            listView.scrollToIndex(i);
+            TKUnit.wait(0.05);
+        }
+
+        if (listView.android){
+            //(<any>listView)._dumpRealizedTemplates();
+            let realizedItems = <Map<android.view.View, View>>(<any>listView)._realizedItems;
+            TKUnit.assertTrue(realizedItems.size <= 6, 'Realized items must be 6 or less');
+            
+            let realizedTemplates = <Map<string, Map<android.view.View, View>>>(<any>listView)._realizedTemplates; 
+            TKUnit.assertEqual(realizedTemplates.size, 3, 'Realized templates');
+            TKUnit.assertTrue(realizedTemplates.get("red").size <= 2, 'Red realized items must be 2 or less');
+            TKUnit.assertTrue(realizedTemplates.get("green").size <= 2, 'Green realized items must be 2 or less');
+            TKUnit.assertTrue(realizedTemplates.get("blue").size <= 2, 'Blue realized items must be 2 or less');
+        }
+    }
+
+    private _itemTemplatesString = `
+        <template key="red">
+            <Label text='red' style.backgroundColor='red' minHeight='100' maxHeight='100'/>
+        </template>
+        <template key='green'>
+            <Label text='green' style.backgroundColor='green' minHeight='100' maxHeight='100'/>
+        </template>
+        <template key='blue'>
+            <Label text='blue' style.backgroundColor='blue' minHeight='100' maxHeight='100'/>
+        </template>
+        `;
+    
+    private static generateItemsForMultipleTemplatesTests(count: number): Array<Item> {
+        let items = new Array<Item>();
+        for (let i = 0; i < count; i++) {
+            items.push({
+                text: "Item " + i,
+                age: i,
+                loadedCount: 0,
+                unloadedCount: 0,
+                onViewLoaded: function onViewLoaded(args) {
+                    this.loadedCount++;
+                },
+                onViewUnloaded: function onViewUnloaded(args) {
+                    this.unloadedCount++;
+                }
+            });
+        }
+        return items;
+    }
 }
 
 interface Item {
     text: string;
+    age: number;
     loadedCount: number;
     unloadedCount: number;
     onViewLoaded: (args) => void;