Невозможно получить кнопку, используя fixture.debugElement.query для модульного теста - PullRequest
Новая
       20

Невозможно получить кнопку, используя fixture.debugElement.query для модульного теста

0 голосов
/ 05 июля 2018

Я пытаюсь проверить, что нажатие кнопки вызывает правильный метод. Когда я пытаюсь получить кнопку от debugElement, я получаю следующее исключение: 

TypeError: Cannot read property 'elementMatches' of null

footer.component.ts 

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { FeedbackModalComponent } from './feedback-modal/feedback-modal.component';
import { filter } from 'rxjs/internal/operators';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent {

  dialogRef: MatDialogRef<FeedbackModalComponent>;

  constructor(private dialog: MatDialog) {}

  openDialog() {

    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = '35%';
    dialogConfig.minWidth = '525px';

    this.dialogRef = this.dialog.open(FeedbackModalComponent, dialogConfig);
  }
}

footer.component.html 

<div class="footer">
        <a target="_blank" class="DataCenter-title">DataCenter Version 2.0.0.0</a>
        <button mat-raised-button (click)="openDialog()" id="feedback" data-toggle="modal" class="btn btn-info btn-lg mat-accent" data-target="#myModal2">Feedback?</button>
</div>

footer.component.spec.ts 

import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { MatDialog } from '@angular/material/dialog'
import { FooterComponent } from './footer.component';
import { MaterialModule } from '../../material/material.module';
import { FeedbackModalComponent } from './feedback-modal/feedback-modal.component';
import { By } from '@Angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ FooterComponent, FeedbackModalComponent ],
      imports: [MaterialModule, FormsModule, ReactiveFormsModule],
      providers: [MatDialog]
    })
    .compileComponents();
  }));

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

  /**
   * Unit Test to confirm that the FooterComponent can be created
   */
  it('should create', () => {
    expect(component).toBeTruthy();
  });

  /**
   * Unit Test to confirm that the FooterComponent has a Feedback button
   */
  it('should have a Feedback button', () => {
    const footerElement: HTMLElement = fixture.nativeElement;
    const button = footerElement.querySelector('button');
    expect(button.textContent).toContain('Feedback');
  });

  /**
   * Unit Test to confirm the button click calls the openDialog method
   */
  it('should call openDialog() when Feedback button is clicked', fakeAsync( () => {
    fixture.detectChanges();
    spyOn(component, 'openDialog') // method that is attached to the click

    console.log(fixture.debugElement);
    let feedbackButton = fixture.debugElement.query(By.css('#feedback')); // this line throws the exception
    console.log(feedbackButton);
    //feedbackButton.triggerEventHandler('click', null); // trigger the click event
    //tick(); // simulate a moment of time to wait for click event to finish
    //fixture.detectChanges(); // notify angular of any changes 
    //expect(component.openDialog).toHaveBeenCalled(); // validate that openDialog() was called
  }));
});

Я пробовал использовать разные селекторы CSS, но они тоже не работали 

let feedbackButton = fixture.debugElement.query(By.css('button'));

Когда я делаю console.log (fixture.debugElement), я могу найти кнопку в инспекторе chrome.

Я могу смоделировать нажатие кнопки, извлекая ее из nativeElement и вызывая click (), но мне любопытно, почему я не могу получить ее из debugElement. 

const footerElement: HTMLElement = fixture.nativeElement;
const button = footerElement.querySelector('button');
button.click();
...