Angular 角度集成测试：测试当其他组件发出事件时调用的函数，如何模拟事件数据？

在我的组件A中，我有一个基于组件B发出的数据更新视图的函数。我不想集成组件B并进行实际测试，即使这对于这个测试来说太复杂了

我只想调用函数并将数据传递给函数。问题是，将数据作为“事件”发送到组件A中的函数似乎不起作用：

  it('should update the video with the data from the edit component', () => {
    let event;
    event.title = 'New Title';
    event.description = 'New Description';
    event.link = 'New Link';
    event.videoCategory = 'New Category';
    event.categories = '2';
    event.a14Only = 0;

    component.updateVideoCard(event);
    fixture.detectChanges();

    expect(component.videoTitle).toBe('New Title');
    expect(component.videoLink).toBe('New Link');
    expect(component.videoDescription).toBe('New Description');
    expect(component.videoCategory).toBe('New Category');
    expect(component.categoryID).toBe('2');
    expect(component.a14Only).toBe('0');
    expect(component.editDisabled).toBeTruthy();
  });

而那个事件最终是“未定义的”。我还尝试将其制作为一个名为“event”的javascript对象，其中包含键值对，但也没有带来好运

组件.updateEvent（数据）代码：

---

我已经查看了DebugElement.triggerEvent，但不幸的是，文档已经过时，我自己也没有很好地弄明白如何做。似乎还需要集成第二个组件

我最终集成了这两个组件，并使用第二个组件的标准JSON对象触发它，如下所示：

describe('VideoCardComponent', () => {
  let component: VideoCardComponent;
  let fixture: ComponentFixture<VideoCardComponent>;
  let fixture2: ComponentFixture<EditVideoComponent>;
  let component2: EditVideoComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatCardModule,
        MatButtonModule,
        BrowserAnimationsModule,
        FontAwesomeModule,
        BrowserModule,
        FlexLayoutModule,
        RouterTestingModule,
        ReactiveFormsModule,
        FormsModule,
        MatSelectModule,
        MatOptionModule,
        MatInputModule,
        MatSlideToggleModule
      ],
      declarations: [VideoCardComponent, SafepipePipe, EditVideoComponent],
      providers: [
        { provide: RestService, useClass: RestStub },
        { provide: NotificationService, useClass: NotificationStub }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture2 = TestBed.createComponent(EditVideoComponent);
        fixture = TestBed.createComponent(VideoCardComponent);
        component = fixture.componentInstance;
        component2 = fixture2.componentInstance;
        fixture2.detectChanges();
        fixture.detectChanges();
      });
  }));

---

这看起来像是triggerEventHandler在类DebugElement中的一项工作：如果你发布组件的代码，我可以给你一个代码示例。你能与我们共享

component.updateVideoCard（event）

吗？@fmontes谢谢。我马上就来试试！当然我已经用这个代码编辑了我的文章。请注意，这是我们使用触发事件和数据的地方。Hi@SebastianG，我们需要看到的是组件本身的代码，而不是对它们的测试。你能提供那个代码吗？@fmontes它就在上面的线程中。

describe('VideoCardComponent', () => {
  let component: VideoCardComponent;
  let fixture: ComponentFixture<VideoCardComponent>;
  let fixture2: ComponentFixture<EditVideoComponent>;
  let component2: EditVideoComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatCardModule,
        MatButtonModule,
        BrowserAnimationsModule,
        FontAwesomeModule,
        BrowserModule,
        FlexLayoutModule,
        RouterTestingModule,
        ReactiveFormsModule,
        FormsModule,
        MatSelectModule,
        MatOptionModule,
        MatInputModule,
        MatSlideToggleModule
      ],
      declarations: [VideoCardComponent, SafepipePipe, EditVideoComponent],
      providers: [
        { provide: RestService, useClass: RestStub },
        { provide: NotificationService, useClass: NotificationStub }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture2 = TestBed.createComponent(EditVideoComponent);
        fixture = TestBed.createComponent(VideoCardComponent);
        component = fixture.componentInstance;
        component2 = fixture2.componentInstance;
        fixture2.detectChanges();
        fixture.detectChanges();
      });
  }));

it('should update the video with the data from the edit component', () => {
    const data = [
      {
        title: 'New Title',
        description: 'New Description',
        link: 'New Link',
        category: 'New Category',
        categories: '2',
        a14Only: 0
      }
    ];

    component2.updateVideoCard.subscribe(newVideo => {
      component.updateVideoCard(newVideo);
      expect(component.videoTitle).toBe('New Title');
      expect(component.videoLink).toBe('New Link');
      expect(component.videoDescription).toBe('New Description');
      expect(component.videoCategory).toBe('New Category');
      expect(component.categoryID).toBe('2');
      expect(component.a14Only).toBeFalsy();
      expect(component.editDisabled).toBeFalsy();
    });

    component2.updateLocalVideoData(data);

    fixture2.detectChanges();
    fixture.detectChanges();
  });