如何对Observable.zip（observable1，observable2）进行单元测试

Question

I'm trying to unit test a component that uses a Observable.zip()

Service code

As you can see the BehaviorSubject is initialized with null but in the beforeAll of the test code I force him to return an Observable.of

export class ProfiloUtenteService extends BaseService<ProfiloDto> {
    public static readonly profiloKey = 'profiloUtente';

    private _$profilo = new BehaviorSubject<ProfiloDto>(null);
    public $profilo = this._$profilo.asObservable();

    protected get storedProfilo(): ProfiloDto {
        const profilo = this.storageService.retrieve(ProfiloUtenteService.profiloKey);
        return profilo ? profilo : null;
    }
    protected set storedProfilo(profilo: ProfiloDto) {
        this.storageService.store(ProfiloUtenteService.profiloKey, profilo);
        this._$profilo.next(profilo);
    }

    private emptyProfile = {
        addettoId: null,
        scope: Scope.none,
        selectedScope: Scope.none,
        ufficioId: null,
        provinciaUfficioId: null,
        addettoCognome: null,
        addettoNome: null
    };

    constructor(
        protected httpClient: HttpClient,
        protected appConfig: AppConfig,
        protected storageService: StorageService
    ) {
        super(httpClient, appConfig, appConfig.endpoints.addetto.api.baseUrl);

        const profilo = this.storedProfilo;
        if (profilo) {
            this._$profilo.next(profilo);
        }
    }

    public updateProfiloUtente(): void {
        const readProfilo = this.storedProfilo;
        if (readProfilo) {
            this._$profilo.next(readProfilo);
        }else {
            super.get((<AppConfig>this.appConfig).endpoints.addetto.api.routes.profilo)
                .takeLast(1)
                .do(profilo => {
                    if (!profilo) {
                        this._$profilo.next(this.emptyProfile);
                    }
                })
                .filter(profilo => !!profilo)
                .subscribe(profilo => {
                    profilo.selectedScope = Scope.all;
                    this.storedProfilo = profilo;
                });
        }
    }

    public setSelectedScope(scope: Scope) {
        const profilo = this.storedProfilo;
        if (profilo) {
            profilo.selectedScope = scope;
            this.storedProfilo = profilo;
        }
    }

    public setSelectedUfficioId(ufficioId: number, provinciaUfficioId?: number) {
        const profilo = this.storedProfilo;
        if (profilo) {
            profilo.ufficioId = ufficioId;
            profilo.provinciaUfficioId = provinciaUfficioId || null;
            this.storedProfilo = profilo;
        }
    }

    public logout() {
        this.storedProfilo = null;
    }
}

Component code

Here it blows up. When it subscribes to the Observable.zip and tries to fetch the result[1] from it, this result is NULL.

Observable.zip(
    this.ufficioService.getODataForCombo({ skip: 0 }),
    this.profiloUtenteService.$profilo)
    .takeWhile(() => this.isAlive)
    .subscribe(result => {
        result[0].forEach(office => this.availableOffices.push(office));

        // when this point is reached an error is thrown
        this.selectedOfficeId = result[1].ufficioId;             
        this.selectedOfficeDescription = this.availableOffices.find(office => office.id === this.selectedOfficeId).descrizione;
});

Cannot read property 'ufficioId' of null

It looks like the result[1] of the zipped observable doesn't return a value. I also tried to switch Observable.zip with Observable.combineLatest, but without any result. The error is the same.

The testing code:

beforeAll(() => {
        ufficioServiceMock = new UfficioService(null, fixedAppConfig);
        spyOn(ufficioServiceMock, 'getODataForCombo').and.returnValue(Observable.of([]));

        profiloUtenteServiceMock = new ProfiloUtenteService(null, fixedAppConfig, null);
        profiloUtenteServiceMock.$profilo = Observable.of({
            addettoId: 1,
            ufficioId: 1,
            provinciaUfficioId: 1,
            scope: 1,

            addettoNome: 'string',
            addettoCognome: 'string',

            selectedScope:  1
        });
    });

