Javascript foundations

layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo-full.svg" />

---
class: middle, left
# 02 - Javascript foundation
.subheading[Use testing to learn async javascript]

---
layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo.svg" />

---
## Daily menu

.bigger[
- Introduction to Javascript
- Javascript foundations
- Asynchronous programming
- Expand our development environment
  - Add a testing framework
  - Make it a learning environment
]

---
layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo-full.svg" />

---
class: center, middle
name: introduction-to-javascript
## Introduction to JavaScript
---

layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo.svg" />
.breadcrumbs[[Introduction to Javascript](#introduction-to-javascript)]

---
### Javascript language

.bigger[
- Javascript was written in only [10 days](http://speakingjs.com/es5/ch04.html)
- Some people thinks it's a **mess** while others think that it's **great**
- A lot of data analysis platforms prove that it is one of the **most popular** technology in the engineering world
  - [StackOverflow survey 2018](https://insights.stackoverflow.com/survey/2018#most-popular-technologies)
  - [Jetbrains survey 2018](https://www.jetbrains.com/research/devecosystem-2018/)
]

---
### What makes javascript so popular?

.bigger[
- **Simplicity**: Simple to learn and implement
- **Productivity**: Fast deployment, test and debug without *compilation* process
- **Platform Independence**: Executes on any device where there exists a special program called the JavaScript engine - Browsers, servers, desktop/mobile apps.
- **Speed**: Thanks to existing javascript engines, it keeps getting faster every year !
]

---
### Javascript performance
.smaller[
Javascript wasn’t designed to be fast and for the first decade, it wasn’t fast - after the introduction of  **just-in-time compilers** (JIT) in **javascript engines**, it became 10x faster.
]

---
### Wait, what is a javascript engine?

A javascript engine, sometimes called "JavaScript virtual machine", take the JavaScript code that a developer writes and convert it to fast, optimized code that can be interpreted by a browser or even embedded into an application.

Each JavaScript engine implements a version of ECMAScript, of which JavaScript is a dialect

- **<a href="https://en.wikipedia.org/wiki/V8_(JavaScript_engine)">V8</a> – in Google Chrome and Opera, as well in Node.js**
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) - in Mozilla Firefox.
- [JavaScriptCore](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) - in Safari
- <a href="https://en.wikipedia.org/wiki/Chakra_(JavaScript_engine)">Chakra</a> - in Microsoft Edge

---
### How V8 works?

---
### How JavaScript is run in the browser?

In programming, there are generally two ways of translating to machine language. You can use an interpreter or a compiler.

**Interpreter**  
The translation happens line-by-line, on the fly. Quick to get up and running. But for a code in a loop, the same translation happens over and over.

**Compiler**  
The translation happens ahead of time. Takes necessary time to optimize the code - the code runs faster. But takes a little bit more time to start up.

---
### Just-in-time compilers

Mixing different types of compilers to get rid of the interpreter’s inefficiency.

- **Monitor** (profiler) - Identifies hot functions as they execute and what types are used.
- **Baseline compiler** - A fast compiler that produces unoptimized code. (almost equivalent to an interpreter)
- **Optimizing compiler** - A slower compiler that produces fast, optimized code.

---
### V8' Just-in-time compiler

1. When first executing the JavaScript code, the `baseline compiler` is used to start executing machine code very fast.
2. During the execution, `the monitor` runs in an other thread and identifies hot functions that should be optimized and gathers statistics.
3. The `Optimizing compiler` optimizes hot functions in an other thread. Theses optimizations are based on assumptions made by the `monitor`
4. If assumptions aren't valid anymore, the execution goes back to the `baseline compiler` version. This process is called deoptimization.

---
### References

- [Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017](https://youtu.be/HktWin_LPf4)
- [How JavaScript works - inside the V8 engine](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e)
- [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201)

---
### What can in-browser JavaScript do?

- Add new HTML to the page, change the existing content, modify styles.
- React to user actions, run on mouse clicks, pointer movements, key presses.
- Send requests over the network to remote servers, download and upload files 
- Get and set cookies, ask questions to the visitor, show messages.
- Remember the data on the client-side (“local storage”).

---
### What CAN’T in-browser JavaScript do?

JavaScript’s abilities in the browser are limited for the sake of the user’s safety.

- read/write arbitrary files on the hard disk, copy them or execute programs.
- There are ways to interact with camera/microphone and other devices, but they require a user’s explicit permission
- Different tabs/windows generally do not know about each other.
- Communicate with a server from a different domain - unless an explicit agreement (expressed in HTTP headers) is given by the server

---
### In-browser javascript limitations

---
layout: false
class: center, middle
name: javascript-foundations
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo-full.svg" />
## Javascript foundations

---
layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo.svg" />
.breadcrumbs[[Javascript foundations](#javascript-foundations)]

---
### Variables

.bigger[
We can declare variables to store data. That can be done using `var`, `let` or `const`.

- `let` – is a modern variable declaration. The code must be in strict mode to use let in Chrome (V8).
- `var` – is an old-school variable declaration with subtle differences from `let`.
- `const` – is like `let`, but the value of the variable can’t be changed.
]

---
### “var” has no block scope

`var` variables are either function-wide or global, they are visible through blocks

```javascript
// first-script.js
if (true) {
  var myVar = 'hello'; // use "var" instead of "let"
}
console.log(myVar); // hello, the variable lives after if
```

But `var` ignores code blocks, so we’ve got a global test. Imagine an other script that runs on the same page

```javascript
// second-script.js
console.log(window.myVar); // hello
console.log(myVar); // hello
```

`let` has block scope. If we used `let`, then `myVar` would be only visible in its current block (inside the `if`).

---
### Types

A variable in JavaScript can contain any data. A variable can at one moment be a string and later receive a numeric value

Programming languages that allow such things are called “dynamically typed”, meaning that there are data types, but variables are not bound to any of them.

There are 7 basic types in JavaScript.

- `number` for numbers of any kind: integer or floating-point.
- `string` for strings. A string may have one or more characters, there’s no separate single-character type.
- `boolean` for true/false.
- `null` for unknown values
- `undefined` for unassigned values
- `object` for more complex data structures.
- `symbol` for unique identifiers.

---
### Types

The typeof operator returns the type of the argument. The call to `typeof` returns a string with the type name:

```javascript
typeof undefined    // "undefined"
typeof 0            // "number"
typeof true         // "boolean"
typeof "foo"        // "string"
typeof Symbol("id") // "symbol"
```

```javascript
typeof alert        // function 🤔
typeof [1, 2]       // "object" 😥
*typeof null         // "object" 😱
```

Remember, Javascript was written in 10 days. `typeof null === 'object'` is a bug that stands since the beginning of JavaScript. [Read More](http://2ality.com/2013/10/typeof-null.html).

---
### Stranger things

```javascript
Boolean(0)    // false
Boolean("0")  // true
0 == "0"      // true!
```

--
<iframe src="https://giphy.com/embed/xUNd9X5AicQtYJThkc" width="480" height="360" frameBorder="0" allowFullScreen></iframe>

---
### Even more strange

---
### Comparison

When comparing values of different types, they are **converted to numbers**.

```javascript
'2' > 1 // true, string '2' becomes a number 2
'01' == 1 // true, string '01' becomes a number 1
```

For boolean values, `true` becomes `1` and `false` becomes `0`, that’s why:
```javascript
true == 1     // true
false == 0    // true
```

Finally, that's why:

```javascript
true == '1'   // true
```

In the above example, `true` becomes `1` and `'1'` becomes `1`

---
### Comparison

A strict equality operator `===` and `!==` checks the equality without type conversion.

If `a` and `b` are of different types, then `a === b` immediately returns false without an attempt to convert them.

```javascript
true === 1          // false
null === undefined  // false
```

---
### Comparison

The previous examples may be confusing. To avoid confusions and making mistakes, here is what you should do:

- Follow best practices - [Comparison Operators & Equality](https://github.com/airbnb/javascript#comparison-operators--equality) from Airbnb javascript style guide
- Write automated tests
- Understand how it works in details - [Truth Equality and JavaScript](https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108)

---
### Functions

A function can be created at one moment, then copied to another variable or passed as an argument to another function and called from a totally different place later.

```javascript
const sayHi = () => { alert('Heu... Hi!'); };

function sayHiSoon() {
  setTimeout(sayHi, 2000);
}

sayHiSoon() // Heu.. Hi!, in 2 sec
```

---
### Functions

Function arguments are always passed by value

```javascript
function doSomething(value) {
  value = "modified";
}

let name = "original";

doSomething(name);
console.log(name); // original
```

Even if it's not recommend to do this, changing the value of the variable never changes the underlying primitive

> Never reassign parameters. eslint: [`no-param-reassign`](https://github.com/airbnb/javascript#functions--mutate-params)
Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the arguments object. It can also cause optimization issues, especially in V8. [Read more...](https://spin.atomicobject.com/2011/04/10/javascript-don-t-reassign-your-function-arguments/)

---
### Functions
However, when a variable refers to an object which includes array, the value is the reference/address to the object.

```javascript
function doSomething(obj) {
  obj.age = 26;
}

let person = { age : 36 }

doSomething(person);
console.log(person.age); // 26
```

Changing the argument inside the function affect the variable passed from outside the function

> Never reassign parameters. eslint: [`no-param-reassign`](https://github.com/airbnb/javascript#functions--mutate-params) 
Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.

---
### Local variables

A variable declared inside a function is only visible inside that function.

```javascript
function showMessage() {
  let message = "Hello, I'm JavaScript!"; // local variable
  console.log(message);
}

showMessage(); // Hello, I'm JavaScript!

console.log(message); // ReferenceError: message is not defined
```

---
### Outer variables

A function can access an outer variable as well, for example:
```javascript
let userName = 'paul';

function sayHi() {
  let message = `Hi, ${userName}`;
  console.log(message);
}

sayHi(); // Hi, paul
```

---
### Outer variables

If a same-named variable is declared inside the function then it shadows the outer one.

```javascript
let userName = 'paul';

function sayHi() {
* let userName = 'john'
  let message = `Hi, ${userName}`;
  console.log(message);
}

sayHi(); // Hi, john
console.log(userName) // paul, not modified by the function
```

---
### What's the output of this function?

```javascript
let name = "Paul";

function sayHi() {
  console.log("Hi, " + name);
}

name = "Miguel";

sayHi()
```

---
### What's the output of this function?

```javascript
function makeWorker() {
  let name = "Miguel";

* return function() {
*   console.log(name);
* };
}

let name = "Paul";

// create a function
let work = makeWorker();

// call it
work();
```

---
### Closures

A closure is a function that remembers its outer variables and can access them

```javascript
function makeCounter() {
  let count = 0;
* return function() {
*   return count++;
* };
}

let counter1 = makeCounter();
let counter2 = makeCounter();

console.log(counter1()); // 0
console.log(counter1()); // 1
console.log(counter2()); // 0 (independent)
```

---
### References

- [Javascript.info](http://javascript.info/) - Open source tutorials on javascript and Node.js

---
layout: false
class: center, middle
name: asynchronous-programming
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo-full.svg" />
## Asynchronous programming

---
layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo.svg" />
.breadcrumbs[[Asynchronous programming](#asynchronous-programming)]

---
### Synchronous code

Many operations in javascript are synchronous.

```javascript
function getValue1(){
  return 1
}

function getValue2(){
  return 2
}

const value1 = getValue1();
const value2 = getValue2();
console.log(value1 + value2);   // 3
```

This code is synchronous - `getValue2()` has to wait for `getValue1()` to return before executing.

---
### Synchronous code

The following code is still synchronous

```javascript
function getValue1(){
* while(true);
}

function getValue2(){
  return 2
}

const value1 = getValue1();
const value2 = getValue2(); 
console.log(value1 + value2); // Never reached
```

`getValue2()` has to wait **forever** for `getValue1()` to return before executing.

---
### Asynchronous code

.bigger[
Many actions in javascript are asynchronous. Instead of waiting for a function to return before moving on, JavaScript will keep executing.

Common asynchronous operations are for example I/O operations:

- Reading and writing files (Node.js)
- Querying data from a database (Node.js)
- Fetching data from an API (in-browser and Node.js)
]

---
### Asynchronous code

Let's take a look at a asynchronous code.

```javascript
function first(){
  setTimeout(function() {
    console.log(1)
  }, 2000)
}

function second(){
  console.log(2)
}

first();
second();
```

This code will produce the following output
```javascript
2
1
```
---
### Why do we need callbacks ?

A function that does something asynchronously should provide a callback argument where we put the function to run after it’s complete.

For example `setTimeout` is available in javascript (browser) and Node.js with the following syntax :

```javascript
setTimeout(callback, milliseconds)
```

```javascript
setTimeout(function() {
  console.log(“the callback has been invoked”);
}, 2000);
```
**An event will be added to the queue in 2000 ms.** In other words, the function passed as the first argument will be invoked in 2 seconds or more (the thread might be busy when the event is posted...).

---
### Callbacks

```javascript
// Node.js
fs.readFile('/etc/passwd', function (err, data) {
  if (err) throw err;
  console.log(data);
});
```

**An event will be added when the file has been fully read (in a non-blocking way).** When the event is taken out of the queue, the callback function has access to the file content (data).

---
### Callbacks

```javascript
// Event listener using JQuery
$(document).mousemove(function(event){
  $("span").text(event.pageX + ", " + event.pageY);
});
```

**An event will be added to the queue whenever the mouse moves.** In each case, the callback function has access to the event attributes (coordinates, key states, etc.).

```javascript
// Ajax request using JQuery
$.get("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});
```
**An event will be added when the AJAX request has been processed**, i.e. when a response has been received. The callback function has access to the payload.

---
### Beyond simple callbacks

The principle of passing a callback function when invoking an asynchronous operation is pretty straightforward.

Things get more tricky as soon as you want to **coordinate multiple tasks**.

<div class="row">
  <figure>
    <img src="/Teaching-TWEB-2018-Main/images/02-milking-icon.svg" height="90px" width="auto">
    <figcaption>Do this first ...</figcaption>
  </figure>
  <figure>
    <img src="/Teaching-TWEB-2018-Main/images/02-drinking-icon.svg" height="90px" width="auto">
    <figcaption>...when done, do this</figcaption>
  </figure>
<div>

---
### 1st attempt

```javascript
let milkAvailable = false;

function milkCow() {
  console.log("Starting to milk cow...");
  setTimeout(function() {
    console.log("Milk is available.");
    milkAvailable = true;
  }, 2000);
}

milkCow();
console.log("Can I drink my milk? (" + milkAvailable + ")");
```
---
### Solution

```javascript
let milkAvailable = false;

*function milkCow(done) {
  console.log("Starting to milk cow...");
  setTimeout(function() {
    console.log("Milk is available.");
    milkAvailable = true;
*   done()
  }, 2000);
}

milkCow(function () {
  console.log("Can I drink my milk? (" + milkAvailable + ")");
});

```

---
### Sequence

Ok... but what happens when I have more than 2 tasks that I want to execute in sequence?

```javascript
function display(value) {
  console.log("display " + value);
}

function displaySoon(value) {
  setTimeout(function timer() {
    console.log("display soon " + value);
  }, 2000);
}

display(1);
display(2);
displaySoon(3);
displaySoon(4);
displaySoon(5);
display(6);

// outputs: 1, 2, 6, 3, 4, 5
```
[Analyze it with loupe](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gZGlzcGxheSh2YWx1ZSkgewogIGNvbnNvbGUubG9nKCJkaXNwbGF5ICIgKyB2YWx1ZSk7Cn0KCmZ1bmN0aW9uIGRpc3BsYXlTb29uKHZhbHVlKSB7CiAgc2V0VGltZW91dChmdW5jdGlvbiB0aW1lcigpIHsKICAgIGNvbnNvbGUubG9nKCJkaXNwbGF5IHNvb24gIiArIHZhbHVlKTsKICB9LCAyMDAwKTsKfQoKZnVuY3Rpb24gc3RhcnQoKSB7CiAgICBkaXNwbGF5KDEpOwogICAgZGlzcGxheSgyKTsKICAgIGRpc3BsYXlTb29uKDMpOwogICAgZGlzcGxheVNvb24oNCk7CiAgICBkaXNwbGF5U29vbig1KTsKICAgIGRpc3BsYXkoNik7CiAgICBkaXNwbGF5KDcpOwogICAgZGlzcGxheSg4KTsKfQoKc3RhcnQoKTs%3D!!!)

---
### Sequence

```javascript
function display(value) {/* ... */}

*function displaySoon(value, callback) {
  setTimeout(function timer() {
    console.log("display soon " + value);
*    callback()
  }, 2000);
}

display(1);
display(2);
displaySoon(3, function() {
  displaySoon(4, function() {
    displaySoon(5, function() {
      display(6);
    });
  });
});
```

[Analyze it with loupe](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gZGlzcGxheSh2YWx1ZSkgewogIGNvbnNvbGUubG9nKCJkaXNwbGF5ICIgKyB2YWx1ZSk7Cn0KCmZ1bmN0aW9uIGRpc3BsYXlTb29uKHZhbHVlLCBjYWxsYmFjaykgewogIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICBjb25zb2xlLmxvZygiZGlzcGxheSBzb29uICIgKyB2YWx1ZSk7CiAgICAgY2FsbGJhY2soKQogIH0sIDIwMDApOwp9CgpmdW5jdGlvbiBzdGFydCgpIHsKICAgIGRpc3BsYXkoMSk7CiAgICBkaXNwbGF5KDIpOwogICAgZGlzcGxheVNvb24oMywgZnVuY3Rpb24oKSB7CiAgICAgIGRpc3BsYXlTb29uKDQsIGZ1bmN0aW9uKCkgewogICAgICAgIGRpc3BsYXlTb29uKDUsIGZ1bmN0aW9uKCkgewogICAgICAgICAgZGlzcGxheSg2KTsKICAgICAgICB9KTsKICAgICAgfSk7CiAgICB9KTsKfQoKc3RhcnQoKTsKY29uc29sZS5sb2coJ2ZpbmlzaGVkID8nKTs%3D!!!)

---
### Parallel

Now, let’s imagine that we have 3 asynchronous tasks. We want to invoke them in parallel and wait until all of them complete.

Typical use case: you want to send several AJAX requests (to get different data models) and update your DOM once you have received all responses.

```javascript
function fetchAll(done) {
  fetchData('/api/users/user1');
  fetchData('/api/users/user2');
  fetchData('/api/users/user3');
  done();
}
```

**Double fail: not only do I invoke `done()` too early, but also I don’t have any result to send back...**

---
### Parallel

```javascript
function fetchAll(done) {
  const results = [];
  let numberOfPendingTasks = 3;

function reportResults(result) {
    results.push(result);
    numberOfPendingTasks -= 1;
    if (numberOfPendingTasks === 0) {
      done(results);
    }
  }

fetchData('/api/users/user1', reportResults);
  fetchData('/api/users/user2', reportResults);
  fetchData('/api/users/user3', reportResults);
}
```

[![Edit Asynchronous tasks - Parallel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p2pw7pw73m)

---
### Webcasts

- [Async with callbacks (1) : overview](https://youtu.be/EFTSOLhnlbE)
- [Async with callbacks (2): create a sync version first](https://youtu.be/WKE3by3k2lY)
- [Async with callbacks (3): refactor the class and introduce a private function](https://youtu.be/jLdboiiD5u0)
- [Async with callbacks (4): refactor the class: async signature and modification of the test suite](https://youtu.be/pU-HTLQ63AA)
- [Async with callbacks (5): fixing the problem and calling done() when everything is done](https://youtu.be/lcqqgnyPWxc)
- [Async with callbacks (6): write a function to fetch all pages](https://youtu.be/6b_5bdIj5Bo)

---
### References

- [Philip Roberts: What the heck is the event loop anyway? | JSConf EU](https://youtu.be/8aGhZQkoFbQ)

---
layout: false
class: center, middle
name: automated-testing
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo-full.svg" />
## Automated testing

---
layout: true
<img class="logo" src="/Teaching-TWEB-2018-Main/images/logo.svg" />
.breadcrumbs[[Automated testing](#automated-testing)]

---

### Why should I write automated tests?

.bigger[
- Automated testing is important for **quality** and continuous delivery
- Writing tests is also an approach to **design** and **document** software (TDD)
]

???
- TDD: Use the program even before it exists
---
### Solution

.bigger[
- Select a testing framework: [mocha.js](https://mochajs.org/)
- Select an assertion library: [chai.js](https://www.chaijs.com/)
- Write tests to get familiar Javascript
]

---
### Install Mocha

First you need a test runner. Mocha is a popular testing framework that runs your tests serially and show results in your terminal.

Create a javascript project, with a `test` folder and a `sample-test.js` file :

```sh
my-project
├── test
│   └──sample-test.js
└── package.json
```

Then run the following command to install mocha locally as a development dependency :

```sh
$ npm install --save-dev mocha
```

---
### Run a simple test

Write a simple test suite, then run `./node_modules/.bin/mocha`

```javascript
// test/sample-test.js
const assert = require('assert');

describe('String', function () {
  it('should replace some characters', function () {
    const name = 'paulnta'
      .replace('au', 'o')
      .replace('n', 'en');
    assert.equal(name, 'polenta');
  });

it('will fail', function () {
    assert.equal('1' + '1', '2');
    // AssertionError [ERR_ASSERTION]: '11' == '2'
  });
});
```

By default mocha will execute any `.js` files inside `test` folder and report results in your terminal.

---
### Install Chai

In the previous example we're using Node.js' built-in [assert](https://nodejs.org/api/assert.html) module. - But Mocha allows you to use any assertion library you wish.

In practice we often add an another assertion library such as [Chai](https://www.chaijs.com/) to get more powerful features :

```javascript
expect(name).to.be.a('string');
expect(polenta).to.have.a.property('color')
  .with.lengthOf(6);
```

Install chai via npm as follows :

```sh
$ npm install --save-dev chai
```

---
### Install Chai

The previous example could be re-written as follows using `expect` from `chai`

```diff
+const { expect } = require('chai');

describe('String', function () {
  it('should transform name', function () {
    const name = 'paulnta'.replace('au', 'o').replace('n', 'en');
+   expect(name).to.equal('polenta');
  });

it('will fail', function () {
+   expect('1' + '1').to.equal('2');
  });
});
```

Chai allows you to use different [assertion styles](https://www.chaijs.com/api/) and [plugins](https://www.chaijs.com/plugins/). Use what makes the most sense for your project.

---
### Running tests with npm

To make your tests easily runnable, add  a `test` command to the `script` field of your `package.json`

```javascript
// package.json
"scripts": {
  "test": "mocha test/**/*.js"
},
```

Now you can just type the following command to run tests with the configuration you specified.

```sh
$ npm test
```

---
### Webcasts

- [TDD with mocha and chai (1): overview](https://youtu.be/Pngkmih-3SE)
- [TDD with mocha and chai (2): install npm modules](https://youtu.be/xAIrgcN3l0g)
- [TDD with mocha and chai (3): implement test module](https://youtu.be/_9XZV35SEG0)
- [TDD with mocha and chai (4): implement module](https://youtu.be/DGbdKiY85Yw)
- [TDD with mocha and chai (5): refactor to es6 and validate](https://youtu.be/Dlw3Y6HodqA)
- [TDD with mocha and chai (6): one more thing...](https://www.youtube.com/watch?v=YO877449Y0c&list=PLfKkysTy70QZUPYjLkkYcwqvVph4q9cKZ&index=14)