diff --git a/e2e/ui-tests-app/.vscode/launch.json b/e2e/ui-tests-app/.vscode/launch.json index 1c798a164..f50412d01 100644 --- a/e2e/ui-tests-app/.vscode/launch.json +++ b/e2e/ui-tests-app/.vscode/launch.json @@ -27,7 +27,8 @@ "--colors", "--opts", "../config/mocha.opts", - "--grep=bottom-navigation", + "--grep", + "gestures-events-gestures", "-a", ], "internalConsoleOptions": "openOnSessionStart", @@ -45,10 +46,7 @@ "--opts", "../config/mocha.opts", "--grep=bottom-navigation", - "android", - "--grep=bottom-navigation", - "--port", - "8889", + "android" ], "internalConsoleOptions": "openOnSessionStart" } diff --git a/e2e/ui-tests-app/app/events/gestures-page.ts b/e2e/ui-tests-app/app/events/gestures-page.ts index 03166a8e2..674a3f596 100644 --- a/e2e/ui-tests-app/app/events/gestures-page.ts +++ b/e2e/ui-tests-app/app/events/gestures-page.ts @@ -1,55 +1,56 @@ -import * as labelModule from "tns-core-modules/ui/label"; -import * as gestures from "tns-core-modules/ui/gestures"; -import * as button from "tns-core-modules/ui/button"; -import * as pages from "tns-core-modules/ui/page"; -import * as deviceProperties from "tns-core-modules/platform"; -import * as stackLayoutModule from "tns-core-modules/ui/layouts/stack-layout"; +import { + GestureEventData, + RotationGestureEventData, + GestureTypes, + SwipeGestureEventData, + PanGestureEventData, + PinchGestureEventData, + GestureStateTypes +} from "tns-core-modules/ui/gestures"; +import { Button } from "tns-core-modules/ui/button"; +import { Label } from "tns-core-modules/ui/label"; +import { Page } from "tns-core-modules/ui/page"; +import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; +import { screen, isAndroid } from "tns-core-modules/platform"; export function createPage() { - - var stack = new stackLayoutModule.StackLayout(); - var labelHeight = Math.round(deviceProperties.screen.mainScreen.heightPixels / (7 * deviceProperties.screen.mainScreen.scale)); - var stopButton = new button.Button(); + const stack = new StackLayout(); + var stopButton = new Button(); + if (isAndroid) { + stopButton.height = 30; + stopButton.fontSize = 8; + } stopButton.text = "Stop Detecting Gestures"; + stopButton.automationText = "stopGesturesDetecting"; stack.addChild(stopButton); - var tapLabel = new labelModule.Label(); - tapLabel.text = "Tap here"; + const labelHeight = Math.round(screen.mainScreen.heightPixels / (10 * screen.mainScreen.scale)); + + const tapLabel = createLabel("Tap here", labelHeight); stack.addChild(tapLabel); - var doubletapLabel = new labelModule.Label(); - doubletapLabel.text = "Double Tap here"; - stack.addChild(doubletapLabel); + const doubleTapLabel = createLabel("Double Tap here", labelHeight); + stack.addChild(doubleTapLabel); - var longpressLabel = new labelModule.Label(); - longpressLabel.text = "Long Press here"; - stack.addChild(longpressLabel); + const longPressLabel = createLabel("Long Press here", labelHeight); + stack.addChild(longPressLabel); - var swipeLabel = new labelModule.Label(); - swipeLabel.height = labelHeight; - swipeLabel.text = "Swipe here"; - swipeLabel.textWrap = true; + const tapAndDoubleTapLabel = createLabel("Tap or Double Tap", labelHeight, true); + stack.addChild(tapAndDoubleTapLabel); + + const swipeLabel = createLabel("Swipe here", labelHeight, true); stack.addChild(swipeLabel); - var panLabel = new labelModule.Label(); - panLabel.height = labelHeight; - panLabel.text = "Pan here"; - panLabel.textWrap = true; + const panLabel = createLabel("Pan here", labelHeight, true); stack.addChild(panLabel); - var pinchLabel = new labelModule.Label(); - pinchLabel.height = labelHeight; - pinchLabel.text = "Pinch here"; - pinchLabel.textWrap = true; + const pinchLabel = createLabel("Pinch here", labelHeight, true); stack.addChild(pinchLabel); - var rotaionLabel = new labelModule.Label(); - rotaionLabel.height = labelHeight; - rotaionLabel.text = "Rotate here"; - rotaionLabel.textWrap = true; - stack.addChild(rotaionLabel); + const rotationLabel = createLabel("Rotate here", labelHeight, true); + stack.addChild(rotationLabel); - stopButton.on(button.Button.tapEvent, function () { + stopButton.on("tap", function () { observer1.disconnect(); observer2.disconnect(); observer3.disconnect(); @@ -57,77 +58,111 @@ export function createPage() { observer5.disconnect(); observer6.disconnect(); observer7.disconnect(); + observer8.disconnect(); + observer9.disconnect(); tapLabel.text = "Gestures detection disabled"; - doubletapLabel.text = "Gestures detection disabled"; - longpressLabel.text = "Gestures detection disabled"; - swipeLabel.text = "Gesturesd detection disabled"; + tapLabel.automationText = "Gestures detection disabled"; + doubleTapLabel.text = "Gestures detection disabled"; + doubleTapLabel.automationText = "Gestures detection disabled"; + longPressLabel.text = "Gestures detection disabled"; + longPressLabel.automationText = "Gestures detection disabled"; + swipeLabel.text = "Gestures detection disabled"; + swipeLabel.automationText = "Gestures detection disabled"; panLabel.text = "Gestures detection disabled"; + panLabel.automationText = "Gestures detection disabled"; pinchLabel.text = "Gestures detection disabled"; - rotaionLabel.text = "Gestures detection disabled"; + pinchLabel.automationText = "Gestures detection disabled"; + rotationLabel.text = "Gestures detection disabled"; + rotationLabel.automationText = "Gestures detection disabled"; + tapAndDoubleTapLabel.text = "Gestures detection disabled"; + tapAndDoubleTapLabel.automationText = "Gestures detection disabled"; }); - tapLabel.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) { + tapLabel.on(GestureTypes[GestureTypes.tap], function (args: GestureEventData) { tapLabel.text = "Tap gesture detected, " + (args.object === tapLabel); }); - var observer1 = tapLabel.getGestureObservers(gestures.GestureTypes.tap)[0]; + const observer1 = tapLabel.getGestureObservers(GestureTypes.tap)[0]; - doubletapLabel.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) { - doubletapLabel.text = "Double Tap gesture detected, " + (args.object === doubletapLabel); + doubleTapLabel.on(GestureTypes[GestureTypes.doubleTap], function (args: GestureEventData) { + doubleTapLabel.text = "Double Tap gesture detected, " + (args.object === doubleTapLabel); }); - var observer2 = doubletapLabel.getGestureObservers(gestures.GestureTypes.doubleTap)[0]; + const observer2 = doubleTapLabel.getGestureObservers(GestureTypes.doubleTap)[0]; - longpressLabel.on(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) { - longpressLabel.text = "Long Press gesture detected, " + (args.object === longpressLabel); + longPressLabel.on(GestureTypes[GestureTypes.longPress], function (args: GestureEventData) { + longPressLabel.text = "Long Press gesture detected, " + (args.object === longPressLabel); }); - var observer3 = longpressLabel.getGestureObservers(gestures.GestureTypes.longPress)[0]; + const observer3 = longPressLabel.getGestureObservers(GestureTypes.longPress)[0]; - swipeLabel.on(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) { + swipeLabel.on(GestureTypes[GestureTypes.swipe], function (args: SwipeGestureEventData) { swipeLabel.text = "Swipe Direction: " + args.direction + ", " + (args.object === swipeLabel); // + getStateAsString(args.state); }); - var observer4 = swipeLabel.getGestureObservers(gestures.GestureTypes.swipe)[0]; + const observer4 = swipeLabel.getGestureObservers(GestureTypes.swipe)[0]; - panLabel.on(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) { + panLabel.on(GestureTypes[GestureTypes.pan], function (args: PanGestureEventData) { panLabel.text = "Pan deltaX:" + Math.round(args.deltaX) + "; deltaY:" + Math.round(args.deltaY) + ";" + ", " + (args.object === panLabel) + getStateAsString(args.state); }); - var observer5 = panLabel.getGestureObservers(gestures.GestureTypes.pan)[0]; + const observer5 = panLabel.getGestureObservers(GestureTypes.pan)[0]; - pinchLabel.on(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) { + pinchLabel.on(GestureTypes[GestureTypes.pinch], function (args: PinchGestureEventData) { pinchLabel.text = "Pinch Scale: " + Math.round(args.scale) + ", " + (args.object === pinchLabel) + getStateAsString(args.state); }); - var observer6 = pinchLabel.getGestureObservers(gestures.GestureTypes.pinch)[0]; + const observer6 = pinchLabel.getGestureObservers(GestureTypes.pinch)[0]; - rotaionLabel.on(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) { - rotaionLabel.text = "Rotation: " + Math.round(args.rotation) + ", " + (args.object === rotaionLabel) + getStateAsString(args.state); + rotationLabel.on(GestureTypes[GestureTypes.rotation], function (args: RotationGestureEventData) { + rotationLabel.text = "Rotation: " + Math.round(args.rotation) + ", " + (args.object === rotationLabel) + getStateAsString(args.state); }); - var observer7 = rotaionLabel.getGestureObservers(gestures.GestureTypes.rotation)[0]; + const observer7 = rotationLabel.getGestureObservers(GestureTypes.rotation)[0]; - var page = new pages.Page(); + tapAndDoubleTapLabel.on(GestureTypes[GestureTypes.doubleTap], function (args: GestureEventData) { + tapAndDoubleTapLabel.text = "Last action: Double tap gesture, " + (args.object === tapAndDoubleTapLabel); + }); + + const observer8 = tapAndDoubleTapLabel.getGestureObservers(GestureTypes.doubleTap)[0]; + + tapAndDoubleTapLabel.on(GestureTypes[GestureTypes.tap], function (args: GestureEventData) { + tapAndDoubleTapLabel.text = "Last action: Tap gesture, " + (args.object === tapAndDoubleTapLabel); + }); + + const observer9 = tapAndDoubleTapLabel.getGestureObservers(GestureTypes.tap)[0]; + + const page = new Page(); page.content = stack; - + return page; } -var states = new Array(); -function getStateAsString(state: gestures.GestureStateTypes): string { - if (state === gestures.GestureStateTypes.began) { +function getStateAsString(state: GestureStateTypes): string { + const states = new Array(); + if (state === GestureStateTypes.began) { states.length = 0; states.push("began"); - } else if (state === gestures.GestureStateTypes.cancelled) { + } else if (state === GestureStateTypes.cancelled) { states.push("cancelled"); - } else if (state === gestures.GestureStateTypes.changed) { + } else if (state === GestureStateTypes.changed) { if (states.indexOf("changed") === -1) { states.push("changed"); } - } else if (state === gestures.GestureStateTypes.ended) { + } else if (state === GestureStateTypes.ended) { states.push("ended"); } return ", states: " + states.join(","); } + +function createLabel(text: string, labelHeight: number, shouldWrap = false) { + const label = new Label(); + label.height = labelHeight; + label.text = text; + label.textWrap = shouldWrap; + label.borderColor = "green"; + label.borderWidth = 1; + + return label; +} \ No newline at end of file diff --git a/e2e/ui-tests-app/app/events/handlers-page.ts b/e2e/ui-tests-app/app/events/handlers-page.ts index d3ffe2980..24308b61b 100644 --- a/e2e/ui-tests-app/app/events/handlers-page.ts +++ b/e2e/ui-tests-app/app/events/handlers-page.ts @@ -1,16 +1,27 @@ -import * as observable from "tns-core-modules/data/observable"; -import * as gestures from "tns-core-modules/ui/gestures"; -import * as pages from "tns-core-modules/ui/page"; +import { EventData } from "tns-core-modules/data/observable"; +import { GestureEventData } from "tns-core-modules/ui/gestures"; +import { Page } from "tns-core-modules/ui/page"; +import { Label } from "tns-core-modules/ui/label/label"; -export function pageLoaded(args: observable.EventData) { - var page = args.object; - page.bindingContext = { tapAction: tapAction, doubleTapAction: doubleTapAction }; +export function pageLoaded(args: EventData) { + var page = args.object; + page.bindingContext = { tapAction: tapAction, doubleTapAction: doubleTapAction, cleanResult: cleanResult }; } -export function tapAction(args: gestures.GestureEventData) { - console.log("tapAction"); +export function tapAction(args: GestureEventData) { + setResult(args, "tapAction"); } -export function doubleTapAction(args: gestures.GestureEventData) { - console.log("doubleTapAction"); +export function doubleTapAction(args: GestureEventData) { + setResult(args, "doubleTapAction"); } + +export function cleanResult(args: GestureEventData) { + setResult(args, ""); +} + +const setResult = (args: GestureEventData, text: string) => { + console.log(text); + const resultPanel: Label = (((args.object).page)).getViewById("resultContainer"); + resultPanel.text = text; +}; diff --git a/e2e/ui-tests-app/app/events/handlers-page.xml b/e2e/ui-tests-app/app/events/handlers-page.xml index 275055a40..d3ea35178 100644 --- a/e2e/ui-tests-app/app/events/handlers-page.xml +++ b/e2e/ui-tests-app/app/events/handlers-page.xml @@ -2,5 +2,8 @@