角度2のテストコンポーネントhtml

Question

私はangular2のテストを行い、問題に挑戦しようとしています。私はHTMLのバインディングをテストしようとしています。

コンポーネント：

export class NavbarComponent { 
    projectName = "Quiz!" 
} 

テンプレート：簡単に言うと、コードは次のようになります

<a class="navbar-brand" routerLink="/intro">{{projectName}}</a> 

私はオンラインの例に従うことをしようとしてきた、IVEはそれを行うための次の方法を試してみました：

describe('NavBar component',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [NavbarComponent], 
     }); 
    }); 
}); 

it('should contain the projectName variable',() => { 
    let fixture = TestBed.createComponent(NavbarComponent); 
    fixture.detectChanges(); 

    let nav = fixture.nativeElement 
    let title = nav.querySelectorAll('.navbar-brand'); 

    expect(title.textContent).toContain(nav.projectName); 
}); 

この方法ではこのエラーが発生します。エラー：コンポーネントNavbarComponentを作成できません。テストモジュールにインポートされなかったためです！

私が試してみました第二の方法：例外TypeError：：この方法については

let fixture: ComponentFixture<NavbarComponent>; 
let component: NavbarComponent; 
let debug: DebugElement; 
let element: HTMLElement; 

describe('NavBarComponent',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [NavbarComponent] 
     }); 
    }); 

    fixture = TestBed.createComponent(NavbarComponent); 
    component = fixture.componentInstance; 

    debug = fixture.debugElement.query(By.css('.navbar-brand')); 
    element = debug.nativeElement 

}); 

describe('navbar title check, project name variable', function() { 
    it('should be Quiz!', function() { 
     fixture.detectChanges(); 
     expect(element.textContent).toContain(component.projectName); 
    }); 
}); 

が、私は次のエラーを取得するプロパティを読み取ることができません「detectChanges」未定義

の私はプログラミングおろかテストに新しいですだから、どんな助けでも大歓迎です。ありがとう

Answer 1

describeにすべてを入れて、第2のdescribeを取り除き、itを最初に入れます。また、すべての割り当ては、あなたが始める必要があるbeforeEach

describe('',() => { 
    let someVar; 

    beforeEach(() => { 
    TestBed.configureTestingModule({}); 
    someVar = whatever; 
    }) 

    it('',() => { 

    }) 
}) 

の内側に行く必要があります。