diff --git a/tests/app/ui/layouts/grid-layout-tests.ts b/tests/app/ui/layouts/grid-layout-tests.ts index 35617d2d4..f48a51edd 100644 --- a/tests/app/ui/layouts/grid-layout-tests.ts +++ b/tests/app/ui/layouts/grid-layout-tests.ts @@ -8,6 +8,7 @@ import * as builder from "tns-core-modules/ui/builder"; import * as testModule from "../../ui-test"; import * as layoutHelper from "./layout-helper"; import * as platform from "tns-core-modules/platform"; +import { ios as iosUtils } from "tns-core-modules/utils/utils"; import * as commonTests from "./common-layout-tests"; import * as helper from "../helper"; import { parse } from "tns-core-modules/ui/builder"; @@ -136,7 +137,7 @@ export class GridLayoutTest extends testModule.UITest } } - public test_grid() { + public test_layout_in_fullscreen() { const snippet = ` @@ -146,16 +147,22 @@ export class GridLayoutTest extends testModule.UITest this.getViews(snippet), this.noop, ({ root, grid, cells }) => { - // TODO: fullscreen - equal(left(grid), grid.getSafeAreaInsets().left); - check(top(grid) < grid.getSafeAreaInsets().top); - equal(right(grid), width(grid) - grid.getSafeAreaInsets().right); - check(bottom(grid) > height(grid) - grid.getSafeAreaInsets().bottom); + 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}`); } ); } - public test_grid_3x3_label() { + public test_component_cells_layout_in_safe_area() { const snippet = ` @@ -174,35 +181,38 @@ export class GridLayoutTest extends testModule.UITest this.getViews(snippet), this.noop, ({ root, grid, cells }) => { - isLeftAlignedWith(grid, cells[0][0]); - isLeftAlignedWith(grid, cells[1][0]); - isLeftAlignedWith(grid, cells[2][0]); + const insets = grid.getSafeAreaInsets(); - // TODO: fullscreen - isBelowWith(grid, cells[0][0], grid.getSafeAreaInsets().top); - isBelowWith(grid, cells[0][1], grid.getSafeAreaInsets().top); - isBelowWith(grid, cells[0][2], grid.getSafeAreaInsets().top); + equal(left(cells[0][0]), insets.left, `cell00 left actual:<${left(cells[0][0])}> expected:<${insets.left}>`); + equal(left(cells[1][0]), insets.left, `cell10 left actual:<${left(cells[1][0])}> expected:<${insets.left}>`); + equal(left(cells[2][0]), insets.left, `cell20 left actual:<${left(cells[2][0])}> expected:<${insets.left}>`); - isRightAlignedWith(grid, cells[0][2]); - isRightAlignedWith(grid, cells[1][2]); - isRightAlignedWith(grid, cells[2][2]); + isBelowWith(grid, cells[0][0], insets.top); + isBelowWith(grid, cells[0][1], insets.top); + isBelowWith(grid, cells[0][2], insets.top); - isAboveWith(cells[2][0], grid, grid.getSafeAreaInsets().bottom); - isAboveWith(cells[2][1], grid, grid.getSafeAreaInsets().bottom); - isAboveWith(cells[2][2], grid, grid.getSafeAreaInsets().bottom); + equal(right(cells[0][2]), width(grid) - insets.right, `cell02 left actual:<${left(cells[0][2])}> expected:<${width(grid) - insets.right}>`); + equal(right(cells[1][2]), width(grid) - insets.right, `cell12 left actual:<${left(cells[1][2])}> expected:<${width(grid) - insets.right}>`); + equal(right(cells[2][2]), width(grid) - insets.right, `cell22 left actual:<${left(cells[2][2])}> expected:<${width(grid) - insets.right}>`); - const cellHeight = height(cells[1][1]); - isAboveWith(cells[0][1], cells[1][1], cellHeight); - isAboveWith(cells[0][1], cells[1][1], cellHeight); + isAboveWith(cells[2][0], grid, insets.bottom); + isAboveWith(cells[2][1], grid, insets.bottom); + isAboveWith(cells[2][2], grid, insets.bottom); - const cellWidth = width(cells[1][1]); - isRightWith(cells[1][0], cells[1][1], cellWidth); - isRightWith(cells[1][1], cells[1][2], cellWidth); + equal(height(cells[0][1]), height(cells[1][1]), `cell height should be equal - cell01<${height(cells[0][1])}> - cell11<${height(cells[1][1])}>`); + equal(height(cells[1][1]), height(cells[2][1]), `cell height should be equal - cell11<${height(cells[1][1])}> - cell21<${height(cells[2][1])}>`); + const sumOfLabelHeightAndInsets = insets.top + height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]) + insets.bottom; + equal(height(grid), sumOfLabelHeightAndInsets, `grid height<${height(grid)}> sum of labels height and insets<${sumOfLabelHeightAndInsets}>`); + + equal(width(cells[1][0]), width(cells[1][1]), `cell width should be equal - cell10<${width(cells[1][0])}> - cell11<${width(cells[1][1])}>`); + equal(width(cells[1][1]), width(cells[1][2]), `cell width should be equal - cell11<${width(cells[1][1])}> - cell12<${width(cells[1][2])}>`); + const sumOfLabelWidthsAndInsets = insets.left + width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2]) + insets.right; + equal(width(grid), sumOfLabelWidthsAndInsets, `grid width<${width(grid)}> sum of nested grids width and insets<${sumOfLabelWidthsAndInsets}>`); } ); } - public test_grid_3x3_grid() { + public test_nested_grid_cells_layout_beyond_safe_area() { const snippet = ` @@ -220,13 +230,11 @@ export class GridLayoutTest extends testModule.UITest this.executeSnippet( this.getViews(snippet), this.noop, - ({ root, grid, cells }) => { - + ({ root, grid, cells }) => { isLeftAlignedWith(grid, cells[0][0]); isLeftAlignedWith(grid, cells[1][0]); isLeftAlignedWith(grid, cells[2][0]); - // TODO: fullscreen isTopAlignedWith(grid, cells[0][0]); isTopAlignedWith(grid, cells[0][1]); isTopAlignedWith(grid, cells[0][2]); @@ -235,17 +243,19 @@ export class GridLayoutTest extends testModule.UITest isRightAlignedWith(grid, cells[1][2]); isRightAlignedWith(grid, cells[2][2]); - isBottomAlignedWith(cells[2][0], grid); - isBottomAlignedWith(cells[2][1], grid); - isBottomAlignedWith(cells[2][2], grid); + isBottomAlignedWith(grid, cells[2][0]); + isBottomAlignedWith(grid, cells[2][1]); + isBottomAlignedWith(grid, cells[2][2]); - const cellHeight = height(cells[1][1]); - isAboveWith(cells[0][1], cells[1][1], cellHeight); - isAboveWith(cells[0][1], cells[1][1], cellHeight); + 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 sumOfNestedGridHeights = height(cells[0][1]) + height(cells[1][1]) + height(cells[2][1]); + equal(height(grid), sumOfNestedGridHeights, `grid height<${height(grid)}> sum of nested grids height <${sumOfNestedGridHeights}>`); - const cellWidth = width(cells[1][1]); - isRightWith(cells[1][0], cells[1][1], cellWidth); - isRightWith(cells[1][1], cells[1][2], cellWidth); + 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 sumOfNestedGridWidths = width(cells[1][0]) + width(cells[1][1]) + width(cells[1][2]) + equal(width(grid), sumOfNestedGridWidths, `grid width<${width(grid)}> sum of nested grids width <${sumOfNestedGridWidths}>`); } ); } diff --git a/tests/app/ui/layouts/layout-tests-helper.ts b/tests/app/ui/layouts/layout-tests-helper.ts index a3a1bd3bb..21f819718 100644 --- a/tests/app/ui/layouts/layout-tests-helper.ts +++ b/tests/app/ui/layouts/layout-tests-helper.ts @@ -41,58 +41,58 @@ export function check(exp: boolean, message?: string) { message ? TKUnit.assert(exp, message) : TKUnit.assert(exp); } -export function heightEqual(view1: View, view2: View) { - equal(height(view1), height(view2), `Expected height of ${view1} to equal height of ${view2}.`); +export function heightEqual(view1: View, view2: View, message?: string) { + equal(height(view1), height(view2), message || `Expected height of ${view1}:${height(view1)} to equal height of ${view2}:${height(view2)}.`); } -export function widthEqual(view1: View, view2: View) { - equal(width(view1), width(view2), `Expected width of ${view1} to equal width of ${view2}.`); +export function widthEqual(view1: View, view2: View, message?: string) { + equal(width(view1), width(view2), message || `Expected width of ${view1}:${width(view1)} to equal width of ${view2}:${width(view2)}.`); } -export function isLeftAlignedWith(view1: View, view2: View) { - TKUnit.assertEqual(left(view1), left(view2), `${view1} is not left-aligned with ${view2}`); +export function isLeftAlignedWith(view1: View, view2: View, message?: string) { + TKUnit.assertEqual(left(view1), left(view2), message || `${view1}:${left(view1)} is not left-aligned with ${view2}:${left(view2)}`); } -export function isRightAlignedWith(view1: View, view2: View) { - TKUnit.assertEqual(right(view1), right(view2), `${view1} is not right-aligned with ${view2}`); +export function isRightAlignedWith(view1: View, view2: View, message?: string) { + TKUnit.assertEqual(right(view1), right(view2), message || `${view1}:${right(view1)} is not right-aligned with ${view2}:${right(view2)}`); } -export function isTopAlignedWith(view1: View, view2: View) { - TKUnit.assertEqual(top(view1), top(view2), `${view1} is not top-aligned with ${view2}`); +export function isTopAlignedWith(view1: View, view2: View, message?: string) { + TKUnit.assertEqual(top(view1), top(view2), message || `${view1}:${top(view1)} is not top-aligned with ${view2}:${top(view2)}`); } -export function isBottomAlignedWith(view1: View, view2: View) { - TKUnit.assertEqual(bottom(view1), bottom(view2), `${view1} is not bottom-aligned with ${view2}`); +export function isBottomAlignedWith(view1: View, view2: View, message?: string) { + TKUnit.assertEqual(bottom(view1), bottom(view2), message || `${view1}:${bottom(view1)} is not bottom-aligned with ${view2}:${bottom(view2)}`); } -export function isLeftOf(view1: View, view2: View) { - TKUnit.assert(right(view1) <= left(view2), `${view1}.right is not left of ${view2}.left`); +export function isLeftOf(view1: View, view2: View, message?: string) { + TKUnit.assert(right(view1) <= left(view2), message || `${view1}.right:${right(view1)} is not left of ${view2}.left:${left(view2)}`); } -export function isAbove(view1: View, view2: View) { - TKUnit.assert(bottom(view1) <= top(view2), `${view1}.bottom is not above ${view2}.top`); +export function isAbove(view1: View, view2: View, message?: string) { + TKUnit.assert(bottom(view1) <= top(view2), message || `${view1}.bottom:${bottom(view1)} is not above ${view2}.top:${top(view2)}`); } -export function isRightOf(view1: View, view2: View) { - TKUnit.assert(left(view1) >= right(view2), `${view1}.left is not right of ${view2}.right`); +export function isRightOf(view1: View, view2: View, message?: string) { + TKUnit.assert(left(view1) >= right(view2), message || `${view1}.left:${left(view1)} is not right of ${view2}.right:${right(view2)}`); } -export function isBelow(view1: View, view2: View, distance?: number) { - TKUnit.assert(top(view1) >= bottom(view2), `${view1}.top is not below ${view2}.bottom`); +export function isBelow(view1: View, view2: View, distance?: number, message?: string) { + TKUnit.assert(top(view1) >= bottom(view2), message || `${view1}.top:${top(view1)} is not below ${view2}.bottom:${bottom(view1)}`); } -export function isLeftWith(view1: View, view2: View, distance: number) { - TKUnit.assertTrue(Math.abs(left(view1) + distance - left(view2)) <= EPS, `${view1}.left is not ${distance} of ${view2}.left`); +export function isLeftWith(view1: View, view2: View, distance: number, message?: string) { + 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) { - TKUnit.assertTrue(Math.abs(right(view1) + distance - right(view2)) <= EPS, `${view1}.right is not ${distance} of ${view2}.right`); +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) { - TKUnit.assertTrue(Math.abs(bottom(view1) + distance - bottom(view2)) <= EPS, `${view1}.bottom is not ${distance} of ${view2}.bottom`); +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 isBelowWith(view1: View, view2: View, distance: number) { - TKUnit.assertTrue(Math.abs(top(view1) + distance - top(view2)) <= EPS, `${view1}.top is not ${distance} of ${view2}.top`); +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)}`); }