Take this
course

Software Development / Web Development

Learning Backbone.js Testing

An interactive guide to perform automated testing on Backbone.js applications with the help of a real-world example

Description

The dynamic nature and flexibility of JavaScript and Backbone.js includes many ways of expressing ideas. Such liberty gives way to certain risks that aren’t as prominent in strongly typed languages and highly opinionated libraries and frameworks. Learning how to mitigate these risks is a crucial step to writing smarter software, and smarter software makes for happy developers!


Learning Backbone.js Testing will bootstrap you into a world of JavaScript testing and provide you with fundamental experience in writing tests. By understanding and becoming comfortable in testing Backbone.js applications, you can increase your productivity, code quality, and design skills.


At the beginning, we’ll discuss different testing philosophies and go over some testing basics. After establishing a motivation for and philosophy of testing, we’re going to dive right into how we express our tests in Jasmine’s BDD syntax. We’ll also hone in on how to deal with the DOM and AJAX in our tests.


Once you learn some syntax and apply it to plain JavaScript and Backbone.js code, we’re going to run into the problem of manual testing practices. We’ll discuss and incorporate a tool that will automate our tests and make testing considerably more streamlined using Karma. From there, you’ll learn to apply testing techniques and tools such as fixtures and spies. This course will jump-start your automated testing experience and you’ll be writing robust tests for everyday objects!

Full details

