Testing forms and user interactions in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing module needed for reactive forms.

Angular

import { ReactiveFormsModule } from '@angular/forms';
import { TestBed } from '@angular/core/testing';

TestBed.configureTestingModule({
  imports: [[1]]
});

Drag options to blanks, or click blank then click option'

AFormsModule

BReactiveFormsModule

CHttpClientModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of ReactiveFormsModule

Forgetting to import any forms module

You need to import ReactiveFormsModule to test reactive forms in Angular.

2fill in blank

medium

Complete the code to create a form control with an initial empty value.

Angular

import { FormControl } from '@angular/forms';

const nameControl = new FormControl([1]);

Drag options to blanks, or click blank then click option'

A''

Bnull

Cundefined

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined which can cause unexpected behavior

Using 0 which is a number, not a string

To start with an empty string value in a form control, use ''.

3fill in blank

hard

Fix the error in the test to simulate a user typing 'hello' into an input element.

Angular

const input = fixture.nativeElement.querySelector('input');
input.value = [1];
input.dispatchEvent(new Event('input'));
fixture.detectChanges();

Drag options to blanks, or click blank then click option'

A"hello"

Bhello

C'hello'

Dinput.value

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a variable name without quotes

Using double quotes inconsistently

The value assigned to input.value must be a string literal, so it needs quotes like 'hello'.

4fill in blank

hard

Fill both blanks to check if the form control is valid and touched after user interaction.

Angular

expect(component.form.get('email')?.[1]).toBeTruthy();
expect(component.form.get('email')?.[2]).toBeTruthy();

Drag options to blanks, or click blank then click option'

Avalid

Binvalid

Ctouched

Dpristine

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for 'invalid' instead of 'valid'

Using 'pristine' which means untouched

After user input, the form control should be valid and touched.

5fill in blank

hard

Fill all three blanks to simulate a button click and verify the form submission method is called.

Angular

const button = fixture.nativeElement.querySelector('button');
button.[1]();

expect(component.[2]).toHaveBeenCalled();

fixture.detectChanges();
expect(component.form.[3]).toBeTruthy();

Drag options to blanks, or click blank then click option'

Aclick

BonSubmit

Cvalid

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reset' instead of 'click' for the button event

Checking 'reset' property on the form instead of 'valid'

Calling a wrong method name instead of 'onSubmit'

The button is clicked with click(), the onSubmit method should be called, and the form should be valid.