Насмешливое местное хранилище в угловых 7

Question

Я использовал localalstorage в моем приложении. основываясь на комментариях моего рецензента, вместо непосредственного использования localalstorage я создал ссылку на localalstorage и использовал ее в своем приложении. Это работает хорошо. но не мог (не знаю, как) издеваться над местным хранилищем, на которое ссылаются.

Вот мой код:

местные-хранения-ref.service.ts:

@Injectable()
export class LocalStorageRef {
  public getLocalStorage(): Storage {
    return localStorage;
  }
}

app.component.ts:

import { LocalStorageRef } from './shared/local-storage-ref.service';
...
export class AppComponent implements OnInit {
...
constructor(public ref: LocaStorageRef){
}
...
someFunction(){
...
this.ref.localStorageRef.getLocalStorage().setItem('somekey','sometext');
...
val = this.ref.localStorageRef.getLocalStorage().setItem('somekey');
...
}
}

Spec.ts:

import { LocalStorageRef } from './shared/local-storage-ref.service';
...
describe('#AppComponent', () => {
...
  let mockLocalStorageRef: jasmine.SpyObj<LocalStorageRef>;
...
 beforeEach(async(() => {
...
    mockLocalStorageRef = jasmine.createSpyObj('LocalStorageRef', ['getLocalStorage']);
    mockLocalStorageRef.getLocalStorage.and.callThrough();
...
}
it(){
...
}
}

Когда я запускаю контрольный пример. Я получаю сообщение об ошибке типа

TypeError: Cannot read property 'getItem' of undefined

Я знаю, что я издевался над getLocalStorage(), но я не знаю, как издеваться над setItem and getItem, который находится внутри getLocalStorage(). Любые выводы будут полезны. Спасибо.

Answer 1

Лучше использовать useClass для создания stub, который можно использовать повторно, когда вы используете LocalStorageRef в других компонентах:

LocalStorageRefStub

export class LocalStorageRefStub {

 const mockLocalStorage = {
  getItem: (key: string): string => {
    return key in store ? store[key] : null;
  },
  setItem: (key: string, value: string) => {
    store[key] = `${value}`;
  }
 };
 public getLocalStorage(){
    return mockLocalStorage;
  }

}

, а затем использовать его в component.spec.ts как:

  TestBed.configureTestingModule(
   {
     imports: [blahblah],
     providers: [{provide:LocalStorageRef, useClass: LocalStorageRefStub }],
    // and other properties......
   }
   )

Answer 2

Наконец-то я нашел решение самостоятельно.Проблема в том, что я издеваюсь над getLocalStorage, но не getItem and setItem.Поэтому я создал двух шпионов и высмеял getItem и setItem, как указано ниже.и это сработало !!!

код:

const mockLocalStorage = {
  getItem: (key: string): string => {
    return key in store ? store[key] : null;
  },
  setItem: (key: string, value: string) => {
    store[key] = `${value}`;
  }
};
...
localStorageRefServiceSpy = jasmine.createSpyObj('LocalStorageRef', ['getLocalStorage']);
getLocalStorageSpy = jasmine.createSpyObj('LocalStorageRef.getLocalStorage', ['getItem', 'setItem']);
localStorageRefServiceSpy.getLocalStorage.and.returnValue(getLocalStorageSpy);
getLocalStorageSpy.getItem.and.callFake(mockLocalStorage.getItem);
getLocalStorageSpy.setItem.and.callFake(mockLocalStorage.setItem);

Надеюсь, это кому-нибудь поможет.