How do I test and mock Standalone Components?

If you prefer the kind of tests that minimize mocking as much as possible, you will be pretty happy with Standalone Components. Gone are the struggles of meticulously picking dependencies from NgModules for your Component under test.

Standalone Components come self-contained. Add them to your TestingModule's imports property, and all their "visual elements" – Components, Directives, Pipes, and dependencies – become part of the test. As a nice side-effect, you reach a much higher code coverage.

If you are more of a visual learner, here's a video for you:

A Huge Dependency Graph

When we write a test, we check what Services our Component requires. Typical candidates are HttpClient, ActivatedRoute. We need to mock them. That's doable.

Unfortunately, the Components' dependencies also require Services, which - some of them - we also have to provide.

Consider the example of testing the RequestInfoComponent. It contains the following dependencies:

Dependency graph of RequestInfoComponent

A considerable number of Services derive from RequestInfoHolidayCardComponent. That Subcomponent uses NgRx, which can be a heavy dependency on its own.

Looking at the necessary setup of the TestingModule, there is quite a lot to consider:

const fixture = TestBed.configureTestingModule({ imports: [RequestInfoComponent], providers: [ provideNoopAnimations(), { provide: HttpClient, useValue: { get: (url: string) => { if (url === '/holiday') { return of([createHoliday()]); } return of([true]).pipe(delay(125)); }, }, }, { provide: ActivatedRoute, useValue: { paramMap: of({ get: () => 1 }), }, }, provideStore({}), provideState(holidaysFeature), provideEffects([HolidaysEffects]), { provide: Configuration, useValue: { baseUrl: 'https://somewhere.com' }, }, ], }).createComponent(RequestInfoComponent); read more

NgRx Best Practices Series: 4. Facade Pattern

This article covers the Facade pattern in NgRx. The reader must have a basic understanding of NgRx or a similar state management library.

The Facade pattern mainly decouples NgRx from the rest of our application. We can also see it as an API. The Facade masks the dispatching of actions as method calls and the selectors as properties of type Observable.

Next to the decoupling, the facade pattern offers even further advantages.

Angular Testing in 2023 – Past, Present, and Future

Angular 16 has deprecated Karma and introduced Jest in experimental mode. Does that mean we currently have no stable testing framework? Should we switch to Jest? What's wrong with Karma in the first place?

If you prefer watching a video over reading, that's for you:

In this article, I want to answer these and more questions.

First, let's take a look at the pre-Angular 16 situation. I will cover the differences between Jest and Jasmine and explain the role of Karma. Then we'll dive into Jest and discuss why the current community-based solutions could be more optimal. Finally, we'll look into the future and see what Angular brings to the table. read more