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 classes ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)). Some examples might be one of the following:	
 - A Node.js API endpoint handler (server side).
- An SPA Component class (client side).
 

These often include dependencies that are injected in the constructor and used throughout the methods in the class instance.

We’ll look into a class with one dependency and one method that uses that dependency. 

## The `Article` 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.   

React

Dart

GoJS React

Typescript React

Vue.js

## Class breakdown

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

- `ArticleAPI` is a class that implements the server API call. It’s empty in the example 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:

  - ```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 to be used in other modules.

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

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

    These lines are the declaration of the `articleAPI` property and populating it in the `constructor`. In other words, constructing an instance of the `ArticleDelete` class requires an instance of the `ArticleAPI` class.

  - ```js
       delete(a) {
    if (a != null && a.id != null) {
      this.articleAPI.delete(a.id);
      return `article deleted: "${a.title}"`;
    }
    return 'no article to delete'
    }
    ```

    This `delete` method only deletes an article that has an `id`. Otherwise, it informs the caller of the issue.

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

 Here, 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, on the next line, we instantiate an `ArticleDelete` instance. These two instances are renewed using the `beforeEach` function test so that each test executes in isolation from the others and no one test influences the others.

- ```js
  it(`should call the articleAPI delete and return the deleted article title`, () => {
    // Arrange
    // Act
    const result = article.delete({ id: 1, title: 'the first article' });
    // Assert
    expect(articleAPI.delete).toHaveBeenCalledOnceWith(1);
    expect(result).toEqual('article deleted: "the first article"');
  });
  ```

  In the first test, we run `article.delete`, passing in the expected article object with an `id` and a `title`. Then, we assert that the dependency’s `delete` method is called with the argument expected (`1`), and the result is the expected string: `article deleted: "the first article"`.

- ```js
  it(`should return no article to delete when that's the case`, () => {
    // Arrange
    // Act
    const result = article.delete();
    // Assert
    expect(result).toEqual('no article to delete');
  });
  ```

  In the second test, we make sure that when the `delete` method is called without an article, it returns the expected string: `no article to delete`.
## Exercise

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

- ```js
  create(title, content) {
    if (typeof title === 'string' && typeof content === 'string') {
      this.articleAPI.create(title, content);
      return `article created: "${title}" with content "${content}"`;
    }

    return `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 returned strings confirm the creation of the article or inform of an error.

Let’s create the two specs for the above logic:

- When called with a title and content, it invokes the `create` method of the `ArticleAPI`.
- When called without a title or content, it returns an error explanation.

In everyday work, we often need to deal with classes ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)). Some examples might be one of the following:	
 - A Node.js API endpoint handler (server side).
- An SPA Component class (client side).
 

These often include dependencies that are injected in the constructor and used throughout the methods in the class instance.

We’ll look into a class with one dependency and one method that uses that dependency. 

# The `Article` 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.   

# Class breakdown

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

- `ArticleAPI` is a class that implements the server API call. It’s empty in the example 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:

  - ```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 to be used in other modules.

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

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

    These lines are the declaration of the `articleAPI` property and populating it in the `constructor`. In other words, constructing an instance of the `ArticleDelete` class requires an instance of the `ArticleAPI` class.

  - ```js
       delete(a) {
    if (a != null && a.id != null) {
      this.articleAPI.delete(a.id);
      return `article deleted: "${a.title}"`;
    }
    return 'no article to delete'
    }
    ```

    This `delete` method only deletes an article that has an `id`. Otherwise, it informs the caller of the issue.

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

 Here, 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, on the next line, we instantiate an `ArticleDelete` instance. These two instances are renewed using the `beforeEach` function test so that each test executes in isolation from the others and no one test influences the others.

- ```js
  it(`should call the articleAPI delete and return the deleted article title`, () => {
    // Arrange
    // Act
    const result = article.delete({ id: 1, title: 'the first article' });
    // Assert
    expect(articleAPI.delete).toHaveBeenCalledOnceWith(1);
    expect(result).toEqual('article deleted: "the first article"');
  });
  ```

  In the first test, we run `article.delete`, passing in the expected article object with an `id` and a `title`. Then, we assert that the dependency’s `delete` method is called with the argument expected (`1`), and the result is the expected string: `article deleted: "the first article"`.

- ```js
  it(`should return no article to delete when that's the case`, () => {
    // Arrange
    // Act
    const result = article.delete();
    // Assert
    expect(result).toEqual('no article to delete');
  });
  ```

  In the second test, we make sure that when the `delete` method is called without an article, it returns the expected string: `no article to delete`.
# Exercise

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

- ```js
  create(title, content) {
    if (typeof title === 'string' && typeof content === 'string') {
      this.articleAPI.create(title, content);
      return `article created: "${title}" with content "${content}"`;
    }

    return `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 returned strings confirm the creation of the article or inform of an error.

Let’s create the two specs for the above logic:

- When called with a title and content, it invokes the `create` method of the `ArticleAPI`.
- When called without a title or content, it returns an error explanation.

# Class breakdown

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

- `ArticleAPI` is a class that implements the server API call. It’s empty in the example 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:

  - ```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 to be used in other modules.

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

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

    These lines are the declaration of the `articleAPI` property and populating it in the `constructor`. In other words, constructing an instance of the `ArticleDelete` class requires an instance of the `ArticleAPI` class.

  - ```js
       delete(a) {
    if (a != null && a.id != null) {
      this.articleAPI.delete(a.id);
      return `article deleted: "＄{a.title}"`;
    }
    return 'no article to delete'
    }
    ```

    This `delete` method only deletes an article that has an `id`. Otherwise, it informs the caller of the issue.

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

 Here, 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, on the next line, we instantiate an `ArticleDelete` instance. These two instances are renewed using the `beforeEach` function test so that each test executes in isolation from the others and no one test influences the others.

- ```js
  it(`should call the articleAPI delete and return the deleted article title`, () => {
    // Arrange
    // Act
    const result = article.delete({ id: 1, title: 'the first article' });
    // Assert
    expect(articleAPI.delete).toHaveBeenCalledOnceWith(1);
    expect(result).toEqual('article deleted: "the first article"');
  });
  ```

  In the first test, we run `article.delete`, passing in the expected article object with an `id` and a `title`. Then, we assert that the dependency’s `delete` method is called with the argument expected (`1`), and the result is the expected string: `article deleted: "the first article"`.

- ```js
  it(`should return no article to delete when that's the case`, () => {
    // Arrange
    // Act
    const result = article.delete();
    // Assert
    expect(result).toEqual('no article to delete');
  });
  ```

  In the second test, we make sure that when the `delete` method is called without an article, it returns the expected string: `no article to delete`.
# Exercise

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

- ```js
  create(title, content) {
    if (typeof title === 'string' && typeof content === 'string') {
      this.articleAPI.create(title, content);
      return `article created: "＄{title}" with content "＄{content}"`;
    }

    return `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 returned strings confirm the creation of the article or inform of an error.

Let’s create the two specs for the above logic:

- When called with a title and content, it invokes the `create` method of the `ArticleAPI`.
- When called without a title or content, it returns an error explanation.

Understand the difference between testing classes and testing functions.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

How to Test Classes

The `Article` class

Class breakdown

How to Test Classes

The Article class

Class breakdown

The `Article` class