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

Getting started with npm and Browserify in a React project

Tags:

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

So far, in the previous article, we’ve built a simple prototype. We want to start adding features to it – such as actually supporting multiple people chatting – but before we do that, let’s set up some tools.

npm and Browserify are useful tools which will make our lives easier in the long run as our app starts becoming more complex.

So, in this article, we’ll move our previous code to use npm and Browserify.

Read More

Getting started with React the easy way

Tags:

There’s a lot of talk lately about how it’s hard to get started with JavaScript libraries like React. You need ES6, you need Babel, you need this, you need that. If all you want is to try a library, there’s tons of technobabble getting in your way, sometimes involving so many steps it’s easier to just go and do something else instead.

But that should not be the case. Most libraries – React included – don’t require anything fancy to get started. In fact, it’s better to start with a simple setup. You can always add the fancy extras to it later when you need them.

Let me show you the easiest way of getting started with React. Spoiler: it only requires two script tags on an HTML page.

Read More