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 …
Sinon.js quick tip: How to stub/mock complex objects, such as DOM objects
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 …
What is a Humble Object and how does it help make your code testable?
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 …
Using Sinon.js to make unit testing real-life apps easy
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 …
Improving our React workflow with ES6 and functional stateless components
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 …
Using WebRTC and React to build a basic chat server
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 …
React application data-flow: Where and how to store your data?
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 …
Learn to unit test your javaScript code with Mocha and Chai
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 …
Getting started with npm and Browserify in a React project
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 …
Learning React basics and building a basic application prototype
This is the first part in a series of articles, where we’ll be using React to build a Slack-style chat application. In this article, we’ll start by building a basic prototype. We’ll start by learning about React components and JSX. While doing that, we’ll also look at the basics of building React applications.