testing your single page application

tweet #tarabica14

tweet #tarabica14

Testing Your SPA

Wekoslav Stefanovskiswekster@gmail.comfacebook.com/sweko@swekster

tweet #tarabica14

tweet #tarabica14

>whoami• Senior Developer in Seavus• Coding professionally since last century• Rabid about code qualty• Cofounder of Macedonian .net community• I love C#• I hate JavaScript, but I love web development

tweet #tarabica14

What will this talk be about• A little bit of history • A little bit of present• What is and what isn’t an SPA?• Why test software?• Design for quality• How can I test Single Page Applications?• Demo

tweet #tarabica14

A little bit of history• What’s the deal with this web thing?

• What is this thing called Javascript???

• Build in Netscape in 1995, focused on non-

professional developers.

• Standardized as ECMAScript (in 1999) – a.k.a.

Internet Prehistory

• What is this thing called DOM???

tweet #tarabica14

A little bit of present

• The rise of the Single-Page Application

• Heavy client logic, getting heavier

• Stateless web is dead and more alive than ever

• The attack of the APIs and services

• Ongoing M/V separation

tweet #tarabica14

So what is an SPA• Desktop-like user experience• Starts, and stays on a single page load• Client-side development• The server should be as thin and as stateless as

possible

tweet #tarabica14

Dataset

SQL

Database Server Desktop Client

Classic Client-Server (VB6)

tweet #tarabica14

Dataset

SQL

Database Server Desktop Client

Web ServerWeb Client

Modern Client-Server (SPA)

HTTP API Request

JSON Data

tweet #tarabica14

Why is testing needed• Software has bugs• Users and clients have bugs too• The problem space is extremely complex – almost-

exponential complexity• Software is never done done.• Some aspects are prone to automation• Unit tests• Functional tests• Integration tests• Regression tests

tweet #tarabica14

Quality by design – Pit of Success• KISS / DRY / YAGNI / SOLID

• Refactoring

• Separate responsibilities

• Avoid mixing of different levels of abstraction

• Manage dependencies

• Write testable code

• Code that does not exist, cannot have bugs

tweet #tarabica14

Testing libraries• QUnit• Jasmine• Mocha• Chai• Selenium• Phantom.js• Buster.js• Blanket.js• Casper.js• Chutzpah

• Sinon.js• JsMockito• jqMock• mockjax• Watir / WatiN• Sahi• expect.js• YUI Test• JSTestDriver• ….

tweet #tarabica14

How should I test JavaScript• Javascript code is just code!• Dynamic structure actually helps• Unit test frameworks• Headless browsers• Regular browsers• Integration with CI tools

tweet #tarabica14

How should I test everything else?• The old, tried way – Eyeballs on the job• Browser automation• Taking and comparing screenshots• Selenium WebDriver

tweet #tarabica14

DEMOA very simple knockout.js based SPA tested with QUnit, Chutzpah and PhantomJS

tweet #tarabica14