The best resources to learn about JavaScript Promises

Tags:

Promises can be both a blessing and a curse. They were supposed to clean the “callback pyramid of doom”, but instead they can often end up confusing (and I wanted to call that “The callback Temple of Doom”. It doesn’t really make sense in this context, I just like Indiana Jones)

While promises do help, they are a lot more complicated than plain callbacks. With callbacks, you just pass a function and maybe stick another function inside that. But with promises, there’s a lot more.

The chaining can be confusing, as exceptions, normal JS values and promises all affect it differently. Setting more complex flows can also be difficult, as you need to juggle multiple promises and their result values around.

Then there’s the whole topic of error handling. The default behavior with promises is super convenient: Unhandled errors are silently ignored, because apparently the person behind promises hates everyone and wants you to have extra fun debugging times.

But promises are the future. New asynchronous APIs tend to be promise-based. New JavaScript features such as async/await are based on promises as well.

This means the better you know the ins and outs of promises, the better prepared you are for the future – not to mention that promises are very convenient when used well, despite the complexities.

Because of the importance of this, and the questions I sometimes receive which relate to promises, I’ve put together a list of the best promise-related material for you!

Below you’ll find a ton of info on promises, from the basics to super in-depth! 

Read More

Mongoose models and unit tests: The definitive guide

Tags:

Mongoose is a great tool, as it helps you build Node apps which use MongoDB more easily. Instead of having to sprinkle the model-related logic all over the place, it’s easy to define the functionality as Mongoose models. Querying MongoDB for data also becomes quick and easy – and if you ever need some custom querying logic, that can be hidden away into the model as well.

But how do you test all that logic? When trying to test them, Mongoose models can be a bit daunting at first. Ideally, we’d like to test them without having to connect to a database – after all, a connection would make the tests slow and difficult to set up, because we need to manage database state. But how can we do that?

In fact, Mongoose related questions are some of the most common library-specific ones I get from my readers.

So, let’s find out how we can test Mongoose models. We’ll go in depth with examples for the most common testing situations you’d encounter with Mongoose.

Read More

How to unit test ES6 code?

Tags:

ES6 is here today. Several browsers have almost all ES6 features available, and even Microsoft Edge is getting there. Tools like Babel help cover the parts which browsers don’t have yet.

If you want to start using ES6 for development, that’s easy: there’s a lot of detailed information available. But what about testing? How do you write unit tests for ES6 code? How do you even configure the testing tools to work with the new features?

In this article, I’ll show you how to configure the most popular testing tools – Mocha, Jasmine, Karma and Testem – to work with ES6. We’ll also go over some best practices for testing ES6 code and writing tests with ES6. You won’t have to neglect testing your ES6 code anymore!

Read the rest of this entry

Sinon.js quick tip: How to stub/mock complex objects, such as DOM objects

Tags:

Several of my readers have emailed me, asking about how to deal with more complex stubbing situations when using Sinon.js.

In this article, we’ll look at how to stub objects which are deeply nested, and when functions have more complex return values and they interact with other objects.

We’ll use DOM objects as a practical example, as they’re used quite often, and they can present several challenges when stubbing.

Read More

What is a Humble Object and how does it help make your code testable?

Tags:

Some of the most common testing-related questions I’m asked relate to testing real-world apps. There’s always a difficult part that’s hard to test. Most often, it’s been the database. Sometimes I’ve also been asked about HTTP-based APIs like RESTful APIs and such.

Let’s imagine a typical situation where you have some code that uses a database. You’ve got some code which queries the database, and then does something with the result.

At first, there’s doesn’t seem to be anything wrong with this approach.

The problem shows up when you try to test the code. You’ve got to deal with all the database related logic, when all you want to do is make sure the function is working correctly!

We’ve talked a lot about Sinon.js on several occasions. Sinon is a great tool, because it helps you solve problems like this… but knowing how to use a tool isn’t useful at all if your code makes it hard to use.

