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

One way of handling the API calls to the back-end is in a class dedicated to a resource, and we’ll look at one such implementation. The `ArticleApiController` implements a `get` method that returns the corresponding article by `id`. It also implements a `delete` method that deletes the article, given its `id` and `etag`.

Explore the following code playground, and let’s break it down after.


React

Dart

GoJS React

Typescript React

Vue.js


# 'ArticleApiController' class breakdown

If we use a web framework like [express.js](https://expressjs.com/), it handles a lot of the HTTP stuff for us. We only need to implement our logic. The `ArticleApiController` is this logic. It exposes the method `get` that allows clients to request an article by providing an `id`. Looking at `src/article-controller.js`, we see the following :

- ```js
  db;

  constructor(db) {
    this.db = db;
  }
  ```

  The `ArticleApiController` expects to get a `db`, which would allow connecting and manipulating a database of some sort. This `db` is a dependency. We’ll mock it for the test, so we won’t get into further details here. For the example, we assume it to be a [mongodb connection](https://docs.mongodb.com/drivers/node/current/).

- ```js
  async get(id) {
    try {
      const a = await this.db.collection('Article').findOne({ id: id });
      return a;
    } catch (e) {
      throw { status: 'not found', message: `Article with id "${id}" was not found.` };
    }
  }
  ```

  This `async` method returns the article if found and throws an error otherwise. The `try-catch` wraps the call to the database and makes sure that if the connection fails or the article fails to be found, or any other error occurs, it’s caught and an error with status and a message gets thrown up. That error presumably causes a `4xx` status response to get returned to the client over HTTP.

That logic allows us to showcase `expectAsync`.

- ```js
  this.db.collection('Article').findOne({ id: id });
  ```

  
This is an example of using a [mongodb collection](https://mongodb.github.io/node-mongodb-native/4.1/classes/Collection.html) to fetch a single entity [article](https://mongodb.github.io/node-mongodb-native/4.1/classes/Collection.html#findOne).

# Tests breakdown

There are two tests in this example, plus a `beforeEach` that sets up each test.

- ```js
  let db;
  let articleCollection;
  let articleController;

  beforeEach(() => {
    articleCollection = jasmine.createSpyObj('collection', ['findOne', 'delete']);
    db = jasmine.createSpyObj('db mock', {
      collection: articleCollection,
    });
    articleController = new ArticleApiController(db);
  });
  ```

  Before each test, the logic above runs and creates an instance of `ArticleApiController`. That requires an instance of `db`, the database access abstraction mock, which exposes a `collection` method. So, we generate the spy object with a `collection` method mock that returns the `articleCollection` spy object. The `articleCollection` is a spy object with spies on two methods: `findOne` and `delete`.

- ```js
  describe('when get called', () => {
  ```

  Notice we create the sub-suite `when get called`, which complements the `ArticleApiController` main suite. Each test from the sub-suite is reported under the sub-suite, which is reported under the main suite. That comes in handy later when we add tests for the `delete` method (which is not part of this example for simplicity).
- ```js
  it('should search the article collection and resolve with the article when found', async () => {
    // Arrange
    articleCollection.findOne.and.returnValue(
      Promise.resolve({ id: 1, title: 'Article', content: 'The lorem ipsum ...' })
    );
    // Act
    const a = await articleController.get(1);
    // Assert
    expect(articleCollection.findOne).toHaveBeenCalledOnceWith({ id: 1 });
    expect(a).toEqual(jasmine.objectContaining({ id: 1 }));
  });
  ```

  The above is an `async` test case that verifies the expected method `findOne` was called and that the final response returned is as expected:
- It provides a response for the `findOne` method: a `Promise` immediately resolving to an object with an `id`.
- It calls the `get` method giving a `1` for the `id` parameter.
- It asserts that the `db` method `findOne` was called with the expected filter `{ id: 1}`.
- It asserts that the response is an object containing a property of id that equals `1`.


  This test case covers the green path; the input is as expected, and the output is the article.

- ```js
  it('should search the article collection and reject with an object with status and message', async () => {
    // Arrange
    articleCollection.findOne.and.returnValue(Promise.reject({ error: 'eee' }));
    // Act
    // Assert
    await expectAsync(articleController.get(1)).toBeRejectedWith({
      status: 'not found',
      message: 'Article with id "1" was not found.',
    });
  });
  ```

  The above is an `async` test case that verifies the `Promise` returned from the `get` method is rejected with the expected error status object:

  - It provides a response to the `findOne` method: a `Promise` immediately rejecting with an error. Since there is no logic discerning different kinds of errors, it doesn’t matter what the error is.
  - It uses and will `await` the `expectAsync` function from [Jasmine](https://jasmine.github.io/api/3.9/global.html#expectAsync). It allows us to verify that a `Promise` is resolved or rejected with a specific value. In this case, we use `toBeRejectedWith` to ensure that the response `Promise` of `articleController.get`  rejects with the status and message as expected.

- This test case is the expected failing case.
  Notice that `// Act` and `// Assert` are next to one another. That’s to denote that on the following line, we act but also assert. The same logic could also separate the act from assert like this:

  ```js
  // Act
  const a = articleController.get(1);
  // Assert
  await expectAsync(a).toBeRejectedWith({
    status: 'not found',
    message: 'Article with id "1" was not found.',
  });
  ```

# Exercise

For the exercise, let’s try and test a `delete` method that is part of the `src/article-controller.js` file in the code playground below. The method accepts an `id` and an `etag` and checks if the [etag](https://en.wikipedia.org/wiki/HTTP_ETag) and `id` match with the article found in the database:

- If they match, `delete` proceeds.
- If they don’t match, the method throws a status object.
- If the article isn’t found in the database, the error caught is re-thrown. That’s the error from the `get` method.
- If the article `delete fails`, a delete failed status object is thrown.

Let’s use the playground below to write a test case for each of the cases above. Replace the lines `pending(...)` with our code.



# 'ArticleApiController' class breakdown

If we use a web framework like [express.js](https://expressjs.com/), it handles a lot of the HTTP stuff for us. We only need to implement our logic. The `ArticleApiController` is this logic. It exposes the method `get` that allows clients to request an article by providing an `id`. Looking at `src/article-controller.js`, we see the following :

- ```js
  db;

  constructor(db) {
    this.db = db;
  }
  ```

  The `ArticleApiController` expects to get a `db`, which would allow connecting and manipulating a database of some sort. This `db` is a dependency. We’ll mock it for the test, so we won’t get into further details here. For the example, we assume it to be a [mongodb connection](https://docs.mongodb.com/drivers/node/current/).

- ```js
  async get(id) {
    try {
      const a = await this.db.collection('Article').findOne({ id: id });
      return a;
    } catch (e) {
      throw { status: 'not found', message: `Article with id "＄{id}" was not found.` };
    }
  }
  ```

  This `async` method returns the article if found and throws an error otherwise. The `try-catch` wraps the call to the database and makes sure that if the connection fails or the article fails to be found, or any other error occurs, it’s caught and an error with status and a message gets thrown up. That error presumably causes a `4xx` status response to get returned to the client over HTTP.

That logic allows us to showcase `expectAsync`.

- ```js
  this.db.collection('Article').findOne({ id: id });
  ```

  
This is an example of using a [mongodb collection](https://mongodb.github.io/node-mongodb-native/4.1/classes/Collection.html) to fetch a single entity [article](https://mongodb.github.io/node-mongodb-native/4.1/classes/Collection.html#findOne).

# Tests breakdown

There are two tests in this example, plus a `beforeEach` that sets up each test.

- ```js
  let db;
  let articleCollection;
  let articleController;

  beforeEach(() => {
    articleCollection = jasmine.createSpyObj('collection', ['findOne', 'delete']);
    db = jasmine.createSpyObj('db mock', {
      collection: articleCollection,
    });
    articleController = new ArticleApiController(db);
  });
  ```

  Before each test, the logic above runs and creates an instance of `ArticleApiController`. That requires an instance of `db`, the database access abstraction mock, which exposes a `collection` method. So, we generate the spy object with a `collection` method mock that returns the `articleCollection` spy object. The `articleCollection` is a spy object with spies on two methods: `findOne` and `delete`.

- ```js
  describe('when get called', () => {
  ```

  Notice we create the sub-suite `when get called`, which complements the `ArticleApiController` main suite. Each test from the sub-suite is reported under the sub-suite, which is reported under the main suite. That comes in handy later when we add tests for the `delete` method (which is not part of this example for simplicity).
- ```js
  it('should search the article collection and resolve with the article when found', async () => {
    // Arrange
    articleCollection.findOne.and.returnValue(
      Promise.resolve({ id: 1, title: 'Article', content: 'The lorem ipsum ...' })
    );
    // Act
    const a = await articleController.get(1);
    // Assert
    expect(articleCollection.findOne).toHaveBeenCalledOnceWith({ id: 1 });
    expect(a).toEqual(jasmine.objectContaining({ id: 1 }));
  });
  ```

  The above is an `async` test case that verifies the expected method `findOne` was called and that the final response returned is as expected:
- It provides a response for the `findOne` method: a `Promise` immediately resolving to an object with an `id`.
- It calls the `get` method giving a `1` for the `id` parameter.
- It asserts that the `db` method `findOne` was called with the expected filter `{ id: 1}`.
- It asserts that the response is an object containing a property of id that equals `1`.


  This test case covers the green path; the input is as expected, and the output is the article.

- ```js
  it('should search the article collection and reject with an object with status and message', async () => {
    // Arrange
    articleCollection.findOne.and.returnValue(Promise.reject({ error: 'eee' }));
    // Act
    // Assert
    await expectAsync(articleController.get(1)).toBeRejectedWith({
      status: 'not found',
      message: 'Article with id "1" was not found.',
    });
  });
  ```

  The above is an `async` test case that verifies the `Promise` returned from the `get` method is rejected with the expected error status object:

  - It provides a response to the `findOne` method: a `Promise` immediately rejecting with an error. Since there is no logic discerning different kinds of errors, it doesn’t matter what the error is.
  - It uses and will `await` the `expectAsync` function from [Jasmine](https://jasmine.github.io/api/3.9/global.html#expectAsync). It allows us to verify that a `Promise` is resolved or rejected with a specific value. In this case, we use `toBeRejectedWith` to ensure that the response `Promise` of `articleController.get`  rejects with the status and message as expected.

- This test case is the expected failing case.
  Notice that `// Act` and `// Assert` are next to one another. That’s to denote that on the following line, we act but also assert. The same logic could also separate the act from assert like this:

  ```js
  // Act
  const a = articleController.get(1);
  // Assert
  await expectAsync(a).toBeRejectedWith({
    status: 'not found',
    message: 'Article with id "1" was not found.',
  });
  ```

# Exercise

For the exercise, let’s try and test a `delete` method that is part of the `src/article-controller.js` file in the code playground below. The method accepts an `id` and an `etag` and checks if the [etag](https://en.wikipedia.org/wiki/HTTP_ETag) and `id` match with the article found in the database:

- If they match, `delete` proceeds.
- If they don’t match, the method throws a status object.
- If the article isn’t found in the database, the error caught is re-thrown. That’s the error from the `get` method.
- If the article `delete fails`, a delete failed status object is thrown.

Let’s use the playground below to write a test case for each of the cases above. Replace the lines `pending(...)` with our code.


Learn to test an implementation of an ArticleApiController with asynchronous get and delete endpoints on the server side.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Test Asynchronous Node.js API Logic using ExpectAsync