Testing forms and user interactions in Angular - Mini Project: Build & Apply

Testing forms and user interactions

📖 Scenario: You are building a simple Angular form for a newsletter signup on a website. The form has a single input for the user's email and a submit button. You want to write tests to check that the form behaves correctly when users type their email and submit the form.

🎯 Goal: Create an Angular standalone component with a reactive form containing an email input and a submit button. Then write tests to verify the form updates when typing and triggers submission correctly.

📋 What You'll Learn

Create a standalone Angular component named NewsletterSignupComponent with a reactive form containing an email FormControl.

Add an email input field and a submit button in the template.

Write a test to check that typing an email updates the form control value.

Write a test to check that submitting the form calls the onSubmit method.

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Testing forms ensures users can enter data correctly and that the app responds properly to their actions.

💼 Career

Knowing how to test forms and user interactions is essential for frontend developers to deliver reliable, user-friendly applications.

1

Set up the reactive form

Create a standalone Angular component called NewsletterSignupComponent. Inside it, create a reactive form with a FormGroup named signupForm that has one FormControl called email initialized to an empty string.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-newsletter-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
  `
})
export class NewsletterSignupComponent {
  // Your code here
}

Need a hint?

Use new FormGroup with an object containing email: new FormControl('').

2

Add the form template

In the template of NewsletterSignupComponent, add a form that uses [formGroup]="signupForm". Inside the form, add an input element with formControlName="email" and a submit button with the text Subscribe.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-newsletter-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
  `
})
export class NewsletterSignupComponent {
  signupForm = new FormGroup({
    email: new FormControl('')
  });
}

Need a hint?

Use [formGroup]="signupForm" on the form and formControlName="email" on the input.

3

Add the submit handler method

Add a method called onSubmit inside NewsletterSignupComponent that will be called when the form is submitted. Also, update the form tag to call onSubmit() on the ngSubmit event.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-newsletter-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      
      Subscribe
    
  `
})
export class NewsletterSignupComponent {
  signupForm = new FormGroup({
    email: new FormControl('')
  });

  // Your code here
}

Need a hint?

Add (ngSubmit)="onSubmit()" to the form tag and define an onSubmit() method in the component.

4

Write tests for form interaction

Write two tests inside NewsletterSignupComponent's spec file: one to check that typing an email updates the email FormControl value, and another to check that submitting the form calls the onSubmit method. Use Angular's TestBed, ComponentFixture, and DebugElement utilities.

Angular

/* Add tests here using TestBed and ComponentFixture */
// Your code here

Need a hint?

Use spyOn to watch onSubmit, simulate input event on the email input, and trigger ngSubmit on the form.