From 9ef9ee1f3fc5ee0a01dcb51398d09b5d7ec7ccbd Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Fri, 21 Sep 2018 16:25:56 +0300 Subject: [PATCH] test: add scroll view tests --- tests/app/testRunner.ts | 3 + .../scroll-view-safe-area-tests.ts | 466 ++++++++++++++++++ 2 files changed, 469 insertions(+) create mode 100644 tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index a73e324e7..daa336c48 100644 --- a/tests/app/testRunner.ts +++ b/tests/app/testRunner.ts @@ -136,8 +136,11 @@ import * as flexBoxLayoutTests from "./ui/layouts/flexbox-layout-tests"; allTests["FLEXBOXLAYOUT"] = flexBoxLayoutTests; import * as safeAreaLayoutTests from "./ui/layouts/safe-area-tests"; +import * as scrollViewSafeAreaTests from "./ui/scroll-view/scroll-view-safe-area-tests"; + if (platform.isIOS && ios.MajorVersion > 10) { allTests["SAFEAREALAYOUT"] = safeAreaLayoutTests; + allTests["SAFEAREA-SCROLL-VIEW"] = scrollViewSafeAreaTests; } import * as stylePropertiesTests from "./ui/styling/style-properties-tests"; diff --git a/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts b/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts new file mode 100644 index 000000000..e0893929b --- /dev/null +++ b/tests/app/ui/scroll-view/scroll-view-safe-area-tests.ts @@ -0,0 +1,466 @@ +import { UITest } from "../../ui-test"; +import { ScrollView } from "tns-core-modules/ui/scroll-view"; +import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout"; +import * as TKUnit from "../../TKUnit"; +import * as view from "tns-core-modules/ui/core/view"; +import * as platform from "tns-core-modules/platform"; +import { ios as iosUtils } from "tns-core-modules/utils/utils"; + +import * as helper from "../helper"; +import { parse } from "tns-core-modules/ui/builder"; +import { + dipToDp, left, top, right, bottom, height, width, + equal, check, + isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith, + isLeftWith, isRightWith, isBelowWith +} from "../layouts/layout-tests-helper"; + +class ScrollLayoutSafeAreaTest extends UITest { + + private executeSnippet(ui: U, setup: (ui: U) => void, test: (ui: U) => void, pageOptions?: helper.PageOptions): void { + function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void { + TKUnit.waitUntilReady(() => { + return view.isLayoutValid; + }, timeoutSec || 1); + } + + setup(ui); + helper.buildUIAndRunTest(ui.root, () => { + waitUntilTestElementLayoutIsValid(ui.root); + test(ui); + }, pageOptions); + }; + + private noop() { + // no operation + }; + + private getViews(template: string) { + let root = parse(template); + return { + root, + grid: root.getViewById("grid") as GridLayout, + stack: root.getViewById("stack") as GridLayout, + childFirst: root.getViewById("childFirst") as view.View, + cells: [ + [root.getViewById("cell00") as view.View, root.getViewById("cell01") as view.View, root.getViewById("cell02") as view.View], + [root.getViewById("cell10") as view.View, root.getViewById("cell11") as view.View, root.getViewById("cell12") as view.View], + [root.getViewById("cell20") as view.View, root.getViewById("cell21") as view.View, root.getViewById("cell22") as view.View] + ] + }; + }; + + private scroll_view_in_full_screen(scrollView: view.View, pageOptions?: helper.PageOptions) { + let expectedTop = 0; + if (pageOptions && pageOptions.actionBarFlat) { + const actionBarHeight = round(dipToDp(scrollView.page.actionBar.nativeViewProtected.frame.size.height)); + const app = iosUtils.getter(UIApplication, UIApplication.sharedApplication); + const statusBarHeight = round(dipToDp(app.statusBarFrame.size.height)); + expectedTop = actionBarHeight + statusBarHeight; + } + + const l = left(scrollView); + const t = top(scrollView); + const r = right(scrollView); + const b = bottom(scrollView); + equal(l, 0, `${scrollView}.left - actual:${l}; expected: ${0}`); + equal(t, expectedTop, `${scrollView}.top - actual:${t}; expected: ${expectedTop}`); + equal(r, platform.screen.mainScreen.widthPixels, `${scrollView}.right - actual:${r}; expected: ${platform.screen.mainScreen.widthPixels}`); + equal(b, platform.screen.mainScreen.heightPixels, `${scrollView}.bottom - actual:${b}; expected: ${platform.screen.mainScreen.heightPixels}`); + } + + private scroll_view_in_full_screen_test(pageOptions?: helper.PageOptions, sample?: string) { + const snippet = sample || ` + + `; + + this.executeSnippet( + this.getViews(snippet), + this.noop, + ({ root }) => { + this.scroll_view_in_full_screen(root, pageOptions); + }, + pageOptions + ); + } + + public test_scroll_view_in_full_screen_action_bar() { + this.scroll_view_in_full_screen_test({ actionBar: true }); + } + + public test_scroll_view_in_full_screen_action_bar_hidden() { + this.scroll_view_in_full_screen_test({ actionBarHidden: true }); + } + + public test_scroll_view_in_full_screen_action_bar_flat() { + this.scroll_view_in_full_screen_test({ actionBarFlat: true }); + } + + public test_scroll_view_in_full_screen_tab_bar() { + const snippet = ` + + + + `; + this.scroll_view_in_full_screen_test({ tabBar: true }, snippet); + } + + private scroll_view_children_components_in_safe_area(pageOptions?: helper.PageOptions) { + const snippet = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + + this.executeSnippet( + this.getViews(snippet), + this.noop, + ({ root, stack, childFirst }) => { + const insets = root.getSafeAreaInsets(); + + isLeftAlignedWith(root, stack); + isTopAlignedWith(root, stack); + isRightAlignedWith(root, stack); + + isLeftWith(root, childFirst, insets.left); + isBelowWith(root, childFirst, insets.top); + isRightWith(childFirst, root, insets.right); + + const scrollViewContentHeight = round(dipToDp(root.nativeViewProtected.contentSize.height)); + const sumOfNestedLabelHeightsAndInsets = height(childFirst) * stack.getChildrenCount() + insets.top + insets.bottom; + equal(scrollViewContentHeight, sumOfNestedLabelHeightsAndInsets, `scroll view content height<${scrollViewContentHeight}> sum of nested label height and insets <${sumOfNestedLabelHeightsAndInsets}>`); + }, + pageOptions + ); + } + + public test_scroll_view_children_components_in_safe_area() { + this.scroll_view_children_components_in_safe_area({ actionBar: true }); + } + + public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_hidden() { + this.scroll_view_children_components_in_safe_area({ actionBarHidden: true }); + } + + public test_grid_nested_grid_cells_layout_beyond_safe_area_action_bar_flat() { + this.scroll_view_children_components_in_safe_area({ actionBarFlat: true }); + } + + public test_grid_nested_grid_cells_layout_beyond_safe_area_tab_bar() { + this.scroll_view_children_components_in_safe_area({ tabBar: true }); + } + + private grid_nested_scroll_views_layout_beyond_safe_area(pageOptions?: helper.PageOptions) { + const snippet = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + + this.executeSnippet( + this.getViews(snippet), + this.noop, + ({ root, grid, cells }) => { + isLeftAlignedWith(grid, cells[0][0]); + isLeftAlignedWith(grid, cells[1][0]); + isLeftAlignedWith(grid, cells[2][0]); + + isTopAlignedWith(grid, cells[0][0]); + isTopAlignedWith(grid, cells[0][1]); + isTopAlignedWith(grid, cells[0][2]); + + isRightAlignedWith(grid, cells[0][2]); + isRightAlignedWith(grid, cells[1][2]); + isRightAlignedWith(grid, cells[2][2]); + + isBottomAlignedWith(grid, cells[2][0]); + isBottomAlignedWith(grid, cells[2][1]); + isBottomAlignedWith(grid, cells[2][2]); + + check(height(cells[0][1]) >= height(cells[1][1]), `cell01 height<${height(cells[0][1])}> not greater or equal cell11 height<${height(cells[1][1])}>`); + check(height(cells[1][1]) <= height(cells[2][1]), `cell11 height<${height(cells[1][1])}> not less or equal cell21 height<${height(cells[2][1])}>`); + const sumOfNestedScrollViewHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]); + equal(height(grid), sumOfNestedScrollViewHeights, `grid height<${height(grid)}> sum of nested scroll views height <${sumOfNestedScrollViewHeights}>`); + + check(width(cells[1][0]) >= width(cells[1][1]), `cell10 width<${width(cells[1][0])}> not greater or equal cell11 width<${width(cells[1][1])}>`); + check(width(cells[1][1]) <= width(cells[1][2]), `cell11 width<${width(cells[1][1])}> not less or equal cell12 width<${width(cells[1][2])}>`); + const sumOfNestedScrollViewWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2]) + equal(width(grid), sumOfNestedScrollViewWidths, `grid width<${width(grid)}> sum of nested scroll views width <${sumOfNestedScrollViewWidths}>`); + }, + pageOptions + ); + } + + public test_grid_nested_scroll_views_layout_beyond_safe_area_action_bar() { + this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBar: true }); + } + + public test_grid_component_cells_layout_in_safe_area_action_bar_hidden() { + this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBarHidden: true }); + } + + public test_grid_component_cells_layout_in_safe_area_action_bar_flat() { + this.grid_nested_scroll_views_layout_beyond_safe_area({ actionBarFlat: true }); + } + + public test_grid_component_cells_layout_in_safe_area_tab_bar() { + this.grid_nested_scroll_views_layout_beyond_safe_area({ tabBar: true }); + } +} + +export function createTestCase(): ScrollLayoutSafeAreaTest { + return new ScrollLayoutSafeAreaTest(); +}