NativeScript/tests/app/ui/scroll-view/scroll-view-tests.ts

import * as TKUnit from "../../tk-unit";
import { Button } from "tns-core-modules/ui/button";
import { Page, isIOS } from "tns-core-modules/ui/page";
import { UITest } from "../../ui-test";
import * as layoutHelper from "../layouts/layout-helper";
import * as helper from "../../ui-helper";

// >> article-require-scrollview-module
import { ScrollView, ScrollEventData } from "tns-core-modules/ui/scroll-view";
// << article-require-scrollview-module

class ScrollLayoutTest extends UITest<ScrollView> {

    public create(): ScrollView {
        const scrollView = new ScrollView();
        scrollView.orientation = "vertical";

        scrollView.width = { value: 200, unit: "px" };
        scrollView.height = { value: 300, unit: "px" };

        const btn = new Button();
        btn.text = "test";
        btn.width = { value: 500, unit: "px" };
        btn.height = { value: 500, unit: "px" };
        scrollView.content = btn;

        // Use page with scrollableContent disabled for scroll-view tests
        (<any>this.testPage).scrollableContent = false;

        return scrollView;
    }

    public test_snippets() {
        // >> article-creating-scrollview
        const scrollView = new ScrollView();
        // << article-creating-scrollview
        TKUnit.assertTrue(scrollView !== null, "ScrollView should be created.");
    }

    public test_default_TNS_values() {
        const scroll = new ScrollView();
        TKUnit.assertEqual(scroll.orientation, "vertical", "Default this.testView.orientation");
        TKUnit.assertEqual(scroll.verticalOffset, 0, "Default this.testView.verticalOffset");
        TKUnit.assertEqual(scroll.horizontalOffset, 0, "Default this.testView.horizontalOffset");
    }

    public test_vertical_oriantation_creates_correct_native_view() {
        this.testView.orientation = "vertical";

        if (isIOS) {
            TKUnit.assert(this.testView.ios instanceof UIScrollView, "ios property is UIScrollView");
        } else {
            TKUnit.assert(this.testView.android instanceof org.nativescript.widgets.VerticalScrollView, "android property should be instanceof org.nativescript.widgets.VerticalScrollView");
        }
    }

    public test_horizontal_oriantation_creates_correct_native_view() {
        this.testView.orientation = "horizontal";

        if (isIOS) {
            TKUnit.assert(this.testView.ios instanceof UIScrollView, "ios property is UIScrollView");
        } else {
            TKUnit.assert(this.testView.android instanceof org.nativescript.widgets.HorizontalScrollView, "android property should be instanceof org.nativescript.widgets.HorizontalScrollView");
        }
    }

    public test_scrollableHeight_vertical_orientation_when_content_is_small() {
        this.testView.content.width = { value: 100, unit: "px" };
        this.testView.content.height = { value: 100, unit: "px" };
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertEqual(this.testView.scrollableHeight, 0, "this.testView.scrollableHeight");
        TKUnit.assertEqual(this.testView.scrollableWidth, 0, "this.testView.scrollableWidth");
    }

    public test_scrollableHeight_vertical_orientation_when_content_is_big() {
        this.testView.content.width = { value: 100, unit: "px" };
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertAreClose(layoutHelper.dip(this.testView.scrollableHeight), 200, 0.4, "this.testView.scrollableHeight");
        TKUnit.assertEqual(this.testView.scrollableWidth, 0, "this.testView.scrollableWidth");
    }

    public test_scrollableWidth_horizontal_orientation_when_content_is_small() {
        this.testView.orientation = "horizontal";
        this.testView.content.width = { value: 100, unit: "px" };
        this.testView.content.height = { value: 100, unit: "px" };
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertEqual(this.testView.scrollableHeight, 0, "this.testView.scrollableHeight");
        TKUnit.assertEqual(this.testView.scrollableWidth, 0, "this.testView.scrollableWidth");
    }

    public test_scrollableWidth_horizontal_orientation_when_content_is_big() {
        this.testView.orientation = "horizontal";
        this.testView.content.height = { value: 100, unit: "px" };
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertEqual(this.testView.scrollableHeight, 0, "this.testView.scrollableHeight");
        TKUnit.assertAreClose(layoutHelper.dip(this.testView.scrollableWidth), 300, 0.4, "this.testView.scrollableWidth");
    }

    public test_scrollToVerticalOffset_no_animation() {
        TKUnit.assertEqual(this.testView.verticalOffset, 0, "this.testView.verticalOffset");
        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToVerticalOffset(layoutHelper.dp(100), false);
        TKUnit.assertAreClose(layoutHelper.dip(this.testView.verticalOffset), 100, 0.1, "this.testView.verticalOffset");
    }

    public test_scrollToVerticalOffset_with_animation() {
        TKUnit.assertEqual(this.testView.verticalOffset, 0, "this.testView.verticalOffset");
        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToVerticalOffset(layoutHelper.dp(100), true);
        TKUnit.waitUntilReady(() => TKUnit.areClose(layoutHelper.dip(this.testView.verticalOffset), 100, 0.9));

        // The scrolling animation should be finished by now
        TKUnit.assertAreClose(layoutHelper.dip(this.testView.verticalOffset), 100, 0.9, "this.testView.verticalOffset");
    }

    public test_scrollToHorizontalOffset_no_animation() {
        this.testView.orientation = "horizontal";
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertEqual(this.testView.horizontalOffset, 0, "this.testView.horizontalOffset");
        this.testView.scrollToHorizontalOffset(layoutHelper.dp(100), false);
        TKUnit.assertAreClose(layoutHelper.dip(this.testView.horizontalOffset), 100, 0.1, "this.testView.horizontalOffset");
    }

    public test_scrollToHorizontalOffset_with_animation() {
        this.testView.orientation = "horizontal";
        this.waitUntilTestElementLayoutIsValid();

        TKUnit.assertEqual(this.testView.horizontalOffset, 0, "this.testView.horizontalOffset");
        this.testView.scrollToHorizontalOffset(layoutHelper.dp(100), true);

        // No synchronous change.
        TKUnit.assertEqual(this.testView.horizontalOffset, 0, "this.testView.horizontalOffset");

        TKUnit.waitUntilReady(() => TKUnit.areClose(layoutHelper.dip(this.testView.horizontalOffset), 100, 0.9));

        // The scrolling animation should be finished by now
        TKUnit.assertAreClose(layoutHelper.dip(this.testView.horizontalOffset), 100, 0.9, "this.testView.horizontalOffset");
    }

    public test_scrollView_persistsState_vertical() {
        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToVerticalOffset(90, false);
        this.waitUntilTestElementLayoutIsValid();

        const offset = Math.floor(this.testView.verticalOffset);
        // assert we did scroll;
        TKUnit.assertTrue(offset > 22, "this.testView.verticalOffset before navigation should be >22");

        helper.navigateWithHistory(() => new Page());
        helper.goBack();

        // Check verticalOffset after navigation
        TKUnit.assertEqual(Math.floor(this.testView.verticalOffset), offset, "this.testView.verticalOffset after navigation");
    }

    public test_scrollView_persistsState_horizontal() {
        this.testView.orientation = "horizontal";
        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToHorizontalOffset(100, false);
        const offset = this.testView.horizontalOffset;
        // assert we did scroll;
        TKUnit.assertTrue(offset > 22, "this.testView.horizontalOffset before navigation should be >22");

        helper.navigateWithHistory(() => new Page());
        helper.goBack();

        // Check horizontalOffset after navigation
        TKUnit.assertEqual(this.testView.horizontalOffset, offset, "this.testView.horizontalOffset after navigation");
    }

    public test_scrollView_vertical_raised_scroll_event() {
        var scrollY: number;
        this.testView.on(ScrollView.scrollEvent, (args: ScrollEventData) => {
            scrollY = args.scrollY;
        });

        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToVerticalOffset(layoutHelper.dp(100), false);
        TKUnit.waitUntilReady(function () { return scrollY > 0; });
        TKUnit.assertEqual(scrollY, this.testView.verticalOffset);
    }

    public test_scrollView_horizontal_raised_scroll_event() {
        this.testView.orientation = "horizontal";

        var scrollX: number;
        this.testView.on(ScrollView.scrollEvent, (args: ScrollEventData) => {
            scrollX = args.scrollX;
        });

        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToHorizontalOffset(layoutHelper.dp(100), false);
        TKUnit.waitUntilReady(function () { return scrollX > 0; });
        TKUnit.assertEqual(scrollX, this.testView.horizontalOffset);
    }

    public test_scrollView_vertical_raised_scroll_event_after_loaded() {
        this.waitUntilTestElementLayoutIsValid();

        var scrollY: number;
        this.testView.on(ScrollView.scrollEvent, (args: ScrollEventData) => {
            scrollY = args.scrollY;
        });

        this.testView.scrollToVerticalOffset(layoutHelper.dp(100), false);
        TKUnit.waitUntilReady(function () { return scrollY > 0; });
        TKUnit.assertEqual(scrollY, this.testView.verticalOffset);
        TKUnit.assertEqual(scrollY, layoutHelper.dp(100));
    }

    public test_scrollView_horizontal_raised_scroll_event_after_loaded() {
        this.testView.orientation = "horizontal";
        this.waitUntilTestElementLayoutIsValid();

        var scrollX: number;
        this.testView.on(ScrollView.scrollEvent, (args: ScrollEventData) => {
            scrollX = args.scrollX;
        });

        this.waitUntilTestElementLayoutIsValid();

        this.testView.scrollToHorizontalOffset(layoutHelper.dp(100), false);
        TKUnit.waitUntilReady(function () { return scrollX > 0; });
        TKUnit.assertEqual(scrollX, this.testView.horizontalOffset);
        TKUnit.assertEqual(scrollX, layoutHelper.dp(100));
    }

    public test_scrollView_horizontal_can_set_indicator_state() {
        this.testView.orientation = "horizontal";
        this.testView.scrollBarIndicatorVisible = true;
        this.waitUntilTestElementLayoutIsValid();

        if (isIOS) {
            TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, true);
        } else {
            TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), true);
        }

        this.testView.scrollBarIndicatorVisible = false;
        this.waitUntilTestElementLayoutIsValid();

        if (isIOS) {
            TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, false);
        } else {
            TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), false);
        }
    }

    public test_scrollView_vertical_can_set_indicator_state() {
        this.testView.orientation = "vertical";
        this.testView.scrollBarIndicatorVisible = true;
        this.waitUntilTestElementLayoutIsValid();

        if (isIOS) {
            TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, true);
        } else {
            TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), true);
        }

        this.testView.scrollBarIndicatorVisible = false;
        this.waitUntilTestElementLayoutIsValid();

        if (isIOS) {
            TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, false);
        } else {
            TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), false);
        }
    }
}

export function createTestCase(): ScrollLayoutTest {
    return new ScrollLayoutTest();
}