TL;DR

In this tutorial, I’ll give you step by step instructions on how to create a native iOS app with Swift (ObjectiveC code also available in the Github repo) that can receive VoIP push notifications sent with Houston, custom PHP script or through Amazon SNS.

This tutorial is largely inspired by this one (one of the few that actually made sense and made the steps manageable). However, I’ve added some not so obvious steps and fixed the issues that I had with the newest versions. Also, I added the link to the finished project on Github for further reference.

VoIP notifications

The official documentation can be found here. Few of the advantages are:

• app is automatically relaunched if it’s not running when a VoIP push is received
• device is woken up only when VoIP push occurs (saves battery)
• VoIP pushes go straight to your app for processing and are delivered without delay
• app is automatically relaunched if it’s not running when a VoIP push is received

Prerequisite settings

Apple provides us with a framework called PushKit to support using this VoIP push feature. However, we need to configure some additional settings to get this working.

Creating an App ID

In case you don’t already have an app (and consequently an App ID), you need to create one.

First, login to your Apple developer account and access Certificates, Identifier & Profiles:

Next, go to Identifiers->App IDs and then click on the + button.

Two important things to fill out here are App ID Description and so-called Bundle ID (this will most likely be something like com.yourdomain.yourappname):

Although not seen in the screenshots above, I used nikolaVoipTest as Bundle ID. This will be important in the next step.

Generating a VoIP push certificate

To generate a VoIP push certificate you first need to click on the All button in the Certificates section on the left-hand side. Then, click the + button:

On the next page you need to select the VoIP Services Certificate:

and on the one after that you need to select the App ID for which you’re creating this VoIP certificate:

Next, you’ll be presented with instructions on how to create a so-called CSR (Certificate Signing Request) file:

Once you create that file, you’ll select it for upload on the next screen. If everything goes well you’ll be given the certificate which you have to download:

After you download the certificate, open it up, and this should open the Keychain Access application, and you should see the certificate under the My Certificates section:

Creating the app

With all the setting out of our way, we can now start Xcode and create a new Single view application project:

Take special care when setting the Product Name as the Bundle Identifier is set automatically from it. We need to set this to be the same as the Bundle identifier that we’ve set in the steps above.

Setting the appropriate capabilities

To use the VoIP push in the app, we need to turn ON the Background Modes for our app and check few of the checkboxes:

Make sure you select the following options:

• Audio, Airplay, and Picture in Picture
• Voice over IP
• Background fetch
• Remote notifications

Adding the code

Open AppDelegate.swift and at the top add the import PushKit statement.

Then, in the didFinishLaunchingWithOptions part of the application function make sure you register for notifications like this:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        //Enable all notification type. VoIP Notifications don't present a UI but we will use this to show local nofications later
        let notificationSettings = UIUserNotificationSettings(forTypes: [.Badge, .Sound, .Alert], categories: nil)

        //register the notification settings
        application.registerUserNotificationSettings(notificationSettings)

        //output what state the app is in. This will be used to see when the app is started in the background
        NSLog("app launched with state \(application.applicationState)")

        return true
}

Since we are using the registerUserNotificationSettings method we need to implement it’s delegate callback application(application: UIApplication, didRegisterUserNotificationSettings notificationSettings: UIUserNotificationSettings):

func application(application: UIApplication, didRegisterUserNotificationSettings notificationSettings: UIUserNotificationSettings) {

    //register for voip notifications
    let voipRegistry = PKPushRegistry(queue: dispatch_get_main_queue())
    voipRegistry.desiredPushTypes = Set([PKPushTypeVoIP])
    voipRegistry.delegate = self;
}

In this callback, we register the VoIP notifications since we know that the user has agreed to receive notifications (since this function has been called). We enabled VoIP notifications by declaring the voipRegistry object.

At this point, you will get an error on the voipRegistry.delegate = self; line saying Cannot assign a value of type 'AppDelegate' to type 'PKPushRegistryDelegate!'.

The delegate for voipRegistry is of type PKPushRegistryDelegate which has three methods, two of which are required (didUpdatePushCredentials and didReceiveIncomingPushWithPayload). We have to define a so-called extension of the AppDelegate class. We do that by adding the following code after all the current code in the AppDelegate.swift file:

extension AppDelegate: PKPushRegistryDelegate {

    func pushRegistry(registry: PKPushRegistry!, didUpdatePushCredentials credentials: PKPushCredentials!, forType type: String!) {

        //print out the VoIP token. We will use this to test the notification.
        NSLog("voip token: \(credentials.token)")
    }

    func pushRegistry(registry: PKPushRegistry!, didReceiveIncomingPushWithPayload payload: PKPushPayload!, forType type: String!) {

        let payloadDict = payload.dictionaryPayload["aps"] as? Dictionary<String, String>
        let message = payloadDict?["alert"]

        //present a local notifcation to visually see when we are recieving a VoIP Notification
        if UIApplication.sharedApplication().applicationState == UIApplicationState.Background {

            let localNotification = UILocalNotification();
            localNotification.alertBody = message
            localNotification.applicationIconBadgeNumber = 1;
            localNotification.soundName = UILocalNotificationDefaultSoundName;

            UIApplication.sharedApplication().presentLocalNotificationNow(localNotification);
        }

        else {

            dispatch_async(dispatch_get_main_queue(), { () -> Void in

                let alert = UIAlertView(title: "VoIP Notification", message: message, delegate: nil, cancelButtonTitle: "Ok");
                alert.show()
            })
        }

        NSLog("incoming voip notfication: \(payload.dictionaryPayload)")
    }

    func pushRegistry(registry: PKPushRegistry!, didInvalidatePushTokenForType type: String!) {

        NSLog("token invalidated")
    }
}

After adding this extension you will note that the previously mentioned error disappears.

In the first function, we merely output the device token. We will need this token in the next section when we’ll be testing our app with sending VoIP push notifications.

In the second one we ‘act’ on the received VoIP push notification. In this concrete case, we show a local notification if the app is in the background or an alert if we’re in the app. The third function (didInvalidatePushTokenForType) is used for handling when the token is invalidated.

Testing VoIP notifications

We have several options for testing our app. I’ll cover few of them in this section:

• CLI program called Houston
• PHP script called SimplePush
• Amazon SNS

Getting the device token

Run your app in Xcode and make sure you run it on an actual device. The console output should look something like this:

2016-09-19 10:08:53.793
voipTestNikola[1876:2020432]
app launched with state UIApplicationState

2016-09-19 10:08:53.877
voipTestNikola[1876:2020432]
voip token: <40cc4209 d0f3ac25 95a7e937 3282897b 211231ef ba66764c 6fd2befa b42076cb>

Take note of the voip token from the output above (of course, the one from your Xcode debug window and not the one I’ve pasted above ;)), as we’ll need it in the next sections.

Preparing the certificate file

The VoIP certificate file that we’ve downloaded and added to the KeyChain has to be converted to a different file format so that we’ll be able to use it with the tools and services that I’ve listed above.

First, you need to open the KeyChain app on your Mac and then Export (Right click then select Export) the certificate:

You will get a .p12 file.

Now, navigate to the folder where you exported this file and execute the following command:

openssl pkcs12 -in YOUR_CERT.p12 -out VOIP.pem -nodes -clcerts

This will generate VOIP.pem file which we’ll use in the next sections.

Houston

Even though the docs say you can install it simply with gem install houston, you will most likely end up (after some StackOverflow searching) using this command to install it:

sudo gem install -n /usr/local/bin houston

This way you’ll install it to your local bin directory to which you have full rights.

Houston installed one more tool that will help us send the notifications like this:

With Terminal navigate to the folder where you have your certificate, copy the device id from above and execute a command like this:

apn push "<40cc4209 d0f3ac25 95a7e937 3282897b 211231ef ba66764c 6fd2befa b42076cb>" -c VOIP.pem -m "Testing VoIP notifications!"

Please note to change the VOIP.pem to whatever you named the file in the steps above.

You should get the following output in your terminal:

And, you should see this on your phone in case it was in the foreground:

In case the app was in the background you should see:

Also, I made a short video showcasing how the app behaves when it’s closed and receives a VoIP push (it’s woken up and run).

SimplePush

SimplePush (simplepush.php in the project root directory) is a PHP script that can be found on the net in few various forms and from few various authors. However, the code is less then 50 LOC, so it’s quite simple to understand. We need to set just a few of the config options:

// Put your device token here (without spaces):
$deviceToken = 'deviceToken';

// Put your private key's passphrase here:
$passphrase = 'passphrase';

// Put your alert message here:
$message = 'message';

// Put the full path to your .pem file
$pemFile = 'pemFile.pem';

and then run the script with php simplepush.php.

The only thing to note here is that we need to insert the device token without spaces and without < and > characters.

Amazon SNS

Amazon has really good documentation for preparing everything you need, and you can take a look at it here.

After you have all the prerequisites, you should follow these instructions to create the so-called ‘platform application’. Settings that I’ve used are on the image below:

After this you can add a platform endpoint by pasting your device id (again, as in the PHP example; without spaces and < and > characters).

Finally, you have to select this endpoint and click on the Publish to endpoint button:

Here you can enter some test data like shown below:

After you click on the Publish message you should get a notification on your phone.

Conclusion

In this tutorial you’ve learned how to create a native iOS app with Swift that can receive VoIP push notifications sent with Houston, custom PHP script or through Amazon SNS.

