javascript - Angular2组件单元测试

Question

我正在尝试了解有关 Angular2 单元测试的更多信息。目前我无法在我的组件 html 模板中获取特定元素的数量。

我的组件

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'cl-header',
  templateUrl: 'cl-header.component.html',
  styleUrls: ['cl-header.component.css']
})
export class ClHeaderComponent implements OnInit {
  headerTitle: string = 'Some Title';
  constructor() {}

  ngOnInit() {
  }

}

组件html模板

<nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="#" class="fa fa-bars fa-2x"></a></li>
    <li><a href="http://localhost:91/UserHome/" class="fa fa-home fa-2x no-padding"></a></li>
  </ul>
  <div class="nav navbar-text-center">{{headerTitle}}</div>
  <a href="#" class="navbar-brand pull-right">
    <img src="app/components/cl-header/shared/logo.png" height="28px" alt="logo" />
  </a>
  <i>testtext</i>
</nav>

我的规范文件

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  injectAsync
} from '@angular/core/testing';

import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

import { ClHeaderComponent } from './cl-header.component';

describe('Component: ClHeader', () => {
  it('should display header title: "Some Title"', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ClHeaderComponent).then((fixture) => {
      fixture.detectChanges();

      var compiled = fixture.debugElement.nativeElement;

      //WORKING
      //To check that a given piece of text exists in the html template
      //expect(compiled.innerHTML).toContain('ul');
      //To check whether a given element type contains text
      //expect(compiled.querySelector('div')).toHaveText('Some Title');
      //END WORKING

      //NOT WORKING - ALWAYS RETURNS SUCCESS NO MATTER WHAT THE TOEQUAL COUNT IS          
      //To check that a given element by type exists in the html template
      expect(compiled.querySelector('div').length).toEqual(5);
    });
  }));
});

无论我将 toEqual 表达式设置为以下什么:期望(compiled.querySelector('div').length).toEqual(5);

测试将始终返回 true。

有没有人对如何在组件 html 模板中准确获取给定元素类型的计数有任何建议？

谢谢

Answer 1

感谢您的建议。

虽然 compiled.querySelector('div') 没有给出答案(使用 Angular Cli 种子和 vsCode)，但它确实是一个缓存问题，因为我现在能够使用 compiled.querySelectorAll('div ')

我认为我的困惑是由于缓存引起的，因为我最初尝试过 querySelectorAll。

附言。我无法将任何评论设置为答案，所以我不得不将其设置为自己回答。