AngularJS browser testing with Protractor

On December 6, 2014, in angularjs, new, technical, by Jan Pannecoeck

For the past few months I have been working on a big front-end application using AngularJS. AngularJS has been developed with testing in mind and thus a lot of developers are writing unit tests for their AngularJS application. Nevertheless, the team behind AngularJS wasn’t only thinking about unit tests, they also created an end-to-end test […]

For the past few months I have been working on a big front-end application using AngularJS. AngularJS has been developed with testing in mind and thus a lot of developers are writing unit tests for their AngularJS application. Nevertheless, the team behind AngularJS wasn’t only thinking about unit tests, they also created an end-to-end test runner: Protractor.

This blog post will be a first introduction into Protractor and how to setup your environment to be able to run E2E-Tests. I have made the example below available via bitbucket: https://bitbucket.org/jarchitects/blog-protractor. For the example code I used Grunt as a Task Runner, so all details about the setup and the examples will be for Grunt specific.

The good thing about Protractor is that tests can be written using the same syntax as your regular unit tests: Jasmine! But more about the syntax later, first we will handle the setup. As soon as the setup is finished I will show you how to write your first E2E-Test.

Setup

Before we can start writing E2E-Tests, we will have to make sure we have set up our application properly. I am using Node Package Manager to install my dependencies and handle them within my application, if you are using the same setup, the commands below should work fine.

The first thing you will have to do is to make sure you have Protractor installed.

npm install protractor --save-dev

If you add the –save-dev behind your command, npm will make sure Protractor is added to your package.json file within the devDependencies. To easily get an instance running of a Selenium Server, we will be using Selenium-Webdriver. So again you will have to install this and make sure the last version has been installed:

npm install selenium-webdriver --save-dev
webdriver-manager update

If the installation of both packages is completed successfully, you should also see them within your package.json file.

Setup Grunt

Since we are using Grunt as the task manager for your application, we will have to make sure Grunt can run Protractor tests. Therefor we will install the Grunt Protractor Runner:

npm install grunt-protractor-runner --save-dev

Next, we have to configure it to know where to find our configuration. Within your Gruntfile.json you’ll have to add the following config:

grunt.initConfig({
...
protractor: {
  e2e: {
    options: {
      configFile: 'protractor.conf.js'
    }
  }
}
...
});

Configuration Protractor

In the Grunt configuration above, we defined our own custom Protractor configuration file: protractor.conf.js. Of course we also need that configuration file in our application. So create a new file ‘protractor.conf.js’ and add the following content to it:

exports.config = {
  chromeOnly: true,
  chromeDriver: './node_modules/protractor/selenium/chromedriver',
  baseUrl: 'http://127.0.0.1:9000/',
  capabilities: {
    'browserName': 'chrome'
  },
  specs: ['test/e2e/*.js'],
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};

So basically what we do here is configuring Protractor to be only run on Chrome, and where to find the chromedriver. We also configure our baseUrl, this is the starting point of your application and will be used later in the tests. Furthermore we define the location of our E2E-Tests, this will be within the folder test/e2e, that way Protractor knows were to go looking for the tests. So this is all the configuration required to start with Protractor, finally we can create our first test!

Our first test

Since we are writing a front-end application, we need an application to test. I have created a simple page displaying a list of fruits that can be filtered with an input-field.

HTML Page to test

The HTML looks like this:

<div>
  <input type="search" ng-model="searchParameter"></input>
</div>
<ul>
  <li ng-repeat="fruit in fruits | filter:searchParameter">
      <span ng-bind="fruit"></span>
  </li>
</ul>

Page Objects

When using Protractor to write E2E-Tests it’s not mandatory to use the page object approach but I consider it a best practices you should be aware of so I will start with that. What you basically do is move all your page element information to a separate file to make your tests easier to read and make sure the page object can be reused for different tests.

First we will create an empty Page Object called MainPage. The load function I added is used to direct the browser to the correct URL. Since Protractor is written for AngularJS, it will make sure the page is loaded and AngularJS is started properly:

'use strict';
var MainPage = function () {
  this.load = function () {
    browser.get('#/');
  }
}
module.exports = MainPage;

