The problem
You want to write maintainable tests for your Angular components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don’t break your tests and slow you and your team down.
This solution
The
Angular Testing Libraryis a very lightweight solution for testing Angular components. It provides light utility functions on top ofDOM Testing Libraryin a way that encourages better testing practices. Its primary guiding principle is:The more your tests resemble the way your software is used, the more confidence they can give you.
So rather than dealing with instances of rendered Angular components, your tests will work with actual DOM nodes. The utilities this library provides facilitate querying the DOM in the same way the user would. Finding form elements by their label text (just like a user would), finding links and buttons from their text (like a user would). It also exposes a recommended way to find elements by a
data-testidas an “escape hatch” for elements where the text content and label do not make sense or is not practical.This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it.
Category: Angular
Angular Can I Use feature?
Angular evolves for every version. Here is a good website that gives a clear overview which Angular APIs are in experimential, developer, stable or depracated state. Reminds a bit of the html/css/js caniuse.com web. (focus more on cross browser compability though).
Source: Angular CanIUse feature roadmap
Angular profiler for performance tuning | Angular Newsletter
When facing a performance issue, the Profiler is perfect for identifying the problem’s root cause. For instance, it could highlight that one component is much slower than the others and gets refreshed for no good reason, indicating that a different change detection strategy is needed.
Source: Angular profiler for performance tuning | Angular Newsletter
Angular automated migration from ngIf and ngFor directives markup to control blocks
Directives such as *ngIf and *ngFor will soon get deprecated to favor the new control flow blocks.
E.g. old directives:
<ng-container *ngIf="isLoggedIn">...</ng-container>
Can now be replaced with the new syntax:
@if (isLoggedIn) {
...
}
5 tips on using Angular FormControl
We often learn Angular presented with two options for working with forms: Template driven or reactive (or both!)
In several cases, small forms (for instance, a login screen, a single text input, or a single dropdown) don’t need that kind of verbosity.
In this post, we will look at five straightforward yet valuable features of the FormControl object used on its own without bringing any additional config to the table.
Source: 5 tips on using Angular FormControl | by Alain Chautard | Angular Training
C# to TypeScript – Visual Studio Code Extension
Convert C# Models, ViewModels and DTOs into their TypeScript equivalents.
Source: C# to TypeScript – Visual Studio Marketplace
Configure Prettier and ESLint with Angular
Everyone wants to write code in a fast bug-free way without thinking about its style most of the time. That’s why in this post I will talk about configuring ESLint and Prettier in an Angular project.
Source: Configure Prettier and ESLint with Angular | by Enea Jahollari | ITNEXT
How to run Angular component tests (karma) for a certain folder or specific spec file
This runs all spec files that are descendants of the “my-area” folder and in the “Edge” browser.
ng test --include "src/app/my-area/**/*.spec.ts" --browsers=Edge
run a single spec file:
ng test --include "src/app/myarea/**/mytest.component.spec.ts" --browsers=Edge
Angular v19 will make components as standalone default
Angular v19 will make standalone: true the default for components, directives, and pipes.In v14 we introduced a developer preview “standalone” feature, which made it possible for the first time to build an application that didn’t rely on NgModules. Since then, standalone has been stabilized, and has become the recommended way to write Angular code by the Angular team. The CLI generates components with standalone: true by default, and the Angular docs teach standalone first to all new Angular developers. A
Basic form validation with Angular – provide visual feedback with form changes CSS classes
Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation. First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required HTML attribute
Source: Basic form validation with Angular | Angular Newsletter