如何在angular中创建测试用例来检查本地存储中是否存在值

Question

My组件.ts文件

ngOnInit((｛

if (localStorage.getItem('distanceUnit' + this.userMobile) == 'km') {
  this.toggleSlider = false;
}

}

setUnit((：void｛

if (this.toggleSlider) {
  this.toggleSlider = false;
  localStorage.setItem('distanceUnit' + this.userMobile, 'km');
} else {
  this.toggleSlider = true;
  localStorage.setItem('distanceUnit' + this.userMobile, 'mi');
}

}

我的测试用例在spec.ts文件中

it('Toggle button should be false in case distance unit km', () => {
        component.toggleSlider = false
        expect(component.toggleSlider).toBe(false);
    });

Answer 1

检查下面的代码以查找localStorage测试用例。

 beforeAll( () => {
    let data= {};
    const myLocalStorage = {
      getItem: (key: string): string => {
        return key in store ? store[key] : null;
      },
      setItem: (key: string, value: string) => {
        data[key] = `${value}`;
      },
      removeItem: (key: string) => {
        delete data[key];
      },
      clear: () => {
        data= {};
      }
    };
    spyOn(localStorage, 'getItem')
      .and.callFake(myLocalStorage .getItem);
    spyOn(localStorage, 'setItem')
      .and.callFake(myLocalStorage .setItem);
    spyOn(localStorage, 'removeItem')
      .and.callFake(myLocalStorage .removeItem);
    spyOn(localStorage, 'clear')
      .and.callFake(myLocalStorage .clear);
    localStorage.setItem('localStorageKey', 'value')
  })