Angular unit test for input control

To write a unit test in Angular for an input of type number that handles keydown events (for ArrowUp and ArrowDown), you can use Angular’s TestBed and fakeAsync utilities with dispatchEvent to simulate these events.

Here’s an example of how you can create a test for an HTML input of type number that increments or decrements its value based on arrow key presses:

HTML (input.component.html)

<input type="number" id="numberInput" [(ngModel)]="inputValue" (keydown)="onKeyDown($event)" />

TypeScript (input.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
})
export class InputComponent {
  inputValue: number = 0;
  onKeyDown(event: KeyboardEvent): void {
    const incrementValue = 1; // Or set it to any number you want for increment/decrement.
    
    if (event.key === 'ArrowUp') {
      this.inputValue += incrementValue;
    } else if (event.key === 'ArrowDown') {
      this.inputValue -= incrementValue;
    }
  }
}

Unit Test (input.component.spec.ts)

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { InputComponent } from './input.component';
import { By } from '@angular/platform-browser';

describe('InputComponent', () => {
  let component: InputComponent;
  let fixture: ComponentFixture<InputComponent>;
  let inputElement: HTMLInputElement;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [InputComponent],
      imports: [FormsModule],
    }).compileComponents();
    fixture = TestBed.createComponent(InputComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    inputElement = fixture.debugElement.query(By.css('#numberInput')).nativeElement;
  });
  it('should increment the value when ArrowUp is pressed', fakeAsync(() => {
    // Initial value should be 0
    expect(component.inputValue).toBe(0);
    // Simulate ArrowUp key press
    const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
    inputElement.dispatchEvent(event);
    fixture.detectChanges();
    // After ArrowUp key press, value should increment by 1
    expect(component.inputValue).toBe(1);
  }));
  it('should decrement the value when ArrowDown is pressed', fakeAsync(() => {
    // Set initial value to 10
    component.inputValue = 10;
    fixture.detectChanges();
    // Simulate ArrowDown key press
    const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
    inputElement.dispatchEvent(event);
    fixture.detectChanges();
    // After ArrowDown key press, value should decrement by 1
    expect(component.inputValue).toBe(9);
  }));
});

Explanation:

• Component Setup: The InputComponent has an input field bound to a variable inputValue, and the onKeyDown function updates the value when the ArrowUp or ArrowDown keys are pressed.
• TestBed Setup: The FormsModule is imported because of [(ngModel)].
• Unit Tests:
• The first test simulates pressing the ArrowUp key and checks if the value increments.
• The second test simulates pressing the ArrowDown key and verifies that the value decrements.