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

Merge branch 'master' into master

Browse Source
This commit is contained in:
Manol Donev
2019-06-28 11:19:49 +03:00
committed by GitHub
parent a14d2ee720 43534502f9
commit 6078126d93
38 changed files with 420 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/launch.json vendored
View File

@@ -66,10 +66,8 @@
"platform": "android",
"appRoot": "${workspaceRoot}/tests",
"sourceMaps": true,
"stopOnEntry": true,
"watch": true,
// "tnsArgs": [
// "--debug-brk"
// ]
},
// {
// "name": "Test on Android",

7
e2e/ui-tests-app/app/bottom-navigation/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
BottomNavigation {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

6
e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml
View File

@@ -3,7 +3,7 @@
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="background-color: green;">
<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
@@ -11,13 +11,13 @@
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>

16
e2e/ui-tests-app/app/bottom-navigation/color-page.xml
View File

@@ -4,20 +4,20 @@
<BottomNavigation style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts
View File

@@ -1,7 +1,7 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;
const bottomNav = <BottomNavigation>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) {

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View File

@@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar>

6
e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml
View File

@@ -11,19 +11,19 @@
<TabContentItem>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>

2
e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml
View File

@@ -23,5 +23,5 @@
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>

7
e2e/ui-tests-app/app/tabs/background-color-page.css Normal file
View File

@@ -0,0 +1,7 @@
Tabs {
background-color: gold;
}
TabStrip {
background-color: skyblue;
}

22
e2e/ui-tests-app/app/tabs/background-color-page.xml
View File

@@ -1,24 +1,24 @@
<Page class="page">
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
<ActionBar title="Tabs background-color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="background-color: green;">
<Tabs>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

22
e2e/ui-tests-app/app/tabs/color-page.xml
View File

@@ -1,23 +1,23 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
<ActionBar title="Tabs color" icon="" class="action-bar">
</ActionBar>
<BottomNavigation style="color: green;">
<Tabs style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

10
e2e/ui-tests-app/app/tabs/default-page.ts
View File

@@ -1,17 +1,17 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 0;
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
const tabsNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 1;
tabsNav.selectedIndex = 1;
}

4
e2e/ui-tests-app/app/tabs/default-page.xml
View File

@@ -1,6 +1,6 @@
<Page>
<ActionBar title="BottomNavigation" icon="" class="action-bar">
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
@@ -18,7 +18,7 @@
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="bottomNav">
<Tabs id="tabsNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>

8
e2e/ui-tests-app/app/tabs/icon-change-page.ts
View File

@@ -1,14 +1,14 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;
const tabsNav = <Tabs>args.object;
const newItem = bottomNav.tabStrip.items[args.newIndex];
const newItem = tabsNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = "res://icon";
}
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
const oldItem = tabsNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = "res://testlogo";
}

8
e2e/ui-tests-app/app/tabs/icon-change-page.xml
View File

@@ -1,8 +1,8 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="Tabs icon change" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<Tabs id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>
@@ -19,5 +19,5 @@
<Label text="second tab"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

30
e2e/ui-tests-app/app/tabs/icon-title-placement-page.xml
View File

@@ -1,30 +1,30 @@
<Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
<ActionBar title="Tabs icon title placement" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Title and icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only icon" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
<GridLayout>
<Label text="Only title" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

8
e2e/ui-tests-app/app/tabs/issue-5470-page.xml
View File

@@ -1,9 +1,9 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
<ActionBar title="Tabs issue 5470" icon="" class="action-bar">
</ActionBar>
<BottomNavigation>
<Tabs>
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
@@ -22,6 +22,6 @@
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Tabs>
</Page>

14
e2e/ui-tests-app/app/tabs/main-page.ts
View File