I bolded native for a reason in the sentence above. As you know, I’m a big fan of hybrid apps and Ionic framework in particular.

This post is a part of the recent task that I had to do to create the Cordova VoIP push plugin. To successfully complete that, I first made the native app and then the plugin, since (unfortunately) the plugin wasn’t available.

You can read all about how I created the Cordova plugin for receiving VoIP push notifications in this post.

How to create a #native #iOS app that can receive #VoIP push notifications https://t.co/PFGq7rqXZr

— Nikola Brežnjak (@HitmanHR) September 30, 2016

I initially tested and wrote a tutorial for Pluralsight by using the angular-cli version 1.0.0-beta.9.

However, I’ve tried today with the latest version and for the life of me I couldn’t figure out how to use HTTP to call some service.

In the end, I figured what the issue was, so I’m putting it out here so it may be useful to someone else as well.

So, when I installed angular-cli with npm install -g angular-cli I haven’t at first noticed this error:
UNMET PEER DEPENDENCY [email protected]

What I ended up doing now was

npm install webpack -g && npm install webpack --save-dev

and now I can normally include Http into my component like this:

import { Http, Response } from '@angular/http';

and then use it within a class like this:

Hope this helps someone.

Yesterday I held the third Ionic framework meetup in Čakovec titled Getting started with Angular 2.

I showed how to get started with Angular 2 by using the angular-cli project to start, scaffold and test Angular 2 applications. You can read the tutorial that this talk was based on here: Getting started with Angular 2 by building a Giphy search application.

Two pics from the meetup:

I would like to thank Goran Levačić, the leader of incubation and education in TICM, for securing us the place for this meetup and company Axiom for the provided drinks.

In case you’re interested in next events, be sure to check out the meetup page and join the discussion there.

TL;DR

Raneto allows only basic username/password authentication, so I added Google OAuth support. This option can be turned on by setting the googleoauth option in the config.default.js file to true, and by supplying the OAuth config object as outlined in the guides below. Additionally, you can allow only emails from the certain domain to use the service with one config setting.

The basic idea was taken from the Google Cloud Platform Node.js guide.

This has been submitted as a pull request on the official Raneto Github repository. This is my way of saying thanks to an awesome author of Raneto. edit: 13.09.2016: The pull request was approved and merged!.

Steps on how to reproduce this on fresh copy

Below are the steps one needs to take to get this working on a fresh copy of Raneto. In case this won’t make it to the official repo, you can clone my fork here. Just make sure you set your Google OAuth credentials properly (more about this in the X section).

Install packages via npm

Make sure you first install Raneto dependencies after you clone it.

Install the following packages:

• npm install passport --save-dev
• npm install passport-google-oauth20 --save-dev

Editing the app/index.js file

• Add passport: var passport=require('passport'); just after raneto is required.
• Add oauth2 middleware: var oauth2= require('./middleware/oauth2.js'); in the config block, just afer error_handler.js middleware.
• Change secret to secret:config.secret, in the // HTTP Authentication section.
• >>> Remove the rn-login route app.post('/rn-login', route_login);
• >>> Remove the logout route: app.get('/logout', route_logout);
• Add the following Oauth settings, just before the app.post('/rn-login', route_login); line:

// OAuth2
if (config.googleoauth === true) {
app.use(passport.initialize());
app.use(passport.session());
app.use(oauth2.router(config));
app.use(oauth2.template);
}

• Change the Online Editor Routes to look like this now:

// Online Editor Routes
if (config.allow_editing === true) {
if (config.googleoauth === true) {
app.post('/rn-edit', oauth2.required, route_page_edit);
app.post('/rn-delete', oauth2.required, route_page_delete);
app.post('/rn-add-page', oauth2.required, route_page_create);
app.post('/rn-add-category', oauth2.required, route_category_create);
}
else {
app.post('/rn-edit', authenticate, route_page_edit);
app.post('/rn-delete', authenticate, route_page_delete);
app.post('/rn-add-page', authenticate, route_page_create);
app.post('/rn-add-category', authenticate, route_category_create);
}
}

• Set the root routes to be like this:

// Router for / and /index with or without search parameter
if (config.googleoauth === true) {
app.get('/:var(index)?', oauth2.required, route_search, route_home);
app.get(/^([^.]*)/, oauth2.required, route_wildcard);
}
else {
app.get('/:var(index)?', route_search, route_home);
app.get(/^([^.]*)/, route_wildcard);
}

Editing the app/middleware/authenticate.js file

Change the res.redirect(403, '/login'); line to be:

if (config.googleoauth === true) {
res.redirect('/login');
}
else {
res.redirect(403, '/login');
}

Editing the app/routes/login_page.route.js file

Add the googleoauth variable to the return object like this:

return res.render('login', {
layout : null,
lang : config.lang,
rtl_layout : config.rtl_layout,
googleoauth : config.googleoauth
});

Add the oauth2.js file

Create a new file oauth2.js in the app/middleware folder with the following content:

// Copyright 2015-2016, Google, Inc.
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

'use strict';

var express = require('express');
var debug = require('debug')('raneto');

// [START setup]
var passport = require('passport');
var GoogleStrategy = require('passport-google-oauth20').Strategy;

function extractProfile (profile) {
var imageUrl = '';
if (profile.photos && profile.photos.length) {
imageUrl = profile.photos[0].value;
}
return {
id: profile.id,
displayName: profile.displayName,
image: imageUrl
};
}

// [START middleware]
// Middleware that requires the user to be logged in. If the user is not logged
// in, it will redirect the user to authorize the application and then return
// them to the original URL they requested.
function authRequired (req, res, next) {
if (!req.user) {
req.session.oauth2return = req.originalUrl;
return res.redirect('/login');
}
next();
}

// Middleware that exposes the user's profile as well as login/logout URLs to
// any templates. These are available as `profile`, `login`, and `logout`.
function addTemplateVariables (req, res, next) {
res.locals.profile = req.user;
res.locals.login = '/auth/login?return=' +
encodeURIComponent(req.originalUrl);
res.locals.logout = '/auth/logout?return=' +
encodeURIComponent(req.originalUrl);
next();
}
// [END middleware]

function router(config) {
// Configure the Google strategy for use by Passport.js.
//
// OAuth 2-based strategies require a `verify` function which receives the
// credential (`accessToken`) for accessing the Google API on the user's behalf,
// along with the user's profile. The function must invoke `cb` with a user
// object, which will be set at `req.user` in route handlers after
// authentication.
passport.use(new GoogleStrategy({
clientID: config.oauth2.client_id,
clientSecret: config.oauth2.client_secret,
callbackURL: config.oauth2.callback,
hostedDomain: config.hostedDomain || '',
accessType: 'offline',

}, function (accessToken, refreshToken, profile, cb) {
// Extract the minimal profile information we need from the profile object
// provided by Google
cb(null, extractProfile(profile));
}));

passport.serializeUser(function (user, cb) {
cb(null, user);
});
passport.deserializeUser(function (obj, cb) {
cb(null, obj);
});
// [END setup]

var router = express.Router();

// Begins the authorization flow. The user will be redirected to Google where
// they can authorize the application to have access to their basic profile
// information. Upon approval the user is redirected to `/auth/google/callback`.
// If the `return` query parameter is specified when sending a user to this URL
// then they will be redirected to that URL when the flow is finished.
// [START authorize]
router.get(
// Login url
'/auth/login',

// Save the url of the user's current page so the app can redirect back to
// it after authorization
function (req, res, next) {
if (req.query.return) {
req.session.oauth2return = req.query.return;
}
next();
},

// Start OAuth 2 flow using Passport.js
passport.authenticate('google', { scope: ['email', 'profile'] })
);
// [END authorize]

// [START callback]
router.get(
// OAuth 2 callback url. Use this url to configure your OAuth client in the
// Google Developers console
'/auth/google/callback',

// Finish OAuth 2 flow using Passport.js
passport.authenticate('google'),

// Redirect back to the original page, if any
function (req, res) {
req.session.loggedIn = true;
var redirect = req.session.oauth2return || '/';
delete req.session.oauth2return;
res.redirect(redirect);
}
);
// [END callback]

// Deletes the user's credentials and profile from the session.
// This does not revoke any active tokens.
router.get('/auth/logout', function (req, res) {
req.session.loggedIn = false;
req.logout();
res.redirect('/login');
});
return router;
}

module.exports = {
extractProfile: extractProfile,
router: router,
required: authRequired,
template: addTemplateVariables
};

This is a changed file based on the Google Node.js official example file. Notable differences are in Google strategy settings which basically load settings from our settings config:

clientID: config.oauth2.client_id,
clientSecret: config.oauth2.client_secret,
callbackURL: config.oauth2.callback,
hostedDomain: config.hostedDomain || '',

We’ll define these settings the config.default.js file now.

Editing the example/config.default.js file

Change/add the following settings:

allow_editing : true,
authentication : true,
googleoauth: true,
oauth2 : {
client_id: 'GOOGLE_CLIENT_ID',
client_secret: 'GOOGLE_CLIENT_SECRET',
callback: 'http://localhost:3000/auth/google/callback',
hostedDomain: 'google.com'
},
secret: 'someCoolSecretRightHere',

Google OAuth2 Credentials

Oauth2 settings (GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET) can be found in your Google Cloud Console->API Manager->Credentials project settings (create a project if you don’t have one yet):

