Как внедрить сервис в spec-файл Angular Testing (Jasmin / karma)

Question

Я новичок в написании Angular модульного теста. Я внедряю один сервис в мой файл контроллера (.ts). Как я могу внедрить служебный файл в файл спецификации.

Вот код:

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;
}

Мы не знаем. Как внедрить этот сервис в spec-файл. Кто-нибудь может нам помочь?

Спасибо!

Answer 1

В этом ответе предполагается, что вы хотите выполнить модульное тестирование компонента.

Если вы используете 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();
    });
});

Answer 2

То, чего вы пытаетесь достичь, на самом деле - интеграционное тестирование, потому что вы пытаетесь протестировать два блока (AppComponent и SortService) вместе.

Поскольку вы говорите о модульном тестировании, я думаю, вы хотите протестировать класс AppComponent. Это означает, что любая инъецируемая зависимость, которая используется в AppComponent, должна быть проверена. В вашем случае это класс SortService. Есть два способа сделать это.

Подход 1: Использование класса Mock для SortService.

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: Использование шпионского объекта.

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. Он маленький и элегантный. Но вы можете использовать любой из двух подходов.

Надеюсь, это поможет!

Answer 3

Для добавления службы в spec-файл необходимо добавить конфигурацию TestBed и зарегистрировать службу в массиве провайдера, аналогичном файлу модуля ts.

Пример: -describe ('описание контрольного примера', () => { const sortService;

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

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