如何在规格文件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;
}

我们不知道 如何在规格文件中注入此服务。谁能帮助我们？

谢谢！

Answer 1

要将服务注入规范文件，您必须添加 TestBed 配置并在与模块 ts 文件相同的提供程序数组中注册您的服务。

示例：-describe('测试用例描述', () => { const sortService;

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

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

Answer 2

此答案假定您要对组件进行单元测试。

如果您使用 Angular TestBed 来测试您的组件，它可以通过在 providers 数组中指定它来为您处理服务注入。假设您想测试组件（并且只是模拟服务），我会做这样的事情：

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 3

您要实现的实际上是集成测试，因为您要同时测试两个单元（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：使用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。它小巧而优雅。但是您可以使用两种方法中的任何一种。

希望这会有所帮助！