The callback, if testing locally, can be set as shown above (http://localhost:3000/auth/google/callback). The hostedDomain option allows certain domains – for your use case you may want to set this to your domain.

Google+ API

If you get an error like:

Access Not Configured. Google+ API has not been used in project 701766813496 before, or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/plus/overview?project=701766813496 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

Make sure you enable Google+ API for your project:

Adding Zocial CSS

To add support for the nice Zocial social buttons, download this file from their Github repo to the themes/default/public/styles/ folder.

Editing the themes/default/templates/layout.html file

Replace the login form with:

We added two scenarios for when we have Google OAuth enabled (config.googleoauth) and when we don’t (defaulting to the current Raneto behavior).

Editing the themes/default/templates/login.html file

Add zocial reference:

“

Replace the whole form-bottom classed div with the following code:

Same thing here as well. If we have Google OAuth enabled (config.googleoauth) then we show the new Google login button and hide the rest. Otherwise, we default it to the current Raneto behavior.

Testing

Congratulations, you’re done! Now, to test this locally just run the npm start from the root of your project and go to http://localhost:3000 and you should see this:

After logging in, you should see something like this:

Hope this helps someone!

#Raneto Google OAuth login step by step https://t.co/rWnoXFl0LO

— Nikola Brežnjak (@HitmanHR) September 7, 2016

Recently I did a research on the tools and services that let you test your apps (iOS, Android, Hybrid/Web) and here’s what I found.

TL;DR

In case you don’t have time to read through this and you’re looking for a quick answer on what to choose; I would go with AWS Device Farm.

It was the only service where the docs actually had clear instructions and the only service where the automated tests actually worked. If for nothing else, I would suggest using their Remote Access option, as it’s really great because it gives you the ability to test your app on the particular device with the particular OS version in real time. This is definitely useful for when a user submits a bug, and you don’t have the actual device/OS combination on which you could test.

A notable mention is Appium, which is perfect if you just want to test on your machine and your simulator. It’s open source and it even has support in AWS Device Farm.

Longer version

Below are my notes about the tools/services that I’ve tried.

AWS Device Farm

As you’ve read in the TL;DR, my choice would be AWS Device Farm, so I’ll take a bit more space here and explain why I liked it the most, and I’ll showcase the simplest usage.

The official website is here and the official documentation is here.

There are two main ways to use AWS Device Farm:

• Automated app testing using a variety of available testing frameworks (they even have a few built-in tests called Fuzz tests which create some screenshots and a usage video as well)
  • it supports hybrid apps for both Android and iOS
  • tests run in paralel on multiple devices
  • test reports contain:
    • high-level results
    • low-level logs
    • pixel-to-pixel screenshots
    • performance data
• Remote access to devices on which you can load, run, and interact with apps in real time
  • allows you to swipe, gesture, and interact with a device through your web browser in real time
  • details about actions that take place as you interact with the devices
  • logs and video capture of the session are produced at the end of the session for your review

Demo

The docs for setting this up are really great and straight to the point.

Once you create your first project, you have to Create a new run:

Then you have to select the Android/iOS icon and upload your .apk/.ipa file:

In the next step, you have to choose the test type that you would like to use. There are a lot of options, and as a starter (in case you don’t have your tests ready – we’ll cover these below in the Appium section) you can choose the Built-in Fuzz test.

In the next step you can select the various devices:

set some additional options and even pre-install some other apps:

After this, just review the settings and start the test. Tests will run in the background and in parallel on all the devices that you’ve set. Once this is done you will get an overview like this:

You can view the details of each run on the particular device:

You can view the screenshots, performance:

And you can even see the video of how the built-in test used your application:

Sure, these tests are not something on which we should rely on, and that’s why it’s great that we can write our own. In the next section, we’ll shortly cover Appium and why it’s so great for writing tests.

Appium

Appium is a tool that makes automation possible for iOS and Android devices. It’s architected around four key principles:

• You shouldn’t modify your app in order to test it, as you don’t want test libraries to affect the operation of your app
• You should be able to write your tests in any programming language, using any test runner and framework.
• There is already a very successful automation standard, so we should reuse and extend that rather than create an entirely new model.
• Mobile automation is for everyone. The best mobile automation tool will be open source, and not just in terms of having its code available for view. It should be governed using open source project management practices, and eagerly welcome new users and contributors.

Appium satisfies all these requirements in the following ways:

• Appium allows you to automate your Android and iOS apps without code modification because it relies on underlying automation APIs supported by the mobile OS vendors (Apple and Google) themselves. These APIs are integrated into the development process and thus don’t require any 3rd-party libraries to be embedded in test versions of your apps.
• Appium is built around a client/server architecture, which means Appium automation sessions are HTTP conversations (just as when you use any kind of REST API). This means clients can be written in any language. Appium has a number of clients already written, for Ruby, Java, JavaScript, Python, C#, PHP, Objective-C, and even Perl. Additionally, this means that it doesn’t matter whether an Appium server is hosted on the same machine as the tests.
• Selenium WebDriver is without a doubt the most widely-known framework for automating web browsers from a user’s perspective. Its API is well-documented, well-understood, and is already a W3C Working Draft. Appium uses this specification and extends it cleanly with additional, mobile-specific automation behaviors.
• Appium is open source. It should be clear from the volume of issues and pull requests that we have a very active community (who also engage with one another on our discussion forum).

Few additional learning resources:

• Youtube 1
• Youtube 2
• Tuts+ Code

Demo

Once Appium is installed and running, click the proper OS icon (Droid/Apple) and select the path to your compressed .ipa file (it is required that you zip the .ipa file):

One thing I had to set here as well was the BundleID, as it didn’t work without it (BundleID can be found in your config.xml file as the id property of the widget tag).

Once this is set, you can simply click the Launch button. Once the launching is done you’ll see something like the following in the logs:

[Appium] Appium REST http interface listener started on 0.0.0.0:4723

Then you can click the Magnifier icon:

which will run your app in the simulator:

If you’re testing Hybrid apps, be sure to set the proper Context:

The best feature of Appium is that it lets you Record the tasks. To enable it, just click the Record button, navigate through the tree like structure and select the actions that you want to perform on the selected tags (Tap, Swipe, Shake, text inserting, etc.), and it generates the test code (in few different languages):

Xamarin test cloud

• Website
• The installation was surprisingly long
• It turned out that once I uploaded my .ipa file it threw an error: The .ipa file does not seem to be linked with Calabash framework.
• The main drawback is that you need to integrate the SDK into the app itself. Something which you don’t have to do on the AWS Device farm (through Appium [take a look at their four key principles])

Calabash

• Later I figured out that Xamarin test cloud uses Calabash
• Callabash was developed and open sourced by Xamarin and it is a set of libraries that enable you to write and execute automated acceptance tests which consist of end-user actions like Gestures, Assertions, and Screenshots
• Calabash supports (and prefers) Cucumber

Cucumber

• Cucumber lets you express the behavior of your app using natural language that can be understood by business experts and non-technical QA staff.

Browserstack

Browserstack doesn’t support mobile app testing currently. Here’s the official thread:

• Can I test native apps or install apps on BrowserStack’s physical devices?

At this time, the mobile devices are available exclusively for cross-browser testing. Mobile app testing is on our roadmap for a later date.

Sauce labs

• Website

I’ve spent some time trying to get their solution to work as they popped up on most of the searches that I’ve done. However, I can’t say this was a pleasant experience as the docs seemed to be more like ‘Hey, we know how to do this, but if you want we can offer you our consulting support :/’.

But, didn’t like their support as I’m still waiting for the answer to my question I’ve sent them. When I got the automated sales email, I followed up with the guy but again he said he couldn’t help me as he’s ‘only’ sales.

They allow you to upload your executable to their service, but only via terminal. They don’t have an interface for this on the site as AWS does, nor do they have an overview of the uploaded files.

You run all your tests from a script, and you can then see the screenshots and video of how the tests are interacting with your app:

However, the bottom line here is that I wasn’t too impressed with them.

Other services

I have also briefly looked at these services, but they didn’t seem intriguing enough to pursue any of them further.

Firebase test lab

• Website
• only for Android

eggPlant Mobile

• Website
• Only image based

Soasta

• Website
• Nothing special. TBH, it seemed like it’s an older version that’s not actively developed.

Squish

• Website
• Seems like a quite stable solution, however only locally and it needs to be implemented in the Xcode/Android project to work

Testmunk

• Website
• Although very nice interface and the flow is basically as on AWS, it wasn’t able to run my app (just kept popping errors). I emailed the owners but no reply to date, so…

Keynote

• Website
• Asked for Credit Card – lol, are we in like 2009?

iOS only testing

• Frank
• KeepItFunctional

Windows only apps

• SmartBear – they have instructions on how to run it on OSX via virtualization however this still is ‘just’ an app like Appium which is open source.
• TestingWhiz
• SilkTest
• Ranorex

Miscellaneous

• Test automation trends 2016
• StackExchange thread about automated hybrid mobile app testing

Conclusion

So, yeah, as stated in the TL;DR AWS seems like the most viable solution to me right now. In case you have experience with some other solution, or you disagree with some of the conclusions that I’ve made, please let me know in the comments.

Also, if someone has extensive experience with writing and running tests on AWS Device Farm via Appium tests, I would love to get your feedback.

#Automated #mobile #testing tools and services https://t.co/rZpnBVQ9Fh pic.twitter.com/Yzbeg2ASya

— Nikola Brežnjak (@HitmanHR) August 23, 2016

Last week I held the second Ionic framework meetup in Čakovec.

I talked about how to get started with Test Driven Development in Ionic framework, and we had a coding session after the presentation that other participants were following. In the end, they had a clear how-to for starting testing their Ionic apps (with or without the use of TDD approach).

You can check out the presentation slides here, and you can read the tutorial that this talk was based on here: Introduction to TDD in Ionic framework.

Some pictures from the meetup are below:

I would like to thank Goran Levačić, the leader of incubation and education in TICM, for securing us the place for this meetup and company Axiom for the provided drinks.

In case you’re interested in next events, be sure to check out the meetup page and join the discussion there.

See you at the next meetup in about a month (middle of September, exact date TBD) where I’ll be talking about how to get started with Angular 2.

Last week I held the first Ionic framework meetup in Čakovec. Hereby I would like to thank Goran Levačić, the leader of incubation and education in TICM, for securing us the place for this meetup.

In case you’re interested about next events, be sure to check out the meetup page and join the discussion there.

What was it about?

First, we’ve shown how to set up the Ionic framework environment for those who didn’t yet have it and then we went through a typical application step by step.

You can see the reactions from the first meetup here, and some pictures are below. Also, TICM made a blog post about it on their site so check it out if you want (attention: only Croatian version).

Demo app

We made a simple application for searching (and showing) gifs from the Giphy website by using their API. Most apps fall into this category today; you have a service ‘somewhere’, and you call it within your app and show its data. Following the same principle, you could make an app for Youtube, IMDB, etc…

The source code for the app is on Github, and you can try it live as well.

Those of you who are already very familiar with Ionic may find the following pace too slow. If so, you can just take a look at the source code.

Starting the project

First, let’s start a new Ionic project with the following command (executed from your terminal):

ionic start giphyApp

When the command finishes, enter the new directory:

cd giphyApp

Just for testing purposes, let’s run the app to see if everything is OK:

ionic serve --lab

You should see something like this:

The --lab switch will give you a nice side by side view of how the app would look like on iOS and Android device.

Folder structure

Now, open up this folder in your editor and you should see something like this (I’m using Sublime Text 3):

When developing Ionic applications, you’ll be spending most of the time in the www folder.

Just a quick TL;DR of other folders and files that we have:

• hooks – contains so-called Cordova hooks, which execute some code when Cordova is building your project. From my experience, I didn’t have to set this up yet
• platforms – contains the platform specific files upon building the project
• plugins – contains Cordova plugins which have been added (or will be) to the project
• scss – contains SASS files
• Bower is a front-end package manager that allows you to search, install and update your front-end libraries. You can learn more in this comprehensive tutorial. Bower saves downloaded modules defined in the .bowerrc file
• config.xml – Cordova configuration file
• gulpfile.js – Gulp configuration file. You can learn more in this getting started tutorial, but shortly; Gulp is a so-called JavaScript task runner which helps with tasks like minification, uglification, running unit tests, etc.
• ionic.project – Ionic.io configuration file
• package.json – contains the information about Node.js packages that are required in this project
• .gitignore – defines which files are to be ignored when pushing to Github
• README.md – projet information document written in Markdown that automatically shows as a landing page on your Github project

Let’s start writing some code

OK Batman, enough with the theory, let’s write some code!

First, let’s try to change some text on the first tab.

Sure, but, how should we know in which file is that first tab defined?

Well, as with every app, let’s start searching in the index.html

The content of that file is shown below for reference:

We see that we have a simple HTML file which in its head section has some meta tags, then we import some CSS, and finally some js files.

In the body tag we see that it has a ng-app="starter" attribute attached to it, which tells us that in some JavaScript file there is a module named starter.

If we take a look at the JavaScript files located in the js folder, we will find this starter module in the app.js file.

Ok, sure, that’s all nice, but we still don’t know which file to change!

Well, if we take a look at the templates folder (of course, Search functionality of your editor comes handy in situations like this ;)) we’ll see that the tabs-dash.html file contains the text Welcome to Ionic.

