From b9d7d6bb6294c0b658b7c5a833a9d3197530ba61 Mon Sep 17 00:00:00 2001 From: Vasil Chimev Date: Thu, 13 Dec 2018 07:34:37 +0200 Subject: [PATCH] test(HMR): apply changes in application styles at runtime --- tests/app/app/app-new.css | 3 + tests/app/app/app-new.scss | 3 + tests/app/app/application.css | 3 + tests/app/app/mainPage.ts | 8 +- tests/app/app/mainPage.xml | 2 +- tests/app/livesync/livesync-tests.ts | 120 +++++++++++++++++++++++++++ tests/app/testRunner.ts | 9 +- 7 files changed, 142 insertions(+), 6 deletions(-) create mode 100644 tests/app/app/app-new.css create mode 100644 tests/app/app/app-new.scss create mode 100644 tests/app/app/application.css create mode 100644 tests/app/livesync/livesync-tests.ts diff --git a/tests/app/app/app-new.css b/tests/app/app/app-new.css new file mode 100644 index 000000000..2b3afb687 --- /dev/null +++ b/tests/app/app/app-new.css @@ -0,0 +1,3 @@ +Button, Label { + color: green; +} diff --git a/tests/app/app/app-new.scss b/tests/app/app/app-new.scss new file mode 100644 index 000000000..2b3afb687 --- /dev/null +++ b/tests/app/app/app-new.scss @@ -0,0 +1,3 @@ +Button, Label { + color: green; +} diff --git a/tests/app/app/application.css b/tests/app/app/application.css new file mode 100644 index 000000000..119b358a7 --- /dev/null +++ b/tests/app/app/application.css @@ -0,0 +1,3 @@ +Button, Label { + color: black; +} diff --git a/tests/app/app/mainPage.ts b/tests/app/app/mainPage.ts index 70e2ce2e7..4c16fca02 100644 --- a/tests/app/app/mainPage.ts +++ b/tests/app/app/mainPage.ts @@ -2,6 +2,8 @@ import * as trace from "tns-core-modules/trace"; import * as tests from "../testRunner"; +let executeTests = true; + trace.enable(); trace.addCategories(trace.categories.Test + "," + trace.categories.Error); @@ -21,6 +23,8 @@ function runTests() { export function onNavigatedTo(args) { args.object.off(Page.loadedEvent, onNavigatedTo); - - runTests(); + if (executeTests) { + executeTests = false; + runTests(); + } } diff --git a/tests/app/app/mainPage.xml b/tests/app/app/mainPage.xml index bee9a71d8..7cead486d 100644 --- a/tests/app/app/mainPage.xml +++ b/tests/app/app/mainPage.xml @@ -1,3 +1,3 @@ - diff --git a/tests/app/livesync/livesync-tests.ts b/tests/app/livesync/livesync-tests.ts new file mode 100644 index 000000000..8916d8338 --- /dev/null +++ b/tests/app/livesync/livesync-tests.ts @@ -0,0 +1,120 @@ +import * as app from "tns-core-modules/application/application"; +import * as frame from "tns-core-modules/ui/frame"; +import * as helper from "../ui/helper"; +import * as TKUnit from "../TKUnit"; +import { Button } from "tns-core-modules/ui/button/button"; +import { Color } from "tns-core-modules/color"; +import { Page } from "tns-core-modules/ui/page"; +import { Label } from "tns-core-modules/ui/label/label"; +import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; + +const appCssFileName = "./app/application.css"; +const appNewCssFileName = "./app/app-new.css"; +const appNewScssFileName = "./app/app-new.scss"; +const appJsFileName = "./app/app.js"; +const appTsFileName = "./app/app.ts"; +const mainPageCssFileName = "./app/main-page.css"; +const mainPageHtmlFileName = "./app/main-page.html"; +const mainPageXmlFileName = "./app/main-page.xml"; + +const green = new Color("green"); + +const mainPageFactory = function (): Page { + const page = new Page(); + const stack = new StackLayout(); + const label = new Label(); + label.id = "label"; + label.text = "label"; + stack.addChild(label); + page.content = stack; + return page; +} + +const pageFactory = function (): Page { + const page = new Page(); + const stack = new StackLayout(); + const button = new Button(); + button.id = "button"; + button.text = "button"; + stack.addChild(button); + page.content = stack; + return page; +} + +export function test_onLiveSync_HmrContext_AppStyle_AppNewCss() { + _test_onLiveSync_HmrContext_AppStyle(appNewCssFileName); +} + +export function test_onLiveSync_HmrContext_AppStyle_AppNewScss() { + _test_onLiveSync_HmrContext_AppStyle(appNewScssFileName); +} + +export function test_onLiveSync_HmrContext_ContextUndefined() { + _test_onLiveSync_HmrContext({ type: undefined, module: undefined }); +} + +export function test_onLiveSync_HmrContext_ModuleUndefined() { + _test_onLiveSync_HmrContext({ type: "script", module: undefined }); +} + +export function test_onLiveSync_HmrContext_Script_AppJs() { + _test_onLiveSync_HmrContext({ type: "script", module: appJsFileName }); +} + +export function test_onLiveSync_HmrContext_Script_AppTs() { + _test_onLiveSync_HmrContext({ type: "script", module: appTsFileName }); +} + +export function test_onLiveSync_HmrContext_Style_MainPageCss() { + _test_onLiveSync_HmrContext({ type: "style", module: mainPageCssFileName }); +} + +export function test_onLiveSync_HmrContext_Markup_MainPageHtml() { + _test_onLiveSync_HmrContext({ type: "markup", module: mainPageHtmlFileName }); +} + +export function test_onLiveSync_HmrContext_Markup_MainPageXml() { + _test_onLiveSync_HmrContext({ type: "markup", module: mainPageXmlFileName }); +} + +export function setUpModule() { + helper.navigate(mainPageFactory); +} + +export function tearDown() { + app.setCssFileName(appCssFileName); +} + +function _test_onLiveSync_HmrContext_AppStyle(styleFileName: string) { + const pageBeforeNavigation = helper.getCurrentPage(); + + helper.navigateWithHistory(pageFactory); + app.setCssFileName(styleFileName); + + const pageBeforeLiveSync = helper.getCurrentPage(); + global.__onLiveSync({ type: "style", module: styleFileName }); + + const pageAfterLiveSync = helper.getCurrentPage(); + TKUnit.waitUntilReady(() => pageAfterLiveSync.getViewById("button").style.color.toString() === green.toString()); + + TKUnit.assertTrue(pageAfterLiveSync.frame.canGoBack(), "App styles NOT applied - livesync navigation executed!"); + TKUnit.assertEqual(pageAfterLiveSync, pageBeforeLiveSync, "Pages are different - livesync navigation executed!"); + TKUnit.assertTrue(pageAfterLiveSync._cssState.isSelectorsLatestVersionApplied(), "Latest selectors version NOT applied!"); + + helper.goBack(); + + const pageAfterNavigationBack = helper.getCurrentPage(); + TKUnit.assertEqual(pageAfterNavigationBack.getViewById("label").style.color, green, "App styles NOT applied on back navigation!"); + TKUnit.assertEqual(pageBeforeNavigation, pageAfterNavigationBack, "Pages are different - livesync navigation executed!"); + TKUnit.assertTrue(pageAfterNavigationBack._cssState.isSelectorsLatestVersionApplied(), "Latest selectors version is NOT applied!"); +} + +function _test_onLiveSync_HmrContext(context: { type, module }) { + helper.navigateWithHistory(pageFactory); + global.__onLiveSync({ type: context.type, module: context.module }); + + TKUnit.waitUntilReady(() => !!frame.topmost()); + const topmostFrame = frame.topmost(); + TKUnit.waitUntilReady(() => topmostFrame.currentPage && topmostFrame.currentPage.isLoaded && !topmostFrame.canGoBack()); + TKUnit.assertTrue(topmostFrame.currentPage.getViewById("label").isLoaded); +} \ No newline at end of file diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index a119642a0..b96bde95d 100644 --- a/tests/app/testRunner.ts +++ b/tests/app/testRunner.ts @@ -153,9 +153,6 @@ allTests["STYLE-PROPERTIES"] = stylePropertiesTests; import * as frameTests from "./ui/frame/frame-tests"; allTests["FRAME"] = frameTests; -import * as tabViewRootTests from "./ui/tab-view/tab-view-root-tests"; -allTests["TAB-VIEW-ROOT"] = tabViewRootTests; - import * as viewTests from "./ui/view/view-tests"; allTests["VIEW"] = viewTests; @@ -255,6 +252,12 @@ allTests["SEARCH-BAR"] = searchBarTests; import * as navigationTests from "./navigation/navigation-tests"; allTests["NAVIGATION"] = navigationTests; +import * as livesyncTests from "./livesync/livesync-tests"; +allTests["LIVESYNC"] = livesyncTests; + +import * as tabViewRootTests from "./ui/tab-view/tab-view-root-tests"; +allTests["TAB-VIEW-ROOT"] = tabViewRootTests; + import * as resetRootViewTests from "./ui/root-view/reset-root-view-tests"; allTests["RESET-ROOT-VIEW"] = resetRootViewTests;