Now we can add some useful functions that will allow us to easily test the HTML code. It would be easy if we can just send some text to the input field and retrieve the text from the field. Also to make sure the filtering is working properly we need to be able to retrieve the elements currently displayed in the fruits list.

'use strict';

var MainPage = function () {

  this.load = function () {
    browser.get('#/');
  }

  this.setSearchField = function (search) {
    element(by.model('searchParameter')).sendKeys(search);
  };

  this.getSearchValue = function () {
    return element(by.model('searchParameter')).getAttribute('value');
  };

  this.getFruitsList = function () {
    return element.all(by.binding('fruit'));
  };
}
module.exports = MainPage;

As you can see, we can easily retrieve DOM elements based on some AngularJS properties like ng-model, ng-binding, … Check out the Protractor documentation to get to know all of the different possibilities!

E2E Test

With the created Page Object, we can start to write our E2E Test to see if our page is working properly. The first thing we do is making sure our previously created Page Object (located in the pages/main.js file) is loaded properly. Before each test (see the beforeEach) we will create a new Page Object and make sure it is loaded.

'use strict';
var MainPage = require('./pages/main');
describe('Main page', function () {
  var mainPage;
  beforeEach(function () {
    mainPage = new MainPage();
    mainPage.load();
  });
});

With this setup, you will only load the page, but no tests will run. To also test your page, you will have to write Jasmine tests just like you would while writing unit tests. Below is an example that will check whether the input field is working and whether the filtering is also working properly if I enter some text in the input field.

  describe('Search functionality', function () {
    it('should have a search field in which one can enter a search parameter', function () {
      var input = 'some random text';
      mainPage.setSearchField(input);
      expect(mainPage.getSearchValue()).toBe(input);
    });

    it('should have a default list with 8 elements', function () {
      expect(mainPage.getFruitsList().count()).toBe(8);
    });

    it('should filter the list of fruits using the search filter', function () {
      mainPage.setSearchField('Apple');
      var fruitsList = mainPage.getFruitsList();
      expect(fruitsList.count()).toBe(2);
      expect(fruitsList.getText()).toEqual(['Apple', 'Pineapple']);
    });
  });
});

You probably noticed that using the Page Object really helps to make the tests more readable. For example in the first test we do, we just enter ‘some random text’ into the input field and then expect the input field to contain the same text we just entered. If you wouldn’t use the Page Object, this test would look like this:

  describe('Search functionality', function () {
    it('should have a search field in which one can enter a search parameter', function () {
      var input = 'some random text';
      var element = element(by.model('searchParameter'));
      element.sendKeys(input);
      expect(element.getAttribute('value')).toBe(input);
    });
  });
});

And you would have to rewrite the same code again each time you want to enter some text in the input field. So now we have written our first test, it’s time to run it and see what happens!

Running Protractor Tests

To run Protractor tests, what you first have to do is make sure your web application is served somewhere. Therefor, we’ll ask Grunt to serve our application:

grunt serve

And as soon as Grunt is serving our page, we can launch our tests:

grunt protractor

Protractor will now launch your Chrome browser and will start running the different tests. Due to our setup with the beforeEach, you will notice that before each test the page is reloaded. As soon as Protractor is done running, you will get an overview of the tests it has run and whether they were successful or not.

By now you should be able to start writing your own Protractor tests for your application. I hope this blog post did help you on your way. If you would have some problems, don’t hesitate to contact us!

Console log showing e2e test run result

Some helpful resources:
Official Protractor Getting Started tutorial
Official Protractor API
AngularJS Api
AngularJS E2E-Testing

Did you like this? Share it:
Tagged with:  

Alcatraz plugin for Xcode

On March 13, 2014, in iOS, new, objective-c, technical, xcode, by Axel

Alcatraz is an open-source package manager for Xcode 5. It lets you discover and install plugins, templates and color schemes without the need for manually cloning or copying files. It installs itself as a part of Xcode Download the plugin https://github.com/supermarin/Alcatraz Did you like this? Share it:

Alcatraz is an open-source package manager for Xcode 5.

It lets you discover and install plugins, templates and color schemes without the need for manually cloning or copying files. It installs itself as a part of Xcode

Download the plugin
https://github.com/supermarin/Alcatraz

