JavaScript Testing by Eugene, Liang Yuxian -- Read -- Imperial Library of Trantor

Index

JavaScript Testing

Table of Contents JavaScript Testing Credits About the Author About the Reviewers Preface

What this book covers What you need for this book Who this book is for Conventions Time for action—heading

What just happened? Pop quiz—heading Have a go hero—heading

Reader feedback Customer support

Errata Piracy Questions

1. What is JavaScript Testing?

Where does JavaScript fit into the web page?

HTML Content

Time for action—building a HTML document

What just happened?

Styling HTML elements using its attributes Specifying id and class name for an HTML element

Cascading Style Sheets

Time for action—styling your HTML document using CSS

What just happened?

Referring to an HTML element by its id or class name and styling it Differences between a class selector and an id selector Other uses for class selectors and id selectors Complete list of CSS attributes

JavaScript providing behavior to a web page

Time for action—giving behavior to your HTML document

What just happened?

JavaScript Syntax JavaScript events Finding elements in a document Putting it all together

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

Loading errors

Time for action—loading errors in action

What just happened?

Partially correct JavaScript

Time for action—loading errors in action

What just happened?

Runtime errors

Time for action—runtime errors in action

What just happened?

Logic errors

Time for action—logic errors in action

What just happened?

Some advice for writing error-free JavaScript

Always check for proper names of objects, variables, and functions Check for proper syntax Plan before you code Check for correctness as you code Preventing errors by choosing a suitable text editor

Summary

2. 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

What just happened? Testing browser differences via capability testing

Time for action—capability testing for different browsers

What just happened?

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

Accessing the values on a form

Time for action—accessing values from a form

What just happened?

Another technique for accessing form values

Accessing other parts of the web page

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

What just happened?

Does the script give the expected result? What to do if the script doesn't run

Visually inspecting the code Using alert[] to see what code is running Using alert() to see what values are being used

Time for action—using alert to inspect your code

What just happened? A less obtrusive way to check what code is running and the values used

Time for action—unobtrusively checking what values are used

What just happened?

Commenting out parts of the script to simplify testing Time for action—simplifying the checking process

What just happened?

Timing differences—making sure that the HTML is there before interacting with it Why ad hoc testing is never enough Summary

3. Syntax Validation

The difference between validating and testing

Code that is valid but wrong—validation doesn't find all the errors Code that is invalid but right Code that is invalid and wrong—validation finds some errors that might be difficult to spot any other way

Code quality

HTML and CSS needs to be valid before you start on JavaScript

What happens if you don't validate your code

How validation can simplify testing Validation can help you debug your code Validation helps you to code using good practices Validation

Color-coding editors—how your editor can help you to spot validation errors

Common errors in JavaScript that will be picked up by validation JSLint—an online validator Time for action—using JSLint to spot validation errors

What just happened?

Valid code constructs that produce validation warnings

Should you fix valid code constructs that produce validation warnings? What happens if you don't fix them

How to fix validation errors

Error missing "use strict" statement

Time for action—fixing "use strict" errors

Error—unexpected use of ++

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

Error—functions not defined

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

Too many var statements

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

Expecting <\/ instead of <\

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

Expected '===' but found '=='

Time for action—changing == to ===

Alert is not defined

Time for action—fixing "Alert is not defined"

Avoiding HTML event handlers

Time for action—avoiding HTML event handlers

Summary of the corrections we have done What just happened?

JavaScript Lint—a tool you can download

Challenge yourself—fix the remaining errors spotted by JSLint

Summary

4. Planning to Test

A very brief introduction to the software lifecycle

The agile method

The agile method and the software cycle in action Analysis and design Implementation and testing Deployment Maintenance

Do you need a test plan to be able to test? When to develop the test plan How much testing is required?

What is the code intended to do? Testing whether the code satisfies our needs Testing for invalid actions by users A short summary of the above issues

Major testing concepts and strategies

Functional requirement testing Non-functional requirement testing Acceptance testing Black box testing

Usability tests Boundary testing Equivalence partitioning Beta testing

White box testing

Branch testing Pareto testing

Unit tests Web page tests Performance tests Integration testing Regression testing—repeating prior testing after making changes

Testing order Documenting your test plan

The test plan

Versioning Test strategy

Testing expected and acceptable values by using white box testing Testing expected and unacceptable values by using black box testing Testing the program logic Integrated testing and testing unexpected values

Bug form

Summary of our test plan

Summary

5. Putting the Test Plan Into Action

Applying the test plan: running your tests in order

Test Case 1: Testing expected and acceptable values

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

Test Case 1b: Testing expected but unacceptable values using black 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

Input Case 1: Input Case 2: Input Case 3:

Test Case 2: Testing the program logic

Time for action—testing the program logic

Test Case 3: Integration testing and testing unexpected values

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

What just happened? What to do when a test returns an unexpected result

Regression testing in action Time for action—fixing the bugs and performing regression testing

What just happened? Performance issues—compressing your code to make it load faster Does using Ajax make a difference? Difference from server-side testing What happens if you visitor turns off JavaScript Have a go hero—enhance the usability of our program

Summary

6. Testing More Complex Code

Issues with combining scripts

Combining event handlers Naming clashes

Using JavaScript libraries

Do you need to test a library that someone else has written? What sort of tests to run against library code

Performance testing Profiling testing

GUI and widget add-ons to libraries and considerations on how to test them

Deliberately throwing your own JavaScript errors

The throw statements The try, catch, and finally statement

Trapping errors by using built-in objects

The Error object The RangeError object The ReferenceError object The TypeError object The SyntaxError object The URIError object The EvalError object

Using the error console log

Error messages Writing your own messages

Modifying scripts and testing Time for action—coding, modifying, throwing, and catching errors

Have a go hero—using catchError function to check input

Summary

7. Debugging Tools

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

Open A brief introduction to the user interface Debugging basics of the IE debugging tool

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

What just happened? Debugging JavaScript

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

What just happened?

Safari or Google Chrome Web Inspector and JavaScript Debugger

Differences between Safari and Google Chrome Debugging using Chrome A brief introduction to the user interface

Time for action—debugging with Chrome

What just happened?

Opera JavaScript Debugger (Dragonfly)

Using Dragonfly

Starting Dragonfly

Brief Introduction to the User Interface

Time for action—debugging with Opera Dragonfly

What just happened? Inspection and Call Stack Thread Log Continue, Step Into, Step Over, Step Out, and Stop at Error Settings

Firefox and the Venkman extension

Using Firefox's Venkman extension

Obtaining the Venkman JavaScript Debugger extension Opening Venkman A brief introduction to the user interface

Time for action—debugging using Firefox's Venkman extension

What just happened? Breakpoints or Call Stack Local Variables and Watches

Time for action—more debugging with the Venkman extension

What just happened?

Firefox and the Firebug extension Summary

8. Testing Tools

Sahi Time for action—user Interface testing using Sahi

What just happened? More complex testing with Sahi

QUnit Time for action testing JavaScript with QUnit

What just happened? Applying QUnit in real-life situations More assertion tests for various situations

JSLitmus Time for action—creating ad hoc JavaScript benchmark tests

What just happened? More complex testing with JSLitmus

More testing tools that you should check out Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →