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)). Jasmine allows for a straightforward way of testing these using `async` and `await` ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function))

# The `ArticleDelete` class

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 `ArticleAPI` methods are considered returning instances of `Promise`. So, the `delete` method returns a `Promise`.

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 the `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 above because that’s outside of the current lesson scope, and we’ll be mocking its responses for the tests.
- `ArticleDelete` is the main class. Its breakdown is below:

  - ```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 declares and exports the class to be used in other modules.


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

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

    These lines declare the `articleAPI` property and populates it when an instance of the class gets constructed. In other words, constructing an instance of the `ArticleDelete` class requires an instance of `ArticleAPI` class.

  - ```js
      async delete(a) {
        if (a != null && a.id != null) {
          try {
            await this.articleAPI.delete(a.id);
            return `article deleted: "${a.title}"`;
          } catch(e) {
            //... skipped
          }
        }

        return 'no article to delete';
      }
    ```

    The `delete` method calls the `delete` method of the `ArticleAPI` and will await its response, then returns the positive result. The `try catch` block wraps this logic. So, if the delete method returns a `Promise` that gets rejected, the `catch` is invoked.

    > The `create` method is an [asynchronous method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
    > That means we can use `the await` keyword to wait for a `Promise` resolution (or rejection) before continuing with the logic.

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

    The `catch` logic:
    - When the response has a status of `404` (not found), we inform the caller of the method that this article is already deleted.

    - Otherwise, we inform the caller that there was an issue with deleting this article.


# Test breakdown

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

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

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

  We first import the `ArticleDelete` class and declare a test suite for it, which is `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. The two instances will get renewed before each test (in the `beforeEach` hook) 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 ([Wikipedia article for more details](https://en.wikipedia.org/wiki/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`, async () => {
  ```

  Notice the second parameter of `it` is an `async` [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Jasmine knows what to do with such functions. Essentially, this function returns a `Promise`, and Jasmine waits for it to get resolved. And the function itself waits for any `await ...` expressions to get resolved too.

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

  Using the mocking capabilities, we make sure 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
  const result = await article.delete({ id: 1, title: 'the first article' });
  ```

  We call the `delete` method and `await` its response to get resolved.

- ```js
  // Assert
  expect(articleAPI.delete).toHaveBeenCalledOnceWith(1);
  expect(result).toEqual('article deleted: "the first article"');
  });
  ```

  Finally, we assert that `delete` is called and the `result` is as expected.

## 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`, async () => {
  ```

  Notice the second parameter of `it` is an `async` [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), taking advantage of Jasmine’s `Promise` handling capability.

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

  Using the mocking capabilities, we make sure 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 ([click here for more information](https://axios-http.com/docs/handling_errors)). Depending on the specific API or library used, the rejection might not happen on a `404` error.

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

  Then, we call the delete method and await its response to get resolved.

- ```js
  // Assert
  expect(result).toEqual('It looks like article "the first article" has already been deleted');
  ```

 Finally, we assert that delete gets called and the result is as expected for the `404` case

# 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
  async create(title, content) {
    if (typeof title === 'string' && typeof content === 'string') {
      try {
        await this.articleAPI.create(title, content);
        return `article created: "${title}" with content "${content}"`;
      } catch (e) {
        if (e && e.status === 409) {
          return `it appears that an article with that title "${title}" already exists`
        }

        return `failed creating article ${title} - please try again later`
      }
    }

    return `expected string title and content but recived title: "${title}" content: "${content}"`;
  }
  ```

 - It’s an `async` method.
- It takes two parameters, `title` and `content`, to `create` the article, and it invokes the create method of `ArticleAPI`.
- The returned strings confirm the creation of the article or inform of an error.
- In the case of a status [409 Conflict](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/409), it advises there is an article with such a title already.

Let's create the three specs for the above logic:

- When called with title and content, it invokes the `create` method of the `ArticleAPI`.
- When the API returns a `409 Conflict`, it should advise the caller such a title already exists.
- When called without a title or content, it returns an error explanation.


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

# `ArticleDelete` class breakdown

The `ArticleDelete` class is relying on the `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 above because that’s outside of the current lesson scope, and we’ll be mocking its responses for the tests.
- `ArticleDelete` is the main class. Its breakdown is below:

  - ```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 declares and exports the class to be used in other modules.


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

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

    These lines declare the `articleAPI` property and populates it when an instance of the class gets constructed. In other words, constructing an instance of the `ArticleDelete` class requires an instance of `ArticleAPI` class.

  - ```js
      async delete(a) {
        if (a != null && a.id != null) {
          try {
            await this.articleAPI.delete(a.id);
            return `article deleted: "＄{a.title}"`;
          } catch(e) {
            //... skipped
          }
        }

        return 'no article to delete';
      }
    ```

    The `delete` method calls the `delete` method of the `ArticleAPI` and will await its response, then returns the positive result. The `try catch` block wraps this logic. So, if the delete method returns a `Promise` that gets rejected, the `catch` is invoked.

    > The `create` method is an [asynchronous method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
    > That means we can use `the await` keyword to wait for a `Promise` resolution (or rejection) before continuing with the logic.

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

    The `catch` logic:
    - When the response has a status of `404` (not found), we inform the caller of the method that this article is already deleted.

    - Otherwise, we inform the caller that there was an issue with deleting this article.


# Test breakdown

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

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

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

  We first import the `ArticleDelete` class and declare a test suite for it, which is `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. The two instances will get renewed before each test (in the `beforeEach` hook) 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 ([Wikipedia article for more details](https://en.wikipedia.org/wiki/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`, async () => {
  ```

  Notice the second parameter of `it` is an `async` [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Jasmine knows what to do with such functions. Essentially, this function returns a `Promise`, and Jasmine waits for it to get resolved. And the function itself waits for any `await ...` expressions to get resolved too.

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

  Using the mocking capabilities, we make sure 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
  const result = await article.delete({ id: 1, title: 'the first article' });
  ```

  We call the `delete` method and `await` its response to get resolved.

- ```js
  // Assert
  expect(articleAPI.delete).toHaveBeenCalledOnceWith(1);
  expect(result).toEqual('article deleted: "the first article"');
  });
  ```

  Finally, we assert that `delete` is called and the `result` is as expected.

## 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`, async () => {
  ```

  Notice the second parameter of `it` is an `async` [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), taking advantage of Jasmine’s `Promise` handling capability.

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

  Using the mocking capabilities, we make sure 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 ([click here for more information](https://axios-http.com/docs/handling_errors)). Depending on the specific API or library used, the rejection might not happen on a `404` error.

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

  Then, we call the delete method and await its response to get resolved.

- ```js
  // Assert
  expect(result).toEqual('It looks like article "the first article" has already been deleted');
  ```

 Finally, we assert that delete gets called and the result is as expected for the `404` case

# 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
  async create(title, content) {
    if (typeof title === 'string' && typeof content === 'string') {
      try {
        await this.articleAPI.create(title, content);
        return `article created: "＄{title}" with content "＄{content}"`;
      } catch (e) {
        if (e && e.status === 409) {
          return `it appears that an article with that title "＄{title}" already exists`
        }

        return `failed creating article ＄{title} - please try again later`
      }
    }

    return `expected string title and content but recived title: "＄{title}" content: "＄{content}"`;
  }
  ```

 - It’s an `async` method.
- It takes two parameters, `title` and `content`, to `create` the article, and it invokes the create method of `ArticleAPI`.
- The returned strings confirm the creation of the article or inform of an error.
- In the case of a status [409 Conflict](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/409), it advises there is an article with such a title already.

Let's create the three specs for the above logic:

- When called with title and content, it invokes the `create` method of the `ArticleAPI`.
- When the API returns a `409 Conflict`, it should advise the caller such a title already exists.
- When called without a title or content, it returns an error explanation.


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

Learn to test Promises using async and await.


Test Promises Using Async and Await

Learn to test Promises using async and await.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Test Promises Using Async and Await

The `ArticleDelete` class

`ArticleDelete` class breakdown

Test Promises Using Async and Await

The ArticleDelete class

ArticleDelete class breakdown

The `ArticleDelete` class

`ArticleDelete` class breakdown