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



# The function

While working on browser applications, we often need to use APIs the browser provides, like `document.createElement`. How do we go about testing such functions? Let’s use a function that draws a square as an example.

Here’s the breakdown of `src/draw-square.mjs` as seen in the code playground below:


- ```js
  export function drawSquare(element, width) {
  ```
  We export the function for other modules 
  to import and use. The function expects 
  element and width parameters.

- ```js
  const canvas = document.createElement('canvas');
  ```

  The line creates a [canvas HTML element](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), `<canvas></canvas>`, using the browser API.
> Note: It’s not attached to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) yet.



- ```js
  element.appendChild(canvas);
  ```

  The line attaches the canvas element to the DOM by appending it to the `element` passed as the function parameter.

- ```js
  const context = canvas.getContext('2d');
  ```

  The line calls the `getContext` method of the canvas. This returns the `context` object that, in turn, lets us draw shapes and lines in the canvas.

- ```js
  context.rect(0, 0, width, width);
  ```

  The line uses `rect` to draw a rectangle in the top-right corner of the canvas, `(0,0)`, using `width` as its width and height.

# Run it

Let’s run the code below, look at the results, and break down the test.

Learn how to test functions depending on the browser’s canvas API.


Test Functions Depending on a Browser API

Learn how to test functions depending on the browser’s canvas API.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Test Functions Depending on a Browser API