Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Testing your Single Page Application


Published on

So, you've made the ferpect Single Page Application. It has all the bells and whistles, and uses all the flashing new frameworks.

But how do you know it works, and how do you know that it will continue to work in this world of continuous delivery? This session will try to explain how to do end-to-edn testing of the system, how to test the application server code, and how to test the code the executes on the client.

Published in: Technology

Testing your Single Page Application

  1. 1. tweet #tarabica14
  2. 2. tweet #tarabica14 Testing Your SPA Wekoslav Stefanovski @swekster
  3. 3. tweet #tarabica14
  4. 4. 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
  5. 5. 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
  6. 6. 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???
  7. 7. 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
  8. 8. 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
  9. 9. tweet #tarabica14 Dataset SQL Database Server Desktop Client Classic Client-Server (VB6)
  10. 10. tweet #tarabica14 Dataset SQL Database Server Desktop Client Web Server Web Client Modern Client-Server (SPA) HTTP API Request JSON Data
  11. 11. 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
  12. 12. 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
  13. 13. 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 • ….
  14. 14. 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
  15. 15. tweet #tarabica14 How should I test everything else? • The old, tried way – Eyeballs on the job • Browser automation • Taking and comparing screenshots • Selenium WebDriver
  16. 16. tweet #tarabica14 DEMO A very simple knockout.js based SPA tested with QUnit, Chutzpah and PhantomJS
  17. 17. tweet #tarabica14