DEV Community

mohamed Said Ibrahim
mohamed Said Ibrahim

Posted on • Originally published at Medium

🧪 How to Test Angular Components with Cypress Component Testing (CT)

#javascript #testing #automation #cypress

🧪 How to Test Angular Components with Cypress Component Testing (CT)

Submit Buttons, Lookup Dropdowns, Paginators, Calendars & More

🧪 How to Test Angular Components with Cypress Component Testing (CT)

Submit Buttons, Lookup Dropdowns, Paginators, Calendars & More

By Mohamed Said | Test Automation Expert | Medium | 2025

Component testing is an essential practice in front-end quality assurance. With the rise of modern frameworks like Angular, it’s become increasingly important to isolate and test UI components such as buttons, dropdowns, calendars, and paginators — without spinning up the entire application.

Cypress.io, a modern testing framework known for end-to-end testing, now supports Component Testing (CT), which empowers Angular developers and testers to test UI components in isolation with lightning speed and real browser rendering.

In this guide, you’ll learn:

✅ What is Cypress Component Testing (CT)

 ✅ How to set up Cypress CT in an Angular project

 ✅ How to test Angular components:

 — Submit Button

 — Lookup Dropdown

 — Calendar DatePicker

 — Paginator / Pagination Controls

 ✅ Best practices for Cypress CT with Angular

 ✅ Bonus: Tips for clean component test architecture

cypress angular

🧩 What is Cypress Component Testing?

Cypress Component Testing allows you to render individual components in real browsers, interact with them, and assert their behavior — just like users do.

Unlike unit tests that test logic in isolation, component tests render UI, simulate real interaction, and are faster and more maintainable than full E2E tests.

✅ Use real DOM

 ✅ Real browser environment

 ✅ Visual feedback in Cypress Test Runner

 ✅ Hot reload during test development

🚀 Setting Up Cypress Component Testing in Angular

Step 1: Install Cypress Component Testing 

npm install \--save-dev cypress @cypress/angular
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Cypress CT

Generate Cypress config files if you haven’t yet:

npx cypress open --component
Enter fullscreen mode Exit fullscreen mode

Then configure your cypress.config.ts:

import { defineConfig } from 'cypress';  
import { startDevServer } from '@cypress/angular/dev-server';  

