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

# Using 'console.log'

At the time of writing of this course, using `jasmine-browser-runner runSpecs` doesn’t output the instances of `console.log` to the terminal (the Node.js process) because the tests execute in the browser environment. We can see these logs in the browser’s console part of the developer tools. If that browser is headless, then there’s no chance to see the logs.

There is a way to set up a reporter for the jasmine-browser-runner so that the logs show on the terminal. It’s based on this [Jasmine issue response](https://github.com/jasmine/jasmine-browser-runner/issues/9#issuecomment-933608524). 

See the `spec/helpers/logs.js` in the code playground below. It replaces the `console.log` function with a custom one by using `spyOn`. It stores the arguments of each `console.log` in an array `logs`, and `afterEach` spec stores the logs in the spec context for `spec/support/reporter.js` to use. Since the reporter runs in the context of the Node.js process, it can call `console.log` and result in the output showing on the terminal. That’s precisely what it does.

> All this sounds pretty complicated, but rest assured, we cover another way later on in the lesson.


React

Dart

GoJS React

Typescript React

Vue.js

# Loggin breakdown

Running this should yield `--- got article {...}` for each test because that’s getting logged out in the `afterComponentInitialize` method. Go ahead and add additional logging to see it appear in the terminal.


>There’s a blind spot in this method; it doesn’t log out before the tests begin. So, if we use console.log in the helpers, for example, it doesn’t show in the terminal. [Click here for more information on that issue..](https://github.com/jasmine/jasmine-browser-runner/issues/9#issuecomment-933608524)

The `logs.js` script is a helper, which means that it’s executed in the browser after Jasmine runtime is executed and before the specs run. In logs.js, we attach the following callbacks:

    - `beforeAll` hook to run at the start of every `describe` and store the `console.log`'s arguments in the `logs` array

    - `afterEach` hook to run after every `it` and store the `logs` in the context of the current spec

The `reporter.js` doesn’t run in the browser’s context; it runs in the Node.js context. It also has access to both the spec context (the same one that `afterEach` hook writes logs to) and the terminal’s console to log out.

# Log hints

- We should use a clearly visible delimiter, such as ----, to make the log stand out.
- We should add a tag to each log so we can be sure where the log originated from:


  ```js
  console.log('---- article fetched', article);
  //...
  console.log('---- article updated', article);
  ```

- We should make sure we don’t cause exceptions in the log by trying to log out `console.log(my.complex.object))` when my or my.complex is `undefined` or `null`.
- We should remember that `console.log(a)` actually calls `a.toString()`, which might have been replaced, and the results could 
vary:
  ```js
  //Somewhere
  a.prototype.toString = function () {
    return 'this will always be the result of a.toString()';
  };
  ```

# How to use browser dev tools

There’s another way that’s not reliant on custom reporters and instead uses the robust and proven browser developer tools. To use that, we need to start `jasmine-browser-runner serve --port=9876`. That serves the application and tests’ scripts (script modules) and allows a browser to render them by visiting `localhost:9876`.
 
So, in the code playground below, we hit “Run,” and then we can open a browser and load the address just below the code playground. If we run and debug locally on our machine, then we can use `localhost:9876`.


## Debug the app from the browser
In the following code playground, we’re using port `3000` for infrastructure reasons. Locally, we can use any open port we’d like.

Use the playground below and see the step-by-step slides for details. The slides show local debug, but the only difference is the address in the address bar of the browser.

Learn how to set up logging out to the Node.js console, what's getting logged in the browser console, and how to start a debugging session with Jasmine using the browser developer tools.

Overview

Testing JavaScript with Jasmine

Testing Asynchronous Code

Debugging Jasmine Tests

Summary

Debug Browser Javascript Tests

Using ‘console.log’