New testbed code version (changed the service $profilo into a getter)

Even converting the property $profilo into a getter and spying on it returning a value, nothing changes...

describe('PraticheSearchComponent', () => {
    let comp: PraticheSearchComponent;
    let fixture: ComponentFixture<PraticheSearchComponent>;
    let de: DebugElement;
    let el: HTMLElement;

    let ufficioServiceMock: UfficioService;
    let profiloUtenteServiceMock: ProfiloUtenteService;

    beforeAll(() => {
        ufficioServiceMock = new UfficioService(null, fixedAppConfig);
        spyOn(ufficioServiceMock, 'getODataForCombo').and.returnValue(Observable.of([]));

        profiloUtenteServiceMock = new ProfiloUtenteService(null, fixedAppConfig, null);
        spyOn(profiloUtenteServiceMock, '$profilo').and.returnValue(new BehaviorSubject({
            addettoId: 1,
            ufficioId: 1,
            provinciaUfficioId: 1,
            scope: 1,

            addettoNome: 'string',
            addettoCognome: 'string',

            selectedScope: 1
        }).asObservable());
    });
    //     profiloUtenteServiceMock.$profilo = new BehaviorSubject({
    //         addettoId: 1,
    //         ufficioId: 1,
    //         provinciaUfficioId: 1,
    //         scope: 1,

    //         addettoNome: 'string',
    //         addettoCognome: 'string',

    //         selectedScope: 1
    //     }).asObservable();
    // });

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                PraticheSearchComponent
            ],
            imports: [
                NgProgressModule,
                AuthModule.forRoot(),
                CustomHttpHeadersModule.forRoot(),

                SharedModule.forRoot(),

                ReactiveFormsModule,
                PatronatoSharedModule,
                FrameworkCoreModule.forRoot(),
                LoggerModule.forRoot(Level.LOG),
                MaterialModule,
                BrowserAnimationsModule,
                RouterTestingModule.withRoutes([])
            ],
            providers: [
                { provide: AppConfig, useValue: fixedAppConfig },
                { provide: LocalizationKeys, useValue: new LocalizationKeys() },
                { provide: ProfiloUtenteService, useValue: profiloUtenteServiceMock },
                { provide: NavbarService, useValue: new NavbarServiceMock() },
                { provide: PraticheSearchService, useValue: new PraticheSearchServiceMock() },
                { provide: UfficioService, useValue: ufficioServiceMock }
            ]
        }).compileComponents();

        fixture = TestBed.createComponent(PraticheSearchComponent);
        comp = fixture.componentInstance;
        de = fixture.debugElement;
        el = de.nativeElement;
    }));

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

Am I missing something? I'm on this problem since yesterday morning and I'm about to crash my workstation on the floor. Any help is really appreciated (by the machine :P)

Answer 1

Leaving aside the unit test, seems to me it's impossible for zip() to emit result where result[1] is null, unless this.profiloUtenteService.$profilo is emitting a null.

Quick test, try

this.profiloUtenteService.$profilo
  .filter(x => x)

Edit for service mock

When I use .and.returnValue I create the mock with jasmine,

const mockService  = jasmine.createSpyObj('ProfiloUtenteService ', ['$profilo']);
mockService.$profilo.and.returnValue(...)

Your code may be ok too, but above works for me.
Note that sometimes a dependency doesn't get created, but no error is raised. Perhaps the base class of the service is causing a fail, I can't see it in the providers list. Using a completely detach mock from jasmine will eliminate that.

Answer 2

Me dumb

Thanks to everyone who tried to figure this out.

Solution:

I was working on the wrong spec file. The tests where starting from app.component.spec.ts but the error was thrown from the pratiche.component.ts so I wrongly thought that the error were in the pratiche.component.spec.ts while the mock were required by the app.component.spec.ts Copy and pasting the code from a file to another fixed everything