angular - 在 Angular 7 中模拟本地存储

Question

我在我的应用程序中使用了 localstorage。根据我的评论者的评论，我没有直接使用 localstorage，而是创建了 localstorage 的引用并在我的应用程序中使用。它运作良好。但不能(我不知道如何)模拟引用的本地存储。

这是我的代码:

本地存储ref.service.ts:

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

应用程序组件.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');
...
}
}

规范.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(){
...
}
}

当我运行测试用例时。我收到类似

的错误

类型错误:无法读取未定义的属性“getItem”

我知道我模拟了 getLocalStorage() 但我不知道如何模拟 getLocalStorage()< 中的 setItem 和 getItem/。任何线索都会有所帮助。谢谢。

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......
   }
   )