如何在规范文件中注入服务 Angular Testing (Jasmin/karma)

Question

我是新来写 Angular 单元测试用例。我在我的控制器文件 (.ts) 中注入一项服务。我将如何在规范文件中注入服务文件。

这是代码：

应用程序组件.ts

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

排序服务.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;
}

我们不知道。如何在规范文件中注入此服务。任何人都可以帮助我们吗？

谢谢！

原文由 Pavan Kumar Idapalapati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您要实现的目标实际上是集成测试，因为您正在尝试同时测试两个单元（ AppComponent 和 SortService ）。

既然你在谈论单元测试，那么我想你想测试 AppComponent 类。这意味着需要模拟 AppComponent 中使用的任何可注入依赖项。在您的情况下，它是 SortService 类。有两种方法可以做到这一点。

方法 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。它小巧而优雅。但是您可以使用这两种方法中的任何一种。

希望这会有所帮助！

原文由 nikhil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

示例 :-describe(‘测试用例描述’, () => { const sortService;

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

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

原文由 user3206740 发布，翻译遵循 CC BY-SA 4.0 许可协议