Now, remove all the code from this file except h2, and write something like Welcome to GiphySearch. Also, change the text Dashboard to GiphySearch.

Just for reference, the contents of the tab-dash.html file should now be this:

Tab text

Currently, you should have a screen that looks like this:

Those tabs don’t quite represent what we would like to have there, right?

Sure, but where would we change that?

Well, if you open up the templates/tabs.html file you’ll see where you can make such a change. So, change the title to Home.

Voila! You now have a tab named Home.

Icons

However, the icon is a bit ‘wrong’ here, don’t you think?

By looking at the HTML:

“

we can see some interesting attributes like icon-off and icon-on.

Yes, this is where you can define how our icons will look like.

Great, but, where do you find the exact class which you would put here?

Enter Ionic icons:

Search for any icon you wish by name, click on it, copy the string and place it in your icon-on and icon-off attributes.

In our case, this is what we will use:

Buttons

It’s true that we can just click the tab and move between them, but since we’re building an enterprise xD application here, let’s add a new button in the tab-dash.html file:

<a class="button button-block button-royal">Go to search</a>

In case you’re wondering where I came up with all those classes, you can view all the various buttons in their (quite good) documentation.

The ui-sref is a part of Angular’s UI Router, and it basically sets the link to which this button will take us once clicked.

At this point you should have a screen that looks like this:

and by clicking the button, you should be shown the second tab called Chats.

Some more tab modifications

OK, fine, so we click the button, and we’re shown the Chats tab. Big deal. But we don’t want the Chats tab! We’re making a Search app!

OK, easy on the coffee partner. We’ll get to this now.

So, armed with the knowledge from before we open the templates/tab-chats.html and remove everything between the ion-content tag, and we change the title to Search.

We also don’t like that icon and text on the tab, so let’s hop in the templates/tabs.html file and change the Chats tab definition to this:

What have we done? We literally changed the Chats text to Search. But, we also added different classes for the icons (again, using Ionic icons as explained before).

This is fine, but say we’re meticulous about it, and we don’t want to have the tab-chats.html, but instead we want tab-search.html. No problem, just rename the file.

Route 66

But, now we have a problem. Our button on the first tab is not working anymore. That’s because we renamed the file, so we need to set the proper references. We do that in the app.js file. Just search the file for this code:

.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})

and change it with this:

.state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'ChatsCtrl'
}
}
})

OK, fine Sherlock, this works now if I click on the Search tab, but it does not work if I click the button on the first tab!?

Yep, that’s right, and that’s because we have the wrong url set there. Set it to this now:

<a class="button button-block button-royal">Go to search</a>

Voila, we now have a working button on the first tab, and we have a nice, empty, ready to be awesome, Search page:

Search tab mastery

So, we now have a blank screen, and at this point, we ask ourselves:

Cool, what do we want to have here?

Well, since it’s a search app, what do you say about an input field? Great. But wait! Before you start typing those input tags, let’s first check out the Ionic docs and scroll a bit around that Forms section.

I happen to like this one, so let’s copy the following code in our tab-search.html file (inside the ion-content tag):

<div class="list list-inset"><label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" />
</label></div>

OK, we’re rockin’ things by now, so let’s add some button as well (inside the div with list class):

<a class="button button-block button-royal">Search</a>

For reference, this should be the exact content of your tab-search.html now:

<div class="list list-inset"><label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" />
</label><a class="button button-block button-royal">Search</a>
</div>

And this is how it should look like:

Search tab action

This is all nice now, but now we would probably want something to happen when we click this button, right? What about calling some function? Great, let’s write that now!

On this button add the new attribute ng-click, which tells Angular that once this button is clicked call the function that’s written as the attribute’s value. Ok, sure, a lot of fluff here, this is how it looks like in the code:

<a class="button button-block button-royal">Search</a>

And, in plain English; once the button is clicked the function performSearch will be called.

But, again, if you click the button, nothing happens!? Well, that’s because there’s no performSearch function defined anywhere. Let’s do that now.

All the controllers are currently defined in the controllers.js file. But, how do you know which controller you have to change? Well, if you take a look at the route definitions in the app.js fille you will see remember we changed the search tab like this before:

.state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'ChatsCtrl'
}
}
})

So, the answer would be: we need to change the ChatsCtrl controller in the controllers.js file. However, we’re meticulous, remember? So, we don’t want to have ChatsCtrl, instead, we want to have SearchCtrl. No problem, just change the line in the listing above to:

controller: SearchCtrl

Controllers

In the controllers.js file remove the ChatsCtrl controller code completely, and instead write this:

.controller('SearchCtrl', function($scope) {
console.log("Hello from the Search controller");
})

For reference, the contents of the whole controllers.js file should now be:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('SearchCtrl', function($scope) {
console.log("Hello from the Search controller");
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});

Now when we load the app and go to the search tab, we will see the following message in the DevTools Console window (this is in the Chrome browser, but I’m sure you know how to use this in the browser you use, right?):

Adding the function

We’re outputting something to the browsers console, but we still get nothing when we click the button. To fix this add the following code to the SearchCtrl controller:

$scope.performSearch = function (){
console.log("button click");
};

When you click the button, your browser console should look something like this:

Oh man, you said this would be slow paced, but this is like watching a video at 0.25x speed. Yeah, I love you too 🙂

What would we like to do now when we click the button? Well, it would be logical at this point that we would ‘somehow’ output to the console what the user entered in the input box. Here’s the easiest way to do this:

Enter this code in the SearchCtrl controller:

$scope.search = {}
$scope.search.term = 'cats';

and now, in the tab-search.html file, alter the input to this:

