角2：ジャスミン：ユニットテストでonClickメソッドを呼び出すと、値が更新されない理由

Question

私はangle cliを使用してアプリケーションを作成しましたが、ジャスミンとカルマをランナーとして使用してユニットテストを作成しています。 ユーザーがボタン（キャンセルボタン）をクリックするたびに更新されるxという名前のコンポーネントがあります。私は2つのことをテストしている単体テストケースを書いています。私は両方でそれを書いている、私はもう一方のものをテストしている間、もう1つをコメントする。 1.私のボタンはクリック可能です 2. xの値を空白から '変更'に変更します。

私の最初のテストはパスしていますが、2番目のテストは失敗しています。誰かが助けることができますか？ 以下は私のコードファイルです。

//app.component.ts 
    import { Component } from '@angular/core'; 
    import { Http } from '@angular/http'; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     constructor(private http: Http) { 

     } 
     title = 'app works!'; 
     x = '' 
     onClearClick() { 
     this.x = 'changed'; 
     }; 
    } 


//spec file 
    import { Http, ConnectionBackend, Request, Response, RequestOptions } from '@angular/http'; 
    import { AppComponent } from './app.component'; 

    import { TestBed, ComponentFixture, async, inject } from '@angular/core/testing'; 
    import { By } from '@angular/platform-browser'; 
    import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; 

    describe('AppComponent',() => { 
     let fixture: ComponentFixture<AppComponent>; 
     let comp: AppComponent; 
     let component: any; 
     let MockConnectionBackend = { 
     navigate: jasmine.createSpy('ConnectionBackend') 
     } 
     let MockResponse = { 
     navigate: jasmine.createSpy('Response') 
     } 

     let MockRequestOptions = { 
     navigate: jasmine.createSpy('RequestOptions') 
     } 

     let MockRequest = { 
     navigate: jasmine.createSpy('Request') 
     } 

     beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
      AppComponent 
      ], 
      providers: [Http, 
      { provide: Response, useValue: MockResponse }, 
      { provide: RequestOptions, useValue: MockRequestOptions }, 
      { provide: Request, useValue: MockRequest }, 
      { provide: ConnectionBackend, useValue: MockConnectionBackend }] 
     }).compileComponents(); 
     fixture = TestBed.createComponent(AppComponent); 
     component = fixture.componentInstance; 
     })); 



     it('should render title in a h1 tag', async(() => { 
     const fixture = TestBed.createComponent(AppComponent); 
     fixture.detectChanges(); 
     const compiled = fixture.debugElement.nativeElement; 
     expect(compiled.querySelector('h1').textContent).toContain('app works!'); 
     })); 

     it('should', async(() => { 
     spyOn(component, 'onClearClick'); 
     let de: DebugElement = fixture.debugElement.query(By.css('#clearSearch')); 
     let el: HTMLElement = de.nativeElement; 

     fixture.whenStable().then(() => { 

      el.click(); 
      fixture.detectChanges(); 
      // expect(component.onClearClick).toHaveBeenCalled(); 
      expect(component.x).toContain('changed'); 
     }) 
     })); 


    }); 

Answer 1

メソッドの呼び出しを行わずにテスト中のメソッドを監視しているため、テストが失敗します。また、不必要なものがたくさん残っています。試してみてください：

it('should change the x value when the button is clicked',() => { 
    const rendered = fixture.debugElement.nativeElement; 
    const button = rendered.querySelector('#clearSearch') as HtmlButtonElement; 
    button.click(): 
    expect(component.x).toEqual('changed'); 
});