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

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 不为空或不为空，因此 *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();
});