Front-End First: Testing and Prototyping JavaScript Apps

Being a productive front-end web developer can be challenging at times. In this course we will uncover how the front-end can be unit tested, mocked, and rapidly prototyped separate from the back-end.
Course info
Rating
(123)
Level
Intermediate
Updated
May 10, 2013
Duration
3h 21m
Table of contents
Introduction
Principles of Unit Testing
Examples of Hard to Test Code
Unit Testing Your Front-End Application
Mocking Your Front-End Application
Prototyping Your Front-End Application
Integrating with Front-End Frameworks
Description
Course info
Rating
(123)
Level
Intermediate
Updated
May 10, 2013
Duration
3h 21m
Description

Being a productive front-end web developer can be challenging at times. In this course we will uncover how the front-end can be unit tested and rapidly prototyped separate from the back-end. We will cover the basics of unit testing and use a variety of tools and techniques to help assist with mocking and prototyping. Then we will uncover how to integrate these techniques with common front-end frameworks such as KnockoutJS, Backbone.js, and AngularJS.

About the author
About the author

Elijah Manor is a Christian and a family man. He is a Microsoft Regional Director, Microsoft ASP.NET MVP, ASPInsider, and IE userAgent and specializes in front-end web development. He enjoys blogging (http://elijahmanor.com), tweeting (@elijahmanor), and speaking about the things he learns.

More from the author
jQuery-free JavaScript
Intermediate
2h 26m
30 Oct 2013
Fixing Common JavaScript Bugs
Intermediate
3h 42m
21 Aug 2013
jQuery Tips and Tricks
Intermediate
4h 23m
18 Jul 2013
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hello, this is Elijah Manor and this course is entitled Front-End First: Testing and Prototyping JavaScript Applications. You can contact me on Twitter: @elijahmanor.

Principles of Unit Testing
Hello, this is Elijah Manor and this module is entitled Principles of Unit Testing. In this module, we'll cover four main topics. In the ‘What are Unit Tests' clip, we'll explain what a unit test is and look at a simple example. Then we'll proceed to talk about some general things to consider when writing unit tests. Next, we'll uncover some of the excuses that developers commonly state as to why they don't unit test. And finally, we'll conclude by briefly talking about some of the tools that we'll be using over the duration of this course.

Examples of Hard to Test Code
Hello, this is Elijah Manor, and in this module, we'll look at some examples of hard to test code. Feel free to contact or mention me on Twitter @elijahmanor. We'll be looking at six different ways that can make code hard to test, including tightly coupled components, private parts, singletons, anonymous functions, mixed concerns, and new operators. As we introduce each of these concepts, we'll describe the issue, take a look at some sample code that has the issue, and then have a brief demo of refactoring the code to alleviate the problem. So, let's get started.

Unit Testing Your Front-End Application
Hello, this is Elijah Manor and this module is entitled Unit Testing Your Front-End Application. You can catch me on twitter @elijahmanor. In this module we'll be looking at the Mocha JavaScript test runner. There are many other test runners out there, but I prefer Mocha and we'll unpack why. We'll first start looking at some Simple Unit Tests to see how they relate to each other and some nice features of the runner. Then we'll move to Asynchronous Testing, some of the other runners out there have their own approach for handling Asynchronous Tests, but I like the Mocha way better. I think it's pretty elegant and we'll show you why. And then we'll look at a tool named Grunt. It's a program that runs on Node, and it helps automate very common tasks that you have in JavaScript. And then we'll look at how we can use Grunt to automatically run our tests anytime something changes, which is pretty cool. And finally there's a tool for Visual Studio that will look through your code and find any tests and run them automatically, and so we'll take a look at that. So let's get started. Now before we get too far I wanted to mention that there's another course on Pluralsight called Testing Clientside JavaScript by Joe Eames. There's going to be some overlap in this module with his course, but he goes way into more detail about features of Mocha, how to integrate it with TeamCity, looking at various other assertion libraries, I'm going to only focus on one and he looks at quite a few others, and he also talks about a lot of other JavaScript Test Runners, like QUnit and Jasmine where as I'm only going to be looking at Mocha, and he has lots more stuff so I recommend if you like this module and want to learn more about all the other things, then check out his course.

Mocking Your Front-End Application
Hello and welcome. This is the module entitled Mocking Your Front-End Application. This is Elijah Manor and you can find me on Twitter: @elijahmanor. In this module we're going to cover ‘What is Mocking' by giving a brief description of what it is and how it's viewed in the development community. Then we'll start to take a look at how we can mock using Native techniques, meaning without any third-party libraries. Then we'll introduce Sinon. js, which is a really nice, rich, mocking library that I highly recommend. And we'll proceed to introduce mockjax, which is an easy way to mock AJAX requests. And then we'll introduce the Amplify Request component, which also enables mocking of requests, but it's focused on a higher level of abstraction. And finally, we'll give some overall recommendations of which tool you should use and when.

Prototyping Your Front-End Application
Hello, this is Elijah Manor and this module's entitled Prototyping Your Front-End Application. You can contact me on Twitter: @elijahmanor. In this module, we'll talk about what we mean by Prototyping; how to deal with Static Data as we build an application; we'll introduce the mockJSON library to help us generate semi-realistic data; and then we'll look into various Caching and Edge Cases that you should consider when quickly prototyping your application apart from the server.

Integrating with Front-End Frameworks
Hello, and welcome to the last module in this course, entitled Integrating with Front-End Frameworks. I'm Elijah Manor and you could find me on Twitter: @elijahmanor. In this module, we're going to focus on using the techniques we've covered in the last few modules and integrate them into the following frameworks; Knockout. JS, Backbone. js, and Angular. JS.