[unit-testing] Angular2에서 EventEmitter를 테스트하는 방법이 있습니까?

가장 많이 득표 한 답변이 작동하지만 좋은 테스트 관행을 보여주지 않으므로 몇 가지 실용적인 예를 통해 Günter의 답변 을 확장 할 것이라고 생각했습니다 .

다음과 같은 간단한 구성 요소가 있다고 가정 해 보겠습니다.

@Component({
  selector: 'my-demo',
  template: `
    <button (click)="buttonClicked()">Click Me!</button>
  `
})
export class DemoComponent {
  @Output() clicked = new EventEmitter<string>();

  constructor() { }

  buttonClicked(): void {
    this.clicked.emit('clicked!');
  }
}

구성 요소는 테스트중인 시스템이며 일부를 감시하면 캡슐화가 중단됩니다. 각도 구성 요소 테스트는 다음 세 가지만 알아야합니다.

• DOM (예 :를 통해 액세스 fixture.nativeElement.querySelector)
• @Inputs 및 @Outputs 의 이름 ; 과
• 협업 서비스 (DI 시스템을 통해 주입 됨).

인스턴스에서 직접 메서드를 호출하거나 구성 요소의 일부를 감시하는 것과 관련된 모든 것은 구현과 너무 밀접하게 연결되어 리팩토링에 마찰을 추가합니다. 테스트 이중은 공동 작업자에게만 사용해야합니다. 이 경우에는 공동 작업자가 없으므로 모의, 스파이 또는 기타 테스트 복식이 필요 하지 않습니다 .

---

이를 테스트하는 한 가지 방법은 이미 터를 직접 구독 한 다음 클릭 작업을 호출하는 것 입니다 (입력 및 출력이있는 구성 요소 참조 ).

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

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

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

  it('should emit when clicked', () => {
    let emitted: string;
    component.clicked.subscribe((event: string) => {
      emitted = event;
    });

    fixture.nativeElement.querySelector('button').click();

    expect(emitted).toBe('clicked!');
  });
});

이는 구성 요소 인스턴스와 직접 상호 작용하지만의 이름은 @Output공용 API의 일부이므로 너무 밀접하게 결합되어 있지 않습니다.

---

또는 간단한 테스트 호스트를 만들고 (테스트 호스트 내부의 구성 요소 참조 ) 실제로 구성 요소를 마운트 할 수 있습니다.

@Component({
  selector: 'test-host',
  template: `
    <my-demo (clicked)="onClicked($event)"></my-demo>
  `
})
class TestHostComponent {
  lastClick = '';

  onClicked(value: string): void {
    this.lastClick = value;
  }
}

그런 다음 컨텍스트에서 구성 요소를 테스트합니다.

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

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

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

  it('should emit when clicked', () => {
    fixture.nativeElement.querySelector('button').click();

    expect(component.lastClick).toBe('clicked!');
  });
});

은 componentInstance여기입니다 테스트 호스트 우리가 너무 우리가 실제로 테스트하고 구성 요소에 연결하지 않을 확신 할 수 있습니다.