Угловой юнит-тест не дает ожидаемого результата

Question

Я начинаю угловые юнит-тесты с Жасмин и Кармой.Для проверки я написал небольшой компонент.Мой компонент выглядит следующим образом:

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

Похоже, ваш innerHTML возвращает строку с пробелом в конце.

Ожидается, что "Привет!" Будет "Привет!".

Проверкаваш шаблон для новой строки или пробела после {{ message }}.Многие из IDE сохраняют шаблон / файл с новой строкой в ​​конце.это может быть причиной проблемы.

Вы должны использовать {{message}} в промежутке или <p> таким образом, вы можете просто получить значение из тега html вместо того, чтобы получить весь шаблон и столкнуться с такимвыпуски.

EX:

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

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

Answer 2

Ожидается, что «Привет!» Будет «Привет!».

Как видите, после связанного сообщения есть пробел.

Похоже,в конце файла шаблона есть новая строка или любой другой символ пробела.