That’s why in this article, I’m going to tell you a simple and efficient way of making almost any kind of application testable. And best of all, it doesn’t usually require huge changes to your code either!

Read More

Using Sinon.js to make unit testing real-life apps easy

Tags:

One of the biggest stumbling blocks when writing unit tests is what to do when you have code that’s non-trivial.

In real life projects, code often does all kinds of things that make testing hard. Ajax requests, timers, dates, accessing other browser features… or if you’re using Node.js, databases are always fun, and so is network or file access.

All of these are hard to test because you can’t control them in code. If you’re using Ajax, you need a server to respond to the request, so as to make your tests pass. If you use setTimeout, your test will have to wait. With databases or networking, it’s the same thing — you need a database with the correct data, or a network server.

Real-life isn’t as easy as many testing tutorials make it look. But did you know there is a solution?

By using Sinon, we can make testing non-trivial code trivial!

Read the rest of this entry

Improving our React workflow with ES6 and functional stateless components

Tags:

Someone once asked on Twitter about the concrete, real-world benefits of ES6 (or ES2015, as it’s officially known, despite nobody calling it that). It seems the benefits would be a bit difficult to measure: ES6 mostly just adds convenience. How does a convenience-feature benefit us?

If you think about it, convenience makes code easier to write. When we have more convenience, we don’t have to fight the language to make it do what we want, and we can spend that energy focusing on the actual problem at hand! This makes it more fun to write code, but also improves our code quality, as the code simply flows out from our fingertips, rather than having to tediously hammer at the keyboard while pulling your hair.

In this article, I’ll show you how you can start making use of ES6 features in your React project. We’re also going to look at a React feature called functional stateless components, since it’s also very convenient and goes well with ES6 syntax.

I’ll be using the React chat app we’ve been developing as the example here, but you can follow even if you’ve not read the previous articles in the React chat app series.

As usual, full code is available on Github.

Read More

Using WebRTC and React to build a basic chat server

Tags:

In this article, we’re going to look at how to use WebRTC to relay chat messages between browsers in a React application. Last time we learned how to store and handle data in a React app. If you’ve just looking to learn about React and WebRTC, you should be able to follow this without reading the previous entries in the series.

Now at the fourth article in the series, we’re ready to start Connecting People (look at that funny Nokia reference). We’re going to use WebRTC to set up a direct connection between different chat participants, no backend required – well, we do need a little bit of backend for the initial connection handling… but it’ll all make sense soon!

Read More

React application data-flow: Where and how to store your data?

Tags:

This is the third article in the series where we build a Slack-style chat app with React.

Last time we set up NPM and Browserify for our project. With the tooling set up, we can focus on building our application’s features again.

The first feature I want to add is of course having multiple chat participants. But our code is currently a bit messy. We have messages and other data all over the place – this is going to make it difficult to add the new feature (and test it later).

Let’s fix the problem: In this article, we’re going to look at some best practices on how data should be modeled in a React app. Typically, this is when we would start talking about Flux, Redux and all that, but in this case we won’t. Instead, we’re going to start by implementing a light-weight data store mechanism and use that instead. I’ll tell you why in a moment.

Read More

Learn to unit test your javaScript code with Mocha and Chai

Tags:

Have you ever made some changes to your code, and later found it caused something else to break?

I’m sure most of us have. This is almost inevitable, especially when you have a larger amount of code. One thing depends on another, and then changing it breaks something else as a result.

But what if that didn’t happen? What if you had a way of knowing when something breaks as a result of some change? That would be pretty great. You could modify your code without having to worry about breaking anything, you’d have fewer bugs and you’d spend less time debugging.

That’s where unit tests shine. They will automatically detect any problems in the code for you. Make a change, run your tests and if anything breaks, you’ll immediately know what happened, where the problem is and what the correct behavior should be. This completely eliminates any guesswork!

In this article, I’ll show you how to get started unit testing your JavaScript code. The examples and techniques shown in this article can be applied to both browser-based code and Node.js code.

Read the rest of this entry