Как вызвать «подписку» Observable внутри класса угловых компонентов в тесте Жасмина? - PullRequest
Новая
       26

Как вызвать «подписку» Observable внутри класса угловых компонентов в тесте Жасмина?

0 голосов
/ 08 июля 2019

Я пытаюсь протестировать Компонент, который вызывает метод внутри Сервиса, вызывая Http вызов для извлечения данных.При попытке запустить тест, наблюдаемый метод никогда не генерирует данные и не подтверждает утверждения о том, что данные не определены.

Я пытался использовать FakeAsync, flush, tick и даже Jasmine-Marbles длясмоделируйте интервал времени, в течение которого наблюдаемое должно выдавать данные, а затем выполните тестирование.

uploads.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UploadsService {

  product: string;
  BASE_URL: string;

  constructor(private http: HttpClient, @Inject('user') private user: any) 
  {
    this.product = user.product;
    this.BASE_URL = `/upload/${this.product}/`;
  }

  retrieve(): Observable<any> {
    return this.http.get(this.BASE_URL + '/getFileList');
  }
}

uploads.component.ts

@Component({
  selector: 'app-uploads',
  templateUrl: './uploads.component.html',
  providers: [UploadsService]
})
export class UploadsComponent {

  isLoading: boolean = true;
  fileList;
  asOfDate;

  constructor(private uploadsService: UploadsService) {}

  public retrieveFiles() {
    this.uploadsService
      .retrieve()
      .finally(() => {
        this.isLoading = false;
      })
      .subscribe(
        data => {
          this.fileList = data['fileList'];
          this.asOfDate = data['asofDate'];
        },
        error => {
          console.log('Error Occurred!');
        }
      );
  }
}

uploads.component.spec.ts

function mockUser() {
  return {
    product: 'stackoverflow'
  }
}

describe('Uploads Component', () => {

    let component: UploadsComponent;
    let fixture: ComponentFixture<UploadsComponent>;
    let service: UploadsService;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        declarations: [UploadsComponent],
        providers: [
          { provide: 'user', useValue: mockUser },
          { 
            provide: UploadsService,
            useValue: new UploadsService(null, mockUser)//is this right to do?
          }
        ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
      }).compileComponents();
    }));

    beforeEach(() => {
      fixture = TestBed.createComponent(UploadsComponent);
      component = fixture.componentInstance;
      service = TestBed.get(UploadsService);
    });

    // Tests that failed
    it('service retrieve method was called', () => {
      spyOn(service, 'retrieve');
      component.retrieveFiles();
      expect(service.retrieve).toHaveBeenCalled();
    });

    it('retrieve returns expected asOfDate', () => {
      spyOn(service, 'retrieve')
        .and.returnValue(Observable.of({ asOfDate: '7/7/2019'}));
      component.retrieveFiles();
      expect(component.asOfDate).toBe('7/7/2019'); //asOfDate was 'undefined'
    })
});

Два базовых модульных теста, которые я пытаюсь использовать для проверки retrieveFiles метода в UploadsComponent, не удаются.

Я пытался использовать ниже: 1) fixture.detectChanges()2) Использование FakeAsync и tick для имитации времени.

Эти решения не сработали для меня.Любые выводы будут великолепны.

...