mohamed Said Ibrahim

Posted on Oct 15 • Originally published at Medium

Supercharging Angular Component Tests with Cypress: The Power of cy.stub() within cy.mount()

#javascript #testing #automation #cypress

Supercharging Angular Component Tests with Cypress: The Power of cy.stub() within cy.mount()

Testing user interfaces effectively is crucial for building robust web applications. In the Angular ecosystem, Cypress has emerged as a…

Supercharging Angular Component Tests with Cypress: The Power of cy.stub() within cy.mount()

Testing user interfaces effectively is crucial for building robust web applications. In the Angular ecosystem, Cypress has emerged as a powerhouse for both end-to-end and component testing. While cy.mount() provides a seamless way to render your Angular components in isolation, the real magic happens when you combine it with cy.stub(). This dynamic duo allows you to precisely control component dependencies, enabling focused, fast, and reliable tests.

This article dives deep into the art of using cy.stub() inside cy.mount() in Cypress for Angular component testing, exploring its benefits, practical examples, and best practices to help you write cleaner, more effective tests.

Why Component Testing Matters (and How Stubbing Enhances It)

Component testing focuses on verifying individual UI components in isolation, ensuring they function correctly independent of their surrounding application or external services. This approach offers several advantages:

● Faster Feedback: Tests run quickly as they don’t require the entire application stack.

● Precise Isolation: Pinpoint bugs within a specific component without interference from other parts of the system.

● Easier Debugging: When a test fails, you know exactly which component is at fault.

● Improved Maintainability: Isolated tests are less brittle and easier to update as your application evolves.

However, components often have dependencies — services that fetch data, other child components, or even browser APIs. If you test a component with its real dependencies, your test becomes an integration test rather than a true component test. This is where cy.stub() comes to the rescue.

Stubbing allows you to replace a real dependency with a controlled, test-specific version. You can dictate what the stubbed dependency returns, how it behaves, and even track if it was called. This empowers you to:

● Control Data: Simulate various data states (empty, error, loading, different data sets) without needing a real backend.

● Prevent Side Effects: Stop actual HTTP requests, local storage writes, or navigation events during tests.

● Test Edge Cases: Easily simulate failure scenarios, network errors, or permissions issues.

● Verify Interactions: Confirm that your component correctly calls its dependencies with the right arguments.

The Synergy: cy.stub() and cy.mount() in Action

Cypress’s cy.mount() for Angular works by leveraging Angular’s TestBed internally, providing a familiar and powerful way to configure your component’s testing environment. The key to integrating cy.stub() lies in the providers array within the cy.mount() configuration object.

Here’s a step-by-step breakdown with a practical example:

Let’s imagine a ProductService that fetches product details and a ProductDetailComponent that displays them.

1. The ProductService (e.g., product.service.ts):

import { Injectable } from '@angular/core';  
import { Observable, of, throwError } from 'rxjs';  
import { delay } from 'rxjs/operators';  

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

@Injectable({  
providedIn: 'root',  
})  

export class ProductService {  
getProduct(id: number): Observable<Product\> {  
// Simulate API call  
if (id === 1) {  
return of({  
id: 1,  
name: 'Cypress Mug',  
price: 19.99,  
description: 'A stylish mug for your coffee.',  
}).pipe(delay(100)); // Simulate a small delay  
} else if (id === 2) {  
return of({  
id: 2,  
name: 'Angular Hoodie',  
price: 49.99,  
description: 'Stay warm while coding.',  
}).pipe(delay(100));  
}  
return throwError(() => new Error('Product not found'));  
}  
}

2. The ProductDetailComponent (e.g., product-detail.component.ts):

import { Component, OnInit, Input } from '@angular/core';  
import { Product, ProductService } from './product.service';  
import { CommonModule } from '@angular/common'; // Needed for \*ngIf  

