Ошибка при выполнении углового модульного тестирования - PullRequest
Новая
       10

Ошибка при выполнении углового модульного тестирования

0 голосов
/ 06 июня 2018

Я сталкиваюсь с ошибкой при выполнении модульного тестирования Angular.Я пытаюсь протестировать создание компонента. Пожалуйста, посмотрите файл ошибки ниже, и дайте мне знать, почему я сталкиваюсь с этим, я также импортирую услуги, связанные с поставщиками и импортом для модуля.пока юнит тестирование.Я думаю, что мне чего-то не хватает 

TypeError: Cannot read property 'userName' of undefined
at Object.eval [as updateRenderer] (ng:///DynamicTestModule/ProfilePersonalInformationComponent.ngfactory.js:72:38)
at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/esm5/core.js?:14909:21)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14023:14)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)

Чтобы устранить вышеуказанную ошибку, я создал класс PerosnalInfoStub, но он не работал.

файл component.spec.ts 

describe('ProfilePersonalInformationComponent', () => {
  let component: ProfilePersonalInformationComponent;
  let fixture: ComponentFixture<ProfilePersonalInformationComponent>;
  let personalInfo : PersonalInfo;

  class PersonalInfoStub{
      personalInfo: Subject<any[]> = new Subject<any[]>();



  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({

        imports: [FormsModule, SharedModule, HttpModule, BrowserModule],
      declarations: [ ProfilePersonalInformationComponent ],
      providers: [
        {
           provide: PersonalInfo, useClass: PersonalInfo
        },

        {
            provide: NotificationService, useClass: NotificationService
        },

        {
            provide: LoginService, useClass: LoginService
        },
        {
            provide: ConfigService, useClass: ConfigService
        }

    ],


    })
    .compileComponents();
  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
  });

  it('should create', () => {

    expect(component).toBeTruthy();
  });

personal-info.ts 

export class PersonalInfo {
  userName: string;
}

файл класса компонента 

ProfilePersonalInformationComponent implements OnInit {




  @Input() personalInfo: PersonalInfo;
  @Input() loadingData;
  savingData: boolean;

  passwordHelpTextArray: string[];
  passwordHelpText: string;
  formErrors: any = {
    username: {
      error: '',
      errorMessage: ''
    },
    currentPassword: {
      error: '',
      errorMessage: ''
    },
    newPassword: {
      error: '',
      errorMessage: ''
    },
    verifyNewPassword: {
      error: '',
      errorMessage: ''
    }
  };

  updatedUsername: string = '';
  existingPassword: string = '';
  newPassword: string = '';
  reEnterNewPassword: string = '';

  constructor(private personalInfoService: PersonalInformationService,
    private notificationService: NotificationService) { }

  ngOnInit(): void {
    this.populateInfo();
  }

  populateInfo() {
    setTimeout(() => {
      if (this.loadingData === false) {
        this.updatedUsername = this.personalInfo.userName;
      } else {
        this.populateInfo();
      }

    }, 500);
  }

HTML-код для имени пользователя 

 <div class="col-sm-2">
        <h3>Username</h3>
        <p>{{personalInfo.userName}}</p>
      </div>
      <div class="col-sm-2">
        <h3>Password</h3>
        <p>********</p>
      </div>

1 Ответ

0 голосов
/ 06 июня 2018

При тестировании следует смоделировать данные компонента, особенно свойства @Input, которые обычно получают значение из родительского компонента.Но в модульном тестировании вам придется его самостоятельно смоделировать, потому что родительский компонент не задействован. 

beforeEach(() => {
    fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
    component = fixture.componentInstance;
    // mock input data
    component.personalInfo = {"userName" : "XYZ"};
    fixture.detectChanges();
});
...