import TKUnit = require("../../TKUnit"); import app = require("application"); import helper = require("../helper"); import viewModule = require("ui/core/view"); import stackLayoutModule = require("ui/layouts/stack-layout"); import wrapLayoutModule = require("ui/layouts/wrap-layout"); import layoutBaseModule = require("ui/layouts/layout-base"); import fs = require("file-system"); import pageModule = require("ui/page"); import gestureModule = require("ui/gestures"); import { Label } from "ui/label"; // >> article-require-repeater-module import repeaterModule = require("ui/repeater"); // << article-require-repeater-module // >> article-require-modules-repeater import observableArray = require("data/observable-array"); import labelModule = require("ui/label"); // << article-require-modules-repeater var ASYNC = 0.2; var FEW_ITEMS = [0, 1, 2]; var MANY_ITEMS = []; for (var i = 0; i < 100; i++) { MANY_ITEMS[i] = i; } export function test_set_items_to_array_loads_all_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { // >> article-repeater-with-array var colors = ["red", "green", "blue"]; repeater.items = colors; // << article-repeater-with-array TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); TKUnit.assert(getChildAtText(repeater, 2) === "blue", "Item not created for index 2"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_items_to_array_creates_views() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { repeater.items = FEW_ITEMS; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_refresh_after_adding_items_to_array_loads_new_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { var colors = ["red", "green", "blue"]; repeater.items = colors; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count."); // >> artcle-array-push-element colors.push("yellow"); // Manually trigger the update so that the new color is shown. repeater.refresh(); // << artcle-array-push-element TKUnit.wait(ASYNC); TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_refresh_reloads_all_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { var testStarted = false; var itemsToBind = >FEW_ITEMS; repeater.items = itemsToBind; TKUnit.waitUntilReady(() => repeater.isLayoutValid); testStarted = true; itemsToBind[0] = "red"; itemsToBind[1] = "green"; itemsToBind[2] = "blue"; repeater.refresh(); TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); TKUnit.assert(getChildAtText(repeater, 2) === "blue", "Item not created for index 2"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_itmes_to_null_clears_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { repeater.items = FEW_ITEMS; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); repeater.items = null; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 0, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_itemsLayout_accepted() { // >> article-repeater-layout var repeater = new repeaterModule.Repeater(); var stackLayout = new stackLayoutModule.StackLayout(); stackLayout.orientation = "horizontal"; repeater.itemsLayout = stackLayout; // << article-repeater-layout function testAction(views: Array) { repeater.items = FEW_ITEMS; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert((repeater.itemsLayout).orientation === "horizontal", "views count."); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_itmes_to_undefiend_clears_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { repeater.items = FEW_ITEMS; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), FEW_ITEMS.length, "views count."); repeater.items = undefined; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 0, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_itmes_to_different_source_loads_new_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { repeater.items = [1, 2, 3]; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "views count."); repeater.items = ["a", "b", "c", "d"]; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "views count."); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_set_items_to_observable_array_loads_all_items() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { // >> article-repeater-observablearray var colors = new observableArray.ObservableArray(["red", "green", "blue"]); repeater.items = colors; // << article-repeater-observablearray TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0"); TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1"); TKUnit.assert(getChildAtText(repeater, 2) === "blue", "Item not created for index 2"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_add_to_observable_array_refreshes_the_Repeater() { var repeater = new repeaterModule.Repeater(); function testAction(views: Array) { var colors = new observableArray.ObservableArray(["red", "green", "blue"]); repeater.items = colors; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); // >> article-push-to-observablearray colors.push("yellow"); // The Repeater will be updated automatically. // << article-push-to-observablearray TKUnit.wait(ASYNC); TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_remove_from_observable_array_refreshes_the_Repeater() { var repeater = new repeaterModule.Repeater(); var data = new observableArray.ObservableArray([1, 2, 3]); function testAction(views: Array) { repeater.items = data; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); data.pop(); TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 2, "getChildrenCount"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_splice_observable_array_refreshes_the_Repeater() { var repeater = new repeaterModule.Repeater(); var data = new observableArray.ObservableArray(["a", "b", "c"]); function testAction(views: Array) { repeater.items = data; TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); // Remove the first 2 elements and add data.splice(0, 2, "d", "e", "f"); TKUnit.waitUntilReady(() => repeater.isLayoutValid); TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount"); }; helper.buildUIAndRunTest(repeater, testAction); } export function test_usingAppLevelConvertersInRepeaterItems() { var repeater = new repeaterModule.Repeater(); var dateConverter = function (value, format) { var result = format; var day = value.getDate(); result = result.replace("DD", month < 10 ? "0" + day : day); var month = value.getMonth() + 1; result = result.replace("MM", month < 10 ? "0" + month : month); result = result.replace("YYYY", value.getFullYear()); return result; }; app.resources["dateConverter"] = dateConverter; var data = new observableArray.ObservableArray(); data.push({ date: new Date() }); function testAction(views: Array) { repeater.itemTemplate = "