使用 Jasmine 和 Karma 进行角度测试答案

【问题标题】：Angular testing using Jasmine and Karma使用 Jasmine 和 Karma 进行角度测试
【发布时间】：2020-12-07 20:16:19
【问题描述】：

我正在尝试提高 Angular 应用程序的代码覆盖率。在代码覆盖率中提到了 if else 条件没有被覆盖。谁能告诉我该怎么做？欢迎询问更多代码详情。

public searchByText(textVal: any): void {
        let matchedEquipments = [];
        // **
        if (this.model.searchText.length > 1) {
            matchedEquipments = this.refineByText(textVal, this.equipments);
        } else {
            matchedEquipments = this.equipments;
        }
        // **
        matchedEquipments = this.refineByPlant(this.model.plants, matchedEquipments);
        matchedEquipments = this.refineByPlantIsland(this.model.plantIslands, matchedEquipments);
        matchedEquipments = this.refineByProcess(this.model.processes, matchedEquipments);
        matchedEquipments = this.refineByIndustry(this.model.divisions, matchedEquipments);
        this.displayClientData(matchedEquipments);
        this.updateSearchCounters(SelectionFilter.FreeText);
}

规格：

it('verify the result with search', async(() => {
        equipmentSelectionComponent.searchByText("123");
        //equipmentSelectionComponent.model.searchText = "123";
        expect(equipmentSelectionComponent.matchedData.length).toBeGreaterThan(0);
}));

【问题讨论】：

.searchByText("")?
它是组件的方法名
不，我的意思是你可以这样测试另一种情况。查看条件，考虑通过您的逻辑的可能路线。
我可以写一个条件成功的案例，另一个案例吗？
是的，您应该为每个案例至少进行一次测试。

标签： angular typescript unit-testing jasmine karma-runner

【解决方案1】：

您需要编写不止 1 个 it 块来测试：

it('should call "refineByText" when search Text is there', async(() => {
   spyOn(equipmentSelectionComponent,'refineByText').and.callThrough();
   equipmentSelectionComponent.model.searchText = "some Val";
   equipmentSelectionComponent.equipments = ["item1"]
   equipmentSelectionComponent.searchByText("123");
   expect(equipmentSelectionComponent.refineByText).toHaveBeenCalledWith("123",["item1"]); // <-- this will check true condition
   // I dont see "matchedData" in your provided code so I dont know about this check.
   expect(equipmentSelectionComponent.matchedData.length).toBeGreaterThan(0);
   // spy and check other function calls as well just like I did for refineByText
}));

it('should not call "refineByText" when search Text is empty', async(() => {
   spyOn(equipmentSelectionComponent,'refineByText').and.callThrough();
   equipmentSelectionComponent.model.searchText = "";
   equipmentSelectionComponent.searchByText("123");
   expect(equipmentSelectionComponent.refineByText).not.toHaveBeenCalled(); // <-- this will check true condition
   // similarly use use "toHaveBeenCalledWith(val) for other functions
}));

我会推荐你阅读 testing with spies 和 some more basic testing ways 的 angular。这将帮助您更熟悉单元测试的心态。也随意鼓掌！！ :)

【讨论】：

【解决方案2】：

以下测试用例应该能够包含您的测试用例的覆盖率

if条件：当searchText有值时，应该通过修改设备来分配给matchedEquipments

期待：
```
 refineByText toHaveBeenCalledWith(textVal, this.equipments)
```
其他条件：当 searchText 没有值时，应该将设备分配给matchedEquipments

期待：
```
 refineByText not.toHaveBeenCalledWith(textVal, this.equipments)
```

【讨论】：