Upload
laszlo-andrasi
View
102
Download
2
Tags:
Embed Size (px)
Citation preview
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
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)
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
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
• 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 & 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