Did you like this? Share it:
 

TestFlight replacement for Android

On February 25, 2014, in new, by Jan Pannecoeck

The mobile app testing platform TestFlight became one of the major players in their field. A lot of mobile developers have been using TestFlight, that supported iOS as well as Android, to distribute their apps towards their testers. On the 21th of February 2014 Apple announced acquiring Burstly, the company behind the testing platform. Unfortunately […]

The mobile app testing platform TestFlight became one of the major players in their field. A lot of mobile developers have been using TestFlight, that supported iOS as well as Android, to distribute their apps towards their testers. On the 21th of February 2014 Apple announced acquiring Burstly, the company behind the testing platform. Unfortunately together with this announcement, Burstly also announced TestFlight will no longer support Android. At JArchitects, we have been using TestFlight on several projects for both iOS and Android test distribution. Luckily for all the Android developers, there are plenty of other solutions one could use to replace TestFlight. This blogpost will highlight some possible replacements…

Send by e-mail or website

To distribute an Android app, it needs to be signed with some kind of certificate. Currently, this can be done with a self-signed certificate, this means that everybody can create such a certificate and everybody can distribute apps signed with a certificate. Since an Android app is distributed as an APK file, one could easily create an APK file, sign it with a certificate and send it to all the testers via e-mail or put it available on your website. The only thing the users would have to do is tell Android to allow installs from 3th party resources.

Using this solution, you’ll not only will have to maintain a website or e-mail, you’ll also have to provide some kind of feedback functionality yourself. Any information about crashes, bugs, … can only be traced based on input from your testers.

HockeyApp

A proper replacement for TestFlight, which will also keep on supporting Android, is HockeyApp. This is a (paying) service which is supporting most of the features TestFlight is also providing: distribution, crash-reports, analytics and feedback from your user. Providing also apps for iOS, Android, Mac and Windows, HockeyApp is a great (but expensive, keep in mind TestFlight is free) replacement for TestFlight.

Google Developer Console

There are probably some others providing a proper replacement for TestFlight, but the one everybody should start using is of course Google’s build in support for alpha and bèta testing. Last year at Google I/O, Google announced they will add support for alpha and bèta testing. Within the Google Developer Console it became possible to distribute your app, towards a limited group of developers.

The major benefit with this solution is that you’ll be working the same way as you will while releasing the official version of your app and also Crash-reports will be gathered with the Developer Console. A smaller drawback, as we are using a Google product, is that selecting your testers will be based on Google+ Communities or Google Groups. This makes it a little bit more complex to set up your test group.

Of course Google Developer Console isn’t covering all features TestFlight is providing you. For example, Google isn’t providing a user-friendly solution for capturing users feedback. What you can do is provide an e-mail address or website to allow your testers to provide you with some feedback. Furthermore, more extensive analytics about your app aren’t captured by Google. Therefore you’ll have to use other tools like Crittersism

 

As you will have noticed by now, TestFlight ending its support for Android isn’t a major fallback. Instead it is an opportunity for all Android developers to start using other tools. In case you would have any question or are having problems with your apps, don’t hesitate to contact us. We are always ready to help you!

 

 

Did you like this? Share it:
Tagged with:  

JazzHands Library for iOS

On February 13, 2014, in new, by Axel

Jazz Hands is a simple, keyframe based animation framework for UIKit. Animations can be controlled via gestures, scroll views, kvo, or ReactiveCocoa. Jazz Hands is used extensively in IFTTT for iPhone, most famously in the app intro. https://www.cocoacontrols.com/controls/jazzhands Did you like this? Share it:

Jazz Hands is a simple, keyframe based animation framework for UIKit. Animations can be controlled via gestures, scroll views, kvo, or ReactiveCocoa.

Jazz Hands is used extensively in IFTTT for iPhone, most famously in the app intro.

https://www.cocoacontrols.com/controls/jazzhands

Did you like this? Share it:
Tagged with:  

Project Jigsaw and Compact Profiles

On November 13, 2013, in devoxx 2013, by Sven

Today Mark Reinhold, Chief Architect of the Java Platform Group at Oracle, gave us an update on Project Jigsaw at Devoxx 2013. Project Jigsaw aims to create a scalable standard module system for the Java platform. The project’s high level goals are: scalability performance security The release of Project Jigsaw is scheduled for Java 9. […]

