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

Transcription

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

2 loading loading runtime Preface 1 Chapter 1: What is JavaScript Testing? 7 Where does JavaScript fit into the web page? 8 HTML Content 8 building a HTML document 9 Styling HTML elements using its attributes 11 Specifying id and class name for an HTML element 12 Cascading Style Sheets 12 styling your HTML document using CSS 14 Referring to an HTML element by its id or class name and styling it 18 Differences between a class selector and an id selector 19 Other uses for dass selectors and id selectors 20 Complete list of CSS attributes 20 JavaScript providing behavior to a web page 20 giving behavior to your HTML document 20 JavaScript Syntax 24 JavaScript events 26 Finding elements in a document 26 Putting it all together 28 The difference between JavaScript and serverside languages 29 Why pages need to work without JavaScript 30 What is testing? 31 Why do you need to test? 31 Types of errors 32 Loading errors 33 errors in action 33 Partially correct JavaScript 34 errors in action 35 Runtime errors 36 errors in action 36 Logic errors 37

3 checking accessing unobtrusively simplifying logic errors in action 38 Some advice for writing errorfree JavaScript 40 Always check for proper names of objects, variables, and functions 40 Check for proper syntax 40 Plan before you code 40 Check for correctness as you code 40 Preventing errors by choosing a suitable text editor 41 Summary 41 Chapter 2: Ad Hoc Testing and Debugging in JavaScript 43 The purpose of ad hoc testinggetting the script to run 44 What happens when the browser encounters an error in JavaScript 44 Browser differences and the need to test in multiple browsers 45 for features and sniffing browsers 46 Testing browser differences via capability testing 47 capability testing for different browsers 48 Are you getting the correct output and putting values in the correct places? 50 Accessing the values on a form 50 values from a form 51 Another technique for accessing form values 54 Accessing other parts of the web page 55 getting the correct values in the correct places 55 Does the script give the expected result 65 What to do if the script doesn't run? 65 Visually inspecting the code 66 Using alert() to see what code is running 66 Using alert() to see what values are being used 67 using alert to inspect your code 67 A less obtrusive way to check what code is running and the values used 71 checking what values are used 72 Commenting out parts of the script to simplify testing 75 the checking process 76 Timing differencesmaking sure that the HTML is there before interacting with it 77 Why ad hoc testing is never enough 78 Summary 79 Chapter 3: Syntax Validation 81 The difference between validating and testing 82 Code that is valid but wrongvalidation doesn't find all the errors 83 Code that is invalid but right 83 Code that is invalid and wrongvalidation finds some errors that might be difficult to spot any other way 83

4 using fixing fixing fixing changing Code quality 83 HTML and CSS needs to be valid before you start on JavaScript 84 What happens if you don't validate your code 85 Colorcoding editorshow your editor can help you to spot validation errors 87 Common errors in JavaScript that will be picked up by validation 89 JSLintan online validator 90 JSLint to spot validation errors 91 Valid code constructs that produce validation warnings 92 Should you fix valid code constructs that produce validation warnings? 92 What happens if you don't fix them 93 How to fix validation errors 93 Error missing "use strict" statement 94 "use strict" errors 94 Error unexpected use of fixing the error of "Unexpected use of ++" 95 Error functions not defined 96 the error of "Functions not defined" 96 Too many var statements 97 fixing the error of using too many var statements 98 Expecting <V instead of <\ 100 the expectation of '<V instead of '</' 101 Expected '===' but found '==' 102 == to === 102 Alert is not defined 102 fixing "Alert is not defined" 103 Avoiding HTML event handlers 103 avoiding HTML event handlers 104 Summary of the corrections we have done 106 JavaScript Linta tool you can download 112 Challenge yourselffix the remaining errors spotted by JSLint 113 Summary 113 Chapter 4: Planning to Test 115 A very brief introduction to the software lifecycle 116 The agile method 116 The agile method and the software cycle in action 117 Analysis and design 117 Implementation and testing 117 Deployment 117 Maintenance 117 Do you need a test plan to be able to test? 117

