This commit is contained in:
SvetoslavTsenov
2019-07-13 18:15:47 +03:00
parent e6d683f812
commit ba3e0a39a0
43 changed files with 444 additions and 223 deletions

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="bottomNavigation" >
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -10,7 +10,7 @@
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="bottomNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<BottomNavigation automationText="tabNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}">
</TabStrip>
</BottomNavigation>

View File

@ -1,5 +1,5 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
<BottomNavigation automationText="bottomNavigation" id="bottomNavigation" >
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip>
<TabStripItem title="IteM onE"></TabStripItem>
<TabStripItem title="IteM twO"></TabStripItem>

View File

@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<BottomNavigation id="bottomNav" automationText="bottomNavigation">
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="color: green;" automationText="bottomNavigation" >
<BottomNavigation style="color: green;" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -1,13 +1,10 @@
<Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="bottomNavigation" automationText="bottomNavigation" class="font-awesome">
<BottomNavigation id="bottomNavigation" automationText="tabNavigation" class="font-awesome">
<TabStrip>
<TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
<TabStripItem >
<Label text="font://&#xf206;" />
<Label text="fa-bicycle-font-awesome" />
<TabStripItem iconSource="font://&#xf206;" title="icon">
</TabStripItem>
<TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation font icons" icon="" class="action-bar">
</ActionBar>
<BottomNavigation class="font-awesome" automationText="bottomNavigation" > <!-- TODO: The font-awesome class here should be removed -->
<BottomNavigation class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed -->
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation FONT" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="bottomNavigation" >
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -2,7 +2,7 @@
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="bottomNavigation" >
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>

View File

