2021.04.24.

Testing Angular applications

Zita Szupera

Agenda

TODO

Introduction - what can we unit test?

In a unit test, we verify the behavior of a single unit in an isolated environment. An Angular application can consist of the following units:

  • (Ng)Module
  • Component
  • Directive
  • Service
  • Pipe

We don't test modules because there is usually no business logic there, we just wire things together.
Testing services and pipes are relatively easy because they are plain TypeScript classes, this is the "traditional" unit testing, we probably have some experiences with that from other technologies.
On the other hand, testing components and directives are not that straightforward at all, there are a lot of UI and Angular specific parts there, we will try to demystify these in the next post.

Dependency injection - isolating the units

Now that we have seen what units are in an Angular application, let's see how we can isolate them.
The answer in short: dependency injection (DI). This article assumes you are familiar with the basics of Angular's DI mechanism if you are not, you can read more about the topic here.
In an Angular application, we configure the DI framework in NgModules, in a unit test we can do something very similar with TestBed:

TestBed.configureTestingModule({
      imports: [ /* module imports */ ],
      declarations: [ /* component, directive and pipe declarations */ ],
      providers: [ /* service providers */ ]
});

Using TestBed we have the power to provide mock implementation for any used component, directive, pipe, service or even module.

Injecton tokens - mocking non-Angular dependecies

Testing services

Testing pipes

Follow us on social media

Ezek is érdekelhetnek

Kapcsolat

Elérhetőségeink
+36 70 907 3300
Gábor Dénes utca 4, Infopark C épület, I. emelet,
1117 Budapest, Magyarország
Hírlevél
Ne maradj le a legfrissebb innovációs trendekről.
Szakmai tartalmak elsőkézből.
AutSoft
AutSoft © 2021 Minden jog fenntartva
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram