JavaScript Testing Beginner's Guide


JavaScript Testing Beginner's Guide
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters

Learn different techniques to test JavaScript, no matter how long or short your code might be. Discover the most important and free tools to help make your debugging task less painful. Discover how to test user interfaces that are controlled by JavaScript. Make use of free built-in browser features to quickly find out why your JavaScript code is not working, and most importantly, how to debug it. Automate your testing process using external testing tools.  

Book Details

Language : English
Paperback : 272 pages [ 235mm x 191mm ]
Release Date : August 2010
ISBN : 1849510008
ISBN 13 : 9781849510004
Author(s) : Yuxian Eugene Liang
Topics and Technologies : All Books, App Testing, Web Development, Beginner's Guides, Java, Open Source


Table of Contents

Preface
Chapter 1: What is JavaScript Testing?
Chapter 2: Ad Hoc Testing and Debugging in JavaScript
Chapter 3: Syntax Validation
Chapter 4: Planning to Test
Chapter 5: Putting the Test Plan Into Action
Chapter 6: Testing More Complex Code
Chapter 7: Debugging Tools
Chapter 8: Testing Tools
Index
  • Chapter 1: What is JavaScript Testing?
    • Where does JavaScript fit into the web page?
      • HTML Content
    • Time for action – building a HTML document
      • 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
    • 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
    • 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
    • Partially correct JavaScript
  • Time for action – loading errors in action
    • Runtime errors
  • Time for action – runtime errors in action
    • Logic errors
  • Time for action – logic errors in action
  • 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
  • Chapter 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
      • Testing browser differences via capability testing
    • Time for action – capability testing for different browsers
    • 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
      • Another technique for accessing form values
    • Accessing other parts of the web page
  • 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?
    • 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
    • A less obtrusive way to check what code is running and the values used
  • 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
  • Summary
  • Chapter 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
      • 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
    • 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
    • JavaScript Lint–a tool you can download
      • Challenge yourself–fix the remaining errors spotted by JSLint
    • Summary
  • Chapter 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
        • Bug form
      • Summary of our test plan
    • Summary
  • Chapter 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
      • 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 to do when a test returns an unexpected result
    • Regression testing in action
    • Time for action – fixing the bugs and performing regression testing
      • 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
    • Summary
  • Chapter 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 statement
      • The try, catch, and finally statements
    • 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
    • Summary
  • Chapter 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
      • Debugging JavaScript
    • Time for action – more Debugging JavaScript by using the IE8 developer tool
    • 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
    • Opera JavaScript Debugger (Dragonfly)
      • Using Dragonfly
        • Starting Dragonfly
    • Time for action – debugging with Opera Dragonfly
      • 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
      • Breakpoints or Call Stack
      • Local Variables and Watches
    • Time for action – more debugging with the Venkman extension
    • Firefox and the Firebug extension
    • Summary
  • Chapter 8: Testing Tools
    • Sahi
    • Time for action – user Interface testing using Sahi
      • More complex testing with Sahi
    • QUnit
    • Time for action – testing JavaScript with QUnit
      • Applying QUnit in real-life situations
      • More assertion tests for various situations
    • JSLitmus
    • Time for action – creating ad hoc JavaScript benchmark tests
      • More complex testing with JSLitmus
    • More testing tools that you should check out
    • Summary

Yuxian Eugene Liang

Eugene enjoys solving difficult problems creatively in the form of building web applications using Python/Django and JavaScript/JQuery. He also enjoys doing research related to the areas of recommendation algorithms, link analysis, data visualization, data mining, information retrieval, business intelligence, and intelligent user interfaces. He has recently started a personal blog at http://www.liangeugene.com

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 12 submitted: last submission 21 Jun 2013

Errata type: Typo | Page number: 171 | Errata date: 20 SEP 2010

The line JavaScript code id to install.php.

Correct : JavaScript code is to install.php  

Errata type: Typo | Page number: 25 | Errata date: June 19, 2013

This line

The function starts with a {and ends with a}.

Should be

The function starts with a { and ends with a }.

Note that the curly brackets should be in Code style.

Errata type: Typo | Page number: 25 | Errata date: June 19, 2013

The sample code snippets on page 25 should be as follows:

function functionname(parameter1, parameter2, … parameterX)

{

//Body of the function

}

-------------------------------------------------

if(condition)

{

//code to be executed if condition is true.

}

----------------------------------------------------

if(condition)

{

// code to be executed if condition is true.

}

else

{

// code to be executed if condition is not true.

}

Errata type: Typo | Page number: 42 | Errata date: June 19, 2013

This line

These three techniques (or rather built-in methods) are: document.getElementById(), document.getElementsByName(), and document.ElementsByTagName().

Should be

These three techniques (or rather built-in methods) are: document.getElementById(), document.getElementsByName(), and document.getElementsByTagName().

 

Errata type: Typo | Page number: 26 | Errata date: June 19, 2013

This line

JavaScript features three properties of the Document object (which is the root of every DOM tree) that allows you to find the HTML elements that you need.

Should be

JavaScript features three properties of the document object (which is the root of every DOM tree) that allows you to find the HTML elements that you need.

Errata type: Technical | Page number: 25 | Errata date: June 21, 2013

This line

We use the keyword var followed by a variable name. In the above example, var listElements = []; means that a variable listElements is defined, and it is given the value of an empty list denoted by  [].

Should be

