DEV Community: Devin Golden

Tasty Testing with Mocha and Chai ☕️

Devin Golden — Tue, 27 Nov 2018 23:54:36 +0000

Today I'm going to briefly introduce a simple workflow for automating testing that uses Mocha and Chai. Mocha is a test framework that sets up test suites, and Chai is an expectation framework that adds helpers to make it easier to build tests against code.

But why do I need to do this??

Writing solid tests saves a developer the hassle of clicking around in an app to manually test every single feature of the application. It's also important when utilizing Test Driven Development, or TDD. While I'm not going to fully dive into TDD here, it basically is a style of development in which:

Tests are written first. Only write enough of a test to fail.
Production code is then written with the express purpose of making a failing unit test pass.

So let's get started by installing Mocha and Chai

▶︎ Chai installation instructions
▶︎ Mocha installation instructions

Once we have these installed, we have two ways in which to run our tests: through our console with Node, or in the browser. Using the browser method requires creating a special html file, which we will get into in a bit. But first:

Testing in Node

Say we were building an addition function that needed to be able to add either an array of numbers or two numbers passed in as parameters. Let's use an npm init to create a package.json file.

Next we need to add chai and mocha to our dev-dependencies, and for convenience sake, add a script for running mocha. My package.json for this exercise looks like this:

{
  "name": "mochachai-intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha"
  },
  "license": "ISC",
  "devDependencies": {   
     "chai": "^4.2.0",
     "mocha": "^5.2.0"
  },
  "dependencies": {}
}

Now we can do an npm install to get all of our fun dependencies installed and get to work!

For the sake of this example, we're going to create two Javascript files, one called add.js and one called test.js. The test.js file is going to contain our tests that will be run against our add.js function.

Since we're utilizing TDD, let's come up with the tests first. Our test.js should look something like this:

const expect = require('chai').expect;
const add = require('./add.js');

describe('add', function() {
  it('should return the sum of two positive numbers', function() {
    expect(add(2, 4)).to.equal(6);
  });

  it('should return the sum of two negative numbers', function() {
    expect(add(-2, -4)).to.equal(-6);
  });

  it('should return the sum of an array of numbers', function() {
    expect(add([1,2,3,4,5])).to.equal(15);
  });
});

Now we just need to write a function that will do ONLY what is required by these test guidelines. Mine looks like this:

const add = function (num1, num2) {

  if (Array.isArray(num1)){
    let sum = 0;
    for ( let i = 0; i < num1.length; i++){
      sum += num1[i];
    }
    return sum;
  }

  return num1 + num2;
}

module.exports = add;

Now if we run npm test, we should get back a message that all of our tests are passing:

VERY COOL!

Testing in the Browser

