AngularJS: Setting up parallel / sticky states with ui-router and ui-router-extras

November 8, 2015 – 4:05 pm Tags: ,

The application I’m developing at work has many independent parts, which needed their own states. Think of a UI similar to Photoshop, WebStorm, or such – Every panel in the UI is self-contained and can be changed without affecting the others.

The standard ui-router has no concept of parallel states. Everything must be modeled as a tree, which means a setup like this doesn’t work. For example, changing one panel’s state would affect everything else too.

Thankfully there’s ui-router-extras, which adds support for so-called “sticky states” or “parallel states”. We can use this to have as many individual parts, that have their own parallel state trees, as we want.

Let’s go through a small sample app and look how to set this up step by step.

Read the rest of this entry

Big thanks to ui-router-extras author Chris Thielen for helping with this.

How to fix JavaScript errors more easily with Chrome’s debugger

November 1, 2015 – 6:08 am Tags: , ,

Let’s face it: As developers, much of our time is spent fixing problems. No matter how hard I try, there’s always something that needs debugging. In the past, I would use console.log or alert. Just sprinkle them in my code, and hope that they give me enough information to fix the problem.

If you’ve tried doing that, you know that it’s not a very good approach. It’s like giving a surgeon a machete instead of a scalpel – not accurate and a bad tool for the job.

But just like surgeons have scalpels, we have better tools available for us too: Namely, debuggers. In this article, I’ll show you how to make use of Chrome’s JavaScript debugger to help you fix errors faster and more easily.

Read the rest of this entry »

How to deal with promises in JavaScript unit tests?

September 10, 2015 – 12:41 pm

One of my readers, Richard, sent me an email asking about promises in tests. It’s difficult to figure out how to put together a complete testing setup for code that uses promises, as there are so many different alternatives and so little information.

I wanted to help, so in this article, I’ll tell you exactly what to do when you need to use promises in unit tests:

  • How to integrate promises in unit tests
  • Which libraries can help?
  • 8 common promise-related testing scenarios
  • An example project showing how to put all of this together in practice

Head on over to the link to read more:

Promises in JavaScript Unit Tests: the Definitive Guide

What are Unit Testing, Integration Testing and Functional Testing?

April 11, 2015 – 10:30 am Tags:

Finding your way around the maze that is JavaScript testing can sometimes be difficult. There are unit tests, integration tests, functional tests, E2E tests, browser tests… With so many buzzwords, who knows what they do and which one to use, what for, and when?

To help with that problem, in this article I’ll give you a guide comparing the different kinds of testing types available, and some recommendations for their use.

Read the rest of this entry »

Unit testing Ajax requests with Mocha

March 21, 2015 – 2:05 pm Tags: , ,

Ajax requests are some of the best things you can test. It’s very easy for them to go wrong (server issues? connection issues? etc.), so a bug in error handling can be very frustrating to users. They are also one of the boundaries of your code – places where data is loaded from the outside world – and those points are often prone to errors.

But testing them can be tricky. It’s asynchronous, and a good unit test must be isolated, so how can we do that when the code talks to the server?
Let’s take a look at some examples to learn how to test Ajax requests with ease.

Read the rest of this article

ESLint vs JSLint vs JSHint vs JSCS

March 5, 2015 – 11:14 pm Tags: ,

I recently wrote about using ESLint to auto-detect bugs. But what makes ESLint the best tool for this job?

There are three other popular JavaScript linters:

  • JSLint
  • JSHint
  • JSCS

What are their pros and cons? How do they compare against ESLint?

Read the rest of this article

What’s the difference between Unit Testing, TDD and BDD?

March 1, 2015 – 7:12 pm Tags:

When you’re just getting started with automating your JavaScript testing, there’s a lot of questions. You’ll probably see people talk about unit testing, TDD or Test-Driven Development, and BDD or Behavior-Driven Development. But which one of them is the best approach? Can you use all of them?

I’ve talked to a number of JavaScript developers, and there seems to be some confusion about all this. So, let’s take a look at Unit testing, TDD and BDD, and fix some of the common misconceptions about them out there.

Read the rest of this entry »

Detect problems in JavaScript automatically with ESLint

February 10, 2015 – 1:06 pm Tags: , ,

I’ve been programming JavaScript for 15 years or so, and I still keep making various silly mistakes – I type things wrong, I forget to rename everything, I forget to follow the coding styles… then I waste my time clicking around in the browser and feel like slapping myself.

Thankfully tools like ESLint exist. ESLint helps by finding errors automatically, so you can spend your time doing something more interesting.

Let me show you a real-world example from a codebase I worked on of how ESLint can help.

Read the rest of this article

How to unit test NodeJS HTTP requests?

January 30, 2015 – 5:16 pm Tags: ,

I have a nodejs app where I wanted to unit test some HTTP requests. Node usually makes things simple, so I expected this to be like that too… but I soon discovered that this was not the case at all.

When unit testing, you don’t want HTTP requests to go out and affect the result. Instead you create a fake request – a test double – to replace the real one, but because node’s streams are hard to fake, this is where I hit the wall.

It took some work, but I found a way to make it simple! Let me show you how with some examples based on real live production code.

  1. Sending a GET request and testing response handling
  2. Sending a POST request and testing the parameter behavior
  3. Testing that failures are handled correctly

Read the rest of this entry »

Strange JavaScript errors and how to fix them

January 22, 2015 – 9:30 pm Tags:

JavaScript has some of the strangest errors. Undefined is not a function? Ugh.

I wrote an article talking about JS errors and a guide on how to fix them on David Walsh’s blog, you should go check it out!

JavaScript errors and how to fix them