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

In everyday work, we often need to deal with Promises ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)). If the function we test is `async` (it returns a `Promise`), we can use `async` and `await` in our tests.

When the function is not returning a `Promise` and not using the `async` keyword but still relies on a `Promise`, we can’t use Jasmine’s asynchronous testing capabilities directly. There are two approaches for testing such functions/methods that hide their instances of `Promise`:

- The Done function from Jasmine.
- The async and await keywords with an assisting Promise.

Let’s start with the class that has this hidden `Promise` method: - the `ArticleDelete class`.

# The hidden `Promise`

What follows is a very simplified example of a class that handles deleting articles in a browser application. It accepts some input and makes a request to a server API if conditions are met.

> For this lesson, the `delete` method is not asynchronous, but it still uses the `Promise` returning `ArticleAPI` and works with `.then` and `.catch` callbacks (click for information on [Promise chain flow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#chaining)). The `Promise` is not exposed; so, it’s hidden.

Run the code playground below and see the breakdown below.

React

Dart

GoJS React

Typescript React

Vue.js

# `ArticleDelete` class breakdown

The `ArticleDelete` class is relying on an `ArticleAPI` class to make a DELETE /api/article/:id` call if conditions are met.

- `ArticleAPI` is a class that would implement the server API call. It’s empty because that’s outside of the current lesson’s scope, and we’ll be mocking its responses for the tests.
- `ArticleDelete` is the main class.

  - ```js
    import { ArticleAPI } from './article-api.mjs';
    ```

    This line imports the `ArticleAPI` dependency from the adjacent module in the current folder `article-api.mjs`.

  - ```js
    export class ArticleDelete {
    ```

    This line exports the class for use in other modules.

  - ```js
      /** @type {ArticleAPI} */
      articleAPI;
      deleteResult;

      /**
       * @param { ArticleAPI } article the article api
       */
      constructor(articleApi) {
        this.articleAPI = articleApi;
      }
    ```

    These lines declare the `articleAPI` class instance property and populate it when an instance of the class gets constructed. In other words, constructing an instance of the `ArticleDelete` class requires an instance of the `ArticleAPI` class. The `deleteResult` gets declared to be used in the `delete` method.

  - ```js
    delete(a) {
      // ...
    }
    ```

    Notice the missing `await` keyword in front of the method. As we see below, it doesn’t return a `Promise`. That means that using `await` in a test doesn’t do us any good because `await` only waits for a `Promise`.

  - ```js
    this.deleteResult = undefined;
    ```

    This line resets the `deleteResult` at the beginning of an article delete process. That class property gets used to communicate the result with the human user—for example, by showing it in a `<span>`.

  - ```js
    if (a != null && a.id != null) {
      // ... see below
    } else {
      this.deleteResult = 'no article to delete';
    }
    ```

     When there’s an article with an `id` passed in, it continues and deletes it. If not, it returns an explanatory string.

  - ```js
    this.articleAPI
      .delete(a.id)
      .then(() => (this.deleteResult = `article deleted: "${a.title}"`))
      .catch(/*...see below*/);
    ```

    This logic calls the `delete` method of the `ArticleAPI` and attaches a `then` callback on the success—that is, `Promise` resolved. It fills in the `deleteResult`.

  - ```js
    (e) => {
      if (e && e.status === 404) {
        this.deleteResult = `It looks like article "${a.title}" has already been deleted`;
      } else {
        this.deleteResult = `Unknown error trying to delete "${a.title}". Please try again.`;
      }
    };
    ```

    The `catch` callback is called if the `delete` method returns a `Promise` that gets rejected. The rejection data is `e`. It handles two cases:

    - When the response has a status of a `404` error and sets the `deleteResult` to already deleted.
    - Otherwise, it sets the deleteResult to `Unknown error trying to delete "${a.title}". Please try again.`.


# Test breakdown

Looking at the `spec/article-delete.spec.mjs file`, we see the following:

- ```js
  import { ArticleDelete } from '../__src__/article-delete.mjs';

  describe('ArticleDelete', () => {
  ```

  We `import` the `ArticleDelete` class and declare a test suite for it: `describe('ArticleDelete', () => {`.
- ```js
  let article;
  let articleAPI;

  beforeEach(() => {
    articleAPI = jasmine.createSpyObj('article API', ['delete']);
    article = new ArticleDelete(articleAPI);
  });
  ```

  Knowing that we need an instance of the `ArticleAPI`, we create a spy object with a spy on the `delete` method because that’s the only method we use in the logic of the `ArticleDelete` class. Then, in the next line, we instantiate an `ArticleDelete` instance. These two instances get renewed using the `beforeEach` function test so that each test executes in isolation from the others and no one test influences the others.

## Green path breakdown

In the test case `should call the articleAPI delete and return the deleted article title`, we focus on the so-called green path test, also known as the happy path. That’s when we test for the case that the method receives what it expects and works as intended.

- ```js
  it(`should call the articleAPI delete and return the deleted article title`, (done) => {
  ```

 Notice the second parameter of `it` isn’t an `async` function. It takes the done parameter, which comes from Jasmine and is a function that Jasmine expects to get called before it considers a test finished. See [Jasmine docs](https://jasmine.github.io/tutorials/async#callbacks) and [Jasmine types](https://jasmine.github.io/tutorials/async#callbacks) for more information.


- ```js
  // Arrange
  articleAPI.delete.and.returnValue(Promise.resolve({ id: 1 }));
  ```

  Using the mocking capabilities, we ensure that when the `delete` method of the `ArticleAPI` gets called, it returns a `Promise. Promise.resolve` returns a `Promise` that is resolved with the specified result. In this case, it’s {id: 1}.

- ```js
  // Act
  article.delete({ id: 1, title: 'the first article' });
  ```

  
Then, we call the `delete` method. Since we can’t `await` its response to get resolved, we’ll start a timeout below.

- ```js
  // assert
  setTimeout(() => {
    expect(article.deleteResult).toEqual('It looks like article "the first article" has already been deleted');
    done();
  });
  ```

  We need the assertion to be executed after the hidden `Promise` finishes. So, we use `setTimeout`. It schedules the assertion in the next available event loop cycle (click here for an [event loop video](https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en)). This ensures the `Promise` callback is executed before the expression `expect(article.deleteResult)....` gets called.

  > Experiment: Try commenting out the `setTimeout(() => {` and its closing brackets `});`, and see the test failing.

## '404' error test breakdown

In the test case `when the articleAPI delete returns status 404 it should return - already been deleted`, we make sure the behavior of the `ArticleDelete.delete` method is as expected for the case that a `404` error is returned from the server.

- ```js
  it(`when the articleAPI delete returns status 404 it should return - already been deleted`, (done) => {
  ```

  Above, we use `it` with the `done` function parameter and not `async`.

- ```js
  // Arrange
  articleAPI.delete.and.returnValue(Promise.reject({ status: 404, message: 'not found' }));
  ```

  Using the mocking capabilities, we ensure that when the `delete` method of the `ArticleAPI` gets called, it returns a `Promise. Promise.reject` returns a `Promise` that is rejected with the specified result. In this case, it’s `{status: 404, message: 'not found'}`.

  > Note: This is just an example of how a rejected `Promise` might look. It resembles an ([Axios](https://axios-http.com/docs/handling_errors)) `Promise` rejection due to a `404 Not Found` HTTP error. Depending on the specific API or library used, the rejection might not happen on a `404` error.

- ```js
  // Act
  article.delete({ id: 1, title: 'the first article' });
  ```

  Then, we call the `delete` method.

- ```js
  // Assert
  setTimeout(() => {
    expect(article.deleteResult).toEqual('It looks like article "the first article" has already been deleted');
    done();
  });
  ```

  Finally, we assert that `delete` gets called and that the `result` is as expected for the `404` case. This logic is using `setTimeout` to ensure the `expect` call is after the `.catch` callback from `ArticleDelete` line 23.


# Exercise

For this exercise, we’ll focus on `src/article-create.mjs` in the code playground below. The `ArticleCreate` class is very similar to `ArticleDelete`, with the main difference being the `create` method:

- ```js
  create(title, content) {
    this.createResult = undefined;
    if (typeof title === 'string' && typeof content === 'string') {
      this.articleAPI
        .create(title, content)
        .then(() => (this.createResult = `article created: "${title}" with content "${content}"`))
        .catch((e) => {
          if (e && e.status === 409) {
            this.createResult = `it appears that an article with that title "${title}" already exists`;
          } else {
            this.createResult = `failed creating article ${title} - please try again later`;
          }
        });
    } else {
      this.createResult = `expected string title and content but received title: "${title}" content: "${content}"`;
    }
  }
  ```

 - It takes two parameters, `title` and `content`, to create the article, and it invokes the `create` method of the `ArticleAPI`.
- The `createResult` property is used to convey the result of success or an error.
- In the case of a status `409 Conflict`, it advises there’s an article with such a title already.
- There’s also the quick fail when the title or content is missing or not a string. Notice the `Promise` returning (`async`) method doesn’t get called for this case.


Let’s create the four specs for the above logic:
- When called with title and content, it should invoke the `create` method of the ArticleAPI.
- When the API returns a `409 Conflict`, it should notify the caller such a title already exists.
- When the API returns a generic error, it should notify the caller about the unknown error.
- When called without a title or content, it should notify about the error.


When done is not called, tests timeout! If we opt to use the assisting `Promise`, remove done from the parameter list of the it callback function

> Note: The tests for `ArticleDelete` are part of the code playground too.

# `ArticleDelete` class breakdown

The `ArticleDelete` class is relying on an `ArticleAPI` class to make a DELETE /api/article/:id` call if conditions are met.

- `ArticleAPI` is a class that would implement the server API call. It’s empty because that’s outside of the current lesson’s scope, and we’ll be mocking its responses for the tests.
- `ArticleDelete` is the main class.

  - ```js
    import { ArticleAPI } from './article-api.mjs';
    ```

    This line imports the `ArticleAPI` dependency from the adjacent module in the current folder `article-api.mjs`.

  - ```js
    export class ArticleDelete {
    ```

    This line exports the class for use in other modules.

  - ```js
      /** @type {ArticleAPI} */
      articleAPI;
      deleteResult;

      /**
       * @param { ArticleAPI } article the article api
       */
      constructor(articleApi) {
        this.articleAPI = articleApi;
      }
    ```

    These lines declare the `articleAPI` class instance property and populate it when an instance of the class gets constructed. In other words, constructing an instance of the `ArticleDelete` class requires an instance of the `ArticleAPI` class. The `deleteResult` gets declared to be used in the `delete` method.

  - ```js
    delete(a) {
      // ...
    }
    ```

    Notice the missing `await` keyword in front of the method. As we see below, it doesn’t return a `Promise`. That means that using `await` in a test doesn’t do us any good because `await` only waits for a `Promise`.

  - ```js
    this.deleteResult = undefined;
    ```

    This line resets the `deleteResult` at the beginning of an article delete process. That class property gets used to communicate the result with the human user—for example, by showing it in a `<span>`.

  - ```js
    if (a != null && a.id != null) {
      // ... see below
    } else {
      this.deleteResult = 'no article to delete';
    }
    ```

     When there’s an article with an `id` passed in, it continues and deletes it. If not, it returns an explanatory string.

  - ```js
    this.articleAPI
      .delete(a.id)
      .then(() => (this.deleteResult = `article deleted: "＄{a.title}"`))
      .catch(/*...see below*/);
    ```

    This logic calls the `delete` method of the `ArticleAPI` and attaches a `then` callback on the success—that is, `Promise` resolved. It fills in the `deleteResult`.

  - ```js
    (e) => {
      if (e && e.status === 404) {
        this.deleteResult = `It looks like article "＄{a.title}" has already been deleted`;
      } else {
        this.deleteResult = `Unknown error trying to delete "＄{a.title}". Please try again.`;
      }
    };
    ```

    The `catch` callback is called if the `delete` method returns a `Promise` that gets rejected. The rejection data is `e`. It handles two cases:

    - When the response has a status of a `404` error and sets the `deleteResult` to already deleted.
    - Otherwise, it sets the deleteResult to `Unknown error trying to delete "＄{a.title}". Please try again.`.


# Test breakdown

Looking at the `spec/article-delete.spec.mjs file`, we see the following:

- ```js
  import { ArticleDelete } from '../__src__/article-delete.mjs';

  describe('ArticleDelete', () => {
  ```

  We `import` the `ArticleDelete` class and declare a test suite for it: `describe('ArticleDelete', () => {`.
- ```js
  let article;
  let articleAPI;

  beforeEach(() => {
    articleAPI = jasmine.createSpyObj('article API', ['delete']);
    article = new ArticleDelete(articleAPI);
  });
  ```

  Knowing that we need an instance of the `ArticleAPI`, we create a spy object with a spy on the `delete` method because that’s the only method we use in the logic of the `ArticleDelete` class. Then, in the next line, we instantiate an `ArticleDelete` instance. These two instances get renewed using the `beforeEach` function test so that each test executes in isolation from the others and no one test influences the others.

## Green path breakdown

In the test case `should call the articleAPI delete and return the deleted article title`, we focus on the so-called green path test, also known as the happy path. That’s when we test for the case that the method receives what it expects and works as intended.

- ```js
  it(`should call the articleAPI delete and return the deleted article title`, (done) => {
  ```

 Notice the second parameter of `it` isn’t an `async` function. It takes the done parameter, which comes from Jasmine and is a function that Jasmine expects to get called before it considers a test finished. See [Jasmine docs](https://jasmine.github.io/tutorials/async#callbacks) and [Jasmine types](https://jasmine.github.io/tutorials/async#callbacks) for more information.


- ```js
  // Arrange
  articleAPI.delete.and.returnValue(Promise.resolve({ id: 1 }));
  ```

  Using the mocking capabilities, we ensure that when the `delete` method of the `ArticleAPI` gets called, it returns a `Promise. Promise.resolve` returns a `Promise` that is resolved with the specified result. In this case, it’s {id: 1}.

- ```js
  // Act
  article.delete({ id: 1, title: 'the first article' });
  ```

  
Then, we call the `delete` method. Since we can’t `await` its response to get resolved, we’ll start a timeout below.

- ```js
  // assert
  setTimeout(() => {
    expect(article.deleteResult).toEqual('It looks like article "the first article" has already been deleted');
    done();
  });
  ```

  We need the assertion to be executed after the hidden `Promise` finishes. So, we use `setTimeout`. It schedules the assertion in the next available event loop cycle (click here for an [event loop video](https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en)). This ensures the `Promise` callback is executed before the expression `expect(article.deleteResult)....` gets called.

  > Experiment: Try commenting out the `setTimeout(() => {` and its closing brackets `});`, and see the test failing.

## '404' error test breakdown

In the test case `when the articleAPI delete returns status 404 it should return - already been deleted`, we make sure the behavior of the `ArticleDelete.delete` method is as expected for the case that a `404` error is returned from the server.

- ```js
  it(`when the articleAPI delete returns status 404 it should return - already been deleted`, (done) => {
  ```

  Above, we use `it` with the `done` function parameter and not `async`.

- ```js
  // Arrange
  articleAPI.delete.and.returnValue(Promise.reject({ status: 404, message: 'not found' }));
  ```

  Using the mocking capabilities, we ensure that when the `delete` method of the `ArticleAPI` gets called, it returns a `Promise. Promise.reject` returns a `Promise` that is rejected with the specified result. In this case, it’s `{status: 404, message: 'not found'}`.

  > Note: This is just an example of how a rejected `Promise` might look. It resembles an ([Axios](https://axios-http.com/docs/handling_errors)) `Promise` rejection due to a `404 Not Found` HTTP error. Depending on the specific API or library used, the rejection might not happen on a `404` error.

- ```js
  // Act
  article.delete({ id: 1, title: 'the first article' });
  ```

  Then, we call the `delete` method.

- ```js
  // Assert
  setTimeout(() => {
    expect(article.deleteResult).toEqual('It looks like article "the first article" has already been deleted');
    done();
  });
  ```

  Finally, we assert that `delete` gets called and that the `result` is as expected for the `404` case. This logic is using `setTimeout` to ensure the `expect` call is after the `.catch` callback from `ArticleDelete` line 23.


# Exercise

For this exercise, we’ll focus on `src/article-create.mjs` in the code playground below. The `ArticleCreate` class is very similar to `ArticleDelete`, with the main difference being the `create` method:

- ```js
  create(title, content) {
    this.createResult = undefined;
    if (typeof title === 'string' && typeof content === 'string') {
      this.articleAPI
        .create(title, content)
        .then(() => (this.createResult = `article created: "＄{title}" with content "＄{content}"`))
        .catch((e) => {
          if (e && e.status === 409) {
            this.createResult = `it appears that an article with that title "＄{title}" already exists`;
          } else {
            this.createResult = `failed creating article ＄{title} - please try again later`;
          }
        });
    } else {
      this.createResult = `expected string title and content but received title: "＄{title}" content: "＄{content}"`;
    }
  }
  ```

 - It takes two parameters, `title` and `content`, to create the article, and it invokes the `create` method of the `ArticleAPI`.
- The `createResult` property is used to convey the result of success or an error.
- In the case of a status `409 Conflict`, it advises there’s an article with such a title already.
- There’s also the quick fail when the title or content is missing or not a string. Notice the `Promise` returning (`async`) method doesn’t get called for this case.


Let’s create the four specs for the above logic:
- When called with title and content, it should invoke the `create` method of the ArticleAPI.
- When the API returns a `409 Conflict`, it should notify the caller such a title already exists.
- When the API returns a generic error, it should notify the caller about the unknown error.
- When called without a title or content, it should notify about the error.


When done is not called, tests timeout! If we opt to use the assisting `Promise`, remove done from the parameter list of the it callback function

> Note: The tests for `ArticleDelete` are part of the code playground too.

Understand how to test methods that do not expose the Promise, using either the Done function or async and await.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Test the Hidden Promise Using Done or Await

The hidden `Promise`

`ArticleDelete` class breakdown

Test the Hidden Promise Using Done or Await

The hidden Promise

ArticleDelete class breakdown

The hidden `Promise`

`ArticleDelete` class breakdown