Device Orientation Manipulation #133

DanielMSchmidt · 2017-05-20T07:03:46Z

This PR adds device orientation change support to the device API (see #131).
Last thing to do is add some description to the docs, at least from my perspective.

@talkol @rotemmiz Can you give me feedback for the implementation? Is there anything I could do better next time? The docs will follow tomorrow or the day after 👍

remove extension to MethodInvocation.m
use earl grey function directly in setOrientation
move JS implementation to Simulator.js
write unit tests
add docs

Closes wix#131

rotemmiz · 2017-05-24T21:04:15Z

detox/ios/Detox/MethodInvocation.m

@@ -80,6 +80,24 @@ + (id) getValue:(id)value withType:(id)type onError:(void (^)(NSString*))onError
        if (![value isKindOfClass:[NSDictionary class]]) return nil;
        return [MethodInvocation invoke:value onError:onError];
    }
+	if ([type isEqualToString:@"UIDeviceOrientation"])


The main advantage of the remote invocation mechanism is that we don't need to add any other new call to the protocol

I believe we didn't make the invocation mechanism easily accessible for extension, and this is our fault.

Does this mean I could have written invoke.IOS.UIDeviceOrientation('UIDeviceOrientationLandscapeLeft') or what would the JS call need to look like in this case?

rotemmiz · 2017-05-24T21:05:40Z

detox/src/devices/Device.js

@@ -42,6 +43,16 @@ class Device {
    await this.client.sendUserNotification(params);
  }

+  async setOrientation(orientation) {


Device.js is platform agnostic, it's a base class (will be the base class for Android devices as well). This is a simulator specific logic, hence needs to be in Simulator.js

I see there are no unit tests here, the build will fail on lack of coverage.

and it did
https://travis-ci.org/wix/detox/builds/235424799#L2820

Okay, I will move it to Simulator.js and add some unit tests

rotemmiz · 2017-05-24T21:07:04Z

detox/src/devices/Device.js

@@ -42,6 +43,16 @@ class Device {
    await this.client.sendUserNotification(params);
  }

+  async setOrientation(orientation) {
+    // orientation is 'landscape' (meaning left side portrait) or 'portrait' (non-reversed)
+    const call = invoke.call(


you can invoke the EarlGrey functions directly instead

So I would do

invoke.IOS.EarlGrey( 'rotateDeviceToOrientation:errorOrNil:', invoke.IOS.UIDeviceOrientation(orientation) );

or how would it have to look like?

The ObjC code looks like this:

[EarlGrey rotateDeviceToOrientation:UIDeviceOrientationLandscapeLeft errorOrNil:nil];

JS code pass UIDeviceOrientation which is an enum, so I guess the easiest way is to pass NSInteger with the position of the desired orientation enum.

Looking at UIDevice.h, which holds these enums

typedef NS_ENUM(NSInteger, UIDeviceOrientation) { UIDeviceOrientationUnknown, UIDeviceOrientationPortrait, // Device oriented vertically, home button on the bottom UIDeviceOrientationPortraitUpsideDown, // Device oriented vertically, home button on the top UIDeviceOrientationLandscapeLeft, // Device oriented horizontally, home button on the right UIDeviceOrientationLandscapeRight, // Device oriented horizontally, home button on the left UIDeviceOrientationFaceUp, // Device oriented flat, face up UIDeviceOrientationFaceDown // Device oriented flat, face down } __TVOS_PROHIBITED;

For UIDeviceOrientationPortrait pass pass invoke.IOS.NSInteger(1)
For UIDeviceOrientationLandscapeLeft pass invoke.IOS.NSInteger(3)

I think this should work ...
Of course, for readability, we'd like to keep this enum values in JS as well.

So it would look something like this:

let invocation = invoke.IOS.EarlGrey( 'rotateDeviceToOrientation:errorOrNil:', invoke.IOS.NSInteger(orientationEnum) await invocationManager.execute(invocation); );

I hope it'll work :)

Hey, thanks for the insight, got it working without any native extension (yay 🎉 ). Though the call you describe doesn't work, it leads to an object like

{ type: "EarlGrey", value: "rotateDeviceToOrientation:errorOrNil:", id: 5 }

This leads to a "target is invalid" error, which, to me, looks a bit like a "bug", right?

I spent try my code, it's reasonable I mistaken.
What is the working syntax then?

Sure, I just wanted to state that calling

invoke.IOS.EarlGrey( 'rotateDeviceToOrientation:errorOrNil:', invoke.IOS.NSInteger(orientationEnum) );

would be the most readable and easiest way, I will try to make it work, the tests will tell me if I did something wrong then ;)

rotemmiz · 2017-05-24T21:07:12Z

detox/test/e2e/f-simulator.js

@@ -28,4 +28,28 @@ describe('Simulator', () => {
    await element(by.label('Say Hello')).tap();
    await expect(element(by.label('Hello!!!'))).toBeVisible();
  });
+
+  describe('device orientation', () => {


awesome stuff!

rotemmiz · 2017-05-25T18:48:22Z

detox/src/devices/Device.js

+      throw new Error(`setOrientation failed: provided orientation ${orientation} is not part of supported orientations: ${Object.keys(orientationMapping)}`)
+    }
+
+    const call = invoke.EarlGrey.call(


take a look here

this._call = invoke.call(invoke.EarlGrey.instance, 'detox_selectElementWithMatcher:', matcher._call);

https://github.com/wix/detox/blob/master/detox/src/ios/expect.js#L229

This function calls the static methoddetox_selectElementWithMatcher function in EarlGrey

rotemmiz · 2017-05-25T18:53:19Z

detox/src/invoke/EarlGrey.js

@@ -3,6 +3,18 @@ const instance = {
  value: 'instance'
 };

+function call(method, ...args) {


I don't think we need to add a special call function here, we are calling EarlGrey's static methods elsewhere without the need for this code.

take a look at https://github.com/wix/detox/blob/master/detox/src/invoke/Invoke.js#L25
It's a neat trick using Proxy objects that enables this cool syntax:

invoke.IOS.CGPoint({x: 2, y: 1}))

to actually work with no CGPoint function ever existing

https://github.com/wix/detox/blob/master/detox/src/invoke.test.js#L19

DanielMSchmidt · 2017-05-25T20:12:11Z

@rotemmiz Can you give me final feedback, this PR is done from my side (at least as far as I can tell 👍 )

DanielMSchmidt force-pushed the feat/device-orientation branch from 3c33acc to e588749 Compare May 21, 2017 16:05

DanielMSchmidt added 3 commits May 23, 2017 21:41

add orientation change screen to test app

4f9d94d

add orientation change e2e test

1cfc199

add UIDeviceOrientation type for method invocation

e37a429

DanielMSchmidt force-pushed the feat/device-orientation branch from e588749 to 6d27504 Compare May 23, 2017 22:32

add setOrientation to device

78111e4

Closes wix#131

DanielMSchmidt force-pushed the feat/device-orientation branch from 6d27504 to 78111e4 Compare May 23, 2017 22:32

rotemmiz requested changes May 24, 2017

View reviewed changes

DanielMSchmidt added 2 commits May 25, 2017 20:03

refactor earl grey call and orientation constants

7bc9b52

move setOrientation implementation to simulator

d0c6f3b

rotemmiz reviewed May 25, 2017

View reviewed changes

add unit tests for orientation change

41b24d9

DanielMSchmidt added 2 commits May 25, 2017 22:36

refactor call to EarlGrey

582103f

document new api surface for orientation change

8590f44

DanielMSchmidt force-pushed the feat/device-orientation branch from 0e56230 to 8590f44 Compare May 25, 2017 20:37

rotemmiz approved these changes May 25, 2017

View reviewed changes

rotemmiz merged commit e74ea68 into wix:master May 25, 2017

rotemmiz changed the title ~~WIP | Device Orientation Manipulation~~ Device Orientation Manipulation May 27, 2017

wix locked and limited conversation to collaborators Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Device Orientation Manipulation #133

Device Orientation Manipulation #133

DanielMSchmidt commented May 20, 2017 •

edited

Loading

rotemmiz May 24, 2017

DanielMSchmidt May 25, 2017

rotemmiz May 24, 2017

rotemmiz May 24, 2017

rotemmiz May 24, 2017

DanielMSchmidt May 25, 2017

rotemmiz May 24, 2017

DanielMSchmidt May 25, 2017

rotemmiz May 25, 2017 •

edited

Loading

DanielMSchmidt May 25, 2017

rotemmiz May 25, 2017

DanielMSchmidt May 25, 2017

rotemmiz May 24, 2017

rotemmiz May 25, 2017

rotemmiz May 25, 2017

DanielMSchmidt commented May 25, 2017

Device Orientation Manipulation #133

Device Orientation Manipulation #133

Conversation

DanielMSchmidt commented May 20, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rotemmiz May 25, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanielMSchmidt commented May 25, 2017

DanielMSchmidt commented May 20, 2017 •

edited

Loading

rotemmiz May 25, 2017 •

edited

Loading