Return to Revisions

Question: What do you test in your angular application and how do you think it improves your software quality/stability?

Components For components that encapsulate UI-logic, i try to cover the behavior of the component.

For example "ListComponent":

This component should list products and highlight a single product by a threshold (price < threshold).

We might to ensure the following things:

• component is created
• component shows all elements given in as input
• component adds the "highlight" class on elements which match the condition

Another example we have "ListControllerComponent":

This component get products from a service and provide a input field for the user, to modify the threshold.

We might to ensure the following things:

• component creates
• a attemp to get products is made
• the input value of the rangeslider is reflected.

If these tests are successful, we can assume that our ui works as we have described. We cover only our own ui logic, we assume the Browser-API's, Angular and the data provided somewhere is valid.

Services For servives which just wrap around HttpClient i wont write a seperate test, but the mock object for this service is decisive for other tests.

ProductModel:

export interface Product { id: number; name: string; price: number; }; 

ProductService:

export class ProductService { constructor(private http: HttpClient) { } public getProducts(): Observable<Product[]> { return this.http.get<Product[]>('products'); } } 

ProductService:

export class ProductServiceMock { constructor() { } public getProducts(): Observable<Product[]> { return of( [ { id: 1, name: 'Product A', price: 4 }, { id: 2, name: 'Product B', price: 2.66 }, { id: 3, name: 'Product C', price: 7 }, { id: 4, name: 'Product D', price: 3 } ] ); } } 

Now assume your API changes, the products type does not longer has the field "price" its now called "price1". To apply these changes to your frontend you might want to change your product-model.

And now one value of tests shows up.

1. The whole test-setup wont run (typescript-error) because ProductServiceMock returns values of mismatching type price !== price1
2. After you fixed this, you will see that the test "component adds the highlight" will fail.

I think to know which parts of your application needs an adjustment if some major api breaks is a huge win

Alone for this reason its worth to have tests.

A full example is appended. https://stackblitz.com/github/EnricoVogt/testangular