mohamed Said Ibrahim

Posted on Oct 15 • Originally published at Medium

Mastering Angular Component Testing: A Deep Dive with a “Back” Button and Cypress

#javascript #testing #automation #cypress

Mastering Angular Component Testing: A Deep Dive with a “Back” Button and Cypress

In the world of modern web development, creating robust and reliable user interfaces is paramount. Angular, with its powerful…

Mastering Angular Component Testing: A Deep Dive with a “Back” Button and Cypress

In the world of modern web development, creating robust and reliable user interfaces is paramount. Angular, with its powerful component-based architecture, empowers developers to build complex applications.1 But how do we ensure these individual building blocks, our components, work flawlessly in isolation and as part of the larger system? The answer lies in effective component testing.

This article dives into the art of professional Angular component testing using Cypress, focusing on a common UI element: a simple “Back” button. We’ll explore the best practices of separating your component code from its test suite, leading to cleaner, more maintainable, and highly effective tests.

Why Component Testing Matters

Before we dive into the “how,” let’s briefly touch upon the “why.” Component testing offers several significant advantages:

● Isolation and Focus: Test individual components in isolation, free from the complexities of the entire application.2 This allows you to pinpoint issues quickly.

● Faster Feedback: Component tests run much faster than end-to-end (E2E) tests, providing rapid feedback during development.3

● Improved Maintainability: Well-tested components are easier to refactor and modify with confidence, reducing the risk of introducing regressions.4

● Clearer API Boundaries: Writing tests forces you to think about your component’s inputs (@Input()) and outputs (@Output()), leading to better-designed APIs.

● Living Documentation: Tests serve as executable documentation, illustrating how a component is intended to be used.5

Our Star: The “Back” Button Component

For this demonstration, let’s consider a ubiquitous UI element: a “Back” button. While seemingly simple, it offers a great opportunity to illustrate key testing concepts.

Here’s the HTML structure we’ll be working with:

Back

(Note: We’ll refine the type and title attributes for better semantic correctness in our component.)

Professional Separation: Component and Test Files

A cornerstone of professional development is a well-organized codebase. We will meticulously separate our Angular component definition from its Cypress test suite. This approach promotes modularity, readability, and discoverability.

Step 1: The Angular Back Button Component (src/app/back-button/back-button.component.ts)

First, let’s create a dedicated Angular component file. We’ll make it a standalone component (Angular 14+ feature) for simpler testing setup, and use @Input() and @Output() decorators to make it reusable and configurable.

