*Survival Guide*

ANDRÁSI LÁSZLÓ• (2007)

• PHP to Python

• Symfony to Django

• Employee to Freelancer,

• (2010)

• Single to Married

• (2011)

• Sleeeeep to Dad

• Freelancer to Employee (Lensa)

• Django to Flask(…)

• Python to Polyglot

github.com/lacotwitter.com/a_laco

TOC

• History

• Terminology

• Demo

• CI

TOC V2

• Demo

• Terminology

• CI

• Back to Demo

DEMO1- SLOW CALCULATOR

• https://github.com/juliemr/protractor-demo

DEMO2 - FBOOK• Comming soon (1-2 days) https://github.com/laco/protractor-demo-fbook

• User Stories:

• User can login/logout

• User can leave status messages

• User can like status messages

• Technical:

• single page angular app

• python3 backend

• containerization (docker)

TERMINOLOGY

ANGULARJS• A structural framework for dynamic web apps.

• “Angular is what HTML would have been, had it been designed for applications.”

• Angular was built with the CRUD application in mind.

• Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular.

• Two-way data binding - sync data between the model and the view

• Dependency Injection - Creates and wires objects and functions

• Template - HTML with additional markup

• View - what the user sees (the DOM)

• Controller - the business logic behind views

• Scope - context where the model is stored so that controllers, directives and expressions can access it

• Model - the data shown to the user in the view and with which the user interacts

• Directives - extend HTML with custom attributes and elements

• Expression - access variables and functions from the scope

• Filter - formats the value of an expression for display to the user

• Module - a container for the different parts of an app including controllers, services, filters, directives which configures the Injector

• Services - reusable business logic independent of views

• Injector - dependency injection container

• Compiler - parses the template and instantiates directives and expressions

END-TO-END TESTING

User Browser JS AppServer-side(backend)

Model (DB)

Acceptance Testing ✔️ ✔️ ✔️ ✔️ ✔️

Automated

Acceptance Testing

❌ ✔️ ✔️ ✔️ ✔️

Most common…

(CI)❌ ✔️ ✔️ ✔️ ❌

*(dummy)

* use some kind of “Hexagonal Architecture” !!!

• Unit tests > Integration tests > Functional tests (e2e) > System tests (e2e)

• Unit tests are fast and cheap!

• Best practice: Happy path scenarios

WEBDRIVER

• W3C Spec: https://w3c.github.io/webdriver/webdriver-spec.html

• Open Source Implemtentation of the spec: Selenium Webdriver https://github.com/SeleniumHQ/selenium

WEBDRIVERJS

• JavaScript bindings for WebDriver (NodeJS package)

• lot of “Promises”

PROMISES

• What is a Promise?The simplest explanation: it is an easy way to avoid writing the Pyramid of Doom

• https://github.com/kriskowal/q

PYRAMID OF DOOM

• A Promise is an object representation of an event. In the course of it’s life, a Promise goes from a pending state, when it’s called, to a resolved or rejected state, when it’s been completed, or it could also stay pending forever and is never resolved.

• http://flaviocopes.com/deferred-and-promises-in-javascript/

PROTRACTOR• End-to-end test framework specifically for AngularJS apps

• built on top of WebDriverJS

• key benefits:

• It supports Angular-specific locator strategies

• You don’t need to add waits or sleeps to your test (Understands Angular’s run loop)

• It uses Jasmine

• It is easy to set up “page objects”

JASMINE• a behavior-driven development framework for

testing JavaScript code.

• suites contains specs with expectations (describe(), it(), expect() (matchers))

• beforeEach, afterEach, nesting describe blocks,

• Spies (test doubles)

• Beware: two main versions:1.3 and 2.x.

HOW IT WORKS• Your tests call Protractor APIs

• Protractor extends/calls webdriverjs (the selenium-webdriver node package?)

• webdriverjs calls a (local or remote) Selenium server

• Selenium server calls a browser driver

• Browser driver uses your app as a user would

CI

CI & CD• Protractor tests as part of the delivery pipeline (with containers of

course… :D)

• Step 1: Put Protractor and the browser inside the container

• Step II: Put Protractor and the browser into a second container and link the app container

• Step III:

• App container

• Protractor container

• Selenium container (with browser) - https://github.com/SeleniumHQ/docker-selenium

LINKS…

• http://www.ng-newsletter.com/posts/practical-protractor.html

• https://w3c.github.io/webdriver/webdriver-spec.html

• https://seleniumhq.github.io/docs/

• http://www.pauljeter.net/web-development/conferences/ng-conf/protractor-testing-in-angularjs-ben-clikinbeard-2015-ngconf/

• https://docs.angularjs.org/guide/e2e-testing

• http://googletesting.blogspot.hu/2014/11/protractor-angular-testing-made-easy.html

GITHUB.COM/LACO/PROTRACTOR-DEMO-FBOOK