We use the keyword var followed by a variable name. In the above example, var listElements = []; means that a variable listElements is declared, and it is given the value of an empty array denoted by  [].

Errata type: Technical | Page number: 12 | Errata date: June 21, 2013

This line

In case you are wondering what the <title> tag does, it is essentially an attribute that specifies extra information about an element. This is most often used within the <head> tag.
If you open up any HTML document that contains a <title> tag, you will find the contents of this tag in the tab of your browser or title of your browser window.

Should be

In case you are wondering what the title attribute does, it is essentially an  attribute that specifies extra information about an element. The <title> tag  has a similar role for the document. It is used within the <head> tag. If  you open up your document in the browser, you will find the contents of this  tag in the title bar of your browser window.

Errata type: Typo| Page number: 39 | Errata date: June 21, 2013

This line

In this loop, you may have noticed that the statement document.write(i+<br>"); should be executed 10 times ( from var i = 0 to when i = 9).

should be

In this loop, you may have noticed that the statement document.write(i+"<br>"); should be executed 10 times ( from var i = 0 to when i = 9).

Errata type: code | Page number: 38 | Errata date: June 21, 2013

The code snippet
<body>
<!-- this shows an infinite loop, an obvious logic error-->
<script>
// an infinite loop
for(var i = 0; i<10; i--){
document.write(i + "<br>");
}
</script>

should be

<script type="text/javascript">
// example 1: infinite loop
for(var i = 0; i<10; i--){
  // document.write(i + "<br>");
}
</script>

Errata type: technical | Page number: 27 | Errata date: June 21, 2013

This line

Notice that 'boxed1' is being referenced, and this means that the parameter 'f' takes the value of the HTML element id of 'boxed1'.

should be

Notice that the string 'boxed1' is being passed, and this means that the parameter 'd' will contain the id-value of the HTML element we wish to reference.

Errata type: code | Page number: 28 | Errata date: June 21, 2013

The code snippet

function insertContent(a){
var elementToBeInserted = document.getElementById(a);
elementToBeInserted.innerHTML = "<h1>This is a dynamic content</
h1><br><p>great to be here</p>";
}

should be

function insertContent(a){
var elementToBeInserted = document.getElementById(a);
elementToBeInserted.innerHTML = "<h1>This is a dynamic content</
h1><p>great to be here</p>";
}

Errata type: technical | Page number: 29 | Errata date: June 21, 2013

This line

Then, using the built-in method innerHTML()  for HTML element nodes (because an HTML element node is passed to the elementToBeInserted variable), we dynamically insert the text "<h1>This is a dynamic content</h1><br><p>great to be here</p>".

should be

Then, using the built-in method innerHTML()  for HTML element nodes (because an HTML element node is passed to the elementToBeInserted variable), we dynamically insert the text "<h1>This is a dynamic content</h1><p>great to be here</p>".

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

JavaScript Testing Beginner's Guide +    Spring Security 3 =
50% Off
the second eBook
Price for both: £16.14

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

Relationship between HTML, CSS, and JavaScript Different types of JavaScript error How to perform ad hoc testing How to validate your JavaScript code Different testing concepts Create a test plan and implement it How to test more complex code by using JavaScript’s exception handling Learn how to test the user interface controlled by JavaScript How to debug your code using tools such as Google Chrome, Javascript Debugger, and Firefox's Venkman Extension. How to further automate your testing process using Sahi, Qunit, and JsLitmus Other testing tools that will make your testing process easier and less painful  

In Detail

JavaScript is an important part of web development in today’s Web 2.0 world. While there are many JavaScript frameworks in the market, learning to write, test, and debug JavaScript without the help of any framework will make you a better JavaScript developer. However, testing and debugging can be time consuming, tedious, and painful. This book will ease your woes by providing various testing strategies, advice, and tool guides that will make testing smooth and easy. This book shows you the most essential features of JavaScript, which you will be using in your daily development, testing, and debugging tasks. You will learn to use the most basic functions of JavaScript to perform ad hoc testing quickly and efficiently. This book is organized in an easy to follow, step-by-step tutorial style to maximize your learning. You will first learn about the different types of errors you will most often encounter as a JavaScript developer. You will also learn the most essential features of JavaScript through our easy to follow examples.As you go along, you will learn how to write better JavaScript code through validation. Learning how to write validated code alone will help you improve tremendously as a JavaScript developer and most importantly, to write JavaScript code that runs better, faster, and with less bugs.As our JavaScript program gets larger, we need better ways of testing our JavaScript code. You will learn how to go about various testing concepts and how to use them in your test plan. After which, you will learn how to implement the test plan for your code. To accommodate more complex JavaScript code, you will learn more about the built-in features of JavaScript to identify and catch different types of JavaScript error. Such information helps to spot the root of the problem so that you can act on it. Finally, you will learn how to make use of the built-in browser tools and other external tools to automate your testing process.

Learn how to test and debug JavaScript through example-driven tutorials.

Approach

This book is organized such that only the most essential information is provided to you in each chapter so as to maximize your learning. Examples and tutorials are given in an easy to follow, step-by-step manner so that you can see how the testing process is being carried out and how the code is being written. The source code also contains detailed explanation so that you know what the code is doing. Multiple screenshots are used in places that matter so that you have a visual sense of what is happening.

Who this book is for

Beginner JavaScript developers looking for essential ways to write, test, and debug JavaScript for different purposes and situations.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software