5 Test Test Test When to develop the test plan 118 How much testing is required? 118 What is the code intended to do? 119 Testing whether the code satisfies our needs 119 Testing for invalid actions by users 119 A short summary of the above issues 120 Major testing concepts and strategies 120 Functional requirement testing 120 Nonfunctional requirement testing 121 Acceptance testing 121 Black box testing 122 Usability tests 123 Boundary testing 123 Equivalence partitioning 123 Beta testing 124 White box testing 124 Branch testing 124 Pareto testing 125 Unit tests 125 Web page tests 126 Performance tests 127 Integration testing 127 Regression testingrepeating prior testing after making changes 128 Testing order 128 Documenting your test plan 129 The test plan 129 Versioning 130 Test strategy 130 Bug form 137 Summary of our test plan 137 Summary 137 Chapter 5: Putting the Test Plan Into Action 139 Applying the test plan: running your tests in order 140 Test Case 1: Testing expected and acceptable values 140 Case la: testing expected and acceptable values by using white box testing 141 Test Case lb: Testing expected but unacceptable values using black box testing 142 case lbi: testing expected but unacceptable values using boundary value testing 142 case lbii: testing expected but unacceptable values using illegal values 144

6 coding, Test Case 2: Testing the program logic 146 testing the program logic 146 Test Case 3: Integration testing and testing unexpected values 147 Test Case 3a: testing the entire program with expected values 147 Test Case 3b: testing robustness of the second form 150 What to do when a test returns an unexpected result 151 Regression testing in action 151 fixing the bugs and performing regression testing 151 Performance issues compressing your code to make it load faster 160 Does using Ajax make a difference? 161 Difference from serverside testing 162 What happens if you visitor turns off JavaScript 162 Summary 164 Chapter 6: Testing More Complex Code 165 Issues with combining scripts 166 Combining event handlers 166 Naming clashes 168 Using JavaScript libraries 169 Do you need to test a library that someone else has written? 170 What sort of tests to run against library code 170 Performance testing 170 Profiling testing 171 GUI and widget addons to libraries and considerations on how to test them 171 Deliberately throwing your own JavaScript errors 172 The throw statement 172 The try, catch, and finally statements 172 Trapping errors by using builtin 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 error console log 181 Error messages 181 Writing your own messages 182 Modifying scripts and testing 184 modifying, throwing, and catching errors 184 Summary 200

7 debugging debugging more debugging debugging debugging Chapter 7: Debugging Tools 201 IE 8 Developer Tools (and the developer toolbar plugin for IE6 and 7) 202 Using IE developer tools 202 Open 202 A brief introduction to the user interface 203 Debugging basics of the IE debugging tool 203 HTML by using the IE8 developer tool 204 CSS by using the IE8 developer tool 205 Debugging JavaScript 206 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 introduction to the user interface 213 with Chrome 213 Opera JavaScript Debugger (Dragonfly) 218 Using Dragonfly 218 Starting Dragonfly 218 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 the Venkman extension 222 Using Firefox's Venkman extension 222 Obtaining the Venkman JavaScript Debugger extension 222 Opening Venkman 222 A brief introduction to the user interface 223 using Firefox's Venkman extension 224 Breakpoints or Call Stack 225 Local Variables and Watches 226 more debugging with the Venkman extension 227 Firefox and the Firebug extension 229 Summary 230

8 user testing creating Table ofcontents Chapter 8: Testing Tools 231 Sahi 232 Interface testing using Sahi 232 More complex testing with Sahi 235 QUnit 236 JavaScript with QUnit 236 Applying QUnit in reallife situations 240 More assertion tests for various situations 240 JSLitmus 241 ad hoc JavaScript benchmark tests 241 More complex testing with JSLitmus 244 More testing tools that you should check out 244 Summary 246 Index 247