PacktLib: JavaScript Testing Beginner's Guide

JavaScript Testing


About the Author

About the Reviewers


What is JavaScript Testing?

Where does JavaScript fit into the web page?

Time for action—building a HTML document

Time for action—styling your HTML document using CSS

Time for action—giving behavior to your HTML document

The difference between JavaScript and server-side languages

Why pages need to work without JavaScript

What is testing?

Why do you need to test?

Types of errors

Time for action—loading errors in action

Time for action—loading errors in action

Time for action—runtime errors in action

Time for action—logic errors in action

Some advice for writing error-free JavaScript


Ad Hoc Testing and Debugging in JavaScript

The purpose of ad hoc testing—getting the script to run

What happens when the browser encounters an error in JavaScript

Browser differences and the need to test in multiple browsers

Time for action—checking for features and sniffing browsers

Time for action—capability testing for different browsers

Are you getting the correct output and putting values in the correct places?

Time for action—accessing values from a form

Time for action—getting the correct values in the correct places

Does the script give the expected result?

What to do if the script doesn't run

Time for action—using alert to inspect your code

Time for action—unobtrusively checking what values are used

Commenting out parts of the script to simplify testing

Time for action—simplifying the checking process

Timing differences—making sure that the HTML is there before interacting with it

Why ad hoc testing is never enough


Syntax Validation

The difference between validating and testing

Code quality

Common errors in JavaScript that will be picked up by validation

JSLint—an online validator

Time for action—using JSLint to spot validation errors

Valid code constructs that produce validation warnings

How to fix validation errors

Time for action—fixing "use strict" errors

Time for action—fixing the error of "Unexpected use of ++"

Time for action—fixing the error of "Functions not defined"

Time for action—fixing the error of using too many var statements

Time for action—fixing the expectation of '<\/' instead of '

Time for action—changing == to ===

Time for action—fixing "Alert is not defined"

Time for action—avoiding HTML event handlers

JavaScript Lint—a tool you can download


Planning to Test

A very brief introduction to the software lifecycle

Do you need a test plan to be able to test?

When to develop the test plan

How much testing is required?

Major testing concepts and strategies

Testing order

Documenting your test plan


Putting the Test Plan Into Action

Applying the test plan: running your tests in order

Time for action—Test Case 1a: testing expected and acceptable values by using white box testing

Time for action—Test case 1bi: testing expected but unacceptable values using boundary value testing

Time for action—Test case 1bii: testing expected but unacceptable values using illegal values

Time for action—testing the program logic

Time for action—Test Case 3a: testing the entire program with expected values

Time for action—Test Case 3b: testing robustness of the second form

Regression testing in action

Time for action—fixing the bugs and performing regression testing


Testing More Complex Code

Issues with combining scripts

Using JavaScript libraries

Deliberately throwing your own JavaScript errors

Trapping errors by using built-in objects

Using the error console log

Modifying scripts and testing

Time for action—coding, modifying, throwing, and catching errors


Debugging Tools

IE 8 Developer Tools (and the developer toolbar plugin for IE6 and 7)

Using IE developer tools

Time for action—debugging HTML by using the IE8 developer tool

Time for action—debugging CSS by using the IE8 developer tool

Time for action—more Debugging JavaScript by using the IE8 developer tool

Safari or Google Chrome Web Inspector and JavaScript Debugger

Time for action—debugging with Chrome

Opera JavaScript Debugger (Dragonfly)

Time for action—debugging with Opera Dragonfly

Firefox and the Venkman extension

Time for action—debugging using Firefox's Venkman extension

Time for action—more debugging with the Venkman extension

Firefox and the Firebug extension


Testing Tools


Time for action—user Interface testing using Sahi


Time for action testing JavaScript with QUnit


Time for action—creating ad hoc JavaScript benchmark tests

More testing tools that you should check out