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
}

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('')
  });
}

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
}

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

Hint

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

Practice

1. What is the primary purpose of testing forms in Angular applications?

easy

A. To improve the app's visual design

B. To ensure the app correctly handles user input and form validation

C. To speed up the app's loading time

D. To reduce the size of the app bundle

Solution

1. Step 1: Understand form testing goals

   Testing forms focuses on verifying that user inputs are handled correctly and validations work as expected.

2. Step 2: Differentiate from unrelated goals

   Visual design, loading speed, and bundle size are unrelated to form testing.

3. Final Answer:

   To ensure the app correctly handles user input and form validation -> Option B

4. Quick Check:

   Form testing = user input handling [OK]

Hint: Form tests check input handling and validation only [OK]

Common Mistakes:

• Confusing form testing with UI styling
• Thinking form tests improve app speed
• Assuming form tests reduce bundle size

2. Which Angular testing utility is commonly used to create a test environment for components with forms?

easy

A. TestBed

B. HttpClientTestingModule

C. RouterTestingModule

D. NgModule

Solution

1. Step 1: Identify Angular testing utilities

   TestBed is the main utility to configure and create a test environment for components, including those with forms.

2. Step 2: Exclude unrelated modules

   HttpClientTestingModule is for HTTP tests, RouterTestingModule for routing, and NgModule is a decorator, not a testing utility.

3. Final Answer:

   TestBed -> Option A

4. Quick Check:

   TestBed sets up component tests [OK]

Hint: Use TestBed to set up component tests with forms [OK]

Common Mistakes:

• Confusing TestBed with HTTP or routing modules
• Using NgModule instead of TestBed for testing
• Not importing TestBed in test files

3. Given this test snippet, what will be the value of component.form.value.name after simulating user input?

component.form.controls['name'].setValue('Alice');
fixture.detectChanges();

medium

A. undefined

B. '' (empty string)

C. null

D. 'Alice'

Solution

1. Step 1: Understand setValue effect on form control

   Calling setValue('Alice') sets the 'name' control's value to 'Alice'.

2. Step 2: Confirm form value after change detection

   After fixture.detectChanges(), the form reflects the updated value.

3. Final Answer:

   'Alice' -> Option D

4. Quick Check:

   setValue updates form control value [OK]

Hint: setValue changes form control value immediately [OK]

Common Mistakes:

• Assuming value stays undefined without submit
• Confusing setValue with patchValue
• Forgetting to call detectChanges

4. In this test code, what is the main issue causing the test to fail?

it('should update form on input', () => {
  const input = fixture.nativeElement.querySelector('input[name="email"]');
  input.value = '[e-mail]';
  // Missing event dispatch here
  fixture.detectChanges();
  expect(component.form.value.email).toBe('[e-mail]');
});

medium

A. fixture.detectChanges() is called too early

B. The selector for input is incorrect

C. The input event is not dispatched after changing input value

D. The form control name is misspelled

Solution

1. Step 1: Identify missing user interaction simulation

   After setting input.value, the input event must be dispatched to update Angular form bindings.

2. Step 2: Understand effect of missing event

   Without dispatching the event, Angular does not detect the change, so form value remains unchanged.

3. Final Answer:

   The input event is not dispatched after changing input value -> Option C

4. Quick Check:

   Dispatch input event to update form [OK]

Hint: Always dispatch input/change events after setting input values [OK]

Common Mistakes:

• Forgetting to dispatch input or change events
• Assuming detectChanges alone updates form
• Using wrong input selectors

5. You want to test a form submission that disables the submit button while processing and re-enables it after success. Which approach correctly tests this user interaction?

hard

A. Simulate form input, trigger submit event, check button disabled state before and after async operation

B. Only check if the submit button is disabled on component load

C. Call the submit method directly without simulating user input or events

D. Test the button's CSS class changes without triggering form submission

Solution

1. Step 1: Simulate realistic user actions

   Testing should simulate user input and submit event to trigger form submission logic.

2. Step 2: Verify button state changes during async process

   Check that the submit button disables during processing and re-enables after success to confirm correct interaction.

3. Final Answer:

   Simulate form input, trigger submit event, check button disabled state before and after async operation -> Option A

4. Quick Check:

   Test full user flow including async button state [OK]

Hint: Test full submit flow including button state changes [OK]

Common Mistakes:

• Testing button state only on load
• Skipping user input simulation
• Ignoring async operation effects