@Component({  
selector: 'app-product-detail',  
template: \`  
<div \*ngIf="product">  
<h2>{{ product.name }}</h2>  
<p>Price: \\${{ product.price | number:'1.2–2' }}</p>  
<p>{{ product.description }}</p>  
</div>  
<div \*ngIf="errorMessage">  
<p class="error-message">Error: {{ errorMessage }}</p>  
</div>  
<div \*ngIf="!product && !errorMessage">  
<p>Loading product details…</p>  
</div>  
\`,  
standalone: true, // Example with standalone component  
imports: \[CommonModule\],  
})  

export class ProductDetailComponent implements OnInit {  
@Input() productId: number;  
product: Product | null = null;  
errorMessage: string | null = null;  
constructor(private productService: ProductService) {}  
ngOnInit() {  
if (this.productId) {  
this.productService.getProduct(this.productId).subscribe({  
next: (p) => (this.product = p),  
error: (err) => (this.errorMessage = err.message || 'Unknown error'),  
});  
}  
}  
}

3. The Cypress Component Test (e.g., product-detail.component.cy.ts):

import { mount } from 'cypress/angular';  
import { ProductDetailComponent } from './product-detail.component';  
import { ProductService, Product } from './product.service'; // Import for type safety  

describe('ProductDetailComponent', () => {  

it('should display product details when data is successfully fetched', () => {  

const mockProduct: Product = {  
id: 101,  
name: 'Stubbed Widget',  
price: 29.95,  
description: 'A fantastic widget from our stubbed service.',  
};  
// Create a stub for the ProductService's getProduct method  
const getProductStub = cy.stub().returns(mockProduct).as('getProductStub');  
mount(ProductDetailComponent, {  
componentProperties: {  
productId: 101,  
},  
providers: \[  
{  
provide: ProductService,  
useValue: {  
getProduct: getProductStub, // Provide our stubbed method  
},  
},  
\],  
});  
// Assert that the component displays the stubbed data  
cy.contains('h2', 'Stubbed Widget').should('be.visible');  
cy.contains('Price: $29.95').should('be.visible');  
cy.contains('A fantastic widget from our stubbed service.').should('be.visible');  
// Assert that the stubbed method was called with the correct ID  
cy.get('@getProductStub').should('have.been.calledWith', 101);  
});  


it('should display a loading message initially and then product data', () => {  
const mockProduct: Product = {  
id: 102,  
name: 'Async Gadget',  
price: 99.00,  
description: 'An advanced gadget with delayed delivery.',  
};  
// Create a stub that returns an observable resolving after a delay  
let resolveProduct: (value: Product) => void;  
const getProductStub = cy.stub().returns(  
new Cypress.Promise<Product>((resolve) => {  
resolveProduct = resolve;  
}).then((val) => {  
return val; // Ensure the promise resolves  
})  
).as('getProductStub');  
mount(ProductDetailComponent, {  
componentProperties: {  
productId: 102,  
},  
providers: \[  
{  
provide: ProductService,  
useValue: {  
getProduct: getProductStub,  
},  
},  
\],  
});  
// Verify loading state  
cy.contains('p', 'Loading product details…').should('be.visible');  
cy.get('h2').should('not.exist'); // Product not yet displayed  
// Resolve the promise to simulate data arrival  
resolveProduct!(mockProduct);  
// Wait for the component to re-render with data  
cy.contains('h2', 'Async Gadget').should('be.visible');  
cy.contains('Price: $99.00').should('be.visible');  
});  


it('should display an error message if the service call fails', () => {  
const errorMessage = 'Failed to load product: Network Error';  
// Create a stub that returns an observable that immediately throws an error  
const getProductStub = cy.stub().returns(  
Cypress.Rx.throwError(() => new Error(errorMessage))  
).as('getProductStub');  
mount(ProductDetailComponent, {  
componentProperties: {  
productId: 999, // A non-existent product  
},  
providers: \[  
{  
provide: ProductService,  
useValue: {  
getProduct: getProductStub,  
},  
},  
\],  
});  
// Assert that the error message is displayed  
cy.contains('.error-message', \`Error: ${errorMessage}\`).should('be.visible');  
cy.get('@getProductStub').should('have.been.calledWith', 999);  
});  
});

Deconstructing the Power: Key Concepts and Best Practices

providers Array: This is the cornerstone of dependency injection in Angular. When using cy.mount(), the providers array in the second argument acts exactly like the providers array in an Angular NgModule or TestBed.configureTestingModule(). You declare how dependencies should be resolved for the mounted component.

providers: \[  
{ provide: ProductService, useValue: userServiceStub }, // Our stub!  
\],

○ provide: ProductService: This tells Angular’s DI system that whenever ProductService is requested, it should use the value provided.

○ useValue: userServiceStub: Instead of creating a new instance of ProductService, Angular will use userServiceStub as the ProductService instance for this component’s scope.

2. cy.stub() Methods for Controlling Behavior:

○ cy.stub().returns(value): The most common use case. The stubbed function will immediately return the value. Ideal for synchronous operations or observables that complete instantly.

○ cy.stub().resolves(value): For functions that return Promises, this makes the promise resolve with the given value.

○ cy.stub().rejects(error): For functions returning Promises, this makes the promise reject with the specified error.

○ cy.stub().throws(error): Makes the stubbed function throw a synchronous error.

○ cy.stub().callsFake((…args) => { … }): Provides maximum flexibility. You can define a custom function that the stub will execute, allowing for complex logic, multiple return values based on arguments, or even calling a real implementation conditionally.

Asserting on Stubs: After you’ve interacted with your component, it’s vital to ensure that your component interacted correctly with its dependencies. cy.stub() (which is built on Sinon.js) makes this easy:

cy.get('@getProductStub').should('have.been.calledWith', 101);  
cy.get('@getProductStub').should('have.been.calledOnce');  
// More assertions: have.been.calledThrice, have.not.been.called, etc.

○ .as(‘aliasName’): Alias your stub to easily refer to it later using cy.get(‘@aliasName’). This improves readability and maintainability.

4. Handling Asynchronous Operations: When your component deals with Observables (common in Angular with HttpClient), you’ll need to ensure your stubs mimic that asynchronous behavior.

○ Immediate of(): cy.stub().returns(of(mockData)) is perfect for simulating an immediate successful response.

○ Delayed of() and delay(): For testing loading states or race conditions, you can use of(mockData).pipe(delay(someMs)).

○ Manual Resolution with Cypress.Promise: As shown in the Async Gadget example, you can create a Cypress.Promise and resolve it later in your test to precisely control when data arrives, allowing you to test loading indicators.

○ Error Handling: cy.stub().returns(throwError(() => new Error(‘…’))) is essential for testing how your component handles API failures.

When to Stub vs. When to Mock HTTP (cy.intercept())

It’s important to differentiate cy.stub() from cy.intercept().

● cy.stub(): Best for isolating unit-level interactions with services that are injected directly into your component. You’re controlling the method call itself.

● cy.intercept(): Best for mocking HTTP requests at the network level. This is useful when you want to test the entire data flow from your component, through an actual HttpClient service, but without hitting a real backend. cy.intercept() operates at a lower level in the network stack.

For pure component testing, where you want to focus solely on the component’s logic and rendering, cy.stub() is often the preferred choice for its directness and control over injected dependencies.

Conclusion: Elevate Your Angular Component Tests

Integrating cy.stub() within cy.mount() is an indispensable technique for any Angular developer writing Cypress component tests. It empowers you to create highly isolated, predictable, and robust tests that precisely verify your components’ behavior across a multitude of scenarios. By mastering this powerful combination, you’ll gain confidence in your UI, accelerate your development cycles, and ultimately build more reliable Angular applications. Start leveraging this pattern today and witness your testing workflow transform!