@@ -11,14 +11,14 @@ export function pageLoaded(args: EventData) {
export function loadExamples() {
const examples = new Map<string, string>();
examples.set("default", "tabs/default-page");
examples.set("issue-5470", "tabs/issue-5470-page");
examples.set("tabs", "tabs/tabs-page");
examples.set("issue-5470", "tabs/issue-5470");
examples.set("background-color", "tabs/background-color-page");
examples.set("color", "tabs/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("tabs-position", "tabs/tabs-position-page");
examples.set("color", "tabs/color");
examples.set("icon-title-placement", "tabs/icon-title-placement");
examples.set("icon-change", "tabs/icon-change");
examples.set("swipe-enabled", "tabs/swipe-enabled");
examples.set("tabs-position", "tabs/tabs-position");
return examples;
}

17
e2e/ui-tests-app/app/tabs/tabs-page.ts Normal file
View File

@@ -0,0 +1,17 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 1;
}

89
e2e/ui-tests-app/app/tabs/tabs-page.xml Normal file
View File

@@ -0,0 +1,89 @@
<Page>
<ActionBar title="Tabs" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->
<!-- w/ TabStrip -->
<Tabs id="tabsNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<!-- <TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem> -->
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<!-- <TabStripItem title="Music" iconSource="res://icon"></TabStripItem> -->
</TabStrip>
<TabContentItem>
<StackLayout backgroundColor="blue">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="red">
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout backgroundColor="green">
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<!-- <TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem> -->
</Tabs>
<!-- =============================================================================================== -->
<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->
<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>

5
tests/app/button-page.xml
View File

@@ -1,5 +0,0 @@
<Page loaded="onLoaded">
<StackLayout>
<Button id="button" text="button"></Button>
</StackLayout>
</Page>

0
tests/app/app-new-page.css → tests/app/livesync/app-new-page.css
View File

0
tests/app/app-new-sass-page.scss → tests/app/livesync/app-new-scss-page.scss
View File

0
tests/app/application-page.css → tests/app/livesync/application-page.css
View File

0
tests/app/button-page.css → tests/app/livesync/button-css-page.css
View File

3
tests/app/livesync/button-scss-page.scss Normal file
View File

@@ -0,0 +1,3 @@
Button {
color: green;
}

3
tests/app/livesync/livesync-button-page.scss
View File

@@ -1,3 +0,0 @@
Button {
color: cyan;
}

141
tests/app/livesync/livesync-tests.ts
View File

@@ -3,40 +3,57 @@ import * as TKUnit from "../tk-unit";
import * as app from "tns-core-modules/application/application";
import * as frame from "tns-core-modules/ui/frame";
import * as fs from "tns-core-modules/file-system";
import { Color } from "tns-core-modules/color";
import { createViewFromEntry } from "tns-core-modules/ui/builder";
import { Page } from "tns-core-modules/ui/page";
import { Frame } from "tns-core-modules/ui/frame";
const appCssFileName = "/application-page.css";
const appNewCssFileName = "app-new-page.css";
const appNewScssFileName = "app-new-sass-page.css";
const buttonCssFileName = "/button-page.css";
const LIVESYNC_FOLDER = "livesync/";
const buttonPageModuleName = "livesync/livesync-button-page";
const buttonHtmlPageFileName = "./livesync/livesync-button-page.html";
const buttonXmlPageFileName = "./livesync/livesync-button-page.xml";
const buttonJsPageFileName = "./livesync/livesync-button-page.js";
const buttonTsPageFileName = "./livesync/livesync-button-page.ts";
const buttonScssPageFileName = "./livesync/livesync-button-page.scss";
const labelPageModuleName = "livesync/livesync-label-page";
const appCssFileName = `${LIVESYNC_FOLDER}application-page.css`;
const appNewCssFileName = `${LIVESYNC_FOLDER}app-new-page.css`;
// `.scss` module registers in webpack as `.css`
// https://github.com/NativeScript/NativeScript/blob/5.4.2/tns-core-modules/globals/globals.ts#L32-L33
const appNewScssFileNameAsCss = `${LIVESYNC_FOLDER}app-new-scss-page.css`;
const appNewScssFileName = `${LIVESYNC_FOLDER}app-new-scss-page.scss`;
const buttonCssModuleName = `${LIVESYNC_FOLDER}button-css-page`;
const buttonScssModuleName = `${LIVESYNC_FOLDER}button-scss-page`;
const buttonCssFileName = `${LIVESYNC_FOLDER}button-css-page.css`;
const buttonScssFileName = `${LIVESYNC_FOLDER}button-scss-page.scss`;
const buttonPageModuleName = `${LIVESYNC_FOLDER}livesync-button-page`;
const buttonHtmlPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.html`;
const buttonXmlPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.xml`;
const buttonJsPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.js`;
const buttonTsPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.ts`;
const buttonScssPageFileName = `${LIVESYNC_FOLDER}livesync-button-page.scss`;
const labelPageModuleName = `${LIVESYNC_FOLDER}livesync-label-page`;
const green = new Color("green");
export function setUp() {
const labelPage = <Page>createViewFromEntry(({ moduleName: labelPageModuleName }));
helper.navigate(() => labelPage);
}
export function tearDown() {
app.setCssFileName(appCssFileName);
}
export function test_onLiveSync_ModuleContext_AppStyle_AppNewCss() {
_test_onLiveSync_ModuleContext_AppStyle(appNewCssFileName);
_test_onLiveSync_ModuleContext_AppStyle(appNewCssFileName, appNewCssFileName);
}
export function test_onLiveSync_ModuleContext_AppStyle_AppNewScss() {
_test_onLiveSync_ModuleContext_AppStyle(appNewScssFileName);
_test_onLiveSync_ModuleContext_AppStyle(appNewScssFileNameAsCss, appNewScssFileName);
}
export function test_onLiveSync_ModuleContext_ContextUndefined() {
export function test_onLiveSync_ModuleContext_Undefined() {
_test_onLiveSync_ModuleContext({ type: undefined, path: undefined });
}
export function test_onLiveSync_ModuleContext_ModuleUndefined() {
export function test_onLiveSync_ModuleContext_PathUndefined() {
_test_onLiveSync_ModuleContext({ type: "script", path: undefined });
}
@@ -49,7 +66,11 @@ export function test_onLiveSync_ModuleContext_Script_TsFile() {
}
export function test_onLiveSync_ModuleContext_Style_CssFile() {
_test_onLiveSync_ModuleContext_TypeStyle({ type: "style", path: fs.knownFolders.currentApp().path + buttonCssFileName });
_test_onLiveSync_ModuleContext_TypeStyle(buttonCssModuleName, buttonCssFileName);
}
export function test_onLiveSync_ModuleContext_Style_ScssFile() {
_test_onLiveSync_ModuleContext_TypeStyle(buttonScssModuleName, buttonScssFileName);
}
export function test_onLiveSync_ModuleContext_Markup_HtmlFile() {
@@ -60,14 +81,14 @@ export function test_onLiveSync_ModuleContext_Markup_XmlFile() {
_test_onLiveSync_ModuleReplace({ type: "markup", path: buttonXmlPageFileName });
}
export function test_onLiveSync_ModuleContext_Markup_Script_XmlFile() {
export function test_onLiveSync_ModuleContext_MarkupXml_ScriptTs_Files() {
_test_onLiveSync_ModuleReplace_Multiple([
{ type: "script", path: buttonTsPageFileName },
{ type: "markup", path: buttonXmlPageFileName }
]);
}
export function test_onLiveSync_ModuleContext_Markup_Script_Style_XmlFile() {
export function test_onLiveSync_ModuleContext_MarkupXml_ScriptTs_StyleScss_Files() {
_test_onLiveSync_ModuleReplace_Multiple([
{ type: "script", path: buttonTsPageFileName },
{ type: "markup", path: buttonXmlPageFileName },
@@ -75,14 +96,14 @@ export function test_onLiveSync_ModuleContext_Markup_Script_Style_XmlFile() {
]);
}
export function test_onLiveSync_ModuleContext_Markup_Script_HtmlFile() {
export function test_onLiveSync_ModuleContext_MarkupHtml_ScriptTs_Files() {
_test_onLiveSync_ModuleReplace_Multiple([
{ type: "script", path: buttonTsPageFileName },
{ type: "markup", path: buttonHtmlPageFileName }
]);
}
export function test_onLiveSync_ModuleContext_Markup_Script_Style_HtmlFile() {
export function test_onLiveSync_ModuleContext_MarkupHtml_ScriptTs_StyleScss_Files() {
_test_onLiveSync_ModuleReplace_Multiple([
{ type: "script", path: buttonTsPageFileName },
{ type: "markup", path: buttonHtmlPageFileName },
@@ -90,23 +111,14 @@ export function test_onLiveSync_ModuleContext_Markup_Script_Style_HtmlFile() {
]);
}
export function setUp() {
const labelPage = <Page>createViewFromEntry(({ moduleName: labelPageModuleName }));
helper.navigate(() => labelPage);
}
export function tearDown() {
app.setCssFileName(fs.knownFolders.currentApp().path + appCssFileName);
}
function _test_onLiveSync_ModuleContext_AppStyle(styleFileName: string) {
function _test_onLiveSync_ModuleContext_AppStyle(appStyleFileName: string, livesyncStyleFileName: string) {
const pageBeforeNavigation = helper.getCurrentPage();
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
app.setCssFileName(fs.knownFolders.currentApp().path + "/" + styleFileName);
app.setCssFileName(appStyleFileName);
const pageBeforeLiveSync = helper.getCurrentPage();
global.__onLiveSync({ type: "style", path: fs.knownFolders.currentApp().path + "/" + styleFileName });
livesync({ type: "style", path: livesyncStyleFileName });
const pageAfterLiveSync = helper.getCurrentPage();
TKUnit.waitUntilReady(() => pageAfterLiveSync.getViewById("button").style.color.toString() === green.toString());
@@ -121,10 +133,10 @@ function _test_onLiveSync_ModuleContext_AppStyle(styleFileName: string) {
TKUnit.assertTrue(pageAfterNavigationBack._cssState.isSelectorsLatestVersionApplied(), "Latest selectors version is NOT applied!");
}
function _test_onLiveSync_ModuleContext(context: { type, path }) {
function _test_onLiveSync_ModuleContext(context: ModuleContext) {
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
global.__onLiveSync({ type: context.type, path: context.path });
livesync({ type: context.type, path: context.path });
TKUnit.waitUntilReady(() => !!frame.topmost());
const topmostFrame = frame.topmost();
@@ -132,12 +144,12 @@ function _test_onLiveSync_ModuleContext(context: { type, path }) {
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("label").isLoaded);
}
function _test_onLiveSync_ModuleReplace(context: { type, path }) {
function _test_onLiveSync_ModuleReplace(context: ModuleContext) {
const pageBeforeNavigation = helper.getCurrentPage();
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
global.__onLiveSync({ type: context.type, path: context.path });
livesync({ type: context.type, path: context.path });
const topmostFrame = frame.topmost();
waitUntilLivesyncComplete(topmostFrame);
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("button").isLoaded, "Button page is NOT loaded!");
@@ -151,37 +163,15 @@ function _test_onLiveSync_ModuleReplace(context: { type, path }) {
TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
}
function _test_onLiveSync_ModuleReplace_Multiple(context: { type: string, path: string }[]) {
const pageBeforeNavigation = helper.getCurrentPage();
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
context.forEach(item => {
global.__onLiveSync(item);
});
const topmostFrame = frame.topmost();
waitUntilLivesyncComplete(topmostFrame);
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("button").isLoaded, "Button page is NOT loaded!");
TKUnit.assertEqual(topmostFrame.backStack.length, 1, "Backstack is clean!");
TKUnit.assertTrue(topmostFrame.canGoBack(), "Can NOT go back!");
helper.goBack();
const pageAfterBackNavigation = helper.getCurrentPage();
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("label").isLoaded, "Label page is NOT loaded!");
TKUnit.assertEqual(topmostFrame.backStack.length, 0, "Backstack is NOT clean!");
TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
}
function _test_onLiveSync_ModuleContext_TypeStyle(context: { type, path }) {
function _test_onLiveSync_ModuleContext_TypeStyle(styleModuleName: string, livesyncStyleFileName: string) {
const pageBeforeNavigation = helper.getCurrentPage();
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
const pageBeforeLiveSync = helper.getCurrentPage();
pageBeforeLiveSync._moduleName = "button-page";
pageBeforeLiveSync._moduleName = styleModuleName;
global.__onLiveSync({ type: context.type, path: context.path });
livesync({ type: "style", path: livesyncStyleFileName });
const topmostFrame = frame.topmost();
waitUntilLivesyncComplete(topmostFrame);
@@ -197,6 +187,33 @@ function _test_onLiveSync_ModuleContext_TypeStyle(context: { type, path }) {
TKUnit.assertTrue(pageAfterNavigationBack._cssState.isSelectorsLatestVersionApplied(), "Latest selectors version is NOT applied!");
}
function _test_onLiveSync_ModuleReplace_Multiple(context: ModuleContext[]) {
const pageBeforeNavigation = helper.getCurrentPage();
const buttonPage = <Page>createViewFromEntry(({ moduleName: buttonPageModuleName }));
helper.navigateWithHistory(() => buttonPage);
context.forEach(item => {
livesync(item);
});
const topmostFrame = frame.topmost();
waitUntilLivesyncComplete(topmostFrame);
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("button").isLoaded, "Button page is NOT loaded!");
TKUnit.assertEqual(topmostFrame.backStack.length, 1, "Backstack is clean!");
TKUnit.assertTrue(topmostFrame.canGoBack(), "Can NOT go back!");
helper.goBack();
const pageAfterBackNavigation = helper.getCurrentPage();
TKUnit.assertTrue(topmostFrame.currentPage.getViewById("label").isLoaded, "Label page is NOT loaded!");
TKUnit.assertEqual(topmostFrame.backStack.length, 0, "Backstack is NOT clean!");
TKUnit.assertEqual(pageBeforeNavigation, pageAfterBackNavigation, "Pages are different!");
}
function livesync(context: ModuleContext) {
const ls = (<any>global).__hmrSyncBackup || global.__onLiveSync;
ls(context);
}
function waitUntilLivesyncComplete(frame: Frame) {
TKUnit.waitUntilReady(() => frame.navigationQueueIsEmpty());
}

5
tests/app/test-runner.ts
View File

@@ -280,9 +280,8 @@ allTests["SEARCH-BAR"] = searchBarTests;
import * as navigationTests from "./navigation/navigation-tests";
allTests["NAVIGATION"] = navigationTests;
// TODO: These test should be run with --no-hrm
// import * as livesyncTests from "./livesync/livesync-tests";
// allTests["LIVESYNC"] = livesyncTests;
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;

2
tests/package.json
View File

@@ -5,7 +5,7 @@
"version": "next"
},
"tns-ios": {
"version": "6.0.0-2019-06-13-141312-01"
"version": "next"
}
},
"main": "app.js",

30
tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
View File

@@ -5,7 +5,7 @@ import { TabContentItem } from "../tab-navigation-base/tab-content-item";
// Requires
import { TabNavigationBase, itemsProperty, selectedIndexProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { CSSType } from "../core/view";
import { CSSType, Color } from "../core/view";
import { Frame } from "../frame";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import { fromFileOrResource } from "../../image-source";
@@ -352,6 +352,11 @@ export class BottomNavigation extends TabNavigationBase {
});
this._bottomNavigationBar.setItems(tabItems);
this.tabStrip.setNativeView(this._bottomNavigationBar);
this.tabStrip.items.forEach((item, i, arr) => {
const tv = this._bottomNavigationBar.getTextViewForItemAt(i);
item.setNativeView(tv);
});
}
}
@@ -359,6 +364,18 @@ export class BottomNavigation extends TabNavigationBase {
this._bottomNavigationBar.updateItemAt(index, spec);
}
public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
return this._bottomNavigationBar.getBackground();
}
public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
if (value instanceof Color) {
this._bottomNavigationBar.setBackgroundColor(value.android);
} else {
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
}
[selectedIndexProperty.setNative](value: number) {
// const smoothScroll = false;
@@ -383,3 +400,14 @@ export class BottomNavigation extends TabNavigationBase {
this.setAdapterItems([]);
}
}
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
if (value) {
const constantState = value.getConstantState();
if (constantState) {
return constantState.newDrawable(resources);
}
}
return value;
}

13
tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@@ -277,6 +277,14 @@ export class BottomNavigation extends TabNavigationBase {
super.onSelectedIndexChanged(oldIndex, newIndex);
}
public getTabBarBackgroundColor(): UIColor {
return this._ios.tabBar.barTintColor;
}
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -384,6 +392,10 @@ export class BottomNavigation extends TabNavigationBase {
const controllers = NSMutableArray.alloc<UIViewController>().initWithCapacity(length);
const states = getTitleAttributesForStates(this);
if (this.tabStrip) {
this.tabStrip.setNativeView(this._ios.tabBar);
}
items.forEach((item, i) => {
const controller = this.getViewController(item);
@@ -401,6 +413,7 @@ export class BottomNavigation extends TabNavigationBase {
applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem;
tabStripItem.setNativeView(tabBarItem);
}
controllers.addObject(controller);

12
tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts vendored
View File

@@ -82,6 +82,18 @@ export class TabNavigationBase extends View {
* Method is intended to be overridden by inheritors and used as "protected"
*/
onSelectedIndexChanged(oldIndex: number, newIndex: number): void;
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
getTabBarBackgroundColor(): any
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarBackgroundColor(value: any): void
}
export const itemsProperty: Property<TabNavigationBase, TabContentItem[]>;

17
tns-core-modules/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
View File

@@ -34,9 +34,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
}
this.items.push(<TabContentItem>value);
this._addView(value);
selectedIndexProperty.coerce(this);
// selectedIndexProperty.coerce(this);
} else if (name === "TabStrip") {
this.tabStrip = value;
this._addView(value);
}
}
@@ -59,6 +60,11 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
callback(item);
});
}
const tabStrip = this.tabStrip;
if (tabStrip) {
callback(tabStrip);
}
}
public eachChildView(callback: (child: View) => boolean) {
@@ -102,6 +108,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// to be overridden in platform specific files
this.notify(<SelectedIndexChangedEventData>{ eventName: TabNavigationBase.selectedIndexChangedEvent, object: this, oldIndex, newIndex });
}
public getTabBarBackgroundColor(): any {
// overridden by inheritors
return null;
}
public setTabBarBackgroundColor(value: any): void {
// overridden by inheritors
}
}
export interface TabNavigationBase {

6
tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts vendored
View File

@@ -3,13 +3,15 @@
* @module "ui/tab-navigation/tab-strip"
*/ /** */
import { ViewBase, Property } from "../../core/view";
import { View, Property } from "../../core/view";
import { Color } from "../../../color";
import { TabStripItem } from "../tab-strip-item";
/**
* Represents a tab strip.
*/
export class TabStrip extends ViewBase {
export class TabStrip extends View {
/**
* Gets or sets the items of the tab strip.
*/

28
tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts
View File

@@ -1,15 +1,17 @@
// Types
// Types
import { TabStrip as TabStripDefinition } from ".";
import { TabStripItem } from "../tab-strip-item";
import { TabNavigationBase } from "../tab-navigation-base";
import { Color } from "../../../color";
import { AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
// Requires
import { ViewBase, Property, CSSType } from "../../core/view";
import { View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty } from "../../core/view";
export const traceCategory = "TabView";
@CSSType("TabStrip")
export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
public items: TabStripItem[];
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -29,7 +31,25 @@ export class TabStrip extends ViewBase implements TabStripDefinition, AddChildFr
// selectedIndexProperty.coerce(this);
}
}
}
[backgroundColorProperty.getDefault](): Color {
const parent = <TabNavigationBase>this.parent;
return parent && parent.getTabBarBackgroundColor();
}
[backgroundColorProperty.setNative](value: Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarBackgroundColor(value);
}
[backgroundInternalProperty.getDefault](): any {
return null;
}
[backgroundInternalProperty.setNative](value: any) {
// disable the background CSS properties
}
}
export const iosIconRenderingModeProperty = new Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">({ name: "iosIconRenderingMode", defaultValue: "automatic" });
iosIconRenderingModeProperty.register(TabStrip);

25
tns-core-modules/ui/tabs/tabs.android.ts
View File

@@ -7,6 +7,7 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
import { Frame } from "../frame";
import { Color } from "../core/view";
import { fromFileOrResource } from "../../image-source";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import * as application from "../../application";
@@ -529,6 +530,7 @@ export class Tabs extends TabsBase {
const tabLayout = this._tabLayout;
tabLayout.setItems(tabItems, this._viewPager);
this.tabStrip.setNativeView(tabLayout);
items.forEach((item, i, arr) => {
const tv = tabLayout.getTextViewForItemAt(i);
item.setNativeView(tv);
@@ -569,6 +571,18 @@ export class Tabs extends TabsBase {
this._tabLayout.updateItemAt(index, spec);
}
public getTabBarBackgroundColor(): android.graphics.drawable.Drawable {
return this._tabLayout.getBackground();
}
public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
if (value instanceof Color) {
this._tabLayout.setBackgroundColor(value.android);
} else {
this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
}
}
[selectedIndexProperty.setNative](value: number) {
const smoothScroll = true;
@@ -610,3 +624,14 @@ export class Tabs extends TabsBase {
this._viewPager.setOffscreenPageLimit(value);
}
}
function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {
if (value) {
const constantState = value.getConstantState();
if (constantState) {
return constantState.newDrawable(resources);
}
}
return value;
}

11
tns-core-modules/ui/tabs/tabs.ios.ts
View File

@@ -8,6 +8,7 @@ import { selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-n
import { TabsBase, swipeEnabledProperty } from "./tabs-common";
import { Frame } from "../frame";
import { ios as iosView, View } from "../core/view";
import { Color } from "../../color";
import { /*ios as iosUtils,*/ layout } from "../../utils/utils";
// import { device } from "../../platform";
import { fromFileOrResource } from "../../image-source";
@@ -845,11 +846,13 @@ export class Tabs extends TabsBase {
items.forEach((item: TabStripItem, i, arr) => {
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title, null, 0);
tabBarItems.push(tabBarItem);
item.setNativeView(tabBarItem);
});
this.tabBarItems = tabBarItems;
if (this.viewController && this.viewController.tabBar) {
this.viewController.tabBar.items = NSArray.arrayWithArray(tabBarItems);
this.tabStrip.setNativeView(this.viewController.tabBar);
}
// tabBar.items = <NSArray<UITabBarItem>>NSArray.alloc().initWithArray([
@@ -934,6 +937,14 @@ export class Tabs extends TabsBase {
// this._updateIOSTabBarColorsAndFonts();
// }
public getTabBarBackgroundColor(): UIColor {
return this._ios.tabBar.barTintColor;
}
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
[selectedIndexProperty.setNative](value: number) {
// TODO
// if (traceEnabled()) {