<input type="text" placeholder="Search" />

Note that we added

ng-model="search.term"

which basically binds the Angular model to this input. In case you’re wondering why we haven’t just used the ng-model="search" then you’re in for a treat with this answer.

To output the search term to your browser console just adjust the function like this:

$scope.performSearch = function (){
console.log("search term: " + $scope.search.term);
};

When you load your app and click the Search button (without changing the input value), you should get this:

Note how the cats text has been automatically populated as the app loaded. That’s some powerful two-way binding in Angular.

Giphy API

Finally, we come to the cool part, and that is to fetch some data from the service and to show it in our app (in our case, we’ll show images).

So, how do we get this API? Well, if you do a simple google search for giphy api and open the first link you’ll get the documentation for their API.

So, what do we need? Well, we need the search API. If you scroll a bit, you’ll find the following link:

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

Great, now we see what kind of a request we need to create to search Giphy’s gif database for a certain term.

If you open this link in the browser, you’ll see what the service returns. Something like:

Ok, and now what? So, now we want to fetch this data from within our app. Ok, but how do we do that?

Angular HTTP requests

Angular has an $http service for sending HTTP requests to some service API endpoint.

Let’s jump a bit and change our performSearch function to this:

$scope.performSearch = function (){
var searchTerm = $scope.search.term.replace(/ /g, '+');

console.log("search term: " + searchTerm);

var link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + searchTerm;

$http.get(link).then(function(result){
console.log(result);
});
};

Line by line explanation of the new code:

• added a new searchTerm variable, and used the replace function on the $scope.search.term variable, with the regex for global matching (the g switch) that basically replaces all the spaces with +. We did this in case someone enters ‘cats and dogs’, for example, in our input box.
• output this new variable to the console
• added a new link variable and constructed it so that the search term is properly added to the link.
• used the $http service to get the data from the URL defined in the link variable and printed the result to the console

Dependency injection

Now, if you try to run the app you’ll get this in your console log:

So, we see $http is not defined.

In case you’re familiar with Angular from before, you’ll immediately know that the problem here is that we’re using the $http service, but we haven’t dependency injected it in our controller. We do that simply by requiring it in the controller definition:

