Linting and Testing with Hooks

Goals

• DRY up our tests by utilizing hooks
• Get a better understanding of how linting works and why it is important

Test Hooks - A Tool

Mocha has something called “hooks” that are available for us to use. They are named functions that run according to their name.

Let’s look into the docs for more infromation.

Hooks live within describe blocks in Mocha. Once defined, the hook runs as it’s name defines it. When do you think beforeEach() runs? And so what? How and why should we take advantage of hooks?

Hooks are not something special only to Mocha. Almost every testing library you use in the future will have hooks available.

Setup a Small Test Suite

Here is an example to get us thinking about hooks more. Clone down this repo, get it setup, and open the test file.

Write the last test, and then write the code to get all of the tests passing.

Repetiion - A Code Smell…

A term used commonly when developers look at code is a “code smell”. A code smell refers to something seen in code that is often a sign of refactoring or code that goes against conventional patterns.

Code repetition or duplication is one of those code smells.

When Hooks “Help Less”

Consider the scenario where we want to add this functionality:

it('Can be given a name when the rocket is created', function() {
  const rocket = new Rocket('Mercury-Redstone 3');

  expect(rocket.name).to.equal('Mercury-Redstone 3');
});

Does the beforeEach() help with this test? Do we need to change anything?

Linting

A linter is a tool used across front-end and back-end technologies. All kinds of developers use and love linters.

A linter cares about the text you have written in your code. It doesn’t know what your code is trying to do, and it’s not really going to run your code. For the most part, the two main purposes of a linter are in regards to: code style and potential code errors.

Read the first section of this blog post, up to “Automation”.

Setting Up a Linter

1. Install the package as a development dependency - we are using eslint, so npm install --save-dev eslint
2. Add the configuration file to the project root - called .eslintrc
3. Add a script to the package.json file to make things convenient - something like lint

Let’s add a linter to this repo!

Use this configuration file:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "mocha": true,
    "jquery": true
  },
  "extends": "eslint:recommended",
  "parserOptions": { "sourceType": "module" },
  "rules": {
    "eqeqeq": ["error", "always"],
    "brace-style": "error",
    "comma-spacing": ["warn", { "before": false, "after": true }],
    "curly": "error",
    "semi-spacing": ["error", { "before": false, "after": true }],
    "indent": ["warn", 2],
    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
    "keyword-spacing": ["error", { "before": true, "after": true }],
    "linebreak-style": ["error", "unix"],
    "max-len": ["warn", 80],
    "new-cap": ["error", { "newIsCap": true }],
    "object-shorthand": ["error", "always"],
    "space-before-blocks": ["error", { "functions": "always", "keywords": "always", "classes": "always" }],
    "space-infix-ops": ["error", { "int32Hint": false }]
  }
}

On Your Own: Add the same linting configuration to your project. Choose one person from your project pair to create the changes - no need for two people to make the same changes at once.

Checks for Understanding

• What are hooks, and why can they be useful?
• What is linting, and why do we use it?