Curriculum

  • Getting Started with Testing
    The Course Overview
    The viewer may not know what’s in store for them in this course yet. We’ll tell you what the scope of the course is, what the goals are, and how we’ll go about it. • Introduction to the scope of the course • Understand the process of how we’ll be working through the material • Go through the sample app we’ll be building along the way
    2:43
    Testing and Why It’s Used
    Testing adds overhead and time to a development process. We want to explain the benefits of testing and describe unit testing and functional testing. • Learn how the benefits of testing offset the investment needed to start and maintain the testing process • Understand and demonstrate unit testing • Demonstrate functional testing
    5:06
    Understanding TDD versus BDD
    Describe the nuances between TDD and BDD. Prevent confusion of these very similar concepts. • Introduce and define TDD and BDD • Check examples of both "to compare" and "to contrast" • Understand why we’re using BDD
    4:06
    Investigating Our Toolshed
    2:12
  • Understanding Jasmine
    Introducing Jasmine
    You may not have experience with Jasmine, and may not even have it on your computer. We’ll download the library and go through an overview of the directory structure. • Discuss in depth what Jasmine is • Download Jasmine on your machine • Understand the directory structure
    2:41
    Making Our Way Through the Syntax
    Jasmine provides a set of global functions, which we’ll introduce and discuss here. • Discuss the 'describe' and 'it' functions • Understand the anatomy of a test • Introduce matchers
    2:49
    Writing a Simple Test
    Viewers will get their hands dirty by writing a test using Jasmine style syntax. • Write a test for ‘getNthElement’ • Write an implementation of 'getNthElement' • Explore the test interface and write another test
    4:41
    Hands-on Challenge – Adding to Our getNthElement Function
    We want to add a new feature to our function. The viewer is going to add it on their own in this challenge. • Understand the new feature to add to getNthElement • Write the tests and the implementation to pass the tests
    1:33
    Using Backbone.js in Jasmine Tests
    Our tests so far have been vanilla JavaScript, but the rest of the course will be focused on Backbone tests. We’ll integrate the library here. • Explain the process of using Backbone.js in our tests • Write a test for the presence of Backbone.js and its dependencies • Add Backbone.js and its dependencies to our runner.html file
    2:43
  • Testing Models
    Cooking Up a Model
    Our section will rely on an understanding of what the recipe model should do. We’ll introduce that understanding here. • Describe the use case • Enumerate the features of our recipe model • Describe what we should test
    2:09
    Testing Instantiation and Defaults
    We need to make sure we start our model testing on the right foot. This video will ensure its existence and that the defaults are configured properly. • Write tests to cover instantiation and defaults • Write implementation for the recipe model • Explain why we want to test defaults
    2:40
    Taking Care of Dietary Restrictions
    We want to be able to check quickly for dietary restrictions. We’ll test and implement those methods here. • Write the containsEggs and containsNuts tests • Write the implementations of containsEggs and containsNuts • Refactor methods to share a common base method
    4:04
    Introducing Fixtures
    Some of the setup code is redundant and provides more information than needed. Fixtures will help us cut down on that verbosity and make tests easier to grok. • Identify the problem with repeated setup code and extra information • Introduce the concept of fixtures • Implement basic fixture code and make sure that tests pass
    2:49
    Hands-on Challenge – Refactoring to Use Fixtures
    A fixture is a new concept, and it can be very useful. This hands-on challenge will encourage you to practice using them. • Identify an opportunity to use fixtures • Have the viewer pause the video and refactor a test to use fixtures
    2:13
  • Automating the Process
    Embracing Laziness
    Running automated tests manually is tedious and repetitive. Karma can serve as the automation we need. • Summarize the testing process so far • Go through the process in multiple browsers • Introduce Karma as a solution to this tedious work
    2:12
    Installing Karma
    We don’t yet have the tool to run our tests. We’ll install Karma. • Install Karma • Create karma.conf.js • Break down the config file
    2:56
    Running Karma in Browsers
    We’ve configured Karma but haven’t used it to run any tests yet, which we’ll do in this video. • Create a simple Karma test • Run in automatically launched browsers • Open manually in any browser
    2:19
    Making Our Tests Work with Karma
    Our code has been fairly disorganized and is arranged in a way that requires us to use Jasmine. We’ll refactor and run our tests with Karma. • Discuss the problems with our directory structure so far • Structure our code in a more organized way • Let Karma know about our code and run our existing tests
    3:07
  • Depending on AJAX
    Collecting Our Recipes
    We don't have a way to store recipes together. We’ll create a recipe collection. • Create the collection test, modify the fixtures, and create the collection • Write tests for a getCurrentRecipes method • Write a getCurrentRecipes method
    3:17
    Hands-on Challenge – Getting All the Variations
    We want to be able to see a history of variations in a recipe. The user will write the test and method on their own. • Introduce the getRecipeVariations use case • Have the viewer pause the video to write the test and implementation of getRecipeVariations • Review a potential answer to our getRecipeVariations functionality
    4:32
    Mocking AJAX with Sinon.js
    Certain parts of our app depend on AJAX, which can be problematic in a testing environment. The solution is to use Sinon.js to intercept AJAX requests and fake responses. • Introduce the problem of populating our collection with fetch • Describe Sinon.js as the solution to AJAX calls within tests • Implement a fake server to make sure our fetch works
    4:24
    Setting Up a Mock Backend Server
    One-off server mocks clutter our code and hamper reusability. Storing our server responses in a single file will encourage cleanliness and maintainability. • Discuss the problem of keeping the code dry with regard to mocking the backend • Factor backend responses out from our existing test • Add an error test case for an unsuccessful AJAX request
    3:26
  • Testing Views
    Setting Up Our Views
    Testing views presents a new set of challenges related to dependence on the DOM. We’ll start writing tests and run into these issues. • Set up a basic view test • Set up a basic recipe view • Run into issues with DOM dependence and custom assertions
    2:55
    Templating and DOM Expectations
    The unique requirements of testing views merit the use of a new library. jasmine-jquery will help us test views in a more efficient and straightforward way. • Prepare Karma to use our templates within our tests • Install and include jasmine-jquery • Use jasmine-jquery in our test
    5:35
    Rendering Our View
    We need to ensure that our view is rendering properly. With our tools used to effectively test the DOM in place, we're ready to go. • Add handlebars to our view • Test rendering of single value fields • Test rendering of array fields
    4:07
    Taking Notes
    Our recipe app depends on the ability to add notes to a recipe variation. We’ll add this functionality, testing with jasmine-jquery. • Go through the requirements of adding a note to a recipe • Write tests for adding a note to a recipe • Implement the adding notes functionality
    7:30
    Hands-on Challenge – Adding Recipes
    We can render existing recipes, but we have no way of adding new recipes. In this video, you'll be challenged to write the add recipe view. • Understand the requirements of adding new recipes • Review the code to add new recipes
    4:35
  • Testing Routers
    Unit Testing Routers
    Routers are often left to functional testing, but it can be worth unit testing them. We'll discuss when and where to unit test routers. • Review the purpose of a router in a Backbone.js application • Discuss the separation of responsibilities in a Backbone.js application • Understand what we should focus on when testing routers
    2:05
    Introducing Spies
    We need to verify that our route handlers are getting called with the right parameters. We'll discuss spies, which help us track and test calls to functions. • Introduce spies and explain what they are • See spies in action • Review the methods on spies that help us write expectations
    4:02
    Writing Our First Router Test
    Our first route will be accessing a recipe by ID. In this video, we'll test drive the addition of this route. • Understand what we need a route to do in order to navigate to a specific recipe • Write a test for the route in question • Write an implementation of the route setup
    4:44
    Hands-on Challenge – Routing Recipe Variations
    In this video, I'll challenge the viewer to use spies on their own by test driving a route on their own. • Describe the requirements of the route • Have the user pause the video and implement the route • Review a possible solution for the ‘create variation’ route
    4:57

Skills

  • Backbone.js
  • JavaScript
  • jQuery
  • Jasmine

Similar Courses

More Courses by this Instructor