Как смоделировать сервис с помощью get () с указанным c форматом данных

Question

Я пишу юнит-тест для моего компонента и высмеиваю сервис, который делает http-запросы для моего компонента. Ответ имеет следующий формат:

{
  ContactActivityView :[
        {
           Code:"AB",
           IsActive:false,
        },
        {
           Code:"BC",
           IsActive:true,
        }
        ..
        ...
  ]
}

component.ts:

codesArray: ICodeModel[];

constructor(
private service: CodesService,
private messageService: MessageService) { }

ngOnInit() {
  this.getCodes();
}

getCodes() {
    this.service.getCodes()
      .subscribe((response: ICodeModel[] | []) => {
        this.codesArray = response['ContactActivityView'];
      },
      error => console.log(error)
    );
}

. html file:

 ..
  ...
    <div  class="message" *ngIf="codesArray.length === 0">
      No Data Found.
    </div>
    <div class="tbl-row" *ngFor="let code of codesArray">
      <div class="item">
        {{ code.Code }}
      </div>
      <div class="item">
        {{ code.IsActive }}
      </div>
  ..
  ...

service.ts:

getCodes(): Observable<ICodeModel[]> {
  return this._service.get(this.codeURL);
}

.spe c file:

Здесь MockCodeService - это смоделированный сервис, содержащий функцию getCodes().

class MockCodesService {
  getCodes(): Observable<ICodeModel[]> {
    return of([]);
  }
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        CodesComponent
      ],
      providers: [
        { provide: CommonCrudService, useClass: CommonCrudMockService },
        { provide: MessageService, useClass: MessageMockService },
        { provide: AppService, useClass: AppMockService },
        { provide: CodesService, useClass: MockCodesService }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

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

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

Проблема заключается в запуске теста , это дает мне TypeError: Cannot read property 'length' of undefined ошибку.

Это потому, что когда я подписываю данные в своем компоненте и сохраняю их в переменной массива, они становятся неопределенными.

И это потому, что MockCodesService getCodes() возвращает наблюдаемое из массива, но в моем компоненте service.getCodes() ожидает наблюдаемое от объекта со свойством ContactActivityView (формат ответа).

Поэтому я попытался взять постоянный объект и передать его в MockCodesService getCodes():

const testObject = {
  ContactActivityTypeID: 2,
  Code: 'AB',
  ContactActivityTypeName: 'Associate Claims #35',
  IsActive: false,
  IsSystemCode: false,
  InUse: null,
  IsVisible: false
};
..
...
getItems() {
  return of(
    {
      ContactActivityView : [testObject]
    }
  );
}

Но это не сработало и все еще получал неопределенную ошибку.

Пожалуйста, помогите. Спасибо.

Answer 1

component.ts

codesArray: ICodeModel[] = [];

getCodes() {
  this.service.getCodes().subscribe(
    (response: { ContactActivityView: ICodeModel[] }) => {
      this.codesArray = response.ContactActivityView;
    },
    error => console.log(error),
  );
}

component.spe c .ts

class MockCodesService {
  getCodes(): Observable<{ ContactActivityView: ICodeModel[] }> {
    return of({ ContactActivityView: [] });
  }
}