Which is better for unit testing?

As I mentioned in my last blog post I am going to be testing my fairly big JavaScript application which is built with the Express web server framework. As with most things related to coding, there are lots of ways to go about testing your web application. The most sensible thing to do is use a testing framework or library, instead of writing them in vanilla JS which would take forever! A few that come to mind are Mocha, Chai, Jasmine and Jest (which I learnt about today). Jest is a testing suite for JavaScript applications, created by Facebook, and is the one I’ll be using. You can learn more at https://facebook.github.io/jest/

In addition to the above, there are many different types of tests I’ve heard of so far – end-to-end, logic, page, cross-page, link checking, integration, unit, etc. I’m no expert but I think unit testing is the way to go.

My journey started with Jasmine as the testing suite because that is the test suite you use on exercism.io. However, I had also read about Mocha and Chai together. Now I know Chai is not a test framework but rather a helpful library that can be integrated with a test framework of your choice. So this is definitely something I’ll be looking more into. My journey has now led me to use Jest because after lots of searching and asking questions, I never really found any good resources on how to unit test an Express app with Jasmine.

Most of the tutorials or blog posts I watched/read required that you ‘set up and teardown’ your express server before each and after each test. After running into lots of errors I decided to try a new framework – Jest, which was suggested by @zachcodes (a 10x software dev). When I found out it was Facebook’s test suite (which they use to test Facebook, obviously), I was certain it made sense. Anyway, I created a quick Gist on Github of how my test suite has begun (oh and it works! yay!)


The magic of Express.js

You know what I love about Node.js?  Express.js!

I’ve really been getting into Node.js lately, and I have not stopped enjoying it. I am building a fairly big application with Express.js and so far so good. Every month or two I get around to cleaning up the codebase and find myself feeling proud of it. I’m still learning more and more about Express.js, and this enables me to continuously be more organised and write cleaner code.

I get a kick out of how unopinionated it is. You structure it how you like, and that’s the beauty of it. It makes working with the backend a joy. I’ll always use Express.js and I will be an expert at it in a few years, I guarantee that.

I’d also like to put it out there that I will be learning about testing Express.js servers and about the best ways to secure your Express.js application. I will share my learnings here. More on this at a later date!

Understanding the prototype chain in JavaScript

I’ve been trying to solve a challenging problem on exercism.io all evening. This “grade-school” challenge is a tough one.

Given students’ names along with the grade that they are in, create a roster for the school.
So in the end you return an object with keys 1-7 and with each persons name under their grade. The idea here is to save data on the fly, which can get a bit fiddly. First of all I had to figure out how to save data on the fly, and researching that on Stack Overflow wasn’t giving me much good information. I now understand that arrays are the only JavaScript variable that are special and can hold more than one value at a time.

Now, this isn’t simple, because on each method call i.e. school.add('Blair', 2) I had to save this information in an array and then convert the completed array into an object that only contains keys 1-7.

So, for example, how would I convert:

var array = ['Blair', 1, 'James', 2, 'Paul', 1, 'Bob', 3, 'Jane', 2, 'Sam', 1]


1: ['Blair', 'Paul', 'Sam'],
2: ['James', 'Jane'],
3: ['Bob']


Furthermore, how do I call school.roster() to return the above object when school.add() is the method that saves the values into the array?

I’ll explain how… But to do so, I first need to show you how my code was initially when I thought I had to create a function like this:

function School() {
this.add = function(student, grade) {
// code my heart out
this.roster([student, grade] || {grade: student})

this.roster = function(value) {
// somehow pass the array or object from this.add to this.roster? Bad move
return value // ??

However, this would always return undefined because the values stored in the array would only be saved on the fly within the School function. Instead, the proper way to do it (I figured out) is to add these methods to the prototype chain as follows:

var School = function() {
this.arr = [];

School.prototype.add = function(student, grade) {
this.arr.push([student, grade]); // for example
School.prototype.roster = function() {

now when I do the following:

var school = new School; // create a new object with the this variable pointing towards it
school.add('Blair', 2);

It actually saves the information on the School object so I can access it anywhere on the prototype chain on the fly like so:

school.roster() // ['Blair', 2]

Still haven’t finished the challenge so I’m gonna crack on and will upload a link to it when I revisit this post.

A boilerplate for app development

Check out my GitHub page to find all the code I’ve been working on over the last few months.

I’m giving you a link to my latest boilerplate for building a web app.

Ideally you need to have an understanding of Gulp, PostCSS, Pug, Express, Model View Controller (MVC), maybe some JavaScript and Webpack.

For those of you who are familiar with pug (formerly known as jade), express.js and node.js and are interested in building your own application, then here is a build for you to start with. Simply pull the repository or download it to your local machine, enter into the main project directory within the terminal and type ‘npm install’ and wait for the packages to install. Then type ‘gulp watch’ and boom! You’re set to start coding.

You’ll be synced with the browser, so the browser will refresh and all files will be compiled upon saving.

All of the directories you’d need to edit yourself are in the ‘public’ folder.

Enjoy 😊

Automagically returning objects

In Javascript, all functions are objects:

function Person(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;

Constructors (shown below) make use of the ‘new’ operator and the ‘this’ variable to create empty objects. When the ‘new’ operator is used to construct an object, the function is invoked and an empty object is automagically returned.

var taylor = new Person()
console.log(taylor) // Person {}

The constructor invokes the function and will return an empty object unless. If you wish to do so, you can pass parameters when constructing a new empty object like so:

var bob = new Person('Bob', 'Smith')
console.log(bob) // Person {firstname: 'Bob', lastname: 'Smith'}

Each time you construct a new object, The ‘this’ variable now points to a new empty object in memory. You can then set the parameters passed into the function to properties of the ‘this’ variable using dot notation i.e this.firstname.