Question

我有一个角度cli项目。

我想测试的HTML看起来像这样：

<div *ngIf="!isMobile" class="shop-description">
  {{ description }}
</div>
<div class="shop-link">
  <span>
    {{ link}}
  </span>
</div>

测试看起来像这样：

  beforeEach(() => {
    fixture = TestBed.createComponent(ShopItemComponent);
    component = fixture.componentInstance;
    component.shop = ShopServiceMock.shops[0];
    component.isMobile = false;
    fixture.detectChanges();
  });
  it('should have a title', () => {
        fixture.detectChanges();
        const el = fixture.debugElement.nativeElement;
        expect(el.querySelector('div.shop-title>span').innerText).toContain('test');
    });

  it('should have a description', () => {
        fixture.detectChanges();
        const el = fixture.debugElement.nativeElement;
        expect(el.querySelector('div.shop-description').innerText).toContain('love');
    });

使用命令' ng test '一切都过去了，没问题。

使用' npm run test：phantomjs - --code-coverage '对title元素的第一个测试通过，但对描述的测试失败了：

TypeError：null不是对象（评估 'el.querySelector（' div.shop-描述 '）。的innerText'）

Answer 1

如果具有* ngIf，则表示该元素不存在。这就是为什么在查找isMobile之前应首先将isMobile设置为false的原因。

Answer 2

我在component.isMobile = false;内移动it('should...并删除了错误。

我不知道为什么会这样，但如果有人有解释，我愿意接受他们的想法。

使用ngIf时，使用phantomjs进行的Karma测试失败

2 个答案: