Не удается прочитать свойство 'имя' из неопределенного в спецификации

Question

Я работаю над проектом Angular8, используя jest и jasmine в качестве конфигурации тестирования.

.ts

// all imports are done correctly

@Component({
  selector: 'app-xyz',
  templateUrl: './xyz.component.html',
  styleUrls: ['./xyz.component.scss']
})
export class XYZComponent implements OnInit {

  public info;
  public number;

  constructor(private InfoService: infoService ) {
  }

  ngOnInit() {
    this.getInfo();
  }

  public getInfo() {    
   this.info =  this.infoService.getData();   
   this.number = this.info.list[0].number;
  }

}

.spe c

// all imports are done 

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ //imports done ],
      declarations: [ XYZComponent],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(XYZComponent);
    component = fixture.componentInstance;

    component.info = {
      'list':
      [
        {
       'fName':'Eddy',
       'lName':'He',
       'number: 123
     }
    ]
  }; 
   component.ngOnInIt(); 
  });

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

});

Когда в .spe c файлах вызывается ngOnInit (), он выдает ошибки следующим образом:

● XYZComponent ›должен создать

TypeError: Cannot read property 'list' of undefined

  43 |    this.info =  this.infoService.getData();
> 44 |    this.number = this.info.list[0].number;
     |                               ^
  46 |   }

Answer 1

Даже если вы делаете:

component.info = {
  'list':
  [
    {
      'fName':'Eddy',
      'lName':'He',
      'number: 123
    }
  ]
};

Перед вызовом component.ngOnInit() этого будет недостаточно, потому что в вашем ngOnInit() методе вы делаете this.info = this.infoService.getData();, переопределяя ваш info свойство.

И я считаю, что в этом контексте c этот метод возвращает undefined.

Лучшим способом сделать это было бы издеваться над сервисом, предоставляя фиктивный getData метод, который возвращает данные, которые вы хотите обработать компонентом.

Или вы можете переместить this.info = this.infoService.getData() в конструктор, так как он не зависит от входных данных, и это сделает ваше переопределение работать правильно.