Automation in AngularJsLas Palmas de Gran Canaria

12th February 2015

Who am I?

@MarcinWosinek

Who are you?

last year talk

Code development

build & deploy

QA

♲

http://www.mpoweruk.com/motorcontrols.htm

Realistic expectations

unit tests

e2e

60s

15min

Last job

400 - 500 unit tests

integration

10s current file(s)

2 minutes - all files

from 3 days to 3 weeks (max 6 months)

3rd party code update fail

CostsProfits

?15s

App

bower

Dependency tree in bowermyApp

ng-sortable

angular-ui

angular

1.3.x

1.2.x

bower.json

task management

$ grunt serve

$ grunt build

$ grunt test

waits for files changes

code mincompile

browser refresh

merge files

unit test e2e

QA

angular.module('someApp').filter('limitToCurrent', function () { return function(input){ var today = new Date(); var output = []; var date = today.getFullYear()+'-'+today.getMonth(); input.forEach(function(item, index){ if(item.archivedDate.fullDate === date ){ output .push( item ); } }); return output; }});

Can you see the code?

angular.module('someApp').filter('limitToCurrent', function () { return function (input){ var today = new Date(); var output = []; var date = today.getFullYear()+'-'+today.getMonth(); input.forEach(function(item, index){ if(item.archivedDate.fullDate === date_){ output .push(_item_); } }); return output ;__ }});

I can’t :(

{ "disallowSpacesInsideArrayBrackets": true, "disallowSpacesInsideParentheses": true, "disallowTrailingComma": true, "disallowTrailingWhitespace": true, "requireSpacesInFunction": { "beforeOpeningCurlyBrace": true }, "validateLineBreaks": "LF"}

valid:

var x = (1 + 2) * 3;

invalid:

var x = ( 1 + 2 ) * 3;var x = foo( {} );

http://jshint.com/

describe("A suite is just a function ", function() {

it("and so is a spec", function() { expect(a).toBe(true); });

describe("and support nesting ", function() { // with beforeEach(function() { // at any level }); });});

npm install jasmine-expect --save-dev

expect(array).toBeEmptyArray();expect(number).toBeWholeNumber();expect(object).toBeFunction();expect(string).toBeString();

karma server

grunt build

phantom.jschrome

ie

editor

element(by.binding('error'));element(by.model('request.key'));

// waits for the $http to resolveexpect(browser.getCurrentUrl()).toBe(url);

CasperJs

REST api

frisby.create('Ensure Twitter has at least one list that is "NBA"' ) .get('https://api.twitter.com/1/lists/all.json?screen_name=twitter' ) .expectStatus(200) .expectHeaderContains('content-type', 'application/json' ) .expectJSONTypes('?', { name: "NBA", full_name: "@twitter/nba-7", id_str: "42840851", description : "All verified NBA players on Twitter ", mode: "public" }).toss();

Requirements

NVM

Dependency tree @ npmmyApp

grunt-template

karma

lodash

1.0.x

~2.4.1

package.jsonlodash

lodash

Continuous Integration

release

100% frontend; no serverside dependencies

Source Repo:/src/app.js/src/directives/*.js/src/controllers/*.js/src/views/*.html

Built Repo:/main.js/style.js

e.g. angular e.g. bower-angular

semver

1.3.6major.minor.patch

Sumary

● angular is go-to framework for Single Page App

● automation leads to quality● automation for front-end is pretty impresive

?

ngConf?sessions:

● Angular inside google● Building Platforms with angular.js● Ionic + Angular - mobile development● How organize Angular 1.3 app for Angular 2.0● NG-WAT?● es6 in angular

Contact info● marcin.wosinek+lpa@gmail.com● @MarcinWosinek

Credits● map of europe - http://en.wikipedia.org/wiki/Poland#mediaviewer/File:EU-

Poland.svg● dev ops - http://www.meetup.com/Las-Palmas-DevOps● learning curve - http://imgur.com/5rJH3co● Icons made by Elegant Themes, Freepik, Flaticon is licensed by CC BY

3.0● feedback loop - http://www.mpoweruk.com/motorcontrols.htm● clock 1 - https://www.flickr.com/photos/northcharleston/6999667955● clock 2 - https://www.flickr.com/photos/southbeachcars/8300771923● jshint - https://github.com/sindresorhus/jshint-stylish