Today Mark Reinhold, Chief Architect of the Java Platform Group at Oracle, gave us an update on Project Jigsaw at Devoxx 2013.

Project Jigsaw aims to create a scalable standard module system for the Java platform.
The project’s high level goals are:

  • scalability
  • performance
  • security

The release of Project Jigsaw is scheduled for Java 9.

Notes on Java SE 9:

  • the sun.* and *.internal.* packages will not be available anymore
  • rt.jar and tools.jar will no longer exist

So be aware that the arrival of Jigsaw may break existing projects!

 

In the meantime, Compact Profiles will be introduced in Java SE 8 as an interim solution.

A Java SE Profile is a well-defined subset of the Java SE Platform. Profiles allow applications that use just part of the Platform to run on resource-constrained devices. An application that, e.g., does not use the Swing/AWT/2D graphics stack can achieve considerable space savings by running on a Profile that does not include an implementation of those APIs.

Oracle currently envisions defining three Profiles, arranged in additive layers so that each Profile contains all of the APIs in Profiles smaller than itself. Each Profile will specify a specific set of Java API packages; the corresponding JRE will include, to the extent feasible, only the classes, native code, and other resources required to support those APIs.

In the latest draft the Profiles are named compact1, compact2, and compact3:

  • compact1 (= core, Object, String, I/O,…) ≈ 11MB
  • compact2 (= compact1 + jdbc, rmi, jta,…) ≈ 16MB
  • compact3 (= compact2 + auth, naming, prefs,…) ≈ 30MB
  • full JRE (= compact3 + crypto, corba, jaxws,…) ≈ 54MB
Did you like this? Share it:
 

CocoaPods dependency management

On April 30, 2013, in dependency management, iOS, new, objective-c, xcode, by Axel

Cocoapods is a dependency manager for Mac and iOS projects built on Ruby and based on the Ruby community’s “rubygem bundler”. Each “pod” has a “spec” that is utilized in order to know how to integrate a given component with your project and resolve any dependencies your project may have with other libraries. An introduction […]

Cocoapods is a dependency manager for Mac and iOS projects built on Ruby and based on the Ruby community’s “rubygem bundler”. Each “pod” has a “spec” that is utilized in order to know how to integrate a given component with your project and resolve any dependencies your project may have with other libraries.

An introduction to cocoapods can be found here

http://nsscreencast.com/episodes/5-cocoapods

http://nsscreencast.com/episodes/28-creating-a-cocoapod

Also check the blog of Ray Wenderlich

http://www.raywenderlich.com/12139/introduction-to-cocoapods

 

What is a Spec?

The basis behind how cocoapods is able to function is on a project’s “podspec”. Podspecs are created by maintainers of a project (or sometimes just other developers who want to use a component as a pod) and submitted to a public repository of specs in an organized git repository on github.

Specs identify everything about a library or component that needs to be performed before you can properly use it in your project. This includes everything from supported platform, ARC-readiness and required frameworks to other C flags that might need to be switched on.

 

Semantic Versioning

Cocoapods highly suggests using semantic versioning to version your cocoapods. Without semantic versioning, it becomes much more difficult if not impossible to resolve some cross-dependencies between similar pod dependencies in your project, if any exist. All that was very complicated to say – use semantic versioning (e.g. “v1.1.0”). Tag your code in your repository with a tag corresponding to the version number of your component (for v3.0.0 of your component, tag your code 3.0.0).

Did you like this? Share it:
 

New UIAutomator testing

On November 18, 2012, in new, by Axel

In addition to unit testing the individual components that make up your Android application (such as activities, services, and content providers), it is also important that you test the behavior of your application’s user interface (UI) when it is running on a device. UI testing ensures that your application returns the correct UI output in […]

In addition to unit testing the individual components that make up your Android application (such as activities, services, and content providers), it is also important that you test the behavior of your application’s user interface (UI) when it is running on a device. UI testing ensures that your application returns the correct UI output in response to a sequence of user actions on a device, such as entering keyboard input or pressing toolbars, menus, dialogs, images, and other UI controls.