@ -2,7 +2,7 @@
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="bottomNavigation" >
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="bottomNavigation">
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation Text Transform" icon="" class="action-bar">
</ActionBar>
<BottomNavigation automationText="bottomNavigation" >
<BottomNavigation automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -3,7 +3,7 @@ Tabs {
}
TabContentItem.special {
color: olive;
color: green;
}
TabStrip {

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs color" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="tabsNav">
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs font icons" icon="" class="action-bar">
</ActionBar>
<Tabs class="font-awesome"> <!-- TODO: The font-awesome class here should be removed -->
<Tabs class="font-awesome" automationText="tabNavigation" > <!-- TODO: The font-awesome class here should be removed -->
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs font" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs highlight-color" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First" class="special"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>

View File

@ -2,7 +2,7 @@
<ActionBar title="Tabs icon change" icon="" class="action-bar">
</ActionBar>
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>

View File

@ -2,7 +2,7 @@
<ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>

View File

@ -21,7 +21,7 @@ export function loadExamples() {
examples.set("highlight-color", "tabs/highlight-color-page");
examples.set("icon-title-placement", "tabs/icon-title-placement-page");
examples.set("icon-change", "tabs/icon-change-page");
examples.set("swipe-enabled", "tabs/swipe-enabled-page");
examples.set("swipe-disabled", "tabs/swipe-disabled-page");
examples.set("strip-item", "tabs/tab-strip-item-page");
examples.set("strip-items", "tabs/tab-strip-items-page");
examples.set("tabs-position", "tabs/tabs-position-page");

View File

@ -1,9 +1,9 @@
<Page>
<ActionBar title="Tabs Swipe Enabled False" icon="" class="action-bar">
<ActionBar title="Tabs Swipe Disabled" icon="" class="action-bar">
</ActionBar>
<Tabs id="tabs" swipeEnabled="false">
<Tabs id="tabs" swipeEnabled="false" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

View File

@ -1,5 +1,5 @@
<Page>
<Tabs id="tabs">
<Tabs id="tabs" automationText="tabNavigation" >
<TabStrip>

View File

@ -1,5 +1,5 @@
<Page>
<Tabs id="tabs">
<Tabs id="tabs" automationText="tabNavigation" >
<TabStrip>

View File

@ -1,12 +1,17 @@
import * as vmModule from "./tabs-binding-view-model";
var viewModel = vmModule.tabsBindingNavigationViewModel;
// var viewModel = vmModule.tabsBindingNavigationViewModel;
// export function tabsLoaded(args) {
// let tabs = args.object;
// tabs.bindingContext = viewModel;
// }
// export function addTabs(args) {
// viewModel.createItems();
// }
export function tabsLoaded(args) {
let tabs = args.object;
tabs.bindingContext = viewModel;
}
export function addTabs(args) {
viewModel.createItems();
const page = args.object.page;
page.bindingContext = vmModule.tabsBindingNavigationViewModel;
}

View File

@ -4,9 +4,12 @@
</ActionBar>
<GridLayout rows="auto,*">
<Button row="0" text="Add Tab" tap="addTabs"/>
<StackLayout row="0" >
<Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
<Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
</StackLayout>
<GridLayout row="1">
<Tabs loaded="tabsLoaded" items="{{ tabContentItems }}">
<Tabs loaded="tabsLoaded" items="{{ tabContentItems }}" automationText="tabNavigation" >
<TabStrip items="{{ tabStripItems }}"></TabStrip>
</Tabs>
</GridLayout>

View File

@ -18,6 +18,8 @@ export class TabsBindingNavigationViewModel extends Observable {
}
createItems() {
console.log("Create item");
const _tabStripItems = new Array<TabStripItem>();
const _tabContentItems = new Array<TabContentItem>();
@ -31,6 +33,12 @@ export class TabsBindingNavigationViewModel extends Observable {
this.itemsCount++;
}
public removeLastItem() {
console.log("Remove item");
this.tabStripItems.pop();
this.tabContentItems.pop();
}
private createTabStripItem(index: number): TabStripItem {
const item = new TabStripItem();
item.title = "Item " + index;

View File

@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="tabsNav">
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs Position Bottom" icon="" class="action-bar">
</ActionBar>
<Tabs id="tabs" tabsPosition="bottom">
<Tabs id="tabs" tabsPosition="bottom" automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

View File

@ -3,7 +3,7 @@
<ActionBar title="Tabs text-transform" icon="" class="action-bar">
</ActionBar>
<Tabs>
<Tabs automationText="tabNavigation" >
<TabStrip>
<TabStripItem title="first" class="special"></TabStripItem>
<TabStripItem title="second"></TabStripItem>

View File

@ -1,4 +1,4 @@
import { AppiumDriver, IRectangle, logInfo } from "nativescript-dev-appium";
import { AppiumDriver, IRectangle, logInfo, logWarn, Point } from "nativescript-dev-appium";
export enum ElementCacheStrategy {
allAtOnce,
@ -103,7 +103,19 @@ export class NavigationHelper {
async swipeBackToSuitMainPage() {
logInfo(`Swipe to back`);
throw new Error("Not implemented!");
const startPoint = <Point>{};
const endPoint = <Point>{};
if (this._driver.isIOS) {
startPoint.x = 5;
startPoint.y = this._driver.nsCapabilities.device.viewportRect.y / this._driver.nsCapabilities.device.config.density;
endPoint.x = (this._driver.nsCapabilities.device.viewportRect.width / this._driver.nsCapabilities.device.config.density) - 5;
endPoint.y = startPoint.y;
await this._driver.swipe(startPoint, endPoint);
} else {
logWarn("Swipe back is not supported from android!");
}
}
private async cacheAllElements(cachedElements: ICachedElement) {

View File

@ -0,0 +1,4 @@
Please make sure that the
<BottomNavigation automationText="tabNavigation" >
<Tabs automationText="tabNavigation" >

View File

@ -1,55 +1,21 @@
import { AppiumDriver, Point, IRectangle, UIElement, logInfo } from "nativescript-dev-appium";
import { PageObjectBaseModel } from "../../../page-object-base-model";
import { AppiumDriver } from "nativescript-dev-appium";
import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
import { TabNavigationBasePage } from "../tab-navigation-base-page";
export class BottomNavigationBasePage extends PageObjectBaseModel {
private _bottomNavigatioinTabRect: IRectangle;
private _bottomNavigationItems: Array<UIElement>;
private _bottomNavigationItemsRects: Map<number, Point> = new Map();
constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
super(_driver, ["bottom-navigation"], elementCacheStrategy);
this._driver.imageHelper.options.waitBeforeCreatingInitialImageCapture = 6000;
this._driver.imageHelper.options.keepOriginalImageSize = false;
this._driver.imageHelper.options.tolerance = 0;
this._driver.imageHelper.options.toleranceType = ImageOptions.pixel;
// this._driver.imageHelper.options.donNotAppendActualSuffixOnIntialImageCapture = true;
this._driver.imageHelper.options.timeOutSeconds = 7;
export class BottomNavigationBasePage extends TabNavigationBasePage {
private readonly mainWidgetXPath: string;
constructor(_driver: AppiumDriver) {
super(_driver, ["bottom-navigation"]);
this.mainWidgetXPath = this._driver.isIOS ?
`//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeTabBar`
: `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.LinearLayout`;
}
async init(subSuiteName: string) {
this._naviagtionLinks.push(subSuiteName);
await super.initSuite();
async getItems() {
return await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
}
async refreshBottomNavigationTab() {
let bottomNavigatioinTab;
if (this._driver.nsCapabilities.isAndroid) {
bottomNavigatioinTab = await this._driver.findElementByXPath(`//android.view.ViewGroup[@content-desc="bottomNavigation"]/android.widget.LinearLayout`);
this._bottomNavigationItems = await this._driver.findElementsByXPath(`//android.view.ViewGroup[@content-desc="bottomNavigation"]/android.widget.LinearLayout/android.widget.LinearLayout/*`);
} else {
bottomNavigatioinTab = await this._driver.findElementByXPath(`//XCUIElementTypeOther[@name="bottomNavigation"]/XCUIElementTypeTabBar`);
this._bottomNavigationItems = await this._driver.findElementsByXPath(`//XCUIElementTypeOther[@name="bottomNavigation"]/XCUIElementTypeTabBar/*`);
}
for (let index = 0; index < this._bottomNavigationItems.length; index++) {
const point = await this._bottomNavigationItems[index].getRectangle();
this._bottomNavigationItemsRects.set(index, new Point(point.x + point.width / 2, point.y + point.height / 2));
}
this._bottomNavigatioinTabRect = await bottomNavigatioinTab.getRectangle();
return this._bottomNavigatioinTabRect;
}
async tabOnItem(index: number) {
if (this._bottomNavigationItemsRects.size === 0) {
await this.refreshBottomNavigationTab();
}
const point = this._bottomNavigationItemsRects.get(index);
logInfo(`Click on TabStrip index: ${index}`);
await this._driver.clickPoint(point.x, point.y);
async mainWidget() {
return await this._driver.findElementByXPath(this.mainWidgetXPath);
}
}

View File

@ -25,7 +25,7 @@ describe(`${imagePrefix}-suite`, async function () {
nsCapabilities.testReporter.context = this;
driver = await createDriver();
await driver.restartApp();
bottomNavigationBasePage = new BottomNavigationBasePage(driver, ElementCacheStrategy.none);
bottomNavigationBasePage = new BottomNavigationBasePage(driver);
await bottomNavigationBasePage.init("css-text-transform");
});

View File

@ -2,7 +2,6 @@ import { nsCapabilities, createDriver, AppiumDriver, DeviceOrientaion, logInfo }
import { BottomNavigationBasePage } from "./bottom-navigation-base-page";
import { assert } from "chai";
import { setImageName } from "../../../helpers/image-helper";
import { Platform } from "mobile-devices-controller";
const suite = "tab-navigation";
const spec = "bottom-navigation";
@ -17,7 +16,6 @@ describe(`${suite}-${spec}-suite`, async function () {
await driver.restartApp();
bottomNavigationBasePage = new BottomNavigationBasePage(driver);
await bottomNavigationBasePage.initSuite();
driver.imageHelper.options.keepOriginalImageSize = true;
});
after(async function () {
@ -44,7 +42,6 @@ describe(`${suite}-${spec}-suite`, async function () {
await bottomNavigationBasePage.navigateToSample("background-color");
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -74,7 +71,7 @@ describe(`${suite}-${spec}-suite`, async function () {
await clickAddTab();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.refreshTabItems();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -111,7 +108,7 @@ describe(`${suite}-${spec}-suite`, async function () {
await addTabBtn.tap();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.refreshTabItems();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -128,7 +125,6 @@ describe(`${suite}-${spec}-suite`, async function () {
await goToSecondBtn.tap();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -140,7 +136,6 @@ describe(`${suite}-${spec}-suite`, async function () {
await bottomNavigationBasePage.navigateToSample("color");
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -151,7 +146,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fancy-fonts-select-tabs`, async function () {
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.refreshBottomNavigationTab();
for (let index = 1; index < 4; index++) {
await bottomNavigationBasePage.tabOnItem(index);
@ -164,7 +158,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fancy-fonts-selected-index`, async function () {
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
await bottomNavigationBasePage.refreshBottomNavigationTab();
let selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
logInfo(`Click on "select second tab button"`);
@ -212,7 +205,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-font-icons`, async function () {
await bottomNavigationBasePage.navigateToSample("font-icons");
await bottomNavigationBasePage.refreshBottomNavigationTab();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -228,7 +220,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-icon-change`, async function () {
await bottomNavigationBasePage.navigateToSample("icon-change");
await bottomNavigationBasePage.refreshBottomNavigationTab();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -249,7 +240,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-5470-issue`, async function () {
await bottomNavigationBasePage.navigateToSample("issue-5470");
await bottomNavigationBasePage.refreshBottomNavigationTab();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -261,7 +251,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-text-transform`, async function () {
await bottomNavigationBasePage.navigateToSample("text-transform");
await bottomNavigationBasePage.refreshBottomNavigationTab();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -273,7 +262,6 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fonts`, async function () {
await bottomNavigationBasePage.navigateToSample("text-transform");
await bottomNavigationBasePage.refreshBottomNavigationTab();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);

View File

@ -0,0 +1,79 @@
import { AppiumDriver, Point, IRectangle, UIElement, logInfo, logWarn } from "nativescript-dev-appium";
import { PageObjectBaseModel } from "../../page-object-base-model";
import { ElementCacheStrategy } from "../../helpers/navigation-helper";
import { ImageOptions } from "nativescript-dev-appium/lib/image-options";
export abstract class TabNavigationBasePage extends PageObjectBaseModel {
protected bottomNavigatioinTabRect: IRectangle;
protected bottomNavigationItems: Array<UIElement>;
protected bottomNavigationItemsRects: Map<number, Point> = new Map();
constructor(_driver: AppiumDriver, navigationLinks: Array<string>) {
super(_driver, navigationLinks, ElementCacheStrategy.none);
this._driver.imageHelper.options.waitBeforeCreatingInitialImageCapture = 6000;
this._driver.imageHelper.options.keepOriginalImageSize = false;
this._driver.imageHelper.options.tolerance = 0;
this._driver.imageHelper.options.toleranceType = ImageOptions.pixel;
this._driver.imageHelper.options.donNotAppendActualSuffixOnIntialImageCapture = true;
this._driver.imageHelper.options.timeOutSeconds = 7;
}
abstract async mainWidget();
abstract async getItems();
async init(subSuiteName: string) {
this._naviagtionLinks.push(subSuiteName);
await super.initSuite();
}
async navigateToSample(sample: string) {
await super.navigateToSample(sample);
await this.refreshTabItems();
}
async refreshTabItems() {
this.bottomNavigationItems = await this.getItems();
for (let index = 0; index < this.bottomNavigationItems.length; index++) {
const point = await this.bottomNavigationItems[index].getRectangle();
this.bottomNavigationItemsRects.set(index, new Point(point.x + point.width / 2, point.y + point.height / 2));
}
}
async refreshTabWidget() {
const bottomNavigatioinTab = await this.mainWidget();
this.bottomNavigatioinTabRect = await bottomNavigatioinTab.getRectangle();
}
async tabOnItem(index: number) {
if (this.bottomNavigationItemsRects.size === 0) {
await this.refreshTabItems();
}
const point = this.bottomNavigationItemsRects.get(index);
logInfo(`Click on TabStrip index: ${index}`);
await this._driver.clickPoint(point.x, point.y);
}
async swipeRightToLeft() {
const startPoint = <Point>{};
const endPoint = <Point>{};
if (this._driver.isIOS) {
startPoint.x = (this._driver.nsCapabilities.device.viewportRect.x / this._driver.nsCapabilities.device.config.density
+ this._driver.nsCapabilities.device.viewportRect.width / this._driver.nsCapabilities.device.config.density);
startPoint.y = this._driver.nsCapabilities.device.viewportRect.y / this._driver.nsCapabilities.device.config.density
+ (this._driver.nsCapabilities.device.viewportRect.height / this._driver.nsCapabilities.device.config.density) / 2;
endPoint.x = this._driver.nsCapabilities.device.viewportRect.x / this._driver.nsCapabilities.device.config.density;
endPoint.y = startPoint.y;
} else {
startPoint.x = this._driver.nsCapabilities.device.viewportRect.width - 5;
startPoint.y = this._driver.nsCapabilities.device.viewportRect.y
+ this._driver.nsCapabilities.device.viewportRect.height / 2;
endPoint.x = this._driver.nsCapabilities.device.viewportRect.x + 5;
endPoint.y = startPoint.y;
}
await this._driver.swipe(startPoint, endPoint);
logWarn("Swipe from right to left!");
}
}

View File

@ -12,7 +12,7 @@ export class TabViewBasePage extends PageObjectBaseModel {
async init(subSuiteName: string) {
this._naviagtionLinks.push(subSuiteName);
await super.initSuite();
this._driver.imageHelper.options.keepOriginalImageSize = true;
this._driver.imageHelper.options.keepOriginalImageSize = false;
this._driver.imageHelper.options.tolerance = 0;
this._driver.imageHelper.options.toleranceType = ImageOptions.pixel;
}

View File

@ -76,8 +76,8 @@ describe(`${suite}-${spec}-suite`, async function () {
y: driver.nsCapabilities.device.viewportRect.height / 2
},
{
yOffset: 0,
xOffset: driver.nsCapabilities.device.viewportRect.x + 10
y: 0,
x: driver.nsCapabilities.device.viewportRect.x + 10
}
, 100);
await driver.imageHelper.compareScreen({ timeOutSeconds: 5, tolerance: 0.01 });

View File

@ -1,104 +0,0 @@
import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
import { TabsViewBasePage } from "./tabs-view-base-page";
import { Platform } from "mobile-devices-controller";
import { assert } from "chai";
import { setImageName } from "../../../helpers/image-helper";
const suite = "tab-navigation";
const spec = "tabs";
describe(`${suite}-${spec}-suite`, async function () {
let driver: AppiumDriver;
let tabsViewBasePage: TabsViewBasePage;
before(async function () {
nsCapabilities.testReporter.context = this;
driver = await createDriver();
await driver.restartApp();
tabsViewBasePage = new TabsViewBasePage(driver);
await tabsViewBasePage.initSuite();
});
after(async function () {
await tabsViewBasePage.endSuite();
});
beforeEach(async function () {
driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
driver.imageHelper.options = {
tolerance: 0.01,
timeOutSeconds: 5,
donNotAppendActualSuffixOnIntialImageCapture: true
};
});
afterEach(async function () {
if (this.currentTest.state === "failed") {
await driver.logTestArtifacts(this.currentTest.title);
await driver.resetApp();
await tabsViewBasePage.initSuite();
}
});
it(`${spec}-background-color`, async function () {
await tabsViewBasePage.navigateToSample("background-color");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-color`, async function () {
await tabsViewBasePage.navigateToSample("color");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-icon-change`, async function () {
await tabsViewBasePage.navigateToSample("tab-view-icon-change");
const index = driver.nsCapabilities.device.platform === Platform.IOS
? (+driver.nsCapabilities.device.apiLevel >= 11 ? 2 : 3) : 1;
let btns = await driver.findElementsByClassName(driver.locators.button, 5000);
await btns[index].tap();
await driver.imageHelper.compareScreen();
btns = await driver.findElementsByClassName(driver.locators.button, 5000);
await btns[index - 1].tap();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-icon-title-placment`, async function () {
await tabsViewBasePage.navigateToSample("icon-title-placement");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-issue-5470`, async function () {
await tabsViewBasePage.navigateToSample("issue-5470");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-swipe-enabled`, async function () {
await tabsViewBasePage.navigateToSample("swipe-enabled");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-tabs-position`, async function () {
await tabsViewBasePage.navigateToSample("tabs-position");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});

View File

@ -0,0 +1,254 @@
import { nsCapabilities, createDriver, AppiumDriver } from "nativescript-dev-appium";
import { TabsViewBasePage } from "./tabs-view-base-page";
import { assert } from "chai";
import { setImageName } from "../../../helpers/image-helper";
const suite = "tab-navigation";
const spec = "tabs";
const imagePrefix = `${suite}-${spec}`
describe(`${imagePrefix}-suite`, async function () {
let driver: AppiumDriver;
let tabsViewBasePage: TabsViewBasePage;
before(async function () {
nsCapabilities.testReporter.context = this;
driver = await createDriver();
await driver.restartApp();
tabsViewBasePage = new TabsViewBasePage(driver);
await tabsViewBasePage.initSuite();
});
after(async function () {
await tabsViewBasePage.endSuite();
});
beforeEach(async function () {
driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
driver.imageHelper.options = {
donNotAppendActualSuffixOnIntialImageCapture: true
};
});
afterEach(async function () {
if (this.currentTest.state === "failed") {
await driver.logTestArtifacts(this.currentTest.title);
await driver.resetApp();
await tabsViewBasePage.initSuite();
}
});
it(`${imagePrefix}-background-color`, async function () {
await tabsViewBasePage.navigateToSample("background-color");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
// not all css is applied.
it(`${imagePrefix}-color`, async function () {
await tabsViewBasePage.navigateToSample("color");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-font`, async function () {
await tabsViewBasePage.navigateToSample("font");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-font-icons`, async function () {
await tabsViewBasePage.navigateToSample("font-icons");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-highlight-color`, async function () {
await tabsViewBasePage.navigateToSample("highlight-color");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-icon-change`, async function () {
await tabsViewBasePage.navigateToSample("icon-change");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-icon-title-placment`, async function () {
await tabsViewBasePage.navigateToSample("icon-title-placement");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-issue-5470`, async function () {
await tabsViewBasePage.navigateToSample("issue-5470");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-strip-item`, async function () {
await tabsViewBasePage.navigateToSample("strip-item");
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-android-swipe-disabled`, async function () {
if (driver.isIOS) {
this.skip();
}
await tabsViewBasePage.navigateToSample("swipe-disabled");
await tabsViewBasePage.swipeRightToLeft();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-swipe`, async function () {
await tabsViewBasePage.navigateToSample("tabs");
await tabsViewBasePage.swipeRightToLeft();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.swipeRightToLeft();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
/*
* Bug
*/
it(`${imagePrefix}-binding-add-items`, async function () {
this.skip();
await tabsViewBasePage.navigateToSample("tabs-binding");
await driver.imageHelper.compareScreen();
const addTabBtn = await driver.waitForElement("add-tab");
const addTabBtnRect = await addTabBtn.getActualRectangle();
const clickAddTab = async () => {
await driver.clickPoint((addTabBtnRect.y + addTabBtnRect.width) / 2, (addTabBtnRect.x + addTabBtnRect.height) / 2);
};
await clickAddTab();
await driver.imageHelper.compareScreen();
await clickAddTab();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.refreshTabItems();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
/*
* Bug
*/
it(`${imagePrefix}-binding-remove-items`, async function () {
this.skip();
await tabsViewBasePage.navigateToSample("tabs-binding");
await driver.imageHelper.compareScreen();
const removeTabBtn = await driver.waitForElement("remove-last-tab");
const removeTabBtnRect = await removeTabBtn.getActualRectangle();
const clickRemoveTab = async () => {
await driver.clickPoint((removeTabBtnRect.y + removeTabBtnRect.width) / 2, (removeTabBtnRect.x + removeTabBtnRect.height) / 2);
};
await clickRemoveTab();
await driver.imageHelper.compareScreen();
// Remove all items.
await clickRemoveTab();
await driver.imageHelper.compareScreen();
// add items
const addTabBtn = await driver.waitForElement("add-tab");
await addTabBtn.tap();
await addTabBtn.tap();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.refreshTabItems();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-text-transform`, async function () {
await tabsViewBasePage.navigateToSample("text-transform");
await driver.imageHelper.compareScreen();
await tabsViewBasePage.refreshTabItems();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});

View File

@ -1,15 +1,24 @@
import { AppiumDriver } from "nativescript-dev-appium";
import { PageObjectBaseModel } from "../../../page-object-base-model";
import { ElementCacheStrategy } from "../../../helpers/navigation-helper";
import { TabNavigationBasePage } from "../tab-navigation-base-page";
export class TabsViewBasePage extends PageObjectBaseModel {
constructor(_driver: AppiumDriver, elementCacheStrategy?: ElementCacheStrategy) {
super(_driver, ["tabs"], elementCacheStrategy);
export class TabsViewBasePage extends TabNavigationBasePage {
private readonly mainWidgetXPath: string;
constructor(_driver: AppiumDriver) {
super(_driver, ["tabs"]);
this.mainWidgetXPath = this._driver.isIOS ?
`//XCUIElementTypeOther[@name="tabNavigation"]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeCollectionView`
: `//android.view.ViewGroup[@content-desc="tabNavigation"]/android.widget.HorizontalScrollView/android.widget.LinearLayout`;
}
async init(subSuiteName: string) {
this._naviagtionLinks.push(subSuiteName);
await super.initSuite();
async getItems() {
const items = await this._driver.findElementsByXPath(`${this.mainWidgetXPath}/*`);
if (this._driver.isIOS) {
items.shift();
}
return items;
}
async mainWidget() {
return await this._driver.findElementByXPath(this.mainWidgetXPath);
}
}