If you decide that you want a fancy UI to show off your passing tests (and honestly who wouldn't), you simply have to add in an html page with some scripting for mocha and chai. I use a boilerplate test.html file that looks like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tests</title>
  <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.css">
</head>
<body>
  <div id="mocha"><p><a href=".">Index</a></p></div>
  <div id="messages"></div>
  <div id="fixtures"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
  <script src="add.js"></script>
  <script>
    mocha.ui('bdd');
    mocha.reporter('html');
    const expect = chai.expect;
  </script>
  <script src="test.js"></script>
  <script>mocha.run();</script>
</body>
</html>

All we have to do is add this html page to our app and open it up in a browser and we should get a nice looking results page that even shows how long it's taking for our tests to run! The page for our add function should look like this:

Beautifully illustrated and functional!

Now what!?

Now we have a very basic idea of how to use Mocha and Chai to write tests, but what do we do with this information!? In Part 2, I will go into some more uses for testing that are more applicable to real-life scenarios.

Be sure to react and follow 🤠✌️

On That 'New' New!

Devin Golden — Mon, 19 Nov 2018 09:46:54 +0000

Simplifying the 'new' Keyword!

So, this week I'm gonna be breaking down another essential Javascript operator to become familiar with: the new operator. I think that the best way to start off an explanation of new is by first describing what happens when it is used.

Four things happen when `new` is used:

A new, empty object is created.
this is bound to the new object.
The newly created object's internal [[prototype]], or __proto__, is set to be the same as the [[prototype]] of the constructor function's.
The new object is returned with a return this at the end of the function.

I know that might not make much sense!

Let's create a really simple constructor function so we can get a more practical idea of how new works. This one I'm going to call Homie and it's going to take in a couple of parameters and set them to the value of this.

const Homie = function (name, thingInCommon, isChill, likesMyJokes) {
    this.name = name;
    this.thingInCommon = thingInCommon;
    this.isChill = isChill;
    this.likesMyJokes = likesMyJokes;
}

Now we can use new to invoke the constructor:

const homie1 = new Homie ('Sweaty Steve', 'Weightlifting', false, true);

So in this example, we have:

Created an object, called 'homie1', that seems like a decent gym buddy. You probably wouldn't want to hang out with Sweaty Steve in your spare time, but he seems like he'd give you tips about your form and spot you if you needed him to.
Bound this to homie1.
Added a __proto__ to homie1 that will point to our Homie.prototype.
Returned our homie1 object.

We can see this in action with a quick console log:

console.log(homie1)

/* Homie {name: "Sweaty Steve", thingInCommon: "Weightlifting", isChill: false, likesMyJokes: true}
isChill: false
likesMyJokes: true
name: "Sweaty Steve"
thingInCommon: "Weightlifting"
__proto__: Object */

The commented code is what I get back when running all of the prior code in a Google Chrome console window. So we can clearly see that an object has been created with all of the values that we input when we called the new keyword. We can also see the __proto__ object, which I will dive further into in a future post.

We could continue using the new keyword and passing in new parameters to quickly create a whole gang of homies to kick it with!

I hope this gives a small example of how new can be used to quickly create new objects from a constructor function and some of the properties that carry over to these objects.

I really love it when people react and follow!

What is "This"?

Devin Golden — Fri, 09 Nov 2018 07:25:56 +0000

Simplifying the "this" Javascript keyword

The "this" keyword always refers to an object, but the value of "this" changes depending on where it is called. When a function is called, an execution context is created that contains a reference to "this". Because the value of "this" changes depending on execution context, we can determine the value of "this" by examining the function's call-site, or where it is called.

Conveniently, there are four simple rules to help determine the value of "this"!

Rule #1: Default Binding

When called alone, or within a function, "this" will refer the Global object. In a browser, this will refer to the Window object. One exception to this is if the user is in strict mode, in which case "this" will be undefined.

In this example, you would get a console log of the global object

Rule #2: Implicit Binding

If a function is contained within an object, "this" will refer to the nearest parent object. Even if the function is only referenced in the object, "this" will still refer to the object.

In this example, we console log out "😸 Meow!"

Rule #3: Explicit Binding

There are three functions call, bind, and apply that can be used to set the value of "this". Call and apply work largely the same way, the first argument passed to each will be what "this" refers to. Bind actually creates a new function which a permanently assigned "this" value.

In this example, all three functions set "this" explicitly.

Rule #4: New Binding

When using the new keyword, "this" will refer to the new object that is being created.

In this example, "this" points to the new object and prints out my kitty's name

The Arrow Function Exception!

One exception to these general rules of thumb is that when using an arrow function, "this" will retain the value of its parent scope.

Here, "this" retains the value of its parent function.

The Dev Recap:

So a quick summary of the "this" keyword:

"This" is usually determined by a function's execution context.
By default, "this" refers to the global object (window object in a browser).
When the "new" keyword is used, "this" will refer to the new object.
Call, bind, and apply can be used to set "this" value.
Arrow functions do not re-bind "this".

Hopefully this is helpful to someone new to Javascript who is trying to wrap their head around the "this" keyword! Thanks for reading and don't forget to follow!!

For Loops vs. forEach: A Far Reach!

Devin Golden — Thu, 01 Nov 2018 20:02:10 +0000

One of the major concepts that was reiterated over and over when I was first learning about Javascript arrays is that when we need a function to hit every object in an array, we need a loop.

Brother, may I loop thru an array?

So in a world where we are designing an app that needs to go through a list of kitties (hopefully my future career), a typical for loop would look like this:

This works great, but we also have the option of using a nifty method that our array will inherit from Array.prototype called forEach(). We can invoke forEach() to effectively do the same thing that our for loop accomplished, and it will look a little something like this:

I know what you're thinking, "Why would a developer prefer to use one over the other? Are there advantages and disadvantages of each??".
Well boy do I have a treat for you, because there absolutely ARE.

The Case for Loops

There are some real Joseph Gordon Levitt style Loopers out there that will tell you that for loops are much more efficient than using the forEach method, and they make some good points!

Some Javascript engines and browsers are more optimized for for loops.
Break can be used to terminate the loop early.
Gives more control over the conditions of the loop.

The forEach() Rebuttal

On the other hand, proponents of forEach() will be quick to tell you that the "forEach() method is #1!!" (this happens to me on the street all the time). I understand the passion that forEachers™️ have for their favorite Array method.

forEach is much more readable. When you factor in the temporary variables that are needed in for loops, it makes for a lot of code to look at! forEach looks cleaner and takes less time to read.
Less chance for small errors in code since you don't have to specify a condition statement.

The Dev Take!

While I really don't want to catapult myself into this debate, and I typically avoid talking politics, I have to say that I do have a preference here...

I think that in most circumstances where an array needs to be looped through, the forEach() method is better practice! It looks a lot nicer and makes code more readable and maintainable. One of the only times I would use a for loop is if I knew I needed to break out of the loop early. Otherwise, I go forEach() every time.