Functional or black-box UI testing does not require testers to know the internal implementation details of the app, only its expected output when a user performs a specific action or enters a specific input. This approach allows for better separation of development and testing roles in your organization.

One common approach to UI testing is to run tests manually and verify that the app is behaving as expected. However, this approach can be time-consuming, tedious, and error-prone. A more efficient and reliable approach is to automate the UI testing with a software testing framework. Automated testing involves creating programs to perform testing tasks (test cases) to cover specific usage scenarios, and then using the testing framework to run the test cases automatically and in a repeatable manner.

Read more

Did you like this? Share it:
Tagged with:  

Objective-C Categories

On July 13, 2012, in iOS, iphone, by Axel

Categories are one of the most useful features of Objective-C. Essentially, a category allows you to add methods to an existing class without subclassing it or needing to know any of the details of how it’s implemented. This is particularly useful because you can add methods to built-in objects. If you want to add a […]

Categories are one of the most useful features of Objective-C. Essentially, a category allows you to add methods to an existing class without subclassing it or needing to know any of the details of how it’s implemented.

This is particularly useful because you can add methods to built-in objects. If you want to add a method to all instances of NSString in your application, you just add a category. There’s no need to get everything to use a custom subclass.

For example, if I wanted to add a method to NSString to determine if the contents is a URL, it would look like this:

#import <Cocoa/Cocoa.h> 
@interface NSString (Utilities) 
- (BOOL) isURL; 
@end

This is very similar to a class declaration. The differences are that there is no super class listed, and there’s a name for the category in parenthesis. The name can be whatever you want, though it should communicate what the methods inside do.

Here’s the implementation. Keep in mind this is not a good implementation of URL detection. We’re just trying to get the concept of categories across:

#import "NSString-Utilities.h" 
@implementation NSString (Utilities) 
- (BOOL) isURL { 
      if ( [self hasPrefix:@"http://"] ) 
          return YES; 
      else 
          return NO; 
  } 
@end

Now you can use this method on any NSString. The following code will print “string1 is a URL” in the console:

NSString* string1 = @"http://www.jarchitects.be"; 
NSString* string2 = @"Jarchitects"; 
if ( [string1 isURL] ) 
   NSLog (@"string1 is a URL"); 
if ( [string2 isURL] ) 
   NSLog (@"string2 is a URL");
Did you like this? Share it:
Tagged with:  

AngularJs framework

On July 13, 2012, in new, by Axel

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.   For more info Visit the AngularJS website Basic example <html ng-app="project"> <head> […]

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

 

For more info Visit the AngularJS website

Basic example

<html ng-app="project">
<head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="http://code.angularjs.org/angular-resource-1.0.1.min.js">
    </script>
    <script src="project.js"></script>
    <script src="mongolab.js"></script>
</head>
<body>
    <h2>JavaScript Projects</h2>
    <div ng-view></div>
</body>
</html>
Did you like this? Share it:
 

Co2 Tax calculator 2012 APP

On February 12, 2012, in iOS, iphone, by Axel

Vandaag werd onze ‘VAA tax calculator’ gereleased in de apple APP-store. Met deze app krijgt u in een oogopslag zicht op de te betalen voordeel alle aard op uw bedrijfswagen.   U krijgt ook dadelijk het verschil te zien met 2011 alsook de kost voor werkgever en werknemer worden duidelijk weergegeven. Deze app wordt u […]

Vandaag werd onze ‘VAA tax calculator’ gereleased in de apple APP-store.

Met deze app krijgt u in een oogopslag zicht op de te betalen voordeel alle aard op uw bedrijfswagen.   U krijgt ook dadelijk het verschil te zien met 2011 alsook de kost voor werkgever en werknemer worden duidelijk weergegeven.

Deze app wordt u gratis aangeboden door JArchitects en is nu beschikbaar voor iPhone en iPad

Nieuw in versie 1.1

Er wordt nu ook rekening gehouden met de leeftijd van de wagen voor de berekening van het voordeel alle aard. Volgens een recent wetsvoorstel zal de aankoopprijs met 6 procent per jaar dalen tot de bodemgrens van 70% bereikt is.

 

Did you like this? Share it:
Tagged with: