Detox and React <-> WebView interaction - detox

I wonder if there is any plan to make Detox interact with React Webview. I have seen older articles like the one below in Mid 2018 where it was said to be out of scope. But since we're in 2019 close to Q2, just wanted to check if there are any new plans to implement this from Detox? That would be very beneficial for us given we are planning to use Detox for our cross platform UI automation for our React Native apps. There maybe a few hacks that could work like suggested below but there will be security concerns within the org in implementing such hacks.
How can I controle React-Native webview in Detox?

Detox supports both iOS and Android apps, so I'll separate the answers:
On iOS, Detox uses EarlGrey to synchronize, match and perform actions. EarlGrey runs in-process, and was design for native UI hierarchy, such that has accessibility details. Moreover, web content on iOS is rendered inside a WKWebView, which runs out-of-process, so technically this is not possible (and there are no plan to support it currently). This might be possible with XCUITest (and EarlGrey2, whenever it will be released).
On Android, Espresso supports running on WebViews, but Detox does not export that functionality.

Related

How to do automatic, on device tests for react native application?

I want to create automatic tests for an application written in react native. I want to test only logic (not the UI).
Jest seems to be great solution for unit or even integration tests which will be run on a computer. But I would like to test the application on a real device. I have a component without UI that does some logic, wireless communication with other devices etc. I need to test that communication especially, which cannot be done without a device.
Are there any frameworks or standard solutions to do such thing?
Ok, I did my research about testing react native applications.
At the moment ReactNative doesn't provide a platform independent test framework that could run integration (not UI) tests on real device. In fact there is a RCTTestRunner but it's functionality is limited and it works only for iOS devices.
Functional tests
There are multiple functional test frameworks. These tests mainly depend on UI components and are used for black-box testing of user interactions. There are two mature cross platform frameworks that could be used for that: Calabash and Appium. Appium seems to be better solution as it's a single tool for both platforms (Calabash is actually set of two projects for iOS and Android). Also Appium supports multiple languages (JavaScript, Python, Java, ...) when Calabash supports only Ruby.
There is also a Cavy project that looks promising but uses React ref generating functions in a hacky way and needs multiple modifications in the application code.
But all of that is intended to do only UI testing.
Workaroud solution
The solution which I used to test logic of the application (without being influenced by UI changes) is following. I created special version of the application (by creating new target) which have replaced the main UI component with test one. That test component runs on the top of the application. It is just triggering tests and displaying the logs. These logs are then read and parsed by functional test framework to produce the report.

How does react native compile it's code into native apps?

recently started working with react native and project requires for apps to be build on server. So the theory is that app could be build on request, which means something, lets call this something react native compiler, needs to be on some server which allows me to do this.
For example, this is the location where is react native compiler is "http://example.com/compile", and you have some settings options and button "compile" on that site, and when you click on button, application compiler starts, and after x seconds android and iphone apps are ready to be downloaded. Is this possible?
It is surely possible, although it might be complicated to implement, it all boils down to the level of complexity that you want to achieve (just a build system, an online IDE...).
Each React Native application consists of the JavaScript code and one Android and iOS projects (you can include more platforms through 3rd party efforts, but let's keep it simple). Both the iOS and Android SDKs offer command-line tools for the building functionality. In the case of iOS you have the xcrun command and in Android, the project includes some gradle commands that you can execute. So in general, what you have to do is just execute these commands via your backend when an user requests it.
Essentially what you need is the same kind of setup a Continuous Integration server would, but instead of triggering a build whenever changes are made, the server should build the app on demand, and then send back the result of the compilation to the user. You can read more about CI for React Native here and here, for instance.

Why do react-native packages use native SDKs and not JS/web versions?

Purely informational question, not really a problem but:
I remember following the instructions and seeing that there were some steps to get the react-native-fbsdk working. These steps involved messing with my android build.gradle and adding the iOS SDK and the info.plist and whatnot. That aside, why doesn't Facebook utilize the javascript SDK? Is it not possible? If so, why is it not possible for Facebook to do this? If it is possible, why did they opt to utilize the both the android and iOS SDK?
One value prop of React Native is that it's not just an HTML 5 website embedded in a native wrapper. It literally uses the native APIs/components, and the same goes for SDKs. Technically, a pure JS SDK could be optimized for a browser experience, rely on window or document, and while the functionality might be able to be executed natively, the polyfills provided in RN might not be enough to cover the implementation. The way it makes API calls are probably different too. The views are different too (no DOM in RN), so that would apply for any SDK views (button?).
I just finished converting an iOS SDK to a React Native package and I feel that the implementation will be more inline with how the original iOS SDK was designed, since it's using those methods under the covers instead of pure JS. JS is just invoking the native methods, not taking over the methods.
Just my $0.02...

Main differences between Appcelerator Titanium and React native

Both frameworks are (hybrid) mobile app frameworks which try to access the native UI components with the JavaScript API provided by the different platforms like iOS and Android. They don't use any HTML and CSS for the UI design like e.g. Ionic do and they are not wrapper frameworks but actually a kind of cross-compiler frameworks. That's what i found out. BUT I didn't get the actual differences between these two frameworks. Why should i prefer one of these? Are they doing exactly the same job?
best regards, Tom
I know this is quite old, but I'll give my answer for the benefit of anyone else arriving here.
Full disclosure, I worked for Appcelerator from 2012-2019.
In short, they're both quite similar.
You write a specific flavor of JavaScript that includes custom objects
Your JavaScript code gets compressed, minified, etc. so it becomes the input to an interpreter that gets shipped with your app
When your app runs, it launches the interpreter which starts executing your code
At this point, JavaScript is being run in "native land", so the interpreter can act as a bridge between your JavaScript code and the native SDK
The result is a native app with access to features of the underlying platform
A "native app" shouldn't simply be defined as an app that runs natively, because that would make a PhoneGap app a native app.
A "native app" should be defined as an app that runs and behaves natively. That means, an app that abides by the native OS' ui/ux guidelines.
MAIN DIFFERENCES?
I'd have to say that the main difference is its internal design. Appcelerator started in 2007, when "mobile" was very young.
React Native was launched in 2015.
In 2015 mobile was already in full swing, and mobile OS' were pretty mature, so I infer that React Native's design benefits from all lessons learned by Appcelerator (and others).
As for which one is better, I'd say React, because Titanium is now dead.

Getting sproutcore application files to use them in a native app via Appcelerator Titanium

I would like build a app using sproucore framework, but i also want to integrate it with Titanium to have some desktop capability like file system, packaging, offline working etc...
I know that with sproutcore 2 this would be pretty easy since it allows to use the framework like a normal javascript library. But the project is still in beta and the docs are patchy at most (I consider patchy even the 1.x docs, actually).
So, I want to ask, which would be the best way to go to integrate sproutcore and Titanium API?
Titanium's main mission is to use JavaScript to build native apps, not to provide a OS-access layer for web apps. It would be hard to mix native and SproutCore UI elements.
That being said, here's some information that might help you:
Titanium has reversed it's application model starting with version 1.0:
http://developer.appcelerator.com/question/71/what-happened-to-html--css
The main app doesn't run in a web view anymore, instead it runs directly in JavaScriptCore and creates only native UI elements. One of the native UI elements is a web view
(http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.WebView-object)
and it's possible to make that full screen and run your SproutCore app inside of the web view. From there, you can call out to Titanium to call Titanium methods for file system access and the like.
Also, if you only target the desktop, you could even access the JavaScript context object of a webview and use it directly in JavaScriptCore.
Johannes