<commit_before>## Writing testable JavaScript
Writing tests at any level - unit, component or ui - can be very difficult when the JavaScript ist not written testable. Testable JavaScript can be enforced by writing tests first, which is one of the advantages of tdd. Testable JavaScript consists rather of many small methods or functions instead of one large one.

> "If you ever find yourself retrofitting a test suite onto an existing application that was not written with testing in mind, you’ll invariably discover that parts of the application will be challenging, if not impossible, to test."

Source: http://tddjs.com

Testable JavaScript is...
- loosely coupled
- tends to have a higher readability
- tends to be easier to understand
- embraces [separation of concerns](http://en.wikipedia.org/wiki/Separation_of_concerns) (applies MVC)

Here is a JavaScript snippet that smells ([JsFiddle](http://jsfiddle.net/tangibleJ/x8gsc34j/#base)):

```javascript
// Alias
function $(selector) {
    return document.querySelector(selector);
}

var btn = $('button.add');

btn.addEventListener('click', function () {
	var addend1 = $('input.addend1');
	var addend2 = $('input.addend2');
	var sum = $('span.sum');
	sum.textContent = Number(addend1.value) + Number(addend2.value);
});

```
The above code smells:
- There is no way to test the addition logic without the DOM
- The addition logic cannot be reused (tight coupling)
- The event handler does more than one thing:
	+ Reads data from inputs
	+ executes addition
	+ saves data to sum input

Here is a better example that is easier to test ([JsFiddle](http://jsfiddle.net/tangibleJ/x8gsc34j/5/)):

```javascript
...
function add(a, b) {
	return Number(a) + Number(b);
}

btn.addEventListener('click', function () {
    sum.textContent = add(addend1.value, addend2.value);
});
```
In the above snippet, the addition logic has been moved to its own function `add` with two arguments. The function `add` can be reused and tested.

```javascript
assert.equal(add(1, 2), 3); // true
assert.equal(add("1", "2"), 3); // true
```

Of course the above is a very simple example and more assertions could be added to test against the number of arguments suplied or argument types. The second snippet shows how code becomes testable through separation of concerns and also improving the readability and usability.

### References
- <http://alistapart.com/article/writing-testable-javascript/>
- <http://qunitjs.com/intro/#make-things-testable><commit_msg>docs(testablejs): update<commit_after>## Writing testable JavaScript
Writing tests at any level - unit, component or ui - can be very difficult when the JavaScript ist not written testable. Testable JavaScript can be enforced by writing tests first, which is one of the advantages of tdd. Testable JavaScript consists rather of many small methods or functions instead of one large one.

> "If you ever find yourself retrofitting a test suite onto an existing application that was not written with testing in mind, you’ll invariably discover that parts of the application will be challenging, if not impossible, to test."

Source: http://tddjs.com

Testable JavaScript is...
- loosely coupled
- tends to have a higher readability
- tends to be easier to understand
- embraces [separation of concerns](http://en.wikipedia.org/wiki/Separation_of_concerns) (applies MVC)

Here is a JavaScript snippet that smells ([JsFiddle](http://jsfiddle.net/tangibleJ/x8gsc34j/#base)):

```javascript
// Alias
function $(selector) {
    return document.querySelector(selector);
}

var btn = $('button.add');

btn.addEventListener('click', function () {
	var addend1 = $('input.addend1');
	var addend2 = $('input.addend2');
	var sum = $('span.sum');
	sum.textContent = Number(addend1.value) + Number(addend2.value);
});

```
The above code smells:
- There is no way to test the addition logic without the DOM
- The addition logic cannot be reused (tight coupling)
- The event handler does more than one thing:
	+ Reads data from inputs
	+ executes addition
	+ saves data to sum input

Here is a better example that is easier to test ([JsFiddle](http://jsfiddle.net/tangibleJ/x8gsc34j/5/)):

```javascript
...
function add(a, b) {
	return Number(a) + Number(b);
}

var addend1 = $('input.addend1');
var addend2 = $('input.addend2');
var sum = $('span.sum');

btn.addEventListener('click', function () {
    sum.textContent = add(addend1.value, addend2.value);
});
```
The following changes were made above:
- the DOM access has been moved out of the handler
- the addition logic has been moved out of the listener and into its own function `add`

The function `add` can be reused and tested:

```javascript
assert.equal(add(1, 2), 3); // true
assert.equal(add("1", "2"), 3); // true
```
Notice how the readability of the listener has been improved as well.

The above is a simple example. The handler could be decoupled even more.
More assertions could be added to test against the number of arguments suplied or argument types.

### References
- <http://alistapart.com/article/writing-testable-javascript/>
- <http://qunitjs.com/intro/#make-things-testable>
{'fraction_non_alphanumeric': 0.10712894429294897, 'fraction_numerical': 0.008959875340864823, 'mean_word_length': 4.491978609625669, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3515204', 'n_tokens_mistral': 1509, 'n_tokens_neox': 1428, 'n_words': 617}