@Input компонента модульного тестирования Angular. Обнаружение изменения значения

Используя компонент тестового хоста (это предлагаемая мной и Angular стратегия), вы можете добиться этой цели; ДАЖЕ С OnPush. Я позволил себе вольность в отношении того, что может делать ваш метод init — короче говоря, вам нужно установить заголовок дважды, потому что именно так вы написали свои изменения.

Html для простого компонента

<div id = "initStatus">initialized: {{initialized}}</div>

ts-файл

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

@Component({
  selector: 'my-child-component',

  templateUrl: './simple.component.html',
  styleUrl: './simple.component.css'
})
export class SimpleComponent implements OnChanges {
  initialized = false;
 
  @Input({ required: true }) input_title: String = '';

  ngOnChanges(changes: SimpleChanges): void {
    const simpleChange = changes['input_title'];
    if (simpleChange.previousValue && (simpleChange.currentValue !== simpleChange.previousValue)) {
      this.init(); // I WANT to test this method
    }
  }

  private init(): void {
    this.initialized = true;
  }
}

файл спецификации

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

import { SimpleComponent } from './simple.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component(({
  template: `<my-child-component [input_title] = "title"></my-child-component>`,
}))
class TestHostComponent {
  title = 'first title';

}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SimpleComponent, TestHostComponent]
    })
      .compileComponents();

    fixture = TestBed.createComponent(TestHostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should init', () => {
    const debugElement = fixture.debugElement.query(By.css('#initStatus'));
    expect(debugElement.nativeElement.textContent).toBe('initialized: false');

    component.title = 'second title'; // here is what you are missing
    fixture.detectChanges();
    expect(debugElement.nativeElement.textContent).toBe('initialized: true');
  });
});

Теперь давайте обсудим ngOnChanges. Он выполняется при КАЖДОМ ИЗМЕНЕНИИ, поэтому я полностью его избегаю, чтобы предотвратить проблемы с производительностью. Вот новый файл ts, который делает то же самое, но с установщиком и OnPush.

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

@Component({
  selector: 'my-child-component',

  templateUrl: './simple.component.html',
  styleUrl: './simple.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SimpleComponent {
  currentTitle: string
  initialized = false;

  @Input({ required: true }) set input_title(value: string) {
    const changed = !!this.currentTitle;
    this.currentTitle = value;
    if (changed) {
      this.init();
    }
  }

  private init(): void {
    this.initialized = true;
  }
}

Написав это таким образом, становится немного более очевидным, что ваш init вызывается только тогда, когда вы меняете существующий заголовок.

Удачи и приятного кодирования!