Short functions considered harmful: Staircase code

Tags:

Have you ever seen code which at first look seems good.. but then as you try to figure it out (maybe to fix a bug), it just feels… wrong?

For some reason the code just feels really difficult to follow – for no obvious reason!

In this post, I’m going to explain one such occurrence that I ran into in a production codebase. The code looked ok, yet it was hard to understand. Why?

Let’s find out. We’ll also look at some examples of how you can avoid and discover problems like this more easily.

Read More

How many tests is too many?

Tags:

Some time ago I stumbled upon some crazy stuff…

Specifically, I found out that SQLite has 787 times more tests than they have actual code!

It’s no joke, it’s documented right on their website. While they have about 116 300 lines of source code, they have 91 577 300 lines of test code.

That sounds completely insane.

I bet you’ve sometimes wondered what is the right amount of tests to write. In some cases, it’s easy to end up with more tests than code.

But 787 times more tests than code? What kind of crazy nonsense is that?

Read More

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