Changing Landscape of JavaScript Testing

Joel WatsonSubu Baskaran

Sencha Test 1.x

2

Developers

• Test Early• Test Driven Development• Code Coverage• Test Individual Components• Deliver Quality Code

Test Engineers

• End-to-End Testing• Single Page Applications• Multiple Browser Execution• Browser Farm Integration• CI\CD

Why Test?

3

Shift Testing Left

Unit Testing Ext JS App

• Models

• Views

• Controllers

• Setup and Teardown

• Test before PR

Application Testing

The App

• Black Box

• Multiple browsers

• Regression tests

• Mimic user behavior

• Multiple devices

Issues Faced

• Locators

• Application instability

• Browser updates

• Continuous integration

Continuous Integration

• True automation- Let the machine do the heavy lifting

• Run Tests at every stage

• Integrate with build systems

• Run tests on multiple environments- QA

- Staging

- Production

• Leverage browser farms

Sencha Test 2.0

Sencha Test 2.0

• Leverage WebDriver to write end-to-end tests for multi-page applications

• Create, debug and execute tests using embedded Selenium server and browser

• Use productivity tools to speed up multiple browser\platform testing

What’s in EA?

• WebDriver Integration

• Multipage Application Testing

• Event Recorder

• Futures API

• Visual Screen Comparison

Unit Testing

Why Unit Testing? The Usual Arguments

• Reduce new bugs (hopefully)

• Defend against regressions

• Make refactoring easier

• Satisfy institutional goals for “code coverage”

Why Unit Testing? The Better Reasons

• Developing tests demonstrates a level of understanding about the code

• It will give you more confidence in your code, less fear about releases

• Easily automatable!!

• Testing FORCES you to implement better design in your code

• Ultimately, testing = a better you

Benefits of Unit Testing in Sencha Test

• Easily connect to and write tests for your Ext JS (and non-Ext JS) applications, code packages, and custom extensions

• Ability to test code without launching your Ext JS application

• Built-in code editor allows for easy authoring of tests directly within Sencha Test

Unit Testing Demo

Functional Testing

The Challenges of Functional Testing

• Happy path vs. Reality

• Cross-browser (ahem!) distinctiveness

• Testing full applications is simply hard!- Lots of asynchronicity

- Difficult to mock…have to actually test!

Taming Functional Testing with Sencha Test

• Leverage WebDriver to facilitate functional testing of single-page AND multi-page applications

• Utilize the Futures API to simplify testing of (often) asynchronous actions in real-world applications

• Execute tests across your desired browsers to ensure that your application is behaving as expected

Functional Testing Demo