How to mock a full cache?

[rdogmartin]

I'm writing a unit test for my service class and want to verify that it does not make an HTTP request when the cache is full. I think the key might be with mocking createRequestsCacheOperator:

const skipWhileCachedMock = <T>(
  key: 'appInfo',
  options?: { value?: 'none' | 'partial' | 'full' | undefined; returnSource?: Observable<any> | undefined },
) => {
  return (source: Observable<T>) => of(source);
};

But I'm not sure how to write the implementation so the code thinks the cache is full. Been staring at your source code and trying a bunch of things with no success.

---

export interface AppInfo {
  versionNumber: string;
}

app-info.repository.ts:

import { Injectable } from '@angular/core';
import { createState, Store } from '@ngneat/elf';
import { selectActiveEntity, setActiveId, setEntities, withActiveId, withEntities } from '@ngneat/elf-entities';
import { createRequestsCacheOperator, updateRequestCache, withRequestsCache } from '@ngneat/elf-requests';
import { filter, map } from 'rxjs';
import { AppInfo } from 'src/app/shared/models/api/model';

@Injectable({
  providedIn: 'root',
})
export class AppInfoRepository {
  public readonly appInfoId = 'appInfo';
  private readonly state = createState(
    withEntities<AppInfo, 'versionNumber'>({ idKey: 'versionNumber' }),
    withRequestsCache<typeof this.appInfoId>(),
    withActiveId(),
  );
  private readonly store = new Store({ name: this.appInfoId, state: this.state.state, config: this.state.config });
  public skipWhileAppInfosCached = createRequestsCacheOperator(this.store);

  public readonly activeAppInfo$ = this.store.pipe(selectActiveEntity()).pipe(
    filter((appInfo) => !!appInfo),
    map((appInfo) => appInfo as AppInfo),
  );

  public setActiveAppInfo(appInfo: AppInfo) {
    this.store.update(updateRequestCache(this.appInfoId), setEntities([appInfo]), setActiveId(appInfo.versionNumber));
  }
}

app-info.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, Observable, of, switchMapTo, tap } from 'rxjs';
import { AppInfo } from 'src/app/shared/models/api/model';
import { AppInfoRepository } from 'src/app/shared/repositories/app-info.repository';

@Injectable({
  providedIn: 'root',
})
export class AppInfoService {
  public constructor(private http: HttpClient, private appInfoRepository: AppInfoRepository) {}

  /** Returns information about the currently running application. If the information does not exist in
   * the browser's cache, it is retrieved from the server and inserted into the cache prior to returning.
   */
  public getAppInfo(): Observable<AppInfo> {
    return this.http.get<AppInfo>('https://localhost:7107/api/appinfo').pipe(
      tap((appInfo) => this.appInfoRepository.setActiveAppInfo(appInfo)),
      this.appInfoRepository.skipWhileAppInfosCached(this.appInfoRepository.appInfoId, { returnSource: of(null) }), // Needs returnSource or else control won't pass to next line when cache is populated
      switchMapTo(this.appInfoRepository.activeAppInfo$),
    );
  }
}

app-info.service.spec.ts:

import { HttpClient } from '@angular/common/http';
import { firstValueFrom, Observable, of } from 'rxjs';
import { AppInfoRepository } from 'src/app/shared/repositories/app-info.repository';
import { anything, instance, match, mock, verify, when } from 'ts-mockito';
import { AppInfo } from '../../models/api/model';
import { AppInfoService } from './app-info.service';

describe('AppInfoService', () => {
  let service: AppInfoService;
  let httpClientMock: HttpClient;
  let appInfoRepositoryMock: AppInfoRepository;

  beforeEach(() => {
    httpClientMock = mock(HttpClient);
    appInfoRepositoryMock = mock(AppInfoRepository);
    service = new AppInfoService(instance(httpClientMock), instance(appInfoRepositoryMock));
  });

  describe('getAppInfo()', () => {
    let expected: AppInfo;
    const skipWhileCachedMock = <T>(
      key: 'appInfo',
      options?: { value?: 'none' | 'partial' | 'full' | undefined; returnSource?: Observable<any> | undefined },
    ) => {
      return (source: Observable<T>) => of(source);
    };

    beforeEach(() => {
      expected = {
        versionNumber: '0.1.0',
      };
      when(httpClientMock.get(anything())).thenReturn(of(expected));
      when(appInfoRepositoryMock.skipWhileAppInfosCached).thenReturn(skipWhileCachedMock);
      when(appInfoRepositoryMock.activeAppInfo$).thenReturn(of(expected));
    });

    it('should NOT query the API when the item is already in cache', async () => {
      await firstValueFrom(service.getAppInfo());
      verify(httpClientMock.get(match('/api/appinfo'))).never(); // This fails because elf detects that cache is empty
    });
  });
});

[NetanelBasal]

Why do you need a mock? You can update the cache using the store.

[NetanelBasal]

    it('should NOT query the API when the item is already in cache', async () => {
      await firstValueFrom(service.getAppInfo()); // Invokes the HTTP call
     // -------- Put a debugger here and see if that key is inside the store ------
      await firstValueFrom(service.getAppInfo()); // Should return from cache
      verify(httpClientMock.get(match('/api/appinfo'))).once(); // Fails with a message saying there were two HTTP calls
    });

[rdogmartin]

Yes, the appInfo key is there.

[NetanelBasal]

Can you create a small reproduction on stackblitz, please?

[rdogmartin]

Repo here: https://github.com/rdogmartin/fec-ui-poc/tree/feature/elf-133-repro

You should be able to open it in VSCode, npm install, then start the integrated debugger to see the behavior. Also, npm test will show the failing test.

I tried to set things up in stackblitz but couldn't figure out how to run the jest tests in them.

[NetanelBasal]

@rdogmartin it seems to be an issue with your mock library. I'm not familiar with it and can't help here. You can verify that the operator works fine by adding a log here:

      tap((appInfo) => {
        console.log('invoked')
        this.appInfoRepository.setActiveAppInfo(appInfo)
      }),

You'll see the log only once.