mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-20 15:34:26 +08:00
307 lines
12 KiB
TypeScript
307 lines
12 KiB
TypeScript
import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
|
|
import { Button } from '@nativescript/core/ui/button';
|
|
import * as TKUnit from '../../tk-unit';
|
|
import * as helper from '../../ui-helper';
|
|
import { CoreTypes } from '@nativescript/core';
|
|
import * as utils from '@nativescript/core/utils/utils';
|
|
import * as testModule from '../../ui-test';
|
|
import * as layoutHelper from './layout-helper';
|
|
import * as commonTests from './common-layout-tests';
|
|
|
|
export class StackLayoutTest extends testModule.UITest<StackLayout> {
|
|
private rootLayout: layoutHelper.MyStackLayout;
|
|
private btn1: layoutHelper.MyButton;
|
|
private btn2: layoutHelper.MyButton;
|
|
|
|
public create(): StackLayout {
|
|
this.rootLayout = new layoutHelper.MyStackLayout();
|
|
this.btn1 = new layoutHelper.MyButton();
|
|
this.btn1.text = 'btn1';
|
|
this.rootLayout.addChild(this.btn1);
|
|
this.btn2 = new layoutHelper.MyButton();
|
|
this.btn2.text = 'btn2';
|
|
this.rootLayout.addChild(this.btn2);
|
|
|
|
return this.rootLayout;
|
|
}
|
|
|
|
public test_StackLayout_recycling() {
|
|
helper.nativeView_recycling_test(() => new StackLayout());
|
|
}
|
|
|
|
public test_orientation_DefaultValue() {
|
|
TKUnit.assertEqual(this.rootLayout.orientation, CoreTypes.Orientation.vertical, 'Default orientation should be Vertical.');
|
|
}
|
|
|
|
public test_SetWrongOrientation_ShouldThrowError() {
|
|
TKUnit.assertThrows(() => {
|
|
(<any>this.rootLayout).orientation = 'not_valid';
|
|
}, 'Setting invalid value for orientation should throw exception.');
|
|
}
|
|
|
|
public test_Orientation_Change() {
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(this.rootLayout.orientation, CoreTypes.Orientation.vertical, 'Default orientation should be Vertical.');
|
|
|
|
this.rootLayout.orientation = 'horizontal';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(this.rootLayout.measureCount, 2, 'Orientation change should invalidate measure.');
|
|
TKUnit.assertEqual(this.rootLayout.arrangeCount, 2, 'Orientation change should invalidate arrange.');
|
|
}
|
|
|
|
public test_ShouldMeasureWith_AtMost_OnVertical() {
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(this.rootLayout.orientation, CoreTypes.Orientation.vertical, 'StackLayout should be vertical.');
|
|
TKUnit.assertTrue(this.rootLayout.measured, 'Layout should be measured.');
|
|
TKUnit.assertTrue(this.rootLayout.arranged, 'Layout should be arranged.');
|
|
|
|
TKUnit.assertEqual(utils.layout.getMeasureSpecMode(this.btn1.heightMeasureSpec), utils.layout.AT_MOST, 'Layout should measure child with AT_MOST Height in vertical orientation.');
|
|
}
|
|
|
|
public test_ShouldMeasureWith_AtMost_OnHorizontal() {
|
|
this.rootLayout.orientation = 'horizontal';
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assert(this.rootLayout.measured, 'Layout should be measured.');
|
|
TKUnit.assert(this.rootLayout.arranged, 'Layout should be arranged.');
|
|
|
|
TKUnit.assertEqual(utils.layout.getMeasureSpecMode(this.btn1.widthMeasureSpec), utils.layout.AT_MOST, 'Layout should measure child with AT_MOST Width in horizontal orientation.');
|
|
}
|
|
|
|
public test_DesiredSize_Vertical() {
|
|
this.rootLayout.verticalAlignment = 'top';
|
|
this.rootLayout.horizontalAlignment = 'left';
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(this.rootLayout.getMeasuredWidth(), Math.max(this.btn1.getMeasuredWidth(), this.btn2.getMeasuredWidth()), 'Layout getMeasuredWidth should be Max of children getMeasuredWidth');
|
|
TKUnit.assertEqual(this.rootLayout.getMeasuredHeight(), this.btn1.getMeasuredHeight() + this.btn2.getMeasuredHeight(), 'Layout getMeasuredHeight should be Sum of children getMeasuredHeight');
|
|
}
|
|
|
|
public test_DesiredSize_Horizontal() {
|
|
this.rootLayout.horizontalAlignment = 'left';
|
|
this.rootLayout.verticalAlignment = 'top';
|
|
this.rootLayout.orientation = 'horizontal';
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(this.rootLayout.getMeasuredWidth(), this.btn1.getMeasuredWidth() + this.btn2.getMeasuredWidth(), 'Layout getMeasuredWidth should be Sum of children getMeasuredWidth');
|
|
TKUnit.assertEqual(this.rootLayout.getMeasuredHeight(), Math.max(this.btn1.getMeasuredHeight(), this.btn2.getMeasuredHeight()), 'Layout getMeasuredHeight should be Max of children getMeasuredHeight');
|
|
}
|
|
|
|
public test_Padding_Vertical() {
|
|
this.rootLayout.width = { value: 300, unit: 'px' };
|
|
this.rootLayout.height = { value: 300, unit: 'px' };
|
|
|
|
this.rootLayout.style.paddingLeft = { value: 10, unit: 'px' };
|
|
this.rootLayout.style.paddingTop = { value: 20, unit: 'px' };
|
|
this.rootLayout.style.paddingRight = { value: 30, unit: 'px' };
|
|
this.rootLayout.style.paddingBottom = { value: 40, unit: 'px' };
|
|
|
|
this.btn1.height = { value: 50, unit: 'px' };
|
|
this.btn2.height = { value: 50, unit: 'px' };
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
layoutHelper.assertMeasure(this.btn1, 260, 50);
|
|
layoutHelper.assertMeasure(this.btn2, 260, 50);
|
|
|
|
layoutHelper.assertLayout(this.btn1, 10, 20, 260, 50, 'btn1');
|
|
layoutHelper.assertLayout(this.btn2, 10, 70, 260, 50, 'btn2');
|
|
}
|
|
|
|
public test_Padding_Horizontal() {
|
|
this.rootLayout.width = { value: 300, unit: 'px' };
|
|
this.rootLayout.height = { value: 300, unit: 'px' };
|
|
this.rootLayout.orientation = 'horizontal';
|
|
|
|
this.rootLayout.style.paddingLeft = { value: 10, unit: 'px' };
|
|
this.rootLayout.style.paddingTop = { value: 20, unit: 'px' };
|
|
this.rootLayout.style.paddingRight = { value: 30, unit: 'px' };
|
|
this.rootLayout.style.paddingBottom = { value: 40, unit: 'px' };
|
|
|
|
this.btn1.width = { value: 50, unit: 'px' };
|
|
this.btn2.width = { value: 50, unit: 'px' };
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
layoutHelper.assertMeasure(this.btn1, 50, 240);
|
|
layoutHelper.assertMeasure(this.btn2, 50, 240);
|
|
|
|
layoutHelper.assertLayout(this.btn1, 10, 20, 50, 240, 'btn1');
|
|
layoutHelper.assertLayout(this.btn2, 60, 20, 50, 240, 'btn2');
|
|
}
|
|
|
|
private assertChildTexts(expected, layout, message) {
|
|
let texts: Array<string> = [];
|
|
layout.eachChildView((child: { text: string }) => texts.push(child.text));
|
|
TKUnit.assertEqual(expected, texts.join('|'), message);
|
|
}
|
|
|
|
public test_insertChildAtPosition() {
|
|
this.assertChildTexts('btn1|btn2', this.rootLayout, 'initial 2 buttons');
|
|
|
|
let newChild = new Button();
|
|
newChild.text = 'in-between';
|
|
this.rootLayout.insertChild(newChild, 1);
|
|
|
|
this.assertChildTexts('btn1|in-between|btn2', this.rootLayout, 'button inserted at correct location');
|
|
}
|
|
|
|
public test_getChildIndex() {
|
|
let lastChildIndex = this.rootLayout.getChildrenCount() - 1;
|
|
let lastButton = <Button>this.rootLayout.getChildAt(lastChildIndex);
|
|
TKUnit.assertEqual('btn2', lastButton.text);
|
|
TKUnit.assertEqual(lastChildIndex, this.rootLayout.getChildIndex(lastButton));
|
|
|
|
let nonChild = new Button();
|
|
TKUnit.assertEqual(-1, this.rootLayout.getChildIndex(nonChild));
|
|
}
|
|
|
|
public test_codesnippets() {
|
|
// >> stack-layout-require
|
|
// var StackLayout = require("ui/layouts/stack-layout").StackLayout;
|
|
// << stack-layout-require
|
|
|
|
// >> stack-layout-new
|
|
// >> (hide)
|
|
// var Button = require("ui/button").Button;
|
|
// << (hide)
|
|
var stackLayout = new StackLayout();
|
|
// << stack-layout-new
|
|
|
|
// >> stack-layout-addchild
|
|
var btn = new Button();
|
|
stackLayout.addChild(btn);
|
|
// << stack-layout-addchild
|
|
|
|
// >> stack-layout-remove
|
|
stackLayout.removeChild(btn);
|
|
// << stack-layout-remove
|
|
|
|
// >> stack-layout-horizontal
|
|
stackLayout.orientation = 'horizontal';
|
|
// << stack-layout-horizontal
|
|
}
|
|
|
|
private setup_percent(): layoutHelper.MyButton {
|
|
let layout = this.testView;
|
|
layout.removeChildren();
|
|
layout.width = { value: 200, unit: 'px' };
|
|
layout.height = { value: 200, unit: 'px' };
|
|
|
|
let btn = new layoutHelper.MyButton();
|
|
btn.horizontalAlignment = 'left';
|
|
btn.verticalAlignment = 'top';
|
|
(<any>btn).width = '50%';
|
|
(<any>btn).height = '50%';
|
|
btn.margin = '10%';
|
|
btn.text = '1';
|
|
layout.addChild(btn);
|
|
|
|
return btn;
|
|
}
|
|
|
|
public test_percent_support_vertical() {
|
|
let btn = this.setup_percent();
|
|
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, 'Button MeasuredWidth incorrect');
|
|
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, 'Button MeasuredHeight incorrect');
|
|
|
|
let bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 20, 'TopLeft layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 20, 'TopLeft layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 120, 'TopLeft layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 120, 'TopLeft layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'center';
|
|
btn.verticalAlignment = 'middle';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 50, 'Center layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 20, 'Center layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 150, 'Center layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 120, 'Center layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'stretch';
|
|
btn.verticalAlignment = 'stretch';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 50, 'Stretch layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 20, 'Stretch layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 150, 'Stretch layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 120, 'Stretch layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'right';
|
|
btn.verticalAlignment = 'bottom';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 80, 'BottomRight layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 20, 'BottomRight layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 180, 'BottomRight layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 120, 'BottomRight layout BOTTOM incorrect');
|
|
}
|
|
|
|
public test_percent_support_horizontal() {
|
|
let btn = this.setup_percent();
|
|
this.testView.orientation = 'horizontal';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, 'Button MeasuredWidth incorrect');
|
|
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, 'Button MeasuredHeight incorrect');
|
|
|
|
let bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 20, 'TopLeft layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 20, 'TopLeft layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 120, 'TopLeft layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 120, 'TopLeft layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'center';
|
|
btn.verticalAlignment = 'middle';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 20, 'Center layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 50, 'Center layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 120, 'Center layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 150, 'Center layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'stretch';
|
|
btn.verticalAlignment = 'stretch';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 20, 'Stretch layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 50, 'Stretch layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 120, 'Stretch layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 150, 'Stretch layout BOTTOM incorrect');
|
|
|
|
btn.horizontalAlignment = 'right';
|
|
btn.verticalAlignment = 'bottom';
|
|
this.waitUntilTestElementLayoutIsValid();
|
|
|
|
bounds = btn._getCurrentLayoutBounds();
|
|
TKUnit.assertEqual(bounds.left, 20, 'BottomRight layout LEFT incorrect');
|
|
TKUnit.assertEqual(bounds.top, 80, 'BottomRight layout TOP incorrect');
|
|
TKUnit.assertEqual(bounds.right, 120, 'BottomRight layout RIGHT incorrect');
|
|
TKUnit.assertEqual(bounds.bottom, 180, 'BottomRight layout BOTTOM incorrect');
|
|
}
|
|
|
|
public test_percent_support_nativeLayoutParams_are_correct() {
|
|
commonTests.percent_support_nativeLayoutParams_are_correct(this);
|
|
}
|
|
}
|
|
|
|
export function createTestCase(): StackLayoutTest {
|
|
return new StackLayoutTest();
|
|
}
|