export default defineConfig({  
  component: {  
    devServer: {  
      framework: 'angular',  
      bundler: 'webpack',  
    },  
    specPattern: '\*\*/\*.cy.ts',  
  },  
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Component Test Support File

Create cypress/support/component.ts:

import './commands';  
import 'cypress-real-events/support';
Enter fullscreen mode Exit fullscreen mode

And update cypress/support/e2e.ts to only load for e2e mode.

🧪 Testing Angular Components with Cypress CT

Let’s explore how to test real-life components used in business Angular apps.

✅ 1. Testing a Submit Button

Component: SubmitButtonComponent

<button data-testid\="submit-btn" (click)="onSubmit()"\>Submit</button\>
Enter fullscreen mode Exit fullscreen mode

Test:

describe('SubmitButtonComponent', () => {  
  it('should trigger submit on click', () => {  
    cy.mount(SubmitButtonComponent, {  
      componentProperties: {  
        onSubmit: cy.stub().as('submitStub'),  
      },  
    });  

cy.get('\[data-testid="submit-btn"\]').click();  
    cy.get('@submitStub').should('have.been.calledOnce');  
  });  
});
Enter fullscreen mode Exit fullscreen mode

🔍 2. Testing a Lookup Dropdown

Component: LookupDropdownComponent

<select data-testid\="lookup-dropdown" \[(ngModel)\]="selectedItem"\>  
  <option \*ngFor\="let item of items" \[value\]="item.id"\>{{ item.name }}</option\>  
</select\>
Enter fullscreen mode Exit fullscreen mode

Test:

describe('LookupDropdownComponent', () => {  
  it('should select an item from dropdown', () => {  
    cy.mount(LookupDropdownComponent, {  
      componentProperties: {  
        items: \[  
          { id: 1, name: 'Apple' },  
          { id: 2, name: 'Orange' },  
        \],  
        selectedItem: 1,  
      },  
    });  

cy.get('\[data-testid="lookup-dropdown"\]').select('2');  
    cy.get('\[data-testid="lookup-dropdown"\]').should('have.value', '2');  
  });  
});
Enter fullscreen mode Exit fullscreen mode

📅 3. Testing a Calendar / Date Picker

Component: Angular Material Datepicker or PrimeNG Calendar

Example (Material):

<mat-form-field\>  
  <input matInput \[matDatepicker\]="picker" \[(ngModel)\]="selectedDate" data-testid\="calendar"\>  
  <mat-datepicker #picker\></mat-datepicker\>  
</mat-form-field\>
Enter fullscreen mode Exit fullscreen mode

Test:

describe('CalendarComponent', () => {  
  it('should open calendar and select a date', () => {  
    cy.mount(CalendarComponent);  
cy.get('\[data-testid="calendar"\]').click();  
    cy.get('.mat-calendar-body-cell-content').contains('15').click();  
    cy.get('\[data-testid="calendar"\]').should('contain.value', '15');  
  });  
});
Enter fullscreen mode Exit fullscreen mode

📄 4. Testing a Paginator

Component: PaginatorComponent

<mat-paginator  
  \[length\]="100"  
  \[pageSize\]="10"  
  \[pageSizeOptions\]="\[5, 10, 20\]"  
  (page)="onPageChange($event)"\>  
</mat-paginator>
Enter fullscreen mode Exit fullscreen mode

Test:

describe('PaginatorComponent', () => {  
  it('should emit page change', () => {  
    cy.mount(PaginatorComponent, {  
      componentProperties: {  
        onPageChange: cy.stub().as('pageChange'),  
      },  
    });  
cy.get('button.mat-paginator-navigation-next').click();  
    cy.get('@pageChange').should('have.been.called');  
  });  
});
Enter fullscreen mode Exit fullscreen mode

📌 Best Practices

✅ Use data-testid attributes to select elements reliably

 ✅ Stub output/event emitters to track actions

 ✅ Avoid asserting internal logic—focus on behavior

 ✅ Use Cypress cy.mount() to isolate and test component behavior

 ✅ Test edge cases: disabled buttons, empty dropdowns, boundary paginations

🧱 Clean Component Test Architecture

Organize your tests like:

src/

├── app/

│ ├── shared/

│ │ ├── submit-button/

│ │ │ ├── submit-button.component.ts

│ │ │ ├── submit-button.component.cy.ts ✅

This keeps component and test code tightly coupled and easy to maintain.

📊 Why Cypress CT is a Game-Changer for Angular Devs

  • 🌐 Real browser environment (vs. jsdom)
  • ⚡ Instant feedback with hot reload
  • 🎥 Visual debugging in the Cypress Test Runner
  • 🧪 Great for micro frontend architecture

Whether you’re testing a form submission, a complex dropdown, or a calendar with custom validations, Cypress CT makes your Angular UI testing scalable, fast, and developer-friendly.

📣 Final Thoughts

Modern Angular apps deserve modern testing strategies. Cypress Component Testing allows you to test reusable UI pieces in real scenarios, speeding up development and preventing regression bugs early.

🔔 Start small: Test your button component today.

 🧱 Scale fast: Expand to forms, dialogs, dropdowns, paginators.

 💡 Own your UI quality — with Cypress + Angular.

🧠 Bonus: Want More?

💬 Drop a comment or connect with me on LinkedIn

 📦 NPM: cypress-enterprise-commands

 📹 Coming soon: Full Udemy course on Cypress + Angular testing!

🔖 Tags:

#Angular #Cypress #ComponentTesting #TestAutomation #WebTesting #Frontend #JavaScript #UIUX #QA #EndToEndTesting

Thank you for being a part of the community

Before you go:

By Mohamed Said Ibrahim on June 29, 2025.

Exported from Medium on October 2, 2025.

Top comments (0)