From 1d12136816de69d560e5c8dc8fba58f870a99682 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <vasil.chimev@gmail.com>
Date: Tue, 13 Aug 2019 16:10:21 +0300
Subject: [PATCH] feat: apply styles when adding them to the application scope
 (#7652)

---
 e2e/ui-tests-app/app/app.css                  |  4 +-
 e2e/ui-tests-app/app/button/main-page.ts      |  1 -
 e2e/ui-tests-app/app/button/styles-page.ts    |  4 --
 e2e/ui-tests-app/app/css/main-page.ts         |  1 +
 .../app/{button => css}/styles-page.css       |  0
 e2e/ui-tests-app/app/css/styles-page.ts       | 10 +++++
 .../app/{button => css}/styles-page.xml       |  4 +-
 .../e2e/suites/css/styles/styles-page.ts      | 21 ++++++++++
 .../e2e/suites/css/styles/styles.e2e-spec.ts  | 41 +++++++++++++++++++
 .../application/application-common.ts         |  4 --
 .../application/application.android.ts        | 11 ++++-
 tns-core-modules/application/application.d.ts |  4 ++
 .../application/application.ios.ts            | 15 +++++--
 13 files changed, 103 insertions(+), 17 deletions(-)
 delete mode 100644 e2e/ui-tests-app/app/button/styles-page.ts
 rename e2e/ui-tests-app/app/{button => css}/styles-page.css (100%)
 create mode 100644 e2e/ui-tests-app/app/css/styles-page.ts
 rename e2e/ui-tests-app/app/{button => css}/styles-page.xml (82%)
 create mode 100644 e2e/ui-tests-app/e2e/suites/css/styles/styles-page.ts
 create mode 100644 e2e/ui-tests-app/e2e/suites/css/styles/styles.e2e-spec.ts

diff --git a/e2e/ui-tests-app/app/app.css b/e2e/ui-tests-app/app/app.css
index 7eac464ba..4140a0863 100644
--- a/e2e/ui-tests-app/app/app.css
+++ b/e2e/ui-tests-app/app/app.css
@@ -1,5 +1,5 @@
 #app {
-    background-color: lightblue;
+    background-color: lightyellow;
 }
 
 .ui-tests-app-issue-1639-red {
@@ -20,4 +20,4 @@
 .ui-tests-app-issue-1639-yellow {
     color: yellow;
     margin-left: 30;
-}
\ No newline at end of file
+}
diff --git a/e2e/ui-tests-app/app/button/main-page.ts b/e2e/ui-tests-app/app/button/main-page.ts
index c183ed765..ecb25dc25 100644
--- a/e2e/ui-tests-app/app/button/main-page.ts
+++ b/e2e/ui-tests-app/app/button/main-page.ts
@@ -13,7 +13,6 @@ export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266-page");
     examples.set("button-border", "button/button-border-page");
-    examples.set("styles", "button/styles-page");
     examples.set("background", "button/background-page");
     examples.set("border-playground", "button/border-playground-page");
     examples.set("issue-4287", "button/issue-4287-page");
diff --git a/e2e/ui-tests-app/app/button/styles-page.ts b/e2e/ui-tests-app/app/button/styles-page.ts
deleted file mode 100644
index 05b053e62..000000000
--- a/e2e/ui-tests-app/app/button/styles-page.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function onLoaded(args) {
-    var page = args.object;
-    page.addCss("#property { background-color: lightsalmon; }");
-}
\ No newline at end of file
diff --git a/e2e/ui-tests-app/app/css/main-page.ts b/e2e/ui-tests-app/app/css/main-page.ts
index 6a8f5f3e1..28a135d95 100644
--- a/e2e/ui-tests-app/app/css/main-page.ts
+++ b/e2e/ui-tests-app/app/css/main-page.ts
@@ -45,6 +45,7 @@ export function loadExamples() {
     examples.set("background-shorthand", "css/background-shorthand-page");
     examples.set("background-image-linear-gradient", "css/background-image-linear-gradient-page");
     examples.set("background-image", "css/background-image-page");
+    examples.set("styles", "css/styles-page");
 
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/button/styles-page.css b/e2e/ui-tests-app/app/css/styles-page.css
similarity index 100%
rename from e2e/ui-tests-app/app/button/styles-page.css
rename to e2e/ui-tests-app/app/css/styles-page.css
diff --git a/e2e/ui-tests-app/app/css/styles-page.ts b/e2e/ui-tests-app/app/css/styles-page.ts
new file mode 100644
index 000000000..51b2b958d
--- /dev/null
+++ b/e2e/ui-tests-app/app/css/styles-page.ts
@@ -0,0 +1,10 @@
+import { addCss } from "tns-core-modules/application";
+
+export function onLoaded(args) {
+    var page = args.object;
+    page.addCss("#property { background-color: lightsalmon; }");
+}
+
+export function onTap() {
+    addCss("#app { background-color: lightblue; }");
+}
diff --git a/e2e/ui-tests-app/app/button/styles-page.xml b/e2e/ui-tests-app/app/css/styles-page.xml
similarity index 82%
rename from e2e/ui-tests-app/app/button/styles-page.xml
rename to e2e/ui-tests-app/app/css/styles-page.xml
index ab51df754..4cc225d57 100644
--- a/e2e/ui-tests-app/app/button/styles-page.xml
+++ b/e2e/ui-tests-app/app/css/styles-page.xml
@@ -1,9 +1,9 @@
 <Page loaded="onLoaded">
   <WrapLayout>
-    <Button id="app" automationText="app" text="app" />
+    <Button id="app" automationText="app" text="app" tap="onTap" />
     <Button id="inline" automationText="inline" text="inline" style="background-color: lightgreen;" />
     <Button id="page" automationText="page" text="page" />
     <Button id="property" automationText="property" text="property" />
     <Button id="import" automationText="import" text="import" />
   </WrapLayout>
-</Page>
\ No newline at end of file
+</Page>
diff --git a/e2e/ui-tests-app/e2e/suites/css/styles/styles-page.ts b/e2e/ui-tests-app/e2e/suites/css/styles/styles-page.ts
new file mode 100644
index 000000000..61fa8404a
--- /dev/null
+++ b/e2e/ui-tests-app/e2e/suites/css/styles/styles-page.ts
@@ -0,0 +1,21 @@
+import { AppiumDriver, logInfo } from "nativescript-dev-appium";
+
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+
+export class StylesPage extends PageObjectBaseModel {
+
+    private readonly app = "app";
+
+    constructor(_driver: AppiumDriver) {
+        super(_driver, ["css", "styles"]);
+    }
+
+    async btnApp() {
+        return this._driver.waitForElement(this.app);
+    }
+
+    async tapAppBtn() {
+        await (await this.btnApp()).tap();
+        logInfo(`Tap on '${this.app}' button.`);
+    }
+}
diff --git a/e2e/ui-tests-app/e2e/suites/css/styles/styles.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/css/styles/styles.e2e-spec.ts
new file mode 100644
index 000000000..b74644ec4
--- /dev/null
+++ b/e2e/ui-tests-app/e2e/suites/css/styles/styles.e2e-spec.ts
@@ -0,0 +1,41 @@
+import { assert } from "chai";
+import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
+
+import { setImageName } from "../../../helpers/image-helper";
+import { StylesPage } from "./styles-page";
+
+const suite = "css";
+const spec = "styles";
+
+describe(`${suite}-${spec}-suite`, () => {
+    let driver: AppiumDriver;
+    let stylesPage: StylesPage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        stylesPage = new StylesPage(driver);
+        await stylesPage.initSuite();
+    });
+
+    after(async function () {
+        await stylesPage.endSuite();
+    });
+
+    beforeEach(async function () {
+        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+        }
+    });
+
+    it(`${suite}-${spec}-apply`, async function () {
+        await stylesPage.tapAppBtn();
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+    });
+});
diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
index c6bda6fe4..fc06b8afd 100644
--- a/tns-core-modules/application/application-common.ts
+++ b/tns-core-modules/application/application-common.ts
@@ -117,10 +117,6 @@ export function loadAppCss(): void {
     }
 }
 
