DebugElement не работает должным образом в моем примере тестирования Angular

Question

Я пытаюсь добавить некоторые тестовые коды в мой угловой образец .

. PostFormComponent включает в себя input привязку и output источник событий.

@Component({
  selector: 'app-post-form',
  templateUrl: './post-form.component.html',
  styleUrls: ['./post-form.component.css']
})
export class PostFormComponent implements OnInit, OnDestroy {
  @Input() post: Post = { title: '', content: '' };
  @Output() saved: EventEmitter<boolean> = new EventEmitter<boolean>();
  sub: Subscription;

  constructor(private postService: PostService) {}

  submit() {
    const _body = { title: this.post.title, content: this.post.content };

    if (this.post.id) {
      this.postService.updatePost(this.post.id, _body).subscribe(
        data => {
          this.saved.emit(true);
        },
        error => {
          this.saved.emit(false);
        }
      );
    } else {
      this.postService.savePost(_body).subscribe(
        data => {
          this.saved.emit(true);
        },
        error => {
          this.saved.emit(false);
        }
      );
    }
  }

  ngOnInit() {
    console.log('calling ngOnInit::PostFormComponent...');
  }

  ngOnDestroy() {
    console.log('calling ngOnDestroy::PostFormComponent...');
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }
}

Шаблон компонента:

<form id="form" #f="ngForm" name="form" class="form" (ngSubmit)="submit()">
   <p>
      <mat-form-field fxFlex>
          <input matInput
           id="title"
           name="title"
           #title="ngModel"
           [(ngModel)]="post.title"
           required/>
          <mat-error align="start" *ngIf="title.hasError('required')">
            Post Title is required
          </mat-error>
        </mat-form-field>
   </p>
  <p>
      <mat-form-field fxFlex>
          <textarea  matInput
            #content="ngModel"
            name="content"
            id="content"
            [(ngModel)]="post.content"
            rows="8"
            required
            minlength="10">
          </textarea>
          <mat-error align="start" *ngIf="content.hasError('required')">
              Post Content is required
          </mat-error>
          <mat-error align="start" *ngIf="content.hasError('minlength')">
            At least 10 chars
          </mat-error>
      </mat-form-field>
  </p>
  <p>
      <button mat-button mat-raised-button color="primary" type="submit" [disabled]="f.invalid || f.pending">  {{'save'}}</button>
  </p>

</form>

Я попытался добавить несколько тестов для этого компонента.

describe('Component: PostFormComponent(input & output)', () => {
  let component: PostFormComponent;
  let fixture: ComponentFixture<PostFormComponent>;
  let componentDe: DebugElement;
  let savePostSpy: jasmine.Spy;
  // Create a fake service object with spies
  const postServiceSpy = jasmine.createSpyObj('PostService', [
    'savePost',
    'updatePost'
  ]);

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BrowserAnimationsModule, SharedModule],
      declarations: [PostFormComponent],
      // provide the component-under-test and dependent service
      providers: [
        //   { provide: ComponentFixtureAutoDetect, useValue: true },
        { provide: PostService, useValue: postServiceSpy }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(PostFormComponent);
    component = fixture.componentInstance;
    componentDe = fixture.debugElement;
    fixture.detectChanges();
  });

  it('should raise `saved` event when the form is submitted (triggerEventHandler)', fakeAsync(() => {
    const formData = { title: 'Test title', content: 'Test content' };
    // trigger initial data binding
    component.post = formData;
    let saved = false;
    savePostSpy = postServiceSpy.savePost
      .withArgs(formData)
      .and.returnValue(of({}));
    // Make the spy return a synchronous Observable with the test data
    component.saved.subscribe((data: boolean) => (saved = data));

    // componentDe.triggerEventHandler('submit', null);
    component.submit();
    tick();
    fixture.detectChanges();

    expect(saved).toBeTruthy();
    expect(savePostSpy.calls.count()).toBe(1, 'savePost called');
  }));
});

Проблема заключается в том, что я использую componentDe.triggerEventHandler('submit', null), тест не пройден.Но звонок component.submit() работает хорошо.

Answer 1

Я думаю, что вы должны инициировать событие, нажав кнопку sumit

let submitButtonEL: DebugElement = fixture.debugElement.query(By.css('button'));
submitButtonEL.nativeElement.click()

Запуск субмивента формы напрямую с помощью form.triggerEventHandler('submit', null); не гарантирует, что существует способ пользовательского интерфейса для запуска события.Написание теста, который нажимает на кнопку submit и затем проверяет, запущен ли submitevent, гарантирует это

Answer 2

Вы хотите инициировать событие отправки на форме, а не на весь компонент, поэтому сначала используйте запрос, чтобы изолировать элемент формы:

const formElement = componentDe.query(By.css('form#form'));
formElement.triggerEventHandler('submit', null);