Angular 单元测试组件 ngIf 元素为空

Question

我有一个包含一些 *ngIf 语句的组件，其中大部分如下所示

<ul *ngFor="let item of items">
<li> 
    <ng-container *ngIf="itemCount && item.GroupId == 4">
        <span class="bridge">{{itemCount}}</span>
    </ng-container>
</li>
... and so on

在我的规范文件中，我有一个测试试图检查 itemCount 不为空/空且 groupId = 4 的情况...然后检查跨度是否包含正确的项目计数。

我已经花了几个小时研究这个的变体，但无论我尝试什么，尝试访问 span 结果都是 null 并且测试失败。

下面是其中一项测试的示例

if('should show the correct item count', () =>{
    let component = fixture.componentInstance;
    component.itemCount = 4;
    fixture.detectChanges();

    let bridge = fixture.debugElement.query(By.css('.bridge'));
    expect(bridge).tobeTruthy();
});

正如我上面所说，通过多次尝试，无论如何，这总是空的。我调试了测试并确认使用了正确的 groupId 也确认了 itemCount 不是 null 或空所以 *ngIf 的两个条件都应该满足 - 但跨度不存在所以我必须假设有有些不对劲。

请原谅打字错误，我正在手动复制代码，但目前确实如此运行，只是没有成功。

有什么指点吗？

更新:

这里有更多信息，组件填充了虚拟数据的 beforeEach。

const ItemServiceStub = jasmine.createSpyObj('ItemService', ['getItems']);

beforeEach(() =>{
    TestBed.configureTestingModule({
        declarations: [ItemComponent],
        providers: [{provide: ItemService, useValue: ItemServiceStub}]
    }).compileComponents();
});

beforeEach(() => {
    itemService = Testbed.inject(ItemService);

    spyOn(itemService, 'getItems').and.callFake(() => of(fakeItems));

    fixture = TestBed.createComponent(ItemComponent);
    fixture.autoDetectChanges();
});

更新 2 这是正在设置的假数据

describe('item tests', () => {

let fakeItems: Item[];

fakeItems = [
   {GroupId: '2', ItemName: 'test', isExternal: false},
   {GroupId: '3', ItemName: 'testing', isExternal: false},
   {GroupId: '4', ItemName: 'test item', isExternal: false}
];

});

Answer 1

试试这个：

it('should show the correct item count', () =>{
    let component = fixture.componentInstance;
    component.items = [...fakeItems];
    component.itemCount = 4;
    fixture.detectChanges();

    let bridge = fixture.debugElement.query(By.css('.bridge'));
    console.log(bridge); // make sure it logs something to the console
    expect(bridge).toBeTruthy();
});

如果这不起作用，我认为在 ul 之上有一个 *ngIf 是不正确的，因此不会显示此 ul。

要对此进行测试，请尝试：

<ul class="dummy-class" *ngFor="let item of items">
<li> 
    <ng-container *ngIf="itemCount && item.GroupId == 4">
        <span class="bridge">{{itemCount}}</span>
    </ng-container>
</li>

it('should show the correct item count', () =>{
    let component = fixture.componentInstance;
    component.items = [...fakeItems];
    component.itemCount = 4;
    fixture.detectChanges();

    let bridge = fixture.debugElement.query(By.css('ul.dummy-class'));
    console.log(ul); // make sure it logs something to the console
    expect(ul).toBeTruthy();
});

Angular 单元测试组件 ngIf 元素为空

Angular unit testing component ngIf element is null

unit-testing

jasmine

angular