web-dev-qa-db-ja.com

スペックファイルにサービスを挿入する方法Angular Testing（Jasmine / karma）

Angular単体テストケースを書くのは初めてです。コントローラファイル（.ts）に1つのサービスを挿入しています。スペックファイルにサービスファイルを挿入する方法を教えてください。

これがコードです：

app.component.ts

getSortData() {
    this.sortService.sortNumberData(this.data, 'name', 'asce');
}

sort.service.ts

sortNumberData(data, rendererKey, type) {
    // data.sort((elem1, elem2) => {
    //   //if number is undefined, then assigning `MAX_SAFE_INTEGER` to to move it to the last in order. 
    //   if (elem1[rendererKey] == undefined) elem1[rendererKey] = Number.MAX_SAFE_INTEGER;
    //   if (!elem2[rendererKey] == undefined) elem2[rendererKey] = Number.MAX_SAFE_INTEGER;
    //   return Number(elem1[rendererKey]) - Number(elem2[rendererKey]);
    // });
    // if (type == "desc") {
    //   return data.reverse();
    // }
    // return data;   
    if (!Array.isArray(rendererKey)) {
        data.sort((elem1, elem2) => {
            if (elem1[rendererKey] == undefined && elem2[rendererKey] == undefined) {
                return 0;
            } else if (elem1[rendererKey] == undefined) {
                return 1;
            } else if (elem2[rendererKey] == undefined) {
                return -1;
            } else {
                return elem1[rendererKey] - elem2[rendererKey];
            }
        });
        // if the type of rendererKey is array, then use array elements as keys hierarchally.
        // This is used when compare element is not direct property of each element of data array.
    } else if (Array.isArray(rendererKey)) {
        data.sort((elem1, elem2) => {
            let temp1 = elem1, temp2 = elem2;
            rendererKey.map((e) => { temp1 = temp1[e], temp2 = temp2[e] });
            console.log(temp1, temp2);
            if (temp1 == undefined && temp2 == undefined) {
                return Number.MAX_SAFE_INTEGER - Number.MAX_SAFE_INTEGER
            } else if (temp1 == undefined) {
                return Number.MAX_SAFE_INTEGER - temp2;
            } else if (temp2 == undefined) {
                return temp1 - Number.MAX_SAFE_INTEGER;
            } else {
                return temp1 - temp2;
            };
        })

    }
    if (type == "desc") {
        return data.reverse();
    }
    return data;
}

わかりません。このサービスをスペックファイルに挿入する方法。誰かが私たちを助けることができますか？

ありがとう！

javascriptangulartypescriptkarma-jasmine
6
Pavan Kumar Idapalapati

2つのユニット（AppComponentとSortService）の両方をまとめてテストしようとしているため、達成しようとしているのは実際には統合テストです。

ユニットテストについて話しているので、AppComponentクラスをテストしたいと思います。つまり、AppComponentで使用される注入可能な依存関係はすべてモックする必要があります。あなたの場合、それはSortServiceクラスです。それには2つの方法があります。

アプローチ1：SortServiceにMockクラスを使用します。

app.component.spec.ts

// Mock the SortService class, its method and return it with mock data
class MockSortService extends SortService{
                getSortData(data, rendererKey, type) {
                    return [someRandomArray];
                }
}

beforeEach(async( () => {
    TestBed.configureTestingModule({
            providers: [                   
                // Use the power of Angular DI with following provider. This will replace SortService with MockSortService in injector
                { provide: SortService, useClass: MockSortService },
            ]
    });
));

アプローチ2：Spyオブジェクトを使用します。

app.component.spec.ts

beforeEach(async( () => {
        // Create jasmine spy object 
        sortServiceSpy = jasmine.createSpyObj('SortService', 'sortNumberData');
        // Provide the dummy/mock data to sortNumberData method.
        sortServiceSpy.sortNumberData.returnValue([someRandomArray]);
        TestBed.configureTestingModule({
                providers: [                   
                    { provide: SortService, useValue: sortServiceSpy},
                ]
        });
    ));

アプローチ2が気に入りました。小さくてエレガントです。ただし、2つの方法のいずれかを使用できます。

これが役立つことを願っています！

5
nikhil

サービスをスペックファイルに挿入するには、TestBed構成を追加し、モジュールtsファイルと同じプロバイダー配列にサービスを登録する必要があります。

例：-describe（ 'description of test case'、（）=> {const sortService;

   beforeEach(async( () => {
     TestBed.configureTestingModule({
         declarations: [],    
         providers: [SortService]
      }).compileComponents();
   }));

   beforeEach( () => {
       sortService = TestBed.get(SortService);
   });
3
user3206740

この回答は、コンポーネントを単体テストすることを想定しています。

コンポーネントのテストにAngular TestBedを使用する場合、プロバイダー配列で指定することにより、サービスインジェクションの実行を処理できます。コンポーネントをテストし、サービスをモックするだけで）、私はこのようなことをします：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SortService } from '../services/sort.service';
import { AppComponent } from './app.component';

describe('app component', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let spySortService = jasmine.createSpyObj({ sortNumberData: null });

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [/* add all needed imports for AppComponent */],
            declarations: [ AppComponent ],
            providers: [
                { provide: SortService, useValue: spySortService }
            ]
        });
        fixture = TestBed.createComponent(AppComponent);
  }));

    it('should create', () => {
        expect(fixture).toBeTruthy();
    });
    it('getSortData() should call SortService sortNumberData() method', () => {
        fixture.detectChanges();
        component.getSortData();
        expect(spySortService.sortNumberData.toHaveBeenCalled();
    });
});
1
dmcgrandle