SlideShare a Scribd company logo
tweet #tarabica14
tweet #tarabica14
Testing Your SPA
Wekoslav Stefanovski
swekster@gmail.com
facebook.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 Server
Web 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
DEMO
A very simple knockout.js based SPA tested with
QUnit, Chutzpah and PhantomJS
tweet #tarabica14

More Related Content

Testing your Single Page Application

  • 2. tweet #tarabica14 Testing Your SPA Wekoslav Stefanovski swekster@gmail.com facebook.com/sweko @swekster
  • 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. 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. 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. 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. 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. tweet #tarabica14 Dataset SQL Database Server Desktop Client Classic Client-Server (VB6)
  • 10. tweet #tarabica14 Dataset SQL Database Server Desktop Client Web Server Web Client Modern Client-Server (SPA) HTTP API Request JSON Data
  • 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. 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. 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. 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. 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. tweet #tarabica14 DEMO A very simple knockout.js based SPA tested with QUnit, Chutzpah and PhantomJS