在 for-if 语句中进行单元测试 Angular

如何解决在 for-if 语句中进行单元测试 Angular

我的组件中有此代码。我尝试根据 id 获取类别的详细信息。我从一开始就已经有了这个 id，所以我只需要找到它的其余细节。

export class editCategoryComponent implements onInit {
    const id='ABC'
    let name='';
    let category: Category[]=[];
    
    constructor(catService: CategoryService)

    ngOnInit(): void {
        // code to get category,done
        this.catService.getCategory().subscribe((data) => {
            this.category = data;
        });

        // code to get detail of certain category
        for(let i=0; i<this.category.length; i++) {
          if(id === this.category[i].category_id) {
              name=category[i].name;
              break
          }
        }
    }
}

我的单元测试是这样的。我在组件中设置了 id，并从我创建的模拟中设置了类别。它只是一个类别对象数组。

mockCategory = [
    {
        category_id: 'ABC',category_name: 'lorem ipsum'
    },{
        category_id: '123',category_name: 'lorem-ipsum'
    },]
describe('editCategoryComponent',() => {
    let component: editCategoryComponent
    let fixture: ComponentFixture<EditComponent>
    let service: CategoryService

    beforeEach(() => {
        fixture = Testbed.createComponent(EditCategoryComponent)
        component = fixture.componentInstance
        service = fixture.debugElement.injector.get(CategoryService)
    })

    it('should get detail category and success',() => {
        spyOn(service,'getCategory).and.returnValue(of(mockCategory));
        fixture.detechChanges();
        component.id = 'ABC';
        
        component.category.forEach((key),=> {
            if(key.category_id === component.id) {
                fixture.detectChanges();
                expect(component.name).toEqual(key.category_name);
            }
        })
    })
}

到foreach为止，我的测试已经检测到component.category不为空，我认为它应该能够从中获取数据。但是我得到一个错误 expect(received).toEqual(expected) // 深度相等。它说预期：“文本”，接收：“”，我也寻找覆盖范围，它只覆盖 if 语句。该语句为“name=...”等不包括在内。那么如何在 if 语句之后进行单元测试呢？

我已经让组件中的id存在于类别中，所以应该继续if。我在这里做错了吗？

谢谢！

解决方法

您希望在 detectchanges() 之后运行的代码块可能没有执行。所以在你没有给我们完整的代码之后，我假设你可能会使用一些钩子，ngOnChanges 或 ngOnInit。这里有两种可能的情况。

您正在使用 ngOnInit。

要调用 ngOnInit，您需要使用 TestBed.createComponent()
您可以手动调用该函数component.ngOnInit()。

您正在使用 ngOnChange

您可以手动调用ngOnChange
您可以将您的组件包装在一个新的测试组件中并在那里测试结果。 Check this article。