javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: updated dynamic color tests

Browse Source
This commit is contained in:
Vasko
2020-03-31 16:12:30 +03:00
parent 0a052153d5
commit 35bed137f4
8 changed files with 116 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
View File

@@ -10,14 +10,17 @@ TabStripItem:active {
background-color: magenta;
}
.defaultCssClass {
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.newTabsClass {
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;

31
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
View File

@@ -6,5 +6,34 @@ export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
bottomNavigation.tabStrip.className = "newTabsClass";
switch (bottomNavigation.tabStrip.className) {
case "tabsClass0":
bottomNavigation.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
bottomNavigation.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
bottomNavigation.tabStrip.className = "tabsClass0";
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
const tabStripItem0 = bottomNavigation.tabStrip.items[0];
const tabStripItem1 = bottomNavigation.tabStrip.items[1];
const tabStripItem2 = bottomNavigation.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}

3
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
View File

@@ -2,10 +2,11 @@
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>

7
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
View File

@@ -10,14 +10,17 @@ TabStripItem:active {
background-color: magenta;
}
.defaultCssClass {
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.newTabsClass {
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;

33
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
View File

@@ -4,7 +4,36 @@ import { Tabs } from "tns-core-modules/ui/tabs";
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <Tabs>(page.getViewById("bottomNavigation"));
const tabs = <Tabs>(page.getViewById("tabs"));
bottomNavigation.tabStrip.className = "newTabsClass";
switch (tabs.tabStrip.className) {
case "tabsClass0":
tabs.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
tabs.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
tabs.tabStrip.className = "tabsClass0";
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>(page.getViewById("tabs"));
const tabStripItem0 = tabs.tabStrip.items[0];
const tabStripItem1 = tabs.tabStrip.items[1];
const tabStripItem2 = tabs.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}

5
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
View File

@@ -2,10 +2,11 @@
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<Tabs automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<Tabs automationText="tabs" id="tabs" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>

21
e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
View File

@@ -335,17 +335,36 @@ describe(`${suite}-${spec}-suite`, async function () {
await bottomNavigationBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await changeIconSource.click();
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});

21
e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
View File

@@ -334,17 +334,36 @@ describe(`${imagePrefix}-suite`, async function () {
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await changeIconSource.click();
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});