Có cách nào để kiểm tra EventEmitter trong Angular2 không?

Tôi có một thành phần sử dụng EventEmitter và EventEmitter được sử dụng khi ai đó trên trang được nhấp vào. Có cách nào để tôi có thể quan sát EventEmitter trong quá trình kiểm tra đơn vị và sử dụng TestComponentBuilder để nhấp vào phần tử kích hoạt phương thức EventEmitter.next () và xem những gì đã được gửi không?

Bài kiểm tra của bạn có thể là:

it('should emit on click', () => {
   const fixture = TestBed.createComponent(MyComponent);
   // spy on event emitter
   const component = fixture.componentInstance; 
   spyOn(component.myEventEmitter, 'emit');

   // trigger the click
   const nativeElement = fixture.nativeElement;
   const button = nativeElement.querySelector('button');
   button.dispatchEvent(new Event('click'));

   fixture.detectChanges();

   expect(component.myEventEmitter.emit).toHaveBeenCalledWith('hello');
});

khi thành phần của bạn là:

@Component({ ... })
class MyComponent {
  @Output myEventEmitter = new EventEmitter<string>();

  buttonClick() {
    this.myEventEmitter.emit('hello');
  }
}

Bạn có thể sử dụng một gián điệp, tùy thuộc vào phong cách của bạn. Đây là cách bạn có thể dễ dàng sử dụng gián điệp để xem liệu emitcó bị đuổi việc ...

it('should emit on click', () => {
    spyOn(component.eventEmitter, 'emit');
    component.buttonClick();
    expect(component.eventEmitter.emit).toHaveBeenCalled();
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
});

Bạn có thể đăng ký bộ phát hoặc liên kết với nó, nếu nó là một @Output(), trong mẫu mẹ và kiểm tra thành phần mẹ xem liên kết đã được cập nhật chưa. Bạn cũng có thể gửi một sự kiện nhấp chuột và sau đó đăng ký sẽ kích hoạt.

Tôi đã có một yêu cầu để kiểm tra độ dài của mảng phát ra. Vì vậy, đây là cách tôi đã làm điều này trên các Câu trả lời khác.

expect(component.myEmitter.emit).toHaveBeenCalledWith([anything(), anything()]);

Mặc dù các câu trả lời được bình chọn cao nhất hoạt động, nhưng chúng không thể hiện các phương pháp kiểm tra tốt, vì vậy tôi nghĩ tôi sẽ mở rộng câu trả lời của Günter bằng một số ví dụ thực tế.

Hãy tưởng tượng chúng ta có một thành phần đơn giản sau:

@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!');
  }
}

Thành phần là hệ thống đang được thử nghiệm, do thám các phần của nó sẽ phá vỡ tính đóng gói. Kiểm tra thành phần góc chỉ nên biết về ba điều:

• DOM (được truy cập thông qua ví dụ fixture.nativeElement.querySelector);
• Tên của @Inputs và @Outputs; và
• Hợp tác dịch vụ (tiêm qua hệ thống DI).

Bất kỳ điều gì liên quan đến việc gọi trực tiếp các phương thức trên phiên bản hoặc theo dõi các phần của thành phần đều được kết hợp quá chặt chẽ với việc triển khai và sẽ gây thêm khó khăn cho việc tái cấu trúc - chỉ nên sử dụng bộ đôi thử nghiệm cho các cộng tác viên. Trong trường hợp này, vì chúng tôi không có cộng tác viên, nên chúng tôi không cần bất kỳ trò giễu cợt, gián điệp hoặc các bộ đôi thử nghiệm khác.

Một cách để kiểm tra điều này là bằng cách đăng ký trực tiếp với bộ phát, sau đó gọi hành động nhấp chuột (xem Thành phần với đầu vào và đầu ra ):

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!');
  });
});

Mặc dù điều này tương tác trực tiếp với cá thể thành phần, tên của thành @Outputphần là một phần của API công khai, vì vậy nó không được kết hợp quá chặt chẽ.

Ngoài ra, bạn có thể tạo một máy chủ thử nghiệm đơn giản (xem Thành phần bên trong máy chủ thử nghiệm ) và thực sự gắn kết thành phần của bạn:

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

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

sau đó kiểm tra thành phần trong ngữ cảnh:

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!');
  });
});

Đây componentInstancelà máy chủ thử nghiệm , vì vậy chúng tôi có thể tự tin rằng chúng tôi không kết hợp quá nhiều với thành phần mà chúng tôi đang thực sự thử nghiệm.