JavaScript Testing. Beginner's Guide. Liang Yuxian Eugene. Test and debug JavaScript the easy way PUBLISHING MUMBAI BIRMINGHAM. k I I.

JavaScript Testing

Beginner

's

Guide

Test

and

_debug

_JavaScript

the

easy way

Liang

Yuxian

_Eugene

[

rwtmm® I

k

I

I

PUBLISHING

Table

of

Contents

Preface

1

Chapter

1:

What

is

_{JavaScript Testing?}

7

Where does

_JavaScript

fit intotheweb

_page?

8

HTML Content 8

Time for action-

building

_a HTMLdocument 9

StylingHTML elements_usingits attributes 11

Specifyingid and classnameforanHTML element 12

Cascading Style

Sheets 12

Timefor action -

styling

_{your HTML} document

using

CSS 14

ReferringtoanHTML element_byits idorclassnameandstylingit 18

Differences betweenaclassselectorandanid selector 19

Otherusesfor dass selectors and id selectors 20

Completelist of CSS attributes 20

JavaScript providing

behavior toa web_page 20

Time for action-

giving

behaviorto yourHTML document 20

JavaScript Syntax 24

JavaScriptevents 26

Findingelementsinadocument 26

Puttingitall together 28

The difference between

JavaScript

and server-side

languages

29

Why

pages needtowork without

JavaScript

30

Whatis

_testing?

31

Why

doyou needto test? 31

Types

oferrors 32

Loading

errors 33

Time for action-

loading

errorsin action 33

PartiallycorrectJavaScript 34

Timefor action

-loading

errorsin action 35

Runtimeerrors 36

Time for action-runtime errorsin action 36

Table ofContents

Timeforaction-

logic

_errors in action 38

Someadvice for

writing

error-free

JavaScript

40

Always

check forpropernames of

objects, variables,

and functions 40

Check for proper

syntax

40

Plan before you code 40

Checkfor correctnessas_you code 40

Preventing

errors

_{by choosing}

a suitabletexteditor 41

Summary

41

Chapter

2: Ad Hoc

_Testing

and

_Debugging

in

_JavaScript

43

The purposeof ad hoc

testing-getting

the

script

torun 44

What

happens

when the browser encountersan errorin

_JavaScript

44

Browserdifferencesand theneedtotest in

_multiple

browsers 45

Time for action-

checking

for features and

sniffing

browsers 46

Testing

browser differences via

_{capability testing}

47

Timefor action-

capability

testing

for different browsers 48

Are you

getting

thecorrect

_output

and

_putting

values in thecorrect

_places?

50

Accessing

the values on aform 50

Time for action-

accessing

values

from

aform 51

Anothertechniquefor_accessingform values 54

Accessing

other partsof

the

web page 55

Time for action

-getting

thecorrectvalues in thecorrect

places

55

Doesthe

_script

give

the

_expected

result 65

What todo if the

_script

doesn't run? 65

Visually inspecting

thecode 66

Using

alert()

toseewhat code is

running

66

Using alert()

toseewhat values are

being

used 67

Time for action-

using

alertto

inspect

yourcode 67

Aless obtrusiveway tocheck what code is

running

and the values used 71

Time for action-

unobtrusively checking

what valuesareused 72

Commenting

out

_parts

of the

_script

to

_{simplify testing}

75

Timefor action-

simplifying

the

checking

process 76

Timing

differences-making

surethat theHTML is there before

interacting

with it 77

Why

ad hoc

_testing

isnever

enough

78

Summary

79

Chapter

3:

_Syntax

Validation

81

The difference between

_validating

and

_testing

82 Code that is valid but

_{wrong-validation}

doesn't find all theerrors 83

Code thatisinvalid but

_right

83

Code thatisinvalid and

_{wrong-validation}

finds

someerrorsthat

might

of

Code

_quality

83

HTML and CSS needs tobe valid before you start on

_JavaScript

84

What

_happens

_{if you don't}validate yourcode 85

Color-coding

editors-how your editorcan

_help

_youto

_spot

validationerrors 87 Commonerrorsin

JavaScript

that will be

picked

_up

by

validation 89

JSLint-anonline validator 90

Time for action-

using

JSLint to

spot validation errors 91

Valid codeconstructs that

_produce

validation

warnings

92

Should_you

fix

valid code constructsthat

_produce

validation

_warnings?

92 What

_happens

_{if you don't fix them} 93

How tofix validationerrors 93

Error—missing

"use strict" statement 94

Time for action

-fixing

"use strict"errors 94

Error—unexpected

use of++ 94

Time for action-

fixing

the errorof

"Unexpected

useof++" 95

Error—functionsnotdefined 96

Time for action-

fixing

theerrorof "Functionsnotdefined" 96

Too many varstatements 97

Time for action-

fixing

the_errorof

using

too many_varstatements 98

Expecting

<V

instead of

_<\

100

Time foraction-

fixing

the

expectation

of

'<V

instead of

'</'

101

Expected

'===' _{but found} '==' ₁₀₂

Time for action

-changing

==to=== 102

Alert isnotdefined 102

Time foraction-

fixing

"Alertis not defined" 103

Avoiding

HTML event handlers 103

Time for action-

avoiding

HTMLeventhandlers 104

Summary

of the correctionswe have done 106

JavaScript

Lint-a tool you can download 112

Challenge yourself-fix

the

_remaining

errors

_{spotted by}

JSLint 113

Summary

113

Chapter

4:

_Planning

to Test 115

A very briefintroductiontothe

_{software lifecycle}

116

The

_agile

method 116

The_agilemethod and the software_cyclein action 117

Analysisand_design 117

Implementation

and testing 117

Deployment 117

Maintenance 117

TableofContents

When to

develop

the test

plan

118 Howmuch

testing

is

required?

118

What is the code intended to do? 119

Testing

whether the code satisfiesour needs 119

Testing

for invalid actions

by

users 119

A shortsummaryof the

above

issues 120

Major

testing concepts

and

strategies

120

Functional

_{requirement testing}

120

Non-functional

_{requirement testing}

121

Acceptance testing

121

Black box

testing

122

Usabilitytests 123

Boundary

testing 123

Equivalence partitioning 123

Betatesting 124

White box

_testing

124

Branch_testing 124

Pareto_testing 125

Unit tests 125

Web pagetests 126

Performancetests 127

Integration testing

127

Regression testing-repeating prior testing

after

making

changes

128

Testing

order 128

Documenting

your test

plan

129

Thetest

_plan

129

Versioning 130

Teststrategy 130

Bug form 137

Summary

ofourtest

_plan

137

Summary

137

Chapter

5:

_Putting

the Test Plan IntoAction 139

Applying

the test

_{plan: running}

_{your tests in order} 140

Test Case 1:

_{Testing expected and acceptable}

values 140

Time for action-Test Case la:

testing expected

and

acceptable

values

_by

using

white box

testing

141

TestCase lb:

Testing

expected

but

_unacceptable

values

_using

blackbox

_testing

142

Time for action-Testcase lbi:

testing expected

but

unacceptable

values

using boundary

value

_testing

142

Time foraction-Test

case lbii:

testing expected

but

_unacceptable

values

of

Test Case 2:

_Testing

_{the program}

_logic

146

Time for action-

testing

the program

logic

146

Test Case 3:

_{Integration testing and}

_{testing unexpected}

values 147 Time for action -Test Case 3a:

_testing

the entire program with

expected

values 147 Time foraction-Test Case 3b:

testing

robustness of the second form 150

Whattodo whenatest returns an

_unexpected

result 151

Regression testing

in action 151

Time for action-

fixing

the

bugs

and

performing

regression testing

151

Performance

_{issues—compressing}

_{your code}tomake it load faster 160 Does

_{using Ajax}

make a difference? 161

Difference from server-side

_testing

162

What

_happens

_{if you}visitor turnsoff

_JavaScript

162

Summary

164

Chapter

6:

_Testing

More

_Complex

Code

₁₆₅

Issues with

_{combining scripts}

166

Combining

eventhandlers 166

Naming

clashes 168

Using JavaScript

libraries 169

Do_{you need}to test a

library

that someone elsehas written? 170

Whatsortoftests to run

against library

code 170

Performance_testing 170

Profilingtesting 171

GUI and

_widget

add-onstolibraries and considerationson how to testthem 171

Deliberately throwing

yourown

JavaScript

errors 172

The throwstatement 172

The try,

catch,

and

finally

statements 172

Trapping

errors

by using

built-in

objects

176

The Error

_object

176

The

_RangeError

_object

178

The ReferenceError

_object

178

The

_{TypeError object}

180

The

_{SyntaxError object}

181

The URIError

_object

181

The EvalError

_object

181

Using

the errorconsole

log

181

Errormessages 181

Writing

yourown _messages 182

Modifying scripts

and

_testing

184 Time for action-

coding, modifying, throwing,

and

catching

errors 184

TableofContents

Chapter

7:

_Debugging

Tools

201

IE 8

_Developer

Tools

_(and

the

_developer

toolbar

_plugin

forIE6and

₇₎

202

Using

IE

_developer

tools 202

Open

202

A briefintroduction tothe userinterface 203

Debugging

basics of the IE

_debugging

tool 203

Time foraction

-debugging

HTML

_{by using}

theIE8

_developer

tool 204

Time for action-

debugging

CSS

by using

the IE8

developer

tool 205

Debugging

JavaScript

206

Timeforaction-more

Debugging JavaScript by using

the IE8

developer

tool 206

Safari or

Google

Chrome Web

Inspector

and

JavaScript Debugger

211

Differences between Safari and

_Google

Chrome 211

Debugging using

Chrome 212

A brief introductiontothe userinterface 213

Timeforaction-

debugging

with Chrome 213

Opera JavaScript Debugger

(Dragonfly)

218

Using Dragonfly

218

Starting Dragonfly 218

Time

for

action

-debugging

with

_{Opera Dragonfly}

219

Inspection

and Call Stack 220

Thread

_Log

220

Continue,

Step

Into,

Step Over, Step Out,

and

_Stop

at Error 220

Settings

222

Firefox and theVenkmanextension 222

Using Firefox's

Venkman extension 222 Obtainingthe Venkman_{JavaScript Debugger}extension 222

OpeningVenkman 222

Abrief introductiontotheuserinterface 223

Time for action

-debugging using

Firefox's Venkman extension 224

Breakpoints

orCall Stack ₂₂₅

Local Variables

and

Watches 226

Time foraction-_more

debugging

with the Venkmanextension 227

Firefox andthe

_Firebug

extension 229

of

Chapter

8:

_Testing

Tools

231

Sahi 232

Timeforaction- userInterface

testing using

Sahi 232

More

_{complex testing}

with Sahi 235

QUnit

236

Time for action

-testing

JavaScript

withQUnit 236

Applying

QUnit

in real-life situations 240

More assertion tests forvarioussituations 240

JSLitmus 241

Time foraction-

creating

ad hoc

JavaScript

benchmark tests 241

More

_{complex testing}

with JSLitmus 244

More

testing

tools thatyou should

check

out 244

Summary

246