From d5ed96cbbb01c6c2744934e203ec9abdd0900035 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Tue, 11 Sep 2018 16:13:44 +0300 Subject: [PATCH] test(safe-area): add dock layout tests --- tests/app/ui/layouts/layout-tests-helper.ts | 8 +- tests/app/ui/layouts/safe-area-tests.ts | 181 ++++++++++++++++---- 2 files changed, 152 insertions(+), 37 deletions(-) diff --git a/tests/app/ui/layouts/layout-tests-helper.ts b/tests/app/ui/layouts/layout-tests-helper.ts index 21f819718..a388927be 100644 --- a/tests/app/ui/layouts/layout-tests-helper.ts +++ b/tests/app/ui/layouts/layout-tests-helper.ts @@ -85,14 +85,14 @@ export function isLeftWith(view1: View, view2: View, distance: number, message?: TKUnit.assertTrue(Math.abs(left(view1) + distance - left(view2)) <= EPS, message || `${view1}.left:${left(view1)} is not ${distance} of ${view2}.left:${left(view2)}`); } -export function isRightWith(view1: View, view2: View, distance: number, message?: string) { - TKUnit.assertTrue(Math.abs(right(view1) + distance - right(view2)) <= EPS, message || `${view1}.right:${right(view1)} is not ${distance} of ${view2}.right:${right(view2)}`); -} - export function isAboveWith(view1: View, view2: View, distance: number, message?: string) { TKUnit.assertTrue(Math.abs(bottom(view1) + distance - bottom(view2)) <= EPS, message || `${view1}.bottom:${bottom(view1)} is not ${distance} of ${view2}.bottom:${bottom(view2)}`); } +export function isRightWith(view1: View, view2: View, distance: number, message?: string) { + TKUnit.assertTrue(Math.abs(right(view1) + distance - right(view2)) <= EPS, message || `${view1}.right:${right(view1)} is not ${distance} of ${view2}.right:${right(view2)}`); +} + export function isBelowWith(view1: View, view2: View, distance: number, message?: string) { TKUnit.assertTrue(Math.abs(top(view1) + distance - top(view2)) <= EPS, message || `${view1}.top:${top(view1)} is not ${distance} of ${view2}.top:${top(view2)}`); } diff --git a/tests/app/ui/layouts/safe-area-tests.ts b/tests/app/ui/layouts/safe-area-tests.ts index c689cbce6..f2833d412 100644 --- a/tests/app/ui/layouts/safe-area-tests.ts +++ b/tests/app/ui/layouts/safe-area-tests.ts @@ -19,7 +19,6 @@ import { dipToDp, left, top, right, bottom, height, width, isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith, isLeftOf, isRightOf, isBelow, isAbove, isLeftWith, isAboveWith, isRightWith, isBelowWith } from "./layout-tests-helper"; -var DELTA = 1; export class SafeAreaTests extends testModule.UITest { @@ -28,19 +27,6 @@ export class SafeAreaTests extends testModule.UITest { } // TODO: Start Refactor - private getViews (template: string) { - let root = parse(template); - return { - root, - grid: root.getViewById("grid") as GridLayout, - 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 executeSnippet(ui: U, setup: (ui: U) => void, test: (ui: U) => void): void { function waitUntilTestElementLayoutIsValid(view: view.View, timeoutSec?: number): void { TKUnit.waitUntilReady(() => { @@ -58,30 +44,53 @@ export class SafeAreaTests extends testModule.UITest { private noop() { // no operation }; + // TODO: End Refactor - public test_layout_in_fullscreen() { + // Common + private layout_in_full_screen_test(layout: view.View) { + const fullScreenOrigin = { x: 0, y: 0}; + if (platform.isIOS && iosUtils.MajorVersion < 11) { + const safeAreaOrigin = layout.parent.nativeViewProtected.safeAreaLayoutGuide.layoutFrame.origin; + fullScreenOrigin.x += dipToDp(safeAreaOrigin.x); + fullScreenOrigin.y += dipToDp(safeAreaOrigin.y); + } + + const l = left(layout); + const t = top(layout); + const r = right(layout); + const b = bottom(layout); + const widthPixels = platform.screen.mainScreen.widthPixels; + const heightPixels = platform.screen.mainScreen.heightPixels; + equal(l, fullScreenOrigin.x, `${layout}.left - actual:${l}; expected: ${fullScreenOrigin.x}`); + equal(t, fullScreenOrigin.y, `${layout}.top - actual:${t}; expected: ${fullScreenOrigin.y}`); + equal(r, widthPixels, `${layout}.right - actual:${r}; expected: ${widthPixels}`); + equal(b, heightPixels, `${layout}.bottom - actual:${b}; expected: ${heightPixels}`); + } + + // Grid + private getGridViews (template: string) { + let root = parse(template); + return { + root, + grid: root.getViewById("grid") as GridLayout, + 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 ] + ] + }; + }; + + public test_grid_layout_in_full_screen() { const snippet = ` - - + `; this.executeSnippet( - this.getViews(snippet), + this.getGridViews(snippet), this.noop, - ({ root, grid, cells }) => { - const fullscreenOrigin = { x: 0, y: 0}; - if (platform.isIOS && iosUtils.MajorVersion < 11) { - const safeAreaOrigin = grid.parent.nativeViewProtected.safeAreaLayoutGuide.layoutFrame.origin; - fullscreenOrigin.y += dipToDp(safeAreaOrigin.y); - fullscreenOrigin.x += dipToDp(safeAreaOrigin.x); - } - - equal(left(grid), fullscreenOrigin.x, `actual:${grid}.left:${left(grid)} expected:${fullscreenOrigin.x}`); - equal(top(grid), fullscreenOrigin.y, `actual:${grid}.top:${top(grid)} expected:${fullscreenOrigin.y}`); - equal(right(grid), platform.screen.mainScreen.widthPixels, `actual:${grid}.right:${right(grid)} expected:${platform.screen.mainScreen.widthPixels}`); - equal(bottom(grid), platform.screen.mainScreen.heightPixels, `actual:${grid}.bottom:${bottom(grid)} expected:${platform.screen.mainScreen.heightPixels}`); - } + ({ root }) => { this.layout_in_full_screen_test(root); } ); } @@ -101,7 +110,7 @@ export class SafeAreaTests extends testModule.UITest { `; this.executeSnippet( - this.getViews(snippet), + this.getGridViews(snippet), this.noop, ({ root, grid, cells }) => { const insets = grid.getSafeAreaInsets(); @@ -151,7 +160,7 @@ export class SafeAreaTests extends testModule.UITest { `; this.executeSnippet( - this.getViews(snippet), + this.getGridViews(snippet), this.noop, ({ root, grid, cells }) => { isLeftAlignedWith(grid, cells[0][0]); @@ -182,6 +191,112 @@ export class SafeAreaTests extends testModule.UITest { } ); } + + // Dock + private getDockViews(template: string) { + let root = parse(template); + return { + root, + childLeft: root.getViewById("childLeft") as view.View, + childTop: root.getViewById("childTop") as view.View, + childRight: root.getViewById("childRight") as view.View, + childBottom: root.getViewById("childBottom") as view.View, + childFill: root.getViewById("childFill") as view.View, + }; + }; + + public test_dock_in_full_screen() { + const snippet = ` + + `; + + this.executeSnippet( + this.getDockViews(snippet), + this.noop, + ({ root }) => { this.layout_in_full_screen_test(root); } + ); + } + + public test_dock_children_components_in_safe_area() { + const snippet = ` + + + `; + + this.executeSnippet( + this.getDockViews(snippet), + this.noop, + ({ root, childLeft, childTop, childRight, childBottom, childFill }) => { + const insets = root.getSafeAreaInsets(); + + equal(left(childLeft), insets.left, `${childLeft}.left - actual: ${left(childLeft)} expected: ${insets.left}`); + equal(top(childLeft), insets.top, `${childLeft}.top - actual: ${top(childLeft)} expected: ${insets.top}`); + + equal(top(childTop), insets.top, `${childTop}.top - actual: ${top(childTop)} expected: ${insets.top}`); + equal(right(childTop), width(root) - insets.right, `${childTop}.right - actual: ${right(childTop)} expected: ${width(root) - insets.right}`); + + equal(right(childRight), width(root) - insets.right, `${childRight}.right - actual: ${right(childRight)} expected: ${width(root) - insets.right}`); + equal(bottom(childRight), height(root) - insets.bottom, `${childRight}.bottom - actual: ${bottom(childRight)} expected: ${height(root) - insets.bottom}`); + + equal(bottom(childBottom), height(root) - insets.bottom, `${childBottom}.bottom - actual: ${bottom(childBottom)} expected: ${height(root) - insets.bottom}`); + + isLeftWith(childLeft, childFill, width(childLeft)); + isBelowWith(childTop, childFill, height(childTop)); + isRightWith(childFill, childRight, width(childRight)); + isAboveWith(childFill, childBottom, height(childBottom)); + } + ); + } + + public test_dock_nested_layouts_beyond_safe_area() { + const snippet = ` + + + + + + + + + + + + + `; + + this.executeSnippet( + this.getDockViews(snippet), + this.noop, + ({ root, childLeft, childTop, childRight, childBottom, childFill }) => { + isLeftAlignedWith(root, childLeft); + isTopAlignedWith(root, childLeft); + + isTopAlignedWith(root, childTop); + isRightAlignedWith(root, childTop); + + isRightAlignedWith(root, childRight); + isBottomAlignedWith(root, childRight); + + isBottomAlignedWith(root, childRight); + + const sumOfNestedDockHeights = height(childTop) + height(childFill) + height(childBottom); + equal(height(root), sumOfNestedDockHeights, `dock height<${height(root)}> sum of nested docks height <${sumOfNestedDockHeights}>`); + + const sumOfNestedDockWidths = width(childLeft) + width(childFill) + width(childRight) + equal(width(root), sumOfNestedDockWidths, `dock width<${width(root)}> sum of nested docks width <${sumOfNestedDockWidths}>`); + } + ); + } } export function createTestCase(): SafeAreaTests {