3 Testing Strategies to Level Up Your Angular Development

3 Testing Strategies to Level Up Your Angular Development

Testing the UI, spying on objects and more!

Testing the UI, spying on objects and more!

A robust suite of unit tests is critical for creating software repositories that are maintainable and extendible. A comprehensive test suite ensures an engineer that any changes they made do not break any previous functionality. The more behavioral cases you can cover with your tests, the more confident you can be in creating software that behaves as expected.

In this article, we will cover multiple ways to write effective tests using Jasmine and Karma for an Angular web application. These testing strategies will allow you to create more adaptive test suites with the structure of the article as follows:

  1. Project setup
  2. Testing HTML elements
  3. Adding a fake login component for testing
  4. How to test with spies
  5. How to test with mocks

If you’re just interested in the testing, the steps in bold are for you!

Note: This tutorial assumes basic knowledge in TypeScript and Angular testing with Jasmine and Karma.

1. Project Setup

We will be starting a new project to test against from scratch. It’s worth following this section because we will be reviewing test configuration as well. First we need to create a new Angular application. Then we will create a new component called dashboard.

$ ng new testing-demo
? Strict type checking ? yes
? Angular routing ? no
? Which stylesheet ? Less
$ ng generate component dashboard

Open up the testing-demo Angular project in your favorite code editor. Remove all the code in app.component.html and replace it with the <app-dashboard></app-dashboard> tags.

Delete the 'should render title' test in app.component.spec.ts.

Now we can move onto the component itself!

dashboard.component.ts

Our component class just has some simple logic to update text based on some buttons. We will have two variables title and userFeedback that we will use to verify our tests.

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.less'],
})

export class DashboardComponent implements OnInit {
    public title = 'ANGULAR TESTING DEMO';
    public userFeedback = '';

    constructor() {}

    ngOnInit() {}

    public sayYes() {
        this.userFeedback = 'Congratulations, your boss offered you a raise!';
    }

    public sayNo() {
        this.userFeedback = 'No testing?! Karma is angry with you..'
    }
}

javascript technology angular programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Object-oriented Programming in JavaScript: Made Super Simple. DO NOT MISS!!!

Object-oriented Programming in JavaScript: Made Super Simple. Learn all about objects, prototypes, prototypical inheritance, this and more.

New in Angular 12: A First Look at Angular DevTools

New in Angular 12: A First Look at Angular DevTools. I’m going to talk with you about the tool called Angular DevTools which was released for the first time with Angular 12. It can remind you of the Augury extension which you might use. Angular DevTools supports it, and it works from Angular 9 and above.