Overview

Time: 2min

You can skip the first two steps if you want to jump directly to the working app and start writing tests by following the commands below in the "Code repository" section.

In this module, we will create a simple application to get and display Chuck Norris Jokes

Learning Outcomes

• How to use the default testing tools in an Angular CLI Application
• How to install and configure WallabyJS

Code repository

Checking out the first branch will give you the working application with the ChuckNorrisModule without any tests.

Create a new Angular CLI application

Time: 5min

• In the folder you would like to create this project run the following command

• Change directory into the new project and open the CLI in Visual Studio Code

• Run the application

• Open the application in your web browser at http://localhost:4200

Run the default unit tests with Karma and Jasmine

Time: 5min

• Run the default unit tests in src/app/app.component.spec.ts with the following command which will run all tests in the app folder in a file ending in .spec.ts

Figure: Karma output in terminal showing test results

Figure: Karma out put in terminal

The default set up is nice and a huge help to get started quickly writing tests in your application but we will also look at wallaby later which can make getting realtime feedback in the IDE much quicker and better. The tests that run here are the default tests the Angular CLI create for you. You can and we often do pass a flag in when generating code with the CLI to not auto create tests until we want them as they often break as soon as you inject your first dependency into an Angular component.

NOTE: above command will tell the CLI not to auto generate test code for the component being made

• Run the default e2e tests in e2e/app.e2e-spec.ts with the following command which will run all e2e tests in the e2e folder in a file ending in .e2e-spec.ts

then in another terminal run or it will fail as the application needs to be running for protractor

Figure: Protractor output in terminal showing e2e test results

Figure: Protractor out put in terminal

There is no nice realtime feedback for e2e tests as they are slow to run and normally run on a CI (Continuous integration) setup versus as you code.

Review the Angular CLI directory and testing tools set up

Time: 5min

By default the Angular CLI will configure both unit tests and e2e tests in your new Angular CLI application.

The default tools that most teams use for testing Angular are the same ones set up by the Angular CLI

The Jasmine test framework

Provides everything needed to write basic tests. It ships with a HTML test runner that executes tests in the browser.

Angular testing utilities

The Angular testing utilities create a test environment for the Angular application code under test. Use them to condition and control parts of the application as they interact within the Angular environment.

Karma

The karma test runner is ideal for writing and running unit tests while developing the application. It can be an integral part of the project's development and continuous integration processes. This guide describes how to setup and run tests with karma.

Protractor

Use protractor to write and run end-to-end (e2e) tests. End-to-end tests explore the application as users experience it. In e2e testing, one process runs the real application and a second process runs protractor tests that simulate user behavior and assert that the application responds in the browser as expected.

The angular.io official testing docs are 99 pages long which hopefully gives you an idea of how big a topic frontend testing is with Angular and how the platform is truly designed to be tested from the ground up.

Figure: Angular CLI Folder Structure showing e2e, app, and config files

Figure: Angular CLI Folder Structure

1. e2e - The folder with all the e2e tests
2. app folder - Any files in this folder with a suffix of .spec.ts will be picked up and run by the test runner (Karma or WallabyJS)
3. test.ts - Specific testing config for Angular
4. karma.conf.js - Testing config for the Karma test runner
5. protractor.conf.js - Testing config file for Protractor to run e2e tests

We will get into writing some of our tests in the next module, but for now, it is important to know how to run them.

Adding WallabyJS Test Runner

Time: 10min

WallabyJS is a paid test runner tool that gives you inline feedback

Figure: WallabyJS running in VSCode showing inline feedback with color indicators

Figure: WallabyJS running in VSCode showing inline feedback

1. Colour based indicators for if tests are passing, falling or not/partially covered.
2. Inline feedback on console.log() and Jasmine expectations.

• In the folder, you would like to create this project run the following command
• To install WallabyJS first, you need to get a trial version of the extension from the extension window in VSCode

Figure: Extension window in VSCode showing WallabyJS extension

Figure: Extension window in VSCode

• Next, add the following files and packages

Wallaby config can change check the demo project here https://github.com/wallabyjs/ngCliWebpackSample

Figure: Where to place the config files for WallabyJS in the CLI directory folder

Figure: Where to place the config files for WallabyJS in the CLI directory folder

1. wallabyTest.ts - Specific WallabyJS angular config
2. wallaby.js - Default config for the test runner

NOTE: - The following will be updated automatically. You don’t need to manually add these dependencies 3. package.json – New dependencies needed to run WallabyJS

src/wallabyTest.ts

wallaby.js

Run the below command to install these packages.

• Check your package.json has been updated to include the required dependencies as shown below. Note the versions might be more recent.

package.json

Running WallabyJS

To start WallabyJS use the below keyboard shortcut combination or click F1 and search WallabyJS to see all the WallabyJS commands

If you are prompted for which file to use as default use wallaby.js in the root of the app directory.

Figure: First step in selecting WallabyJS configuration file

Figure: Second step in selecting WallabyJS configuration file

Jasmine Code Snippets

Time: 2min

In VSCode:

1. Press F1 Then type '>Open User Snippets' Figure: Opening user snippets in VSCode2. Select 'TypeScript' Figure: Selecting TypeScript for code snippets3. paste in below snippets in between the existing curly { } brackets