Как правильно проверить угловые компоненты материала? - PullRequest
Новая
       9

Как правильно проверить угловые компоненты материала?

0 голосов
/ 31 марта 2019

Я пытаюсь использовать mat-error, и в основном он просто отображает сообщение об ошибке, если поле пустое. Я проверил его вручную с помощью ng-serve, и он отлично работает, но мне трудно получить элемент HTML, когда он появляется. Вот как выглядит мой код: 

<mat-form-field>
  <input type="number" matInput placeholder="Gain or Loss" class="gain-or-loss-input-field" [formControlName]="'gainOrLoss'">
  <mat-error *ngIf="entryForm.controls.gainOrLoss.errors && entryForm.controls.gainOrLoss.errors.required"
             class="gain-or-loss-required-error-message">
    Gain or Loss is <strong>required</strong>.
  </mat-error>
</mat-form-field>

// other code here...

<button mat-raised-button color="primary" class="add-report-button" (click)="addEntry()">Add Report</button>

Вот как выглядит мой тест: 

  let component: AddReportModalComponent;
  let fixture: ComponentFixture<AddReportModalComponent>;
  let pageDebug: DebugElement;
  let pageElement: HTMLElement;
  let entryService: EntryService;
  let entryServiceSpy: any;

  beforeEach(async(() => {
    entryServiceSpy = jasmine.createSpyObj('EntryService', [
      'fetchEntriesByStartDateEndDateAndCompany',
      'addEntry'
    ]);

    TestBed.configureTestingModule({
      declarations: [ AddReportModalComponent ],
      imports: [
        MatFormFieldModule,
        MatDatepickerModule,
        MatOptionModule,
        MatSelectModule,
        MatDialogModule,
        MatNativeDateModule,
        MatInputModule,
        BrowserAnimationsModule
      ],
      providers: [
        { provide: MatDialogRef, useValue:{}},
        { provide: EntryService, useValue: entryServiceSpy },
        { provide: DateService, useValue:{}}
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA
      ]
    }).compileComponents().then(() => {
      fixture = TestBed.createComponent(AddReportModalComponent);

      pageDebug = fixture.debugElement;
      pageElement = pageDebug.nativeElement;

      entryService = pageDebug.injector.get(EntryService);
      component = fixture.componentInstance;

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

  it('should display an error message if Gain or Loss field is null when the form is submitted.', async(() => {
    component.entryForm.controls.gainOrLoss.setValue(null);

    const addReportButton = pageDebug.query(By.css(addReportButtonSelector));
    addReportButton.nativeElement.click();

    fixture.detectChanges();

    fixture.whenStable().then(() => {
      const requiredErrorElement = pageDebug.query(By.css('.gain-or-loss-required-error-message'));
      expect(requiredErrorElement.nativeElement.innerText).toEqual('Gain or Loss is required.');
    });

  }));

Вот ошибка, которую я получаю: 

Failed: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of null
TypeError: Cannot read property 'nativeElement' of null
    at http://localhost:9876/_karma_webpack_/webpack:/src/app/stockmarket/portfolio/views/add-report-modal/add-report-modal.component.spec.ts:127:35
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:714:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:286:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)

Я заметил, когда я запускаю ng-test, ни одна из реальных анимаций не работает. Когда я попробовал это с простыми div и ngIf, тест проходит, но не получается, когда я использую угловой материал.

Я попытался добавить console.log, чтобы увидеть, действительно ли там есть элемент (.gain-or-loss-required-error-message), но он просто нулевой. Ни одна из анимаций тоже не работает, это нормально?

Я помню, что в другом проекте мы использовали загрузчик, и мои тесты нажимали кнопки и отображали правильные сообщения об ошибках, это было не очень сложно, даже анимация запускалась во время выполнения моих тестов. Извините, может я просто что-то упускаю. Я также попытался импортировать BrowserAnimationsModule в свой TestBed imports, потому что я подумал, что, возможно, причина, по которой я не мог подобрать элемент, заключалась в том, что анимации не запускались, но на самом деле ничего не делали. Извините, но чего мне не хватает?

...