From 35bed137f42790e1d4559cc40b565c4438f79704 Mon Sep 17 00:00:00 2001
From: Vasko <v.trifonov@gmail.com>
Date: Tue, 31 Mar 2020 16:12:30 +0300
Subject: [PATCH] test: updated dynamic color tests

---
 .../dynamic-color-change-page.css             |  7 ++--
 .../dynamic-color-change-page.ts              | 31 ++++++++++++++++-
 .../dynamic-color-change-page.xml             |  3 +-
 .../app/tabs/dynamic-color-change-page.css    |  7 ++--
 .../app/tabs/dynamic-color-change-page.ts     | 33 +++++++++++++++++--
 .../app/tabs/dynamic-color-change-page.xml    |  5 +--
 .../bottom-navigation.e2e-spec.ts             | 21 +++++++++++-
 .../tabs/tabs-tests.e2e-spec.ts               | 21 +++++++++++-
 8 files changed, 116 insertions(+), 12 deletions(-)

diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
index 46d672d3e..7b8624417 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
@@ -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;
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
index a815c39a3..30fa51567 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
@@ -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;
 }
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
index f76227b01..989fab9ed 100644
--- a/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
+++ b/e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
@@ -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>
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
index 46d672d3e..7b8624417 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
@@ -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;
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
index 3e22ffbc3..bf15cc6a2 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
@@ -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;
 }
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
index 8001f3494..7cea6c5ce 100644
--- a/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
+++ b/e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
@@ -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>
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
index 973c9bacd..beecb78bb 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
@@ -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();
     });
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
index b5f334468..ec078107b 100644
--- a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
+++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
@@ -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();
     });