From 88f61e00910a7c68dec77e9949c35bae73ed9fe1 Mon Sep 17 00:00:00 2001 From: Martin Yankov Date: Mon, 10 Sep 2018 16:53:52 +0300 Subject: [PATCH] move safe area tests to a new category --- tests/app/testRunner.ts | 5 + tests/app/ui/layouts/grid-layout-tests.ts | 165 ------------------- tests/app/ui/layouts/safe-area-tests.ts | 189 ++++++++++++++++++++++ 3 files changed, 194 insertions(+), 165 deletions(-) create mode 100644 tests/app/ui/layouts/safe-area-tests.ts diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index 7e46aaf5a..958bf1951 100644 --- a/tests/app/testRunner.ts +++ b/tests/app/testRunner.ts @@ -135,6 +135,11 @@ allTests["STACKLAYOUT"] = stackLayoutTests; import * as flexBoxLayoutTests from "./ui/layouts/flexbox-layout-tests"; allTests["FLEXBOXLAYOUT"] = flexBoxLayoutTests; +import * as safeAreaLayoutTests from "./ui/layouts/safe-area-tests"; +if (platform.device.os === platform.platformNames.ios) { + allTests["SAFEAREALAYOUT"] = safeAreaLayoutTests; +} + import * as stylePropertiesTests from "./ui/styling/style-properties-tests"; allTests["STYLE-PROPERTIES"] = stylePropertiesTests; diff --git a/tests/app/ui/layouts/grid-layout-tests.ts b/tests/app/ui/layouts/grid-layout-tests.ts index f48a51edd..c286121a5 100644 --- a/tests/app/ui/layouts/grid-layout-tests.ts +++ b/tests/app/ui/layouts/grid-layout-tests.ts @@ -8,17 +8,8 @@ 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"; -import { dipToDp, left, top, right, bottom, height, width, - paddingLeft, paddingTop, paddingRight, paddingBottom, - equal, closeEnough, notEqual, check, - heightEqual, widthEqual, - isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith, - isLeftOf, isRightOf, isBelow, isAbove, - isLeftWith, isAboveWith, isRightWith, isBelowWith } from "./layout-tests-helper"; var DELTA = 1; class RemovalTrackingGridLayout extends GridLayout { @@ -66,39 +57,6 @@ export class GridLayoutTest extends testModule.UITest return GridLayout.getColumnSpan(view); } - // 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(() => { - return view.isLayoutValid; - }, timeoutSec || 1); - } - - setup(ui); - helper.buildUIAndRunTest(ui.root, () => { - waitUntilTestElementLayoutIsValid(ui.root); - test(ui); - }); - }; - - private noop() { - // no operation - }; - // TODO: End Refactor - private prepareGridLayout(wait?: boolean) { this.testView.addRow(new ItemSpec(1, "star")); @@ -137,129 +95,6 @@ export class GridLayoutTest extends testModule.UITest } } - public test_layout_in_fullscreen() { - const snippet = ` - - - `; - - this.executeSnippet( - this.getViews(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}`); - } - ); - } - - public test_component_cells_layout_in_safe_area() { - const snippet = ` - - - - - - - - - - - - `; - - this.executeSnippet( - this.getViews(snippet), - this.noop, - ({ root, grid, cells }) => { - const insets = grid.getSafeAreaInsets(); - - 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}>`); - - isBelowWith(grid, cells[0][0], insets.top); - isBelowWith(grid, cells[0][1], insets.top); - isBelowWith(grid, cells[0][2], insets.top); - - 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}>`); - - isAboveWith(cells[2][0], grid, insets.bottom); - isAboveWith(cells[2][1], grid, insets.bottom); - isAboveWith(cells[2][2], grid, insets.bottom); - - 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_nested_grid_cells_layout_beyond_safe_area() { - 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 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}>`); - - 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}>`); - } - ); - } - public test_row_defaultValue() { var test = new Button(); TKUnit.assert(test !== null); diff --git a/tests/app/ui/layouts/safe-area-tests.ts b/tests/app/ui/layouts/safe-area-tests.ts new file mode 100644 index 000000000..c689cbce6 --- /dev/null +++ b/tests/app/ui/layouts/safe-area-tests.ts @@ -0,0 +1,189 @@ +import { Page } from "tns-core-modules/ui/page"; +import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout"; +import { Button } from "tns-core-modules/ui/button"; +import * as TKUnit from "../../TKUnit"; +import * as view from "tns-core-modules/ui/core/view"; +import { unsetValue } from "tns-core-modules/ui/core/view"; +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"; +import { dipToDp, left, top, right, bottom, height, width, + paddingLeft, paddingTop, paddingRight, paddingBottom, + equal, closeEnough, notEqual, check, + heightEqual, widthEqual, + 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 { + + public create(): any { + return null; + } + + // 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(() => { + return view.isLayoutValid; + }, timeoutSec || 1); + } + + setup(ui); + helper.buildUIAndRunTest(ui.root, () => { + waitUntilTestElementLayoutIsValid(ui.root); + test(ui); + }); + }; + + private noop() { + // no operation + }; + // TODO: End Refactor + + public test_layout_in_fullscreen() { + const snippet = ` + + + `; + + this.executeSnippet( + this.getViews(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}`); + } + ); + } + + public test_component_cells_layout_in_safe_area() { + const snippet = ` + + + + + + + + + + + + `; + + this.executeSnippet( + this.getViews(snippet), + this.noop, + ({ root, grid, cells }) => { + const insets = grid.getSafeAreaInsets(); + + 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}>`); + + isBelowWith(grid, cells[0][0], insets.top); + isBelowWith(grid, cells[0][1], insets.top); + isBelowWith(grid, cells[0][2], insets.top); + + 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}>`); + + isAboveWith(cells[2][0], grid, insets.bottom); + isAboveWith(cells[2][1], grid, insets.bottom); + isAboveWith(cells[2][2], grid, insets.bottom); + + 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_nested_grid_cells_layout_beyond_safe_area() { + 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 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}>`); + + 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}>`); + } + ); + } +} + +export function createTestCase(): SafeAreaTests { + return new SafeAreaTests(); +}