mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
move safe area tests to a new category
This commit is contained in:
Martin Yankov
@@ -135,6 +135,11 @@ allTests["STACKLAYOUT"] = stackLayoutTests;
|
|||||||
import * as flexBoxLayoutTests from "./ui/layouts/flexbox-layout-tests";
|
import * as flexBoxLayoutTests from "./ui/layouts/flexbox-layout-tests";
|
||||||
allTests["FLEXBOXLAYOUT"] = flexBoxLayoutTests;
|
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";
|
import * as stylePropertiesTests from "./ui/styling/style-properties-tests";
|
||||||
allTests["STYLE-PROPERTIES"] = stylePropertiesTests;
|
allTests["STYLE-PROPERTIES"] = stylePropertiesTests;
|
||||||
|
|
||||||
|
|||||||
@@ -8,17 +8,8 @@ import * as builder from "tns-core-modules/ui/builder";
|
|||||||
import * as testModule from "../../ui-test";
|
import * as testModule from "../../ui-test";
|
||||||
import * as layoutHelper from "./layout-helper";
|
import * as layoutHelper from "./layout-helper";
|
||||||
import * as platform from "tns-core-modules/platform";
|
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 commonTests from "./common-layout-tests";
|
||||||
import * as helper from "../helper";
|
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;
|
var DELTA = 1;
|
||||||
|
|
||||||
class RemovalTrackingGridLayout extends GridLayout {
|
class RemovalTrackingGridLayout extends GridLayout {
|
||||||
@@ -66,39 +57,6 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
|
|||||||
return GridLayout.getColumnSpan(view);
|
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<U extends { root: view.View }>(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) {
|
private prepareGridLayout(wait?: boolean) {
|
||||||
|
|
||||||
this.testView.addRow(new ItemSpec(1, "star"));
|
this.testView.addRow(new ItemSpec(1, "star"));
|
||||||
@@ -137,129 +95,6 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public test_layout_in_fullscreen() {
|
|
||||||
const snippet = `
|
|
||||||
<GridLayout id="grid" backgroundColor="Crimson">
|
|
||||||
</GridLayout>
|
|
||||||
`;
|
|
||||||
|
|
||||||
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 = `
|
|
||||||
<GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
|
|
||||||
<Label row="0" col="0" id="cell00" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="0" col="1" id="cell01" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="0" col="2" id="cell02" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="1" col="0" id="cell10" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="1" col="1" id="cell11" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="1" col="2" id="cell12" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="2" col="0" id="cell20" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="2" col="1" id="cell21" text="overflowing text, overflowing text"></Label>
|
|
||||||
<Label row="2" col="2" id="cell22" text="overflowing text, overflowing text"></Label>
|
|
||||||
</GridLayout>
|
|
||||||
`;
|
|
||||||
|
|
||||||
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 = `
|
|
||||||
<GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
|
|
||||||
<GridLayout row="0" col="0" id="cell00" backgroundColor="SkyBlue"></GridLayout>
|
|
||||||
<GridLayout row="0" col="1" id="cell01" backgroundColor="Indigo"></GridLayout>
|
|
||||||
<GridLayout row="0" col="2" id="cell02" backgroundColor="Crimson"></GridLayout>
|
|
||||||
<GridLayout row="1" col="0" id="cell10" backgroundColor="Chocolate"></GridLayout>
|
|
||||||
<GridLayout row="1" col="1" id="cell11" backgroundColor="Cornsilk"></GridLayout>
|
|
||||||
<GridLayout row="1" col="2" id="cell12" backgroundColor="BurlyWood"></GridLayout>
|
|
||||||
<GridLayout row="2" col="0" id="cell20" backgroundColor="GoldenRod"></GridLayout>
|
|
||||||
<GridLayout row="2" col="1" id="cell21" backgroundColor="Khaki"></GridLayout>
|
|
||||||
<GridLayout row="2" col="2" id="cell22" backgroundColor="IndianRed"></GridLayout>
|
|
||||||
</GridLayout>
|
|
||||||
`;
|
|
||||||
|
|
||||||
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() {
|
public test_row_defaultValue() {
|
||||||
var test = new Button();
|
var test = new Button();
|
||||||
TKUnit.assert(test !== null);
|
TKUnit.assert(test !== null);
|
||||||
|
|||||||
189
tests/app/ui/layouts/safe-area-tests.ts
Normal file
189
tests/app/ui/layouts/safe-area-tests.ts
Normal file
@@ -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<any> {
|
||||||
|
|
||||||
|
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<U extends { root: view.View }>(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 = `
|
||||||
|
<GridLayout id="grid" backgroundColor="Crimson">
|
||||||
|
</GridLayout>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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 = `
|
||||||
|
<GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
|
||||||
|
<Label row="0" col="0" id="cell00" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="0" col="1" id="cell01" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="0" col="2" id="cell02" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="1" col="0" id="cell10" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="1" col="1" id="cell11" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="1" col="2" id="cell12" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="2" col="0" id="cell20" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="2" col="1" id="cell21" text="overflowing text, overflowing text"></Label>
|
||||||
|
<Label row="2" col="2" id="cell22" text="overflowing text, overflowing text"></Label>
|
||||||
|
</GridLayout>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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 = `
|
||||||
|
<GridLayout id="grid" rows="*, *, *" columns="*, *, *" backgroundColor="Crimson">
|
||||||
|
<GridLayout row="0" col="0" id="cell00" backgroundColor="SkyBlue"></GridLayout>
|
||||||
|
<GridLayout row="0" col="1" id="cell01" backgroundColor="Indigo"></GridLayout>
|
||||||
|
<GridLayout row="0" col="2" id="cell02" backgroundColor="Crimson"></GridLayout>
|
||||||
|
<GridLayout row="1" col="0" id="cell10" backgroundColor="Chocolate"></GridLayout>
|
||||||
|
<GridLayout row="1" col="1" id="cell11" backgroundColor="Cornsilk"></GridLayout>
|
||||||
|
<GridLayout row="1" col="2" id="cell12" backgroundColor="BurlyWood"></GridLayout>
|
||||||
|
<GridLayout row="2" col="0" id="cell20" backgroundColor="GoldenRod"></GridLayout>
|
||||||
|
<GridLayout row="2" col="1" id="cell21" backgroundColor="Khaki"></GridLayout>
|
||||||
|
<GridLayout row="2" col="2" id="cell22" backgroundColor="IndianRed"></GridLayout>
|
||||||
|
</GridLayout>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user