import * as TKUnit from "../../tk-unit"; import * as app from "@nativescript/core/application"; import * as helper from "../../ui-helper"; import * as viewModule from "@nativescript/core/ui/core/view"; import * as stackLayoutModule from "@nativescript/core/ui/layouts/stack-layout"; import * as wrapLayoutModule from "@nativescript/core/ui/layouts/wrap-layout"; import * as layoutBaseModule from "@nativescript/core/ui/layouts/layout-base"; import * as pageModule from "@nativescript/core/ui/page"; import * as gestureModule from "@nativescript/core/ui/gestures"; import { Label } from "@nativescript/core/ui/label"; // >> article-require-repeater-module import * as repeaterModule from "@nativescript/core/ui/repeater"; // << article-require-repeater-module // >> article-require-modules-repeater import * as observableArray from "@nativescript/core/data/observable-array"; import * as labelModule from "@nativescript/core/ui/label"; // << article-require-modules-repeater var FEW_ITEMS = [0, 1, 2]; var MANY_ITEMS = []; for (var i = 0; i < 100; i++) { MANY_ITEMS[i] = i; } export function test_recycling() { const setters = new Map(); setters.set("itemsLayout", new stackLayoutModule.StackLayout()); helper.nativeView_recycling_test(() => new repeaterModule.Repeater(), null, null, setters); } 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.waitUntilReady(() => repeater.isLayoutValid); 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.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount"); // >> article-push-to-observablearray colors.push("yellow"); // The Repeater will be updated automatically. // << article-push-to-observablearray 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.getResources()["dateConverter"] = dateConverter; var data = new observableArray.ObservableArray(); data.push({ date: new Date() }); function testAction(views: Array) { repeater.itemTemplate = "