angular - 依存関係単体テスト: Angular 2

Question

アプリの単体テストを作成しようとしています。私の主な目標は、コンポーネントが依存するすべてのサービスまたはコンポーネントがインポートされているかどうかを確認する、コンポーネントまたはサービスの基本的な仕様ファイルを作成することです (これは、私が考えることができる最も基本的な仕様ファイルです)。インターネットで検索してみましたが、役に立つものを思いつくことができませんでした。どんな助けでも大歓迎です。

Answer 1

Angular-Cliを調べてください。これは Angular 2 アプリの構築に役立ち、コンポーネントを生成すると、そのコンポーネントのファイルがng g component my-new-component自動的に作成されます。Angular-Cli は、 HEREで指定されているように、テスト環境.spec全体もセットアップします。

これがどれほどの助けになるかはわかりませんが、おそらくあなたを助けるのに十分です.

だから私はナビゲーションバーコンポーネントを持っています

何とか-nav-bar.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-blah-nav-bar',
  templateUrl: './app/blah-nav-bar/blah-nav-bar.component.html',
  styleUrls: ['./app/blah-nav-bar/blah-nav-bar.component.css']
})
export class BlahNavBarComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

}

そして、生成されたスペックファイルは次のようになります

blah-nav-bar.component.spec.ts

import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { async, inject } from '@angular/core/testing';
import { BlahNavBarComponent } from './blah-nav-bar.component';

describe('Component: BlahNavBar', () => {
  it('should create an instance', () => {
    let component = new BlahNavBarComponent();
    expect(component).toBeTruthy();
  });
});

スペックファイルをコメントアウトしただけなので、これについてはよくわかりませんが、何かを始めるきっかけには十分かもしれません

アップデート

これはAngular 2の公式サイトでも見つけました。Angular 2 Testingホームページへのリンクは次のとおりです。依存関係のあるコンポーネントのテストについて説明しています

したがって、コンポーネントの注入されたサービスをテストしたい場合。

app/welcome.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService }       from './model';

@Component({
  selector: 'app-welcome',
  template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
})
export class WelcomeComponent  implements OnInit {
  welcome = '-- not initialized yet --';
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
      'Welcome, ' + this.userService.user.name :
      'Please log in.';
  }
}

は次の.specようになります

app/welcome.component.spec.ts

import { WelcomeComponent } from './welcome.component';
import { UserService }       from './model';

beforeEach(() => {
  // stub UserService for test purposes
  userServiceStub = {
    isLoggedIn: true,
    user: {
      name: 'Test User'
    }
  };

  TestBed.configureTestingModule({
    declarations: [WelcomeComponent],
    providers: [{
      provide: UserService,
      useValue: userServiceStub
    }]
  });

  fixture = TestBed.createComponent(WelcomeComponent);
  comp = fixture.componentInstance;

  // UserService from the root injector
  userService = TestBed.get(UserService);

  //  get the "welcome" element by CSS selector (e.g., by class name)
  de = fixture.debugElement.query(By.css('.welcome'));
  el = de.nativeElement;


});


// The Tests
it('should welcome the user', () => {
  fixture.detectChanges();
  const content = el.textContent;
  expect(content).toContain('Welcome', '"Welcome ..."');
  expect(content).toContain('Test User', 'expected name');
});

it('should welcome "Bubba"', () => {
  userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
  fixture.detectChanges();
  expect(el.textContent).toContain('Bubba');
});

it('should request login if not logged in', () => {
  userService.isLoggedIn = false; // welcome message hasn't been shown yet
  fixture.detectChanges();
  const content = el.textContent;
  expect(content).not.toContain('Welcome', 'not welcomed');
  expect(content).toMatch(/log in/i, '"log in"');
});