.controller('SearchCtrl', function($scope, $http) {

In case you’re not familiar with the Dependency injection concept, you can read a bit about it here.

Now, if you run the app and enter something in the search term and click the search button you’ll see something like this in your console log:

Saving the results for later use

Here you can see that we’re getting back the result object and that in it’s data property there are 25 objects, which hold information about the images that we want to show in our app.

But, how do we show these images in our application?

We see that the api call returns 25 images within the data object (which again is inside the data object), let’s save this in some variable for later use:

$scope.giphies = [];

And, let’s store the 25 objects from the api call to this variable:

$scope.giphies = result.data.data;

Just for reference, to put it all in one listing, the contents of the SearchCtrl controller should now be:

.controller('SearchCtrl', function($scope, $http) {
console.log("Hello from the Search controller");

$scope.search = {};
$scope.search.term = 'cats';
$scope.giphies = [];

$scope.performSearch = function (){
var searchTerm = $scope.search.term.replace(/ /g, '+');

console.log("search term: " + searchTerm);

var link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + searchTerm;

$http.get(link).then(function(result){
$scope.giphies = result.data.data;
console.log($scope.giphies);
});
};
})

Showing the images

This is all great now, but we don’t want to be logging out our objects to the console, we want to show them in our app.

After examining the result object for a while, we can conclude that to show the image, we need to position ourselves on the object images, then original, and finally on the url property.

To show one image we can add an img tag in the tab-search.html file and position ourselves on the first element of the giphies array, in the object images, then original, and finally on the property url. Again, this long fluff is way nicer in code:

<img ng-src="{{giphies[0].images.original.url}}">

And sure, we do a search, and we get one image shown:

But, we want all GIFs, not just one!

For that we will use Angular’s ng-repeat:

<img ng-repeat="g in giphies" ng-src="{{g.images.original.url}}">

And, sure enough, all 25 images are here now. But, we would like to to be, you know, a bit nicer as it’s not every day that you get to work on an enterprise application like this!

So, what do we do? We go in the Ionic documentation, and we search for a bit… Finally, we settle for the Card component.

Let’s copy it’s code to our tab-search.html but without the footer part, and let’s adjust it a bit by moving our img inside it:

<div class="card">
<div class="item item-divider">{{g.id}}</div>
<div class="item item-text-wrap"><img /></div>
</div>

By now you’re a pro at this, but let’s just note that we moved the ng-repeat from the img tag to the div tag with the card class, so that we get this nice Card component repeated for every new GIF. Oh, and the {{g.id}} is there so that we write something (the GIFs id in this case).

Styling

At this moment we’re super happy, but the designer in us notices that our images are not quite right. We’re rocking the design stuff and all that CSS thingies, so we know we just need to add the following CSS rule to the image:

width: 100%;

SASS

But, writing plain old CSS is soo 2013 (we’re in 2016, remember? ;)), and I want to show you how to set up your Ionic to work with SASS.

I won’t go into the details, but TL;DR would be that SASS is CSS on steroids which basically allows you to have functions, variable, mixins, etc… Learn more here.

Go back to the terminal where you have ionic serve --lab running from before and break the process (CTRL + C). The, execute the following command:

ionic setup sass

And, next step is. Oh, there’s no next step! All is set up for you! To not go into details; Gulp tasks, proper index.html includes, etc…

Now, you should write your SASS code in the scss folder. Let’s create a new file _custom.scss (the underscore is important!) here with the following code:

.card img {
width: 100%;
}

.centerText {
text-align: center;
}

And, do not forget to import it by appending this to the ionic.app.scss file (contained in the scss folder):

@import "custom";

Yes, you’re importing here without the underscore in the name.

If you want to center your text (where we display the id of the GIf), just add the class like this:

<div class="item item-divider centerText">{{g.id}}</div>

Now just run ionic serve --lab again and admire you’re app with nicely positioned title and nicely set up images:

Student becomes a master

Sure enough, you should congratulate yourself now; you have a working app! But, let’s be honest, putting all that code inside the controller seems a bit dirty, doesn’t it? Besides, we’re making an enterprise app here, and we want to have some structure and follow the proper practices, right?

Great, I’m glad you’re with me on this.

We’re going to create a service for fetching these GIFs. Our service (called Giphy) will look like this (yes, change the whole prior content of the performSearch function with this):

$scope.performSearch = function (){
Giphy.search($scope.search.term).then(function(result){
$scope.giphies = result;
});
};

Also, don’t forget to inject Giphy in the controller:

.controller('SearchCtrl', function($scope, $http, Giphy) {

Lets’ write a service

In the file services.js remove the Chats factory and add this instead:

.factory('Giphy', function($http) {
return {
search: function(term) {
var searchTerm = term.replace(/ /g, '+');

var link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + searchTerm;

return $http.get(link).then(function(result) {
return result.data.data;
});
}
};
});

Don’t be scared off by the strange code; it’s basically a boilerplate code for writing factories/services. What’s important here is that we defined a factory named Giphy and that we’re exposing the function search which accepts the parameter term.

You may notice that we basically copied the whole code from the controller to this factory.

The only difference is that here we’re returning the result of the $http.get call, which basically returns the promise, upon which we can call then in the controller. In case you don’t know, promises work in such a way that once the promise resolves (finishes with whatever task it had) it activates the then part where we then do something with the data that was returned via this promise.

Also, please note that we injected the $http service so that we could use it for our HTTP calls, just as we did in the controller before.

So what?!

rant

You run the app, and it’s not faster, it’s not nicer, it’s basically the same as half an hour ago, so what gives??

Well, with this you modularized your code so that now you’ll be able to use the Giphy service in any other controller, just by injecting it where needed. In case you didn’t have this, you would have to copy/paste the code through the controllers.

This would lead to code duplication, which would then lead to a maintenance nightmare, which again leads to compounded code debt, which in the end leads to a miserable life as a developer.

And, you don’t want this for yourself, as you’re an aspiring developer looking to get better each day. Forgive the cheesy metaphors, but really, these days I’ve seen too many people give up for smaller reasons than “I don’t know how to write a service/factory”.

But, I’m happy for you! Because making it this far in the tutorial puts you far ahead the pack. Keep learning and growing and you’ll do just fine in life!

/rant

Ionic.io and Ionic view

You can test the app in the emulator/simulator; you can test it by running it on your physical device. But also, you can test your app on your mobile phone via the Ionic View application.

Just download the app for your phone and create an account on Ionic.io.

Once you have the account, login via your terminal by executing:

ionic login

and, finally, upload the app to the Ionic.io service with:

ionic upload

Once this is done, you’ll be able to see your app in the Ionic View app on your phone and you can run it from there.

Get the code on Github

This is just a short rundown of the commands that you need to run to get your project to Github:

• create a project on Github
• Execute git init in the root of your project
• git add .
• git commit -m "my awesome app"
• git remote add origin https://github.com/Hitman666/GiphySearch.git – make sure this is the correct url to your project on Github
• git push -u origin master

Moar learning materials plz!

In case you’re interested in learning more, you can download a PDF version of unabridged 4 posts via Leanpub, or you can read the abridged (but still 10000+ words long tutorial here). Yes, you can choose zero as the amount and I promise I won’t take it against you 😉

Conclusion

Our goal on these meetups is to ‘meet’ each other, learn something new, help each other, and if nothing else to hang out with the people who hold similar interests.

The theme for next meetup will be ‘Introduction to Test Driven Development in JavaScript and Ionic’ (those inclined to get ready in advance can read this post). The date is yet to be defined, but somewhere around the end of August.

Ah, and finally, if you want to see how one would build the same exact application with Angular 2, you can check out the tutorial that I wrote for Pluralsight: Getting started with Angular 2 by building a Giphy search application.

See you!

Build an #Ionic app for searching #gifs using #Giphy API https://t.co/aBzRBVNeE3

— Nikola Brežnjak (@HitmanHR) July 14, 2016

My first tutorial about Angular 2 was just published on Pluralsight.

You can read the post here: Getting started with Angular 2 by building a Giphy search application.

If you like the post, please spread the word, and if you’re on Reddit, please consider +1-ing it here

Let me know what you think in the comments, and until next time, keep learning!

TL;DR

In this rather long post, I’m going to give you an introduction to Test Driven Development in Ionic. First ,I’m going to cover some basic theory concepts and then we’ll see how to apply this on few examples. First in plain Javascript and then finally in Ionic.

At the end of this tutorial, you’ll have a clear path on how to start practicing TDD in your JavaScript and Ionic applications. Also, at the bottom, you’ll see a full ‘resources dump’ of all the resources that I’ve gone through in trying to learn about TDD myself.

The presentation slides, in case someone is interested, can be viewed here.

Let’s answer some tough questions

How many of you actually test your code? Don’t worry; this is a rhetorical question, you don’t need to raise your hands.

Well, if we’re honest here, in my case (since I’m writing mostly JavaScript lately) up until recently I was practicing a so-called CLTDD. Which, of course, stands for console.log TDD.

We all know we should do something to make this better, but far too often we do it like this gentleman here:

Ok, jokes aside, let me try to emphasize on why testing may actually be useful to you. Just think about the following questions:

• Have you ever fixed a bug, only to find that it broke something in another part of the system?
• Have you ever been afraid to touch a complicated piece of code for fear that you might break?
• Have you ever found a piece of code that you’re pretty sure wasn’t being used anymore and should be deleted, but you left it there just in case?

Well, if the answer to any of these questions is yes, then you’ll see value in what TDD can bring to the table if practiced correctly.

What is TDD?

Since most of us here are developers I bet you’ve heard about unit testing. However, unit testing is not the same thing as TDD. Unit tests are a type of test. TDD is a coding technique. Meaning that if you write unit tests, you don’t actually consequently do TDD.

TDD is an approach to writing software where you write tests before you write application code. The basic steps are:

• Red – write a test and make sure it fails
• Green – write the easiest possible code to make the test pass
• Refactor – simplify/refactor the application code, making sure that all the tests still pass

At this point you may be like:

Wait, now I have to write code to test the code that I still haven’t written?!”

Yes, you write more code, but studies have shown objectively that good test coverage with TDD can reduce bug density by 40% – 80%.

Why bother with tests?

So, why would you want to test your code in the first place? Isn’t it enough that you have a deadline approaching, and now you should spend your precious time writing a test, instead of the actual application code?

Well, as features and codebases grow, manual QA becomes more expensive, time-consuming, and error-prone.

Say for example if you remove some function from the code, do you remember all of its potential side-effects? Probably not. But with unit tests, you don’t even have to. If you removed something that is a requirement somewhere else, that unit test will fail, and you’ll know you did something wrong.

So basically, we test our code to verify that it behaves as we expect it to. As a result of this process, you’ll find you have better feature documentation for yourself and other developers.

Also, as James Sinclair argues, practicing TDD forces one to think, as you have to think first and then write a test. Also, it makes debugging easier and programming more fun.

5 Common Misconceptions About TDD & Unit Tests

There are 5 Common Misconceptions About TDD & Unit Tests based on Eric Elliot.

• TDD is too Time Consuming
• You Can’t Write Tests Until You Know the Design, & You Can’t Know the Design Until You Implement the Code
• You Have to Write All Tests Before You Start the Code
• Red, Green, and ALWAYS Refactor?
• Everything Needs Unit Tests

Also, he holds a rather strong point about mocking in TDD:

Here’s a tip that will change your life: Mocking is a code smell.

Demo time

OK, enough with the theory, now let’s see some code!

Prerequisites

To be able to follow this tutorial you need to have Node.js installed. Also, via npm you’ll need to install globally the following packages:

• Karma
• Jasmine
• PhantomJS

I picked Karma as an environment for running the tests and Jasmine for the actual test cases because these frameworks seem to me as the most reliable for this task and seem to be in widespread use. However, keep in mind that there are many other options. Few worth mentioning are Mocha, Chai, Sinon, Tape, etc.

What I would like to add here is that these days (especially in the JavaScript world) you have a vast number of options. Choosing one option and actually starting is way better than endlessly weighing the options.

With Jasmine, we’ll be using a so-called Behaviour Driven Development (BDD) style to write the tests. This is a variation on TDD where tests are written in the form:

• describe [thing]
• it should [do something]

The [thing] can be a module, class, or a function. Jasmine includes built-in functions like describe() and it() to make writing in this style possible. Also, Jasmine offers some other cool stuff like spies, which we won’t cover here, but you can learn more about it from the official documentation.

The JavaScript demo

In this demo, I’ll show you a simple step by step TDD approach to building a simple calculator library. This will be a simple file with just two functions (add and sub). This will be nothing fancy; it’s just to illustrate how this process would go.

Folder structure and dependencies

Let’s start by creating a new folder called jstdd and inside it a folder app:

mkdir jstdd && cd jstdd && mkdir app && cd app

Also, create an index.js file inside the app folder:

touch index.js

Next, execute npm init in the jstdd directory. This will create a package.json file for us, where all the other dependencies (which we’ll install shortly) will be saved to. On every question in the npm init command you can safely press ENTER by leaving the default values.

Next, install all the needed dependencies:

npm install karma karma-jasmine jasmine-core karma-phantomjs-launcher --save-dev

For those who aren’t too familiar with Node and npm, with the --save-dev switch we save these dependencies to our package.json file that was created with the aforementioned npm init command.

Next, create a new folder called tests and a file index.spec.js inside it:

mkdir tests && cd tests && touch index.spec.js

Setting up Karma

Basically, we have everything set up now. But, before we actually start writing our tests, we have to configure Karma. So, in the root of our application (folder jstdd) we have to execute

karma init

The answers to the questions should be:

• use Jasmine as a testing framework
• don’t use Require.js
• use PhantomJS instead of Chrome (use TAB key on your keyboard to switch between options). This is because we want to run our tests in the console
• use app/*.js and tests/*.spec.js when asked for source files and test files. We can use glob patterns, meaning that star (*) matches anything
• when asked for which files to exclude, just skip by pressing ENTER
• finally, choose yes to have Karma watch all the files and run the tests on change

With this process being done, Karma generated the karma.conf.js file, which (without the comments) should look like this:

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],

        files: [
            'app/*.js',
            'tests/*.spec.js'
        ],

        exclude: [],
        preprocessors: {},
        reporters: ['spec'],

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,

        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: false,

        concurrency: Infinity
    });
};

Finally let’s write some tests

At this point we have everything set up and we can start writing our tests. We will write our tests in index.spec.js file.

To remind you, our goal here is to create a simple calculator library. So, we start by writing a test.

When we’re using Jasmine to test our code we group our tests together with what Jasmine calls a test suite. We begin our test suite by calling Jasmine’s global describe function.

So we’re going to write (in index.spec.js file):

describe ("Calculator", function (){

});

This function takes two parameters: a string and a function. The string serves as a title and the function is the code that implements our test.

Within this describe block we’ll add so-called specs. Within our it block is where we put our expectations that test our code.

So, for example, the first thing that we’re going to test is that we indeed have an add function:

it('should have an add function', function() {
    expect(add).toBeDefined();
});

Don’t worry about the syntax; that can be easily learned by going through Jasmine’s documentation. And, besides, the good news is that all of the test tools have more or less similar syntax.

Ok, so we wrote our test, but now what? Well, we run the test in the terminal by running karma start.

You should see something like:

And, what do we see here? We see that we have a failing test. So, what do we do now? We move to the next step, and we make the test pass in the simplest possible way. So, how are we going to do that? We write a add function in the index.js file:

function add() {}

And now we have a passing test. Great. Can we refactor (3rd step) something? Most probably not at this stage, therefore we move onward.

So what’s the next thing we expect from our add function? Well, we expect that, for example, if we pass numbers 1 and 2 to it, that it will return number 3. So how do we write a test for this? Well, exactly as we said. So:

it ("should return 3 when passed 1, 2", function (){
    expect(3).toEqual(add(1,2));
});

Now we have a failing test and we go and fix it. At this point we ask ourselves:

What’s the fastest way to pass this test?

Well, the answer to this questions is to return 3 from our function:

function add(){
    return 3;
}

And, yet again we have a passing test.

However, say we want to make another test where we say that we expect 5 when passed in 3 and 2:

it ("should return 5 when passed 3, 2", function (){
    expect(5).toEqual(add(3,2));
});

Well, one way we could make this pass is to check for the parameters and create some switch cases… But, as you can see this is growing and, to be honest, it’s not the way should do things, so we refactor.

So, rule of thumb, the third step is REFACTOR and make sure the tests are still passing.

In the moment of inspiration we write (in index.js file):

function add (a, b){
    return a + b;
}

and with that we now have a passing test and refactored code.

Making the output prettier

At this point it may not be so nicely presented what all specs we have as passing. And, if you want to see that, you can install:

npm install karma-spec-reporter --save-dev
npm install jasmine-spec-reporter --save-dev

And then, in the karma.conf.js file just change the reporter to spec, like this:

reporters: ['spec']

Now when we run karma start we will have a nice output like:

Calculator
    ✓ should have an add function
    ✓ should return 3 when passed 1, 2
    ✓ should return 5 when passed 3, 2

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.002 secs / 0.002 secs)
TOTAL: 3 SUCCESS

Just a quick note on how to skip a certain test, by adding x before it:

xit ("should return 5 when passed 3, 2", function (){
    expect(5).toEqual(add(3,2));
});

Karma then reports this in the console log:

Calculator
    ✓ should have an add function
    ✓ should return 3 when passed 1, 2
    - should return 5 when passed 3, 2

indicating that the last test was skipped.

Full source and test code listing

Just for reference, this is how the index.spec.js file would look like when we add the tests for the sub function:

describe ("Calculator", function (){

    describe ("add function", function (){
        it('should have an add function', function() {
            expect(add).toBeDefined();
        });

        it ("should return 3 when passed 1, 2", function (){
            expect(3).toEqual(add(1,2));
        });

        it ("should return 5 when passed 3, 2", function (){
            expect(5).toEqual(add(3,2));
        });
    });

    describe ("sub function", function (){
        it('should have an sub function', function() {
            expect(sub).toBeDefined();
        });

        it ("should return -1 when passed 1, 2", function (){
            expect(-1).toEqual(sub(1,2));
        });

        it ("should return 1 when passed 3, 2", function (){
            expect(1).toEqual(sub(3,2));
        });
    });

});

This is the contents of the index.js file:

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

And, this is what Karma would output to the console once run at this point:

Calculator
    add function
      ✓ should have an add function
      ✓ should return 3 when passed 1, 2
      ✓ should return 5 when passed 3, 2
    sub function
      ✓ should have an sub function
      ✓ should return -1 when passed 1, 2
      ✓ should return 1 when passed 3, 2

If you want to take a look at the whole code, you can fork it on Github.

Wallaby

This all is preety cool and you can have your terminal oppened up and see how your test turn green. However, as with everything these days, there are better tools out there. One such tool is Wallabyjs. And, let me just show you what it can do.

First you have to install Wallaby for your editor. They support Visual Studio Code, Atom, Submlime, Webstorm, etc.

After you’ve installed it, you have to set its config file. Let’s create a new file and name it wallaby.js and place it in the root of our app. Copy/Paste the following code into it:

module.exports = function (wallaby) {
  return {
    files: [
      'app/*.js'
    ],

    tests: [
      'tests/*.spec.js'
    ],
    debug: true
  };
};

You may have to restart your editor at this point. At this point you just run Wallaby from withing your editor. In Sublime it’s done by pressing CMD + SHIFT + P and selecting Wallaby.js: Start. There is also a handy shortcut in sublime: CMD + . followed by CMD + R.

As you will see, you now have information about your tests passing (green rectangles on the left-hand side) or failing inside the actual editor:

There are actually a lot more features to Wallaby, which I’ll leave to you to explore. I’m not affiliated with them in any way; I just happen to like it. But, just so you don’t say I didn’t mention it; as every great tool, it has its price. And, if you’re contemplating (or even complaining) about whether or not you should pay for certain software, please read this awesome post by Ambrose Little on How Much Is Your Productivity Worth?.

Ok, so this was the JavaScript tutorial. Let’s now take a look how would we setup up Jasmine and Karma in the Ionic framework application.

The Ionic framework demo

You need to have Ionic and Cordova packages installed globally with npm in order to follow this part of the tutorial. You can learn more about how to do that in Ionic Framework: A definitive 10,000 word guide.

Starting a new project and installing prerequisites

First, we start a new Ionic project:

ionic start ionic-tdd tabs

Next, we go inside this folder and install the necessary prerequisites.

cd ionic-tdd
npm install karma karma-jasmine karma-phantomjs-launcher jasmine-core --save-dev

Setting up Karma

Please make sure you have Karma installed globally from the previous JavaScript section. If you don’t you can do this simply with:

npm install -g karma-cli

Also, at this point, we have to run npm install to install all the prerequisites from the Ionic package.json file.

Finally, we need to install angular-mocks with bower:

bower install angular-mocks --save-dev

since we’ll use that to mock certain Angular controllers.

Once this is done we create a new folder in our project’s root directory. Let’s call it tests:

mkdir tests

Also, let’s run karma init command (run this command in your terminal, once in the root directory of your project).

You can follow the same instructions for Karma as in the JavaScript section, just don’t enter the location of the source and test files, we’ll add them separatelly.

Now we have to open up the karma.conf.js file and add our source and test files:

files: [
        'www/lib/angular/angular.js',
        'www/js/*.js',
        'www/lib/angular-mocks/angular-mocks.js',
        'tests/*.spec.js'
],
browsers: ['PhantomJS']

In the next step, we’ll configure our gulpfile.js file, so that we’ll be able to run our test via Gulp, since Ionic uses it as it’s task runner. We import Karma at the top of the file:

var karmaServer = require('karma').Server;

And we write a new task called test:

gulp.task('test', function(done) {
    new karmaServer({
        configFile: __dirname + '/karma.conf.js',
        singleRun: false
    }).start();
});

Now, we can run gulp with the test parameter like this: gulp test.

Testing the controller

First, let’s create a new tests/controllers.spec.js file in the tests folder.

Please note that this now isn’t a TDD approach, since we already have the code in our controller written. But, if you ever come to a project that hasn’t got unit tests this is what you’ll be doing. Plus, all the refactoring to make the code testable, but that’s a different story for some other time…

We start by writing our describe function:

describe('Controllers', function(){

});

Next, since this is Angular, we’ll have a local scope variable (var scope). And before each test we have to load the starter.controller module:

beforeEach(module('starter.controllers'));

How do we know we have to set this module? Well, if you take a look at the controllers.js file, you’ll see the name of the module there on the top as starter.controllers.

Also, we need to inject Angular’s scope variable and set the controller.

beforeEach(inject(function($rootScope, $controller) {
    scope = $rootScope.$new();
    $controller('AccountCtrl', {$scope: scope});
}));

To put this all in one place, you should have a controllers.spec.js file that looks like this:

describe('Controllers', function(){
    var scope;

    beforeEach(module('starter.controllers'));

    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        $controller('AccountCtrl', {$scope: scope});
    }));
});

This is a boilerplate code that you’ll have to write in every test, so though it may seem strange at first, it becomes something you don’t think about after you’ve worked with it for some time.

Again, if you wonder how we came to the AccountCtrl, just take a look at the controllers.js file and the name of the controller we’re trying to test.

Finally, we come to our test. And, say we want to test if the enableFriends property on the settings object is set to true, we would write a test like this:

it('should have enableFriends property set to true', function(){
    expect(scope.settings.enableFriends).toEqual(true);
});

Now we run our tests with gulp test and we can see our test is passing.

Testing the service/factory

Now we’re going to write a test for our factory Chats. As you can see, the factory has three functions for getting all chats (that are currently hard-coded), removing a chat and getting a specific chat.

First, we’ll create a new file in the tests folder called services.spec.js and add our describe function:

describe('Chats Unit Tests', function(){

});

Next, we’re going to set the module and inject the Chats factory:

var Chats;
beforeEach(module('starter.services'));

beforeEach(inject(function (_Chats_) {
    Chats = _Chats_;
}));

Now, we can write our first test, and well, let’s first test if our Chats factory is defined:

it('can get an instance of my factory', inject(function(Chats) {
    expect(Chats).toBeDefined();
}));

Then, we can check if it returns five chats

it('has 5 chats', inject(function(Chats) {
    expect(Chats.all().length).toEqual(5);
}));

If at this point, we also want to see a nicer spec reports, we should kill the currently running gulp process. Install the required packages:

npm install karma-spec-reporter --save-dev
npm install jasmine-spec-reporter --save-dev

adjust the karma.conf.js file:

reporters: ['spec'],

and rerun gulp with gulp test.

To put this all in one place, you should have services.spec.js file that looks like this:

describe('Chats Unit Tests', function(){
    var Chats;
    beforeEach(module('starter.services'));

    beforeEach(inject(function (_Chats_) {
        Chats = _Chats_;
    }));

    it('can get an instance of my factory', inject(function(Chats) {
        expect(Chats).toBeDefined();
    }));

    it('has 5 chats', inject(function(Chats) {
        expect(Chats.all().length).toEqual(5);
    }));
});

If you want to take a look at the whole code, you can fork it on Github.

Wallaby

If you want to try Wallaby in Ionic you just need to create the wallaby.js file and set the configuration:

module.exports = function (wallaby) {
  return {
    files: [
        'www/lib/angular/angular.js',
        'www/js/*.js',
        'www/lib/angular-mocks/angular-mocks.js',
    ],

    tests: [
        'tests/*.spec.js'
    ],
    debug: true
  };
};

Conclusion

My personal takeaway from this so far is that even if you don’t adopt this whole TDD mantra, I’m urging you to start using Unit tests at least, as you’ve seen how valuable they can be. As for the whole TDD mantra, I’m yet to see how all this pans out, as I feel that adopting this properly requires a certain discipline until implemented properly.

Of course, all this is just a tip of the iceberg. I just touched the Unit tests and what Jasmine can do as your test environment. I hope that some time from now I’ll be able to share with you some best practices and some advanced techniques. Until then, I hope this was useful to some of you to at least get you going.

Demo projects can be looked up on Github:

• JavaScript demo
• Ionic framework demo

And yes, take the red pill 😉

In case someone is interested, below is my path to the ever so slightly awesome TDD regarding read materials and the notes I collected along the way.

Treehouse course

• Use E2E test sparringly (this is in line with the Google post)
• suits and specs
• mocha --reporter nyan
• "scripts": {"test":mocha, "test:watch":"mocha --watch ./test ./"}
• npm run test:watch

Books on the topic

• Test Driven Development, Kent Beck
• Refactoring: Improving the Design of Existing Code
• Ionic in action – chapter about TDD in Ionic

Blog posts

Introduction to JS TDD

Advantages of TDD:

• It forces one to think
• It makes debugging easier
• It makes coding more fun

TDD is an approach to writing software where you write tests before you write application code. The basic steps are:

• Red – write a test and make sure it fails
• Green – write the simplest, easiest possible code to make the test pass
• Refactor – optimize and/or simplify the application code, making sure that all the tests still pass

You have to think first, then write a test.

// flickr-fetcher-spec.js
'use strict';
var expect = require('chai').expect;

describe('FlickrFetcher', function() {
    it('should exist', function() {
        var FlickrFetcher = require('./flickr-fetcher.js');
        expect(FlickrFetcher).to.not.be.undefined;
    });
});

We are using a Behaviour Driven Development (BDD) style to write the tests. This is a variation on TDD where tests are written in the form:

• Describe [thing]
• It should [do something]

The [thing] can be a module, or a class, or a method, or a function. Mocha includes built-in functions like describe() and it() to make writing in this style possible.

No module code until there’s a failing test. So what do I do? I write another test.

The rule of thumb is, use equal when comparing numbers, strings, or booleans, and use eql when comparing arrays or objects. Note: eql is named deepEqual in some other testing frameworks. However, note that Jasmine has only toEqual.

Introduction to JS TDD Part 2

The fakeFetcher() function I’ve used to replace $.getJSON() is known as a stub. A stub is a piece of code that has the same API and behaviour as the ‘real’ code, but with much reduced functionality. Usually this means returning static data instead of interacting with some external resource.

Typical stubs might replace things like:

• Queries to a relational database
• Interaction with the file system
• Accepting user input
• Complex computations that take a long time to calculate

TDD should be fun

• functional tests (E2E)
• integration tests, more often than E2E

The ever so slightly famous Eric Elliot on the subject of JS testing

• Unit tests, integration tests, and functional tests are all types of automated tests which form essential cornerstones of continuous delivery, a development methodology that allows you to safely ship changes to production in days or hours rather than months or years.
• The cost of a bug that makes it into production is many times larger than the cost of a bug caught by an automated test suite. In other words, TDD has an overwhelmingly positive ROI.
• You don’t choose between unit tests, functional tests, and integration tests. Use all of them, and make sure you can run each type of test suite in isolation from the others.

• Unit tests
  • ensure that individual components of the app work as expected. Assertions test the component API
• Integration tests
  • ensure that component collaborations work as expected. Assertions may test component API, UI, or side-effects (such as database I/O, logging, etc…)
• Functional tests
  • ensure that the app works as expected from the user’s perspective. Assertions primarily test the user interface

For example, your app may need to route URLs to route handlers. A unit test may be written against the URL parser to ensure that the relevant components of the URL are parsed correctly. Another unit test might ensure that the router calls the correct handler for a given URL.
However, if you want to test that when a specific URL is posted to, a corresponding record gets added to the database, that would be an integration test, not a unit test.

Yes, you write more code, but studies have shown objectively that good test coverage with TDD can reduce bug density by 40% – 80%.

Another two posts from him:

5 Common Misconceptions About TDD & Unit Tests

• TDD is too Time Consuming. The Business Team Would Never Approve
• You Can’t Write Tests Until You Know the Design, & You Can’t Know the Design Until You Implement the Code
• You Have to Write All Tests Before You Start the Code
• Red, Green, and ALWAYS Refactor?
• Everything Needs Unit Tests

Here’s a tip that will change your life: Mocking is a code smell.

5 Questions Every Unit Test Must Answer

• What’s in a good test failure bug report?
• What were you testing?
• What should it do?
• What was the output (actual behavior)?
• What was the expected output (expected behavior)?

Few general good blog posts

• Google’s take on E2E, Integration and Unit tests
• TDD is dead, long live testing
• Test-Driven Development Isn’t Testing
• Triangulation in TDD
• Introduction to Test Driven Development in JavaScript
• Making your functions pure
• Writing great unit tests
  • Unit testing is not about finding bugs but it is excellent when refactoring
• Testing services in Angular for fun and Profit
  • If there was a way to reduce the number of defects in the code you write (or manage), improve the quality and time to market of deliverables, and make things easier to maintain for those who come after you- would you do it?
  • How many times have you heard some variant on, “Writing tests isn’t as important as delivering finished code?” If you’re like me, it’s way too many, and god help you if you’re working with no tests at all. Programmers are human and we all make mistakes. So test your code. The number of times testing my code has helped me catch unforeseen issues before they became flat-out bugs, prevent future regressions, or simply architect better is pretty amazing. And this is coming from a guy who used to hate writing tests for code. Hated it.
  • Jasmine is a Behavior-Driven-Development framework, which is sort of a roundabout way of saying that our tests include descriptions of the sections that they are testing and what they are supposed to do.
  • You can create stubbed objects quite easily in JavaScript, so if there’s no need to introduce the extra complexity of a spy, then do so.
  • Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.
• One Weird Trick That Will Change The Way You Code Forever: Javascript TDD
  • Have you ever fixed a bug, only to find that it broke something horribly in another part of the system? And you had no idea until the client called support in a panic?
  • Have you ever been afraid to touch a complicated piece of code for fear that you might break it and never be able to fix it again? … Even though you wrote it?
  • Have you ever found a piece of code that you’re pretty sure wasn’t being used any more and should be deleted? But you left it there just in case?
  • TDD is not about testing. It is a way of thinking and coding that just-so-happens to involve tests.
  • TDD is not the same thing as unit tests. Unit tests are a type of test. TDD is a coding technique.
    • Red—write a little test that doesn’t work, perhaps doesn’t even compile at first
    • Green—make the test work quickly, committing whatever sins necessary in the process
    • Refactor—eliminate all the duplication created in just getting the test to work

Finally, Ionic (Angular) related TDD posts

How To Write Automated Tests For Your Ionic App

• In the example for Unit Tests we saw that we need to mock the dependencies. For Integration Tests, depending on which units you want to test together, you could still mock certain dependencies, or none at all.

TDD with ionic

• Short tutorial showcasing how to run Karma with Jasmine

Unit Testing Your Ionic Framework App

This tutorial was actually great (which I can't say for the previous two) and I've learned the most out of it and finally set up a test environment.

Fun fact: I added `npm install --save-dev karma-nyan-reporter` and now am running my tests like this: `karma start tests/my.conf.js --reporters nyan

Some other AngularJS TDD blog posts

• Unit Testing an AngularJS Ionic App with Codeship Continuous Integration, Jasmine, and Karma
• Unit Testing Best Practices in AngularJS
• Official AngularJS Unit Testing Guide
  • Underscore notation: The use of the underscore notation (e.g.: _$rootScope_) is a convention wide spread in AngularJS community to keep the variable names clean in your tests. That’s why the $injector strips out the leading and the trailing underscores when matching the parameters. The underscore rule applies only if the name starts and ends with exactly one underscore, otherwise no replacing happens.
• Add Karma And Jasmine To An Existing Ionic Project
• Unit testing AngularJS applications
• Testing AngularJS with Jasmine and Karma

My notes

• npm install phantomjs-prebuilt was needed in order to get Karma running with PhantomJS.

• Had to change the actual Angular mocks 1.5.1 error in the code (https://github.com/angular/angular.js/issues/14251).

At this point the tests finally passed!

Tools

Wallabyjs – An awesome tool

Introduction to #TDD in #Ionic framework https://t.co/RUyy0rc0h8 @Ionicframework pic.twitter.com/tw22XMmhzn

— Nikola Brežnjak (@HitmanHR) June 28, 2016

edit 14.4.2017: I made a 2.5k+ word post about Gitflow, Pull Requests and Code Reviews which goes way deeper in the topic. The post is here if you want to check it out: Git branching done right with Gitflow & improving code quality with code reviews.

Before I started working on my newest project, I took the time to finally delve into the proper way of doing branching. Not long into the research gitflow popped up as the more/less something that community loves.

After checking it out, I’m amazed how awesome this is.

So, first things firs; the original article was written by Vincent Driessen: A successful Git branching model goes into the details of this workflow.

Later I found out that community built the git-flow command line program that provides high-level repo operations for Vincent Driessen’s branching model.

Tutorial

• 15min video

Installation

Simple brew install git-flow if you’re on Mac.

Git-flow command completion

Use tabs to auto-complete the git-flow commands: https://github.com/bobthecow/git-flow-completion. Completions available for both bash and zsh.

Gitflow – a successful Git branching model https://t.co/1ecyQ5qlTd

— Nikola Brežnjak (@HitmanHR) June 14, 2016