O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

JavaScript Testing

Book Description

Test and debug JavaScript the easy way.

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

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.

Table of Contents

  1. JavaScript Testing
    1. JavaScript Testing
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action—heading
        1. What just happened?
        2. Pop quiz—heading
        3. Have a go hero—heading
      6. Reader feedback
      7. Customer support
        1. Errata
        2. Piracy
        3. Questions
    6. 1. What is JavaScript Testing?
      1. Where does JavaScript fit into the web page?
        1. HTML Content
      2. Time for action—building a HTML document
        1. What just happened?
          1. Styling HTML elements using its attributes
          2. Specifying id and class name for an HTML element
        2. Cascading Style Sheets
      3. Time for action—styling your HTML document using CSS
        1. What just happened?
          1. Referring to an HTML element by its id or class name and styling it
          2. Differences between a class selector and an id selector
          3. Other uses for class selectors and id selectors
          4. Complete list of CSS attributes
        2. JavaScript providing behavior to a web page
      4. Time for action—giving behavior to your HTML document
        1. What just happened?
          1. JavaScript Syntax
          2. JavaScript events
          3. Finding elements in a document
          4. Putting it all together
      5. The difference between JavaScript and server-side languages
      6. Why pages need to work without JavaScript
      7. What is testing?
      8. Why do you need to test?
      9. Types of errors
        1. Loading errors
      10. Time for action—loading errors in action
        1. What just happened?
          1. Partially correct JavaScript
      11. Time for action—loading errors in action
        1. What just happened?
          1. Runtime errors
      12. Time for action—runtime errors in action
        1. What just happened?
          1. Logic errors
      13. Time for action—logic errors in action
        1. What just happened?
      14. Some advice for writing error-free JavaScript
        1. Always check for proper names of objects, variables, and functions
        2. Check for proper syntax
        3. Plan before you code
        4. Check for correctness as you code
        5. Preventing errors by choosing a suitable text editor
      15. Summary
    7. 2. Ad Hoc Testing and Debugging in JavaScript
      1. The purpose of ad hoc testing—getting the script to run
      2. What happens when the browser encounters an error in JavaScript
      3. Browser differences and the need to test in multiple browsers
      4. Time for action—checking for features and sniffing browsers
        1. What just happened?
        2. Testing browser differences via capability testing
      5. Time for action—capability testing for different browsers
        1. What just happened?
      6. Are you getting the correct output and putting values in the correct places?
        1. Accessing the values on a form
      7. Time for action—accessing values from a form
        1. What just happened?
          1. Another technique for accessing form values
        2. Accessing other parts of the web page
      8. Time for action—getting the correct values in the correct places
        1. What just happened?
      9. Does the script give the expected result?
      10. What to do if the script doesn't run
        1. Visually inspecting the code
        2. Using alert[] to see what code is running
        3. Using alert() to see what values are being used
      11. Time for action—using alert to inspect your code
        1. What just happened?
        2. A less obtrusive way to check what code is running and the values used
      12. Time for action—unobtrusively checking what values are used
        1. What just happened?
      13. Commenting out parts of the script to simplify testing
      14. Time for action—simplifying the checking process
        1. What just happened?
      15. Timing differences—making sure that the HTML is there before interacting with it
      16. Why ad hoc testing is never enough
      17. Summary
    8. 3. Syntax Validation
      1. The difference between validating and testing
        1. Code that is valid but wrong—validation doesn't find all the errors
        2. Code that is invalid but right
        3. Code that is invalid and wrong—validation finds some errors that might be difficult to spot any other way
      2. Code quality
        1. HTML and CSS needs to be valid before you start on JavaScript
          1. What happens if you don't validate your code
            1. How validation can simplify testing
            2. Validation can help you debug your code
            3. Validation helps you to code using good practices
            4. Validation
        2. Color-coding editors—how your editor can help you to spot validation errors
      3. Common errors in JavaScript that will be picked up by validation
      4. JSLint—an online validator
      5. Time for action—using JSLint to spot validation errors
        1. What just happened?
      6. Valid code constructs that produce validation warnings
        1. Should you fix valid code constructs that produce validation warnings?
        2. What happens if you don't fix them
      7. How to fix validation errors
        1. Error missing "use strict" statement
      8. Time for action—fixing "use strict" errors
        1. Error—unexpected use of ++
      9. Time for action—fixing the error of "Unexpected use of ++"
        1. Error—functions not defined
      10. Time for action—fixing the error of "Functions not defined"
        1. Too many var statements
      11. Time for action—fixing the error of using too many var statements
        1. Expecting <\/ instead of <\
      12. Time for action—fixing the expectation of '<\/' instead of '</'
        1. Expected '===' but found '=='
      13. Time for action—changing == to ===
        1. Alert is not defined
      14. Time for action—fixing "Alert is not defined"
        1. Avoiding HTML event handlers
      15. Time for action—avoiding HTML event handlers
        1. Summary of the corrections we have done
        2. What just happened?
      16. JavaScript Lint—a tool you can download
        1. Challenge yourself—fix the remaining errors spotted by JSLint
      17. Summary
    9. 4. Planning to Test
      1. A very brief introduction to the software lifecycle
        1. The agile method
          1. The agile method and the software cycle in action
          2. Analysis and design
          3. Implementation and testing
          4. Deployment
          5. Maintenance
      2. Do you need a test plan to be able to test?
      3. When to develop the test plan
      4. How much testing is required?
        1. What is the code intended to do?
        2. Testing whether the code satisfies our needs
        3. Testing for invalid actions by users
        4. A short summary of the above issues
      5. Major testing concepts and strategies
        1. Functional requirement testing
        2. Non-functional requirement testing
        3. Acceptance testing
        4. Black box testing
          1. Usability tests
          2. Boundary testing
          3. Equivalence partitioning
          4. Beta testing
        5. White box testing
          1. Branch testing
          2. Pareto testing
        6. Unit tests
        7. Web page tests
        8. Performance tests
        9. Integration testing
        10. Regression testing—repeating prior testing after making changes
      6. Testing order
      7. Documenting your test plan
        1. The test plan
          1. Versioning
          2. Test strategy
            1. Testing expected and acceptable values by using white box testing
            2. Testing expected and unacceptable values by using black box testing
            3. Testing the program logic
            4. Integrated testing and testing unexpected values
          3. Bug form
        2. Summary of our test plan
      8. Summary
    10. 5. Putting the Test Plan Into Action
      1. Applying the test plan: running your tests in order
        1. Test Case 1: Testing expected and acceptable values
      2. Time for action—Test Case 1a: testing expected and acceptable values by using white box testing
        1. Test Case 1b: Testing expected but unacceptable values using black box testing
      3. Time for action—Test case 1bi: testing expected but unacceptable values using boundary value testing
      4. Time for action—Test case 1bii: testing expected but unacceptable values using illegal values
            1. Input Case 1:
            2. Input Case 2:
            3. Input Case 3:
        1. Test Case 2: Testing the program logic
      5. Time for action—testing the program logic
        1. Test Case 3: Integration testing and testing unexpected values
      6. Time for action—Test Case 3a: testing the entire program with expected values
      7. Time for action—Test Case 3b: testing robustness of the second form
        1. What just happened?
        2. What to do when a test returns an unexpected result
      8. Regression testing in action
      9. Time for action—fixing the bugs and performing regression testing
        1. What just happened?
        2. Performance issues—compressing your code to make it load faster
        3. Does using Ajax make a difference?
        4. Difference from server-side testing
        5. What happens if you visitor turns off JavaScript
        6. Have a go hero—enhance the usability of our program
      10. Summary
    11. 6. Testing More Complex Code
      1. Issues with combining scripts
        1. Combining event handlers
        2. Naming clashes
      2. Using JavaScript libraries
        1. Do you need to test a library that someone else has written?
        2. What sort of tests to run against library code
          1. Performance testing
          2. Profiling testing
        3. GUI and widget add-ons to libraries and considerations on how to test them
      3. Deliberately throwing your own JavaScript errors
        1. The throw statements
        2. The try, catch, and finally statement
      4. Trapping errors by using built-in objects
        1. The Error object
        2. The RangeError object
        3. The ReferenceError object
        4. The TypeError object
        5. The SyntaxError object
        6. The URIError object
        7. The EvalError object
      5. Using the error console log
        1. Error messages
        2. Writing your own messages
      6. Modifying scripts and testing
      7. Time for action—coding, modifying, throwing, and catching errors
        1. Have a go hero—using catchError function to check input
      8. Summary
    12. 7. Debugging Tools
      1. IE 8 Developer Tools (and the developer toolbar plugin for IE6 and 7)
      2. Using IE developer tools
        1. Open
        2. A brief introduction to the user interface
        3. Debugging basics of the IE debugging tool
      3. Time for action—debugging HTML by using the IE8 developer tool
      4. Time for action—debugging CSS by using the IE8 developer tool
        1. What just happened?
        2. Debugging JavaScript
      5. Time for action—more Debugging JavaScript by using the IE8 developer tool
        1. What just happened?
      6. Safari or Google Chrome Web Inspector and JavaScript Debugger
        1. Differences between Safari and Google Chrome
        2. Debugging using Chrome
        3. A brief introduction to the user interface
      7. Time for action—debugging with Chrome
        1. What just happened?
      8. Opera JavaScript Debugger (Dragonfly)
        1. Using Dragonfly
          1. Starting Dragonfly
            1. Brief Introduction to the User Interface
      9. Time for action—debugging with Opera Dragonfly
        1. What just happened?
        2. Inspection and Call Stack
        3. Thread Log
        4. Continue, Step Into, Step Over, Step Out, and Stop at Error
        5. Settings
      10. Firefox and the Venkman extension
        1. Using Firefox's Venkman extension
          1. Obtaining the Venkman JavaScript Debugger extension
          2. Opening Venkman
          3. A brief introduction to the user interface
      11. Time for action—debugging using Firefox's Venkman extension
        1. What just happened?
        2. Breakpoints or Call Stack
        3. Local Variables and Watches
      12. Time for action—more debugging with the Venkman extension
        1. What just happened?
      13. Firefox and the Firebug extension
      14. Summary
    13. 8. Testing Tools
      1. Sahi
      2. Time for action—user Interface testing using Sahi
        1. What just happened?
        2. More complex testing with Sahi
      3. QUnit
      4. Time for action testing JavaScript with QUnit
        1. What just happened?
        2. Applying QUnit in real-life situations
        3. More assertion tests for various situations
      5. JSLitmus
      6. Time for action—creating ad hoc JavaScript benchmark tests
        1. What just happened?
        2. More complex testing with JSLitmus
      7. More testing tools that you should check out
      8. Summary