Gain insights into testing functions and classes, mocking dependencies, naming tests, testing asynchronous code, Node.js code, and browser API-dependent code using Jasmine in your JavaScript app.

Using Jasmine to Unit Test Your JavaScript App.png

dockerfile.v6.tar.gz

Run jasmine

live Jasmine

Live jasmine in unit-testing-course folder

Run jasmine flat

Run jasmine --config=./jasmine.json

Once jasmine

Run jasmine-browser-runner console

Run jasmine-browser-runner console-copy

Run jasmine-browser-runner serve

Run jasmine-browser-runner serve 3000

This course will teach learners how to test functions and classes, mock dependencies, name the tests, test asynchronous code, test Node.js code, and test browser API-dependent code.

Using Jasmine to Unit Test Your JavaScript App

# `flat-Map` tests

Let’s try and write the function and tests from the previous lesson using Jasmine.

We want to have the spec file right next to the source file. That way, the spec is separate from the production code but still close at hand.

To that end, we have `src/flat-map.js` as the implementation and `src/flat-map.spec.js` as the spec.

# Run

Run the code playground below.

React

Dart

GoJS React

Typescript React

Vue.js

# Breakdown

The file `src/flat-map.js` contains our code implementing the `flatMap` polyfill. In a single line, it invokes the `map` function that comes from `Array.prototype`.

Then, it takes the result of that, which is an array, and invokes its `reduce` function. Note that we refer to a function attached to an object as a method.

The `reduce` method takes an accumulator `acc`, which passes in along with each member of the array. The result of the callback `(acc, n) => acc.concat(n)` is stored in the acc reference and then passed in for the next iteration.

In short, it `reduces` an array to a single value.

The `Array.prototype.flatMap = function() ...` tells JavaScript: "Attach this flatMap method and make it accessible to every Array instance!". It allows us to use it like this:

```js
const numbers = [1, 2, 3];
numbers.flatMap()
```

The file `src/flat-map.spec.js` contains the test cases.

> Notice the pattern: the test file name is the production file name plus spec.js. This is a generally accepted convention to make large projects manageable.

# Test case 1

This test confirms that `flatMap` can take arrays of multiple items and flatten them out to a single array. In this case, we have the `flatMap` callback returning arrays of length 2, `x => [x, x*2]`. So, from our input of `[1, 2, 3, 4]`, we get the following:
* 1 yields `[1, 2]`.
* 2 yields `[2, 4]`.
* 3 yields `[3, 6]`.
* 4 yields `[4, 8]`.

Flattening those four arrays should yield one array of `[1, 2, 2, 4, 3, 6, 4, 8]`.

The test consists of the following:

* An `input` of const `numbers = [1, 2, 3, 4];`.
* An `actual` of `const actual = numbers.flatMap(x => [x, x * 2]);`.
* An `expectation` of `expect(actual).toEqual([1, 2, 2, 4, 3, 6, 4, 8]);` where the expected result to check against is inline.

# Test case 2
This test confirms that `flatMap` can take arrays of variable length strings and flatten them out to a single array. In this case, we have the `flatMap` callback `x => x.split(" ")` returning arrays of variable length from the input of `["it's Sunny in", "", "California"]`. 

We’ll get the following:

* `"it's Sunny in"` yields `["it's", "Sunny", "in"]` of length 3.
* `""` yields `[""]` of length 1.
* `"California always"` yields `["California", "always"]` of length 2.

Flattening those three arrays should yield one array of `["it's", "Sunny", "in", "", "California always"]`.

The test has the following parts:

* An `input` of `const strings = ["it's Sunny in", "", "California always"];`.

* an `actual` of `const actual = strings.flatMap(x => x.split(" "));`.
* an `expectation` of `expect(actual).toEqual(["it's", "Sunny", "in", "", "California always"]);` where the expected result to check against is inline.

# Test case 3
This test confirms that `flatMap` can take arrays of length 1 and flatten them out to a single array. In this case, we have the `flatMap` callback `x => [x * 2]` returning arrays of length one from the input of `[1, 2, 3, 4]`. 

We’ll get the following:
* `1` becomes `[[2]]`.
* `2` becomes `[[4]]`.
* `3` becomes `[[6]]`.
* `4` becomes `[[8]]`.

Flattening those four arrays should yield one of `[2, 4, 6, 8]`.

The test has the following parts:

* An `input` of const `numbers2 = [1, 2, 3, 4];`.
* An `actual` of `const actual = numbers2.flatMap(x => [x * 2]);`.
* An `expectation` of `expect(actual).toEqual([2, 4, 6, 8]);` where the expected result to check against is inline.

# Test case 4

This test confirms that `flatMap` can take arrays of arrays and flatten them to one level. In this case, we have the flatMap callback `x => [[x * 2]]` returning arrays of arrays from the input of `[1, 2, 3, 4]`. 
We’ll get the following:
* `1` becomes `[[2]]`.
* `2` becomes `[[4]]`.
* `3` becomes `[[6]]`.
* `4` becomes `[[8]]`.
Flattening those four arrays should yield one of `[[2], [4], [6], [8]]`.

The test has the following:

* An `input` and an actual of `const actual = [1, 2, 3, 4].flatMap(x => [[x * 2]]);`.
* An `expectation` of `expect(actual).toEqual([[2], [4], [6], [8]]);` where the expected result to check against is inline.



# Experiment

Change the input and see how tests change. For example, in test case 2, replace `const strings = ["it's Sunny in", "", "California always"];` with `const strings = ["it's Sunny in", "", "California"];`.

Change implementation and see how tests fail. Replace `return this.map(cb).reduce((acc, n) => acc.concat(n), []);` with `return this.map(cb).reduce((acc, n) => acc.concat(n), [1]);` adding the `1` in the array in `reduce`.

Naming the tests#
The tests are presently named `test case 1, test case 2, test case 3, and test case 4`. That’s a problem for a reader of the tests. They lack the mental model of the issue at hand that the author has. If we read these test cases and don’t already know what the function does, we have a hard time understanding why the tests verify what they do.

In other words, picking a descriptive name for each test case would greatly benefit its comprehension by the readers.

The renamed tests are as follows:

* `test case 1` becomes `should flat arrays of length 2`.
* `test case 2` becomes `should flat arrays of variable length`.
* `test case 3` becomes `should flat arrays of length 1`.
* `test case 4` becomes `should only flat one-level-deep nested arrays of arrays`.


Learn how to test a function using different inputs and outputs and how to name the tests.


Unit Test a Function

Learn how to test a function using different inputs and outputs and how to name the tests.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Unit Test a Function

`flat-Map` tests

Unit Test a Function

flat-Map tests

`flat-Map` tests