-export function addCss(cssText: string): void {
-    events.notify(<CssChangedEventData>{ eventName: "cssChanged", object: app, cssText: cssText });
-}
-
 global.__onUncaughtError = function (error: NativeScriptError) {
     events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });
 };
diff --git a/tns-core-modules/application/application.android.ts b/tns-core-modules/application/application.android.ts
index c5fe93b2a..79f542c28 100644
--- a/tns-core-modules/application/application.android.ts
+++ b/tns-core-modules/application/application.android.ts
@@ -1,7 +1,8 @@
 import {
     AndroidActivityBundleEventData, AndroidActivityEventData, ApplicationEventData, OrientationChangedEventData,
     AndroidApplication as AndroidApplicationDefinition, AndroidActivityNewIntentEventData,
-    AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData
+    AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData,
+    CssChangedEventData
 } from ".";
 
 import {
@@ -151,6 +152,14 @@ export function run(entry?: NavigationEntry | string) {
     _start(entry);
 }
 
+export function addCss(cssText: string): void {
+    notify(<CssChangedEventData>{ eventName: "cssChanged", object: androidApp, cssText: cssText });
+    const rootView = getRootView();
+    if (rootView) {
+        rootView._onCssStateChange();
+    }
+}
+
 const CALLBACKS = "_callbacks";
 
 export function _resetRootView(entry?: NavigationEntry | string) {
diff --git a/tns-core-modules/application/application.d.ts b/tns-core-modules/application/application.d.ts
index 1f0079601..c6a08f56c 100644
--- a/tns-core-modules/application/application.d.ts
+++ b/tns-core-modules/application/application.d.ts
@@ -168,6 +168,10 @@ export function getCssFileName(): string;
  */
 export function loadAppCss();
 
+/**
+* Adds new values to the application styles.
+* @param cssText - A valid styles which will be added to the current application styles.
+*/
 export function addCss(cssText: string): void;
 
 /**
diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts
index 008ccefe7..b490b35bb 100644
--- a/tns-core-modules/application/application.ios.ts
+++ b/tns-core-modules/application/application.ios.ts
@@ -1,9 +1,10 @@
 import {
     iOSApplication as IOSApplicationDefinition,
-    LaunchEventData,
     ApplicationEventData,
-    OrientationChangedEventData,
-    LoadAppCSSEventData
+    CssChangedEventData,
+    LaunchEventData,
+    LoadAppCSSEventData,
+    OrientationChangedEventData
 } from ".";
 
 import {
@@ -349,6 +350,14 @@ export function run(entry?: string | NavigationEntry) {
     _start(entry);
 }
 
+export function addCss(cssText: string): void {
+    notify(<CssChangedEventData>{ eventName: "cssChanged", object: <any>iosApp, cssText: cssText });
+    const rootView = getRootView();
+    if (rootView) {
+        rootView._onCssStateChange();
+    }
+}
+
 export function _resetRootView(entry?: NavigationEntry | string) {
     createRootFrame.value = false;
     mainEntry = typeof entry === "string" ? { moduleName: entry } : entry;