typescript - Cum să scrii un caz de test pentru modificările input-ului în Angular

Salut, dezvolt o aplicație folosind Angular și TypeScript.

Următorul este codul șablon:

<input type="text" placeholder="Search Results" (input)="searchInput($event)">

și codul meu TypeScript referitor la metoda searchInput este:

searchInput(event: Event & { target: HTMLInputElement}) {
   const { value } = event.target;
   this.value = value;
    // calling other method to reset values
  }

Mă întrebam cum să scriu cazuri de testare pentru input în fișierul meu spec.ts.

describe('Component', () => {
  let component: Component;
  let fixture: ComponentFixture<Component>;
  const event = Event; // Is this fine ?
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
          AppModule
      ],
      providers: [
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('searchInput() ', () => {
    // how to approach 
  });
});

Vă rugăm să furnizați un mod în care voi aborda scrierea cazurilor de testare.

Răspuns #1

Iată o modalitate de a scrie un test simplu.

Ce face:

1. Creează componenta
2. Verifică dacă valoarea implicită pentru value este falsă
3. Găsește elementul de input HTML după CSS (este posibil să trebuiască să fii mai specific aici, în funcție de șablonul tău)
4. Setează valoarea elementului de input și declanșează un eveniment de input
5. Asigură-te că valoarea lui value a fost actualizată corect

Cod (amintiți-vă să importați By):

...    

import { By } from '@angular/platform-browser';

...

it('searchInput should update value when input changes', async(() => {
    const fixture = TestBed.createComponent(AppComponent);

    expect(fixture.debugElement.nativeElement.value).toBeFalsy()

    const el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
    const testValue = 'some_value';

    el.value = testValue;
    el.dispatchEvent(new Event('input'));

    expect(fixture.componentInstance.value).toEqual(testValue);
}));