// src/app/back-button/back-button.component.ts  
import { Component, EventEmitter, Input, Output } from '@angular/core';  
import { CommonModule } from '@angular/common'; // Needed for standalone components  
@Component({  
selector: 'app-back-button', // Unique HTML selector for our button  
template: \`  
<button  
type="button" // Semantically correct button type  
\[title\]="buttonTitle"  
data-testid="cancel" // Excellent for robust Cypress selectors  
class\="btn cancel body\_b16"  
\[style.width\]="buttonWidth"  
(click)="onBack()"  
\[disabled\]="isDisabled"  
\>  
{{ buttonText }}  
</button>  
\`,  
styles: \[\`  
.btn { padding: 10px 15px; border: none; cursor: pointer; font-weight: bold; }  
.cancel { background-color: #f0f0f0; color: #333; }  
.body\_b16 { font-size: 16px; }  
\`\],  
standalone: true, // Enables standalone component usage  
imports: \[CommonModule\], // Import necessary Angular modules  
})  
export class BackButtonComponent {  
@Input() buttonText: string = 'Back';  
@Input() buttonTitle: string = 'Go back to the previous page'; // Descriptive title  
@Input() buttonWidth: string = '100%';  
@Input() isDisabled: boolean = false;  
@Output() backClicked = new EventEmitter<void\>(); // Event emitter for parent components  
onBack() {  
if (!this.isDisabled) { // Prevent event emission if disabled  
this.backClicked.emit();  
}  
}  
}

Key Features of Our Component:

● @Input() Properties: buttonText, buttonTitle, buttonWidth, and isDisabled allow external control over the button’s appearance and behavior.

● @Output() backClicked: An EventEmitter that emits a signal when the button is clicked, enabling parent components to react.

● data-testid=”cancel”: A custom attribute specifically for testing. This is a best practice to create stable selectors that are resilient to CSS or structural changes.

● standalone: true: Simplifies module configuration, especially beneficial for component testing.

● Basic Styling: Incorporated the provided classes into component-specific styles for better encapsulation.

Step 2: The Cypress Component Test Suite (cypress/component/back-button.cy.ts)

Now, let’s create the Cypress test file dedicated to our BackButtonComponent. This file will live in a separate cypress/component directory, clearly indicating its purpose.

// cypress/component/back-button.cy.ts  
import { BackButtonComponent } from '../../src/app/back-button/back-button.component'; // Import our component  
describe('BackButtonComponent', () => {  

// Test Case 1: Default rendering and initial state  
it('should render the "Back" button with default text and be enabled', () => {  
cy.mount(BackButtonComponent); // Mount the component directly  
cy.get('\[data-testid="cancel"\]').should('be.visible')  
.and('contain.text', 'Back')  
.and('not.be.disabled');  
});  

// Test Case 2: Customizing button text  
it('should display custom button text when provided', () => {  
const customText = 'Return to Previous Screen';  
cy.mount(BackButtonComponent, { componentProperties: { buttonText: customText } });  
cy.get('\[data-testid="cancel"\]').should('contain.text', customText);  
});  

// Test Case 3: Verifying the title attribute  
it('should have a custom title attribute when provided', () => {  
const customTitle = 'Navigate back to the main dashboard';  
cy.mount(BackButtonComponent, { componentProperties: { buttonTitle: customTitle } });  
cy.get('\[data-testid="cancel"\]').should('have.attr', 'title', customTitle);  
});  

// Test Case 4: Testing the disabled state  
it('should be disabled when isDisabled input is true', () => {  
cy.mount(BackButtonComponent, { componentProperties: { isDisabled: true } });  
cy.get('\[data-testid="cancel"\]').should('be.disabled');  
});  

// Test Case 5: Emitting click event when enabled  
it('should emit backClicked event when clicked and enabled', () => {  
const onBackClickedSpy = cy.spy().as('backClickedSpy'); // Create a spy to track calls  
cy.mount(BackButtonComponent, { componentProperties: { backClicked: onBackClickedSpy } });  
cy.get('\[data-testid="cancel"\]').click();  
cy.get('@backClickedSpy').should('have.been.calledOnce'); // Assert the spy was called once  
});  

// Test Case 6: NOT emitting click event when disabled  
it('should NOT emit backClicked event when clicked and disabled', () => {  
const onBackClickedSpy = cy.spy().as('backClickedSpy');  
cy.mount(BackButtonComponent, { componentProperties: { isDisabled: true, backClicked: onBackClickedSpy } });  
cy.get('\[data-testid="cancel"\]').click({ force: true }); // Use force: true to click disabled elements  
cy.get('@backClickedSpy').should('not.have.been.called'); // Assert the spy was NOT called  
});  

// Test Case 7: Verifying CSS classes  
it('should have the expected CSS classes', () => {  
cy.mount(BackButtonComponent);  
cy.get('\[data-testid="cancel"\]')  
.should('have.class', 'btn')  
.and('have.class', 'cancel')  
.and('have.class', 'body\_b16');  
});  

// Test Case 8: Verifying inline width style  
it('should have the correct inline width style', () => {  
cy.mount(BackButtonComponent);  
cy.get('\[data-testid="cancel"\]').should('have.css', 'width', '100%');  
});  

// Test Case 9: Focusability when enabled (Accessibility)  
it('should be focusable when enabled', () => {  
cy.mount(BackButtonComponent);  
cy.get('\[data-testid="cancel"\]').focus();  
cy.get('\[data-testid="cancel"\]').should('have.focus');  
});  

// Test Case 10: Not focusable when disabled (Accessibility)  
it('should not be focusable when disabled', () => {  
cy.mount(BackButtonComponent, { componentProperties: { isDisabled: true } });  
cy.get('\[data-testid="cancel"\]').should('be.disabled');  
cy.get('\[data-testid="cancel"\]').focus({ force: true }); // Attempt to focus  
cy.get('\[data-testid="cancel"\]').should('not.have.focus'); // Should not retain focus  
});  
});

Key Aspects of the Cypress Test Suite:

● Direct Component Import: We directly import BackButtonComponent into our test file, making it clear which component is being tested.

● cy.mount(): Cypress’s powerful cy.mount() command is the heart of component testing.6 It renders the Angular component directly into the Cypress test runner’s DOM, in isolation.

● componentProperties: This object allows us to programmatically set the @Input() values of our component and mock @Output() event emitters (like backClicked) for controlled testing.

● cy.spy().as(): Cypress spies are invaluable for asserting that output events were emitted. Using .as() creates an alias for the spy, which improves readability in the Cypress Command Log.7

● Robust Selectors: Relying on data-testid=”cancel” ensures our tests are not brittle and won’t break if CSS classes or element structures change.8

● Comprehensive Coverage: The test cases cover various scenarios: default rendering, input customization, disabled states, event emission, CSS validation, and basic accessibility.

Setting Up Your Environment (if not already done):

1. Install Cypress and Angular Adapter:

npm install cypress @cypress/angular - save-dev

2. Configure cypress.config.ts:

Ensure your Cypress configuration is set up for component testing with the Angular adapter.

// cypress.config.ts  
import { defineConfig } from 'cypress';  
import { devServer } from '@cypress/angular/dist/dev-server';  
export default defineConfig({  
component: {  
devServer,  
specPattern: '\*\*/\*.cy.ts', // Or wherever your component test files are  
},  
e2e: {  
setupNodeEvents(on, config) {  
// implement node event listeners here  
},  
},  
});

3. Run Cypress:

sh npx cypress open

4. Choose “Component Testing” and select your back-button.cy.ts file to see the tests run.

Benefits of This Professional Separation:

● Clarity: It’s immediately clear what each file’s responsibility is.

● Isolation: The component can be developed and understood independently of its testing logic.

● Maintainability: Changes to the component don’t necessarily require changes to unrelated test files, and vice-versa.

● Scalability: As your application grows, this structure helps manage complexity.

● Developer Experience: Easier to navigate, faster to find relevant code, and simpler to onboard new team members.

Conclusion

Component testing is an indispensable practice for building high-quality Angular applications. By meticulously separating your component’s implementation from its Cypress test suite, you gain a powerful combination of isolation, speed, and maintainability. Our simple “Back” button example demonstrates how to write professional, comprehensive, and reliable tests that will serve as a strong foundation for your entire component library. Embrace this approach, and watch your development workflow become more efficient and your applications more robust!