Как правильно тестировать CKEDITOR в TestBed - PullRequest
Новая
       35

Как правильно тестировать CKEDITOR в TestBed

0 голосов
/ 07 апреля 2020

Мне нужно убедиться, что текст в CKEDITOR совпадает с ожидаемым. Вот тест: 

import {async, ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
import {InfrastructureTaskEditDialogComponent} from './infrastructure-task-edit-dialog.component';
import {AsdsCoreModule} from "../../../@asds-core/asds-core.module";
import {CommonModule} from "@angular/common";
import {BsDatepickerModule} from "ngx-bootstrap";
import {CKEditor5, CKEditorComponent, CKEditorModule} from "@ckeditor/ckeditor5-angular";
import {NbDialogRef, NbDialogService} from "../../../@dialog";
import {NbDialogRefStub} from "../../../stabs/services/nb-dialog-ref-stub";
import {
  BankSystemService,
  MaintenanceInfrastructureService,
  MaintenanceRiskService,
  PersonService
} from "../../../@api-module";
import {MaintenanceInfrastructureServiceStab} from "../../stabs/maintenance-infrastructure.service.stab";
import {BankSystemServiceStub} from "../../../stabs/services/bank-system-service-stub";
import {MaintenanceRiskServiceStub} from "../../../stabs/services/maintenance-risk-service-stub";
import {PersonServiceStub} from "../../../stabs/services/person-service-stub";
import {Input} from "@angular/core";
import {NbDialogServiceStub} from "../../../stabs/services/nb-dialog-service-stub";
import {By} from "@angular/platform-browser";
import {DATE_PATTERN, DATE_TIME_PATTERN} from "../../../@asds-core/constants";
import * as moment from 'moment';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AsdsCoreModule,
        CommonModule,
        BsDatepickerModule.forRoot(),
        CKEditorModule],
      declarations: [InfrastructureTaskEditDialogComponent],
      providers: [
        {provide: NbDialogRef, useClass: NbDialogRefStub},
        {provide: NbDialogService, useClass: NbDialogServiceStub},
        {provide: BankSystemService, useClass: BankSystemServiceStub},
        {provide: PersonService, useClass: PersonServiceStub},
        {provide: MaintenanceRiskService, useClass: MaintenanceRiskServiceStub},
        {provide: MaintenanceInfrastructureService, useClass: MaintenanceInfrastructureServiceStab},
      ]
    }).compileComponents();

  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });



  it('should ckeditor field will be as expected', async(() => {
    fixture.detectChanges();        // update view with quote
    fixture.whenRenderingDone().then(() => {
      const appElement = fixture.debugElement.nativeElement;
      const planElement = appElement.querySelector('.ck-content');
      expect(planElement).not.toBeNull();
      expect(planElement.innerText).toEqual('plan1');
    });
  }));

});

Итак, я вижу, что текст ckeditor был визуализирован внутри "div", ведь у него был класс "ck-content". Но селектор appElement.querySelector ('. Ck-content') возвратился без каких-либо результатов, это сбивает с толку, насколько я видел, этот div в отладчике. И вопрос:

Как я могу гарантировать, что текст в ckeditor точно так же, как я ожидаю?

...