Question

我是Jasmine和Karma的Angular单元测试的入门者。为了测试，我写了一个小组件。我的组件如下：

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

@Component({
  selector: 'app-input',
  template: `{{ message }}`,
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
  @Input() message: string;

  constructor() { }

  ngOnInit() {
  }
}

我有以下测试样例来测试上述组件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { InputComponent } from './input.component';

describe('InputComponent', () => {
  let component: InputComponent;
  let fixture: ComponentFixture<InputComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ InputComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(InputComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should correctly render the passed @Input value', () => {
    component.message = 'Hi there';
    fixture.detectChanges();
    expect(fixture.debugElement.nativeElement.innerHTML).toBe('Hi there');
  });
});

没关系，测试会给出预期的结果。但是，当我将HTML分离到模板文件中时，测试运行器给出以下错误：

期望“嗨”到“嗨”。

分离后，我的组件和模板文件如下所示：

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
  @Input() message: string;

  constructor() { }

  ngOnInit() {
  }
}

我的模板文件的内容是：

{{ message }}

Answer 1

期望“嗨”到“嗨”。

如您所见，绑定的消息后面有一个空格字符。

在模板文件的末尾似乎有换行符或任何其他空格字符。

Answer 2

看起来您的innerHTML返回的字符串结尾处带有空格。

期望“嗨”到“嗨”。

在{{ message }}之后检查模板是否包含换行符或空格。许多IDE都以换行符结尾保存模板/文件。可能是造成问题的原因。

您应该在跨度或{{message}}中使用<p>，这样您就可以从html标记中获取值，而不是获取整个模板并遇到此类问题。

EX：

   const mypara = fixture.debugElement.query(By.css('#myParagraph')).nativeElement as HTMLElement;

   expect(mypara.innerText).toEqual('Hi there');

角单元测试未给出预期结果

2 个答案: