Simulate Cordova plugins in browser

Question

To test a Cordova app I need to run it in an Emulator or on a physical device. That is a slow process so instead I test it in a browser when possible.

But the browser doesn't have a contacts database so the contact plugin doesn't work.

Is there any way to add mocks (contacts, date pickers, etc.) to the browser for fast testing?

Stenotypy

Answer 1

1) cordova platform add browser -force

2) cordova serve

3) in the browser: http://localhost:8000

4) click "browser" link on screen. It will open your app.

Provenance

first get into the project directory. and then run these commands. btw. address is .. localhost:8000 and it runs like a charm.. :) simply awesome – Sanjak

this should be a selected answer. btw. use chrome Developer Tools for further simulations, as mobile view, touches and rotations etc. simply awesome – Sanjak

Cordova browser will receive the actual device geolocation, contacts and SIM phone number? How? – Quarterphase

Answer 2

you can use http://incubator.apache.org/projects/ripple.html

installation process is simple

npm install -g ripple-emulator

then move to your cordova project directory and run.

cordova prepare

then run the following to start simulator

ripple emulate --path platforms/android/assets/www

you will get something like this

see the detailed explanation about ripple on raymondcamden's blog

Oxheart

Thanks, I tried it and it was kinda cool. But contacts had not phone numbers and it seems like it is not possible to edit the contacts. Besides that the date-picker plugin didn't work. – Stenotypy

Answer 3

Access your plugins through a service with a clear and precise interface. That way you will be able to provide different implementations of this interface for testing or production.

Take a look at this very basic TypeScript example app. I built an interface for a service that tells you if your device is online. My implementation for "production" looks like this. For testing I could provide another implementation not depending on the cordova-network-plugin, but for example just returning true or false randomly.

You can transfer this to contacts as well: Build an interface and different implementations, returning the actual contacts (in production) or some (more or less) hardcoded contacts randomly (when testing).

Villanovan

Thanks, that seems like a lot of work though (I'm not sure). I was hoping for some ready made solution like a Chrome extension. – Stenotypy

It is quite a lot, but it's a best practice as it also helps to write units of manageable and testable code. Many frameworks like angular provide support for services and unit testing services... – Villanovan

Answer 4

In my opinion the best option is to use phonegap serve. Ripple is ok but it lacks of native features management.

Some plugins have an implementation for browser, so full api will be available. The ones that doesn't have it, phonegap cli will manage it.

In order to use it, you must first install browser platform:

$ cordova platform add browser
$ phonegap serve

I've been trying to use cordova serve but it doesn't work as phonegap does in my case.

Once phonegap serve is launched, you can debug your app in browser.

UPDATE

From https://github.com/apache/cordova-plugin-contacts/pull/122/files you could implement your own callback responses. This is a very straight forward implementation that you can extend as you need (see create, find, pickContact and contact for implementation details):

var contacts = [];
var mockContacts = require('./mockContacts'); // This is a json mock file with your contacts

function Contact(contact) {
    var field;
    for (field in contact) {
        if (contact.hasOwnProperty(field)) {
            this[field] = contact[field];
        }
    }
}
Contact.prototype.clone = function () {
    // You can implement this methods if needed as well
}
Contact.prototype.remove = function () {
    // You can implement this methods if needed as well
}
Contact.prototype.save = function () {
    // You can implement this methods if needed as well
}

mockContacts.map(function (contact) {
    contacts.push(new Contact(contact));
};

function createContact(contact) {
    var newContact = new Contact(contact);
    contacts.push(newContact);
    return newContact;
}

function findContact(contactFields, contactSuccess, contactError, contactFindOptions) {
    contactSuccess = contactSuccess || function () {};
    contactSuccess(contacts); // You can filter the contacts if needed
    return true;
}

function pickContact(contactSuccess, contactError) {
    contactSuccess = contactSuccess || function () {};
    contactSuccess(contacts[0]);
    return true;
}

module.exports = {
    create: createContact,
    find: findContact,
    pickContact: pickContact
};

Viscountcy

I tried it but it didn't work. I got an error when I tried to access the contacts database. – Stenotypy

You're right, there is still a PR in progress you might follow github.com/apache/cordova-plugin-contacts/pull/122, meanwhile maybe you could use the branch from requester or just copy and paste the PR changed files in your local plugin folder – Viscountcy

I'm not quite sure how writing 'Contacts is not supported' in the console will help testing in the browser. Maybe you can elaborate on this... To me it makes more sense to provide an own implementation for testing purposes. – Villanovan

Answer 5

You can simulate your plugin via Cordova-simulate

(https://cordova.apache.org/howto/2018/02/02/cordova-simulate.html)

This solution is browser based and allows quick tweaking of the more common device properties (geolocation, camera, device, network connection, accelerometer etc).

Can be run via command-line or integrated with VS code's debug. As far as I'm aware, this is an evolution of the Ripple emulator.

Ramakrishna