Mock localStorage for jasmine tests in TypeScript. This is the testing script. Copy the parts between snip and snap to mock your localStorage

localStorageMock.ts

/// <reference path="../../library.test.d.ts"/>
import * as angular from "angular"; angular;
import * as mocks from "angular-mocks/ngMock"; mocks;

describe('feat(localStorage Mock): ', function() {

  beforeAll(() => {
    angular.module('mock-module',[])
  });

  // --- snip ---
  // Mock localStorage
  beforeEach(() => {
    var store = {};

    spyOn(localStorage, 'getItem').and.callFake( (key:string):String => {
     return store[key] || null;
    });
    spyOn(localStorage, 'removeItem').and.callFake((key:string):void =>  {
      delete store[key];
    });
    spyOn(localStorage, 'setItem').and.callFake((key:string, value:string):string =>  {
      return store[key] = <string>value;
    });
    spyOn(localStorage, 'clear').and.callFake(() =>  {
        store = {};
    });
  });
  
  // --- snap ---

  beforeEach(()=> {
      angular.mock.module('mock-module');
  });

  it('should set an Item', () => {
    expect(localStorage.setItem('foo', 'bar')).toBe('bar'); // bar
    expect(localStorage.getItem('foo')).toBe('bar'); // bar
  });

  it('should return null for non existing items', () => {
    expect(localStorage.getItem('foo')).toBeNull(); // null
  });

  it('should set and remove Item', () => {
    expect(localStorage.setItem('foo', 'bar')).toBe('bar'); // bar
    expect(localStorage.removeItem('foo')).toBeUndefined(); // undefined
    expect(localStorage.getItem('foo')).toBeNull(); // null
  });

  it('should clear the storage', () => {
    expect(localStorage.setItem('foo', 'bar')).toBe('bar'); // bar
    expect(localStorage.setItem('bar', 'foo')).toBe('foo'); // foo
    expect(localStorage.clear()).toBeUndefined(); // undefined
    expect(localStorage.getItem('foo')).toBeNull(); // null
    expect(localStorage.getItem('bar')).toBeNull(); // null
  });
});

Nice job!

Very useful! Thank you!

Thank you for the gist!

Perfect! Thank you

can i use for angular 6+??

Question instead of using 1 by 1, could a json be used instead?

Hi guys, just recognized all you comments here.

Thank you very much!

@CarolinAraya: You should

@lcpautotester: Can you please elborate a little more what you are aiming to do differently?

Good Lord, I just saw this response, sorry.
I have have too many accounts. :)
my thought was import a JSON full of values into the mocked storage, instead of adding 1 at a time , then simply verify they exist in the storage. Like if you added lots of information from a API call.

That was my thought anyways :)

For sessionStorage

Using spyOn(sessionStorage, 'getItem') not worked for me.
This approach works well with Angular 7

beforeEach(() => {
    ...

    let store = {};
    const mockSessionStorage = {
      getItem: (key: string): string => key in store ? store[key] : null,
      setItem: (key: string, value: string) => store[key] = `${value}`,
      removeItem: (key: string) => delete store[key],
      clear: () => store = {}
    };

    spyOn(Storage.prototype, 'getItem').and.callFake(mockSessionStorage.getItem);
    spyOn(Storage.prototype, 'setItem').and.callFake(mockSessionStorage.setItem);
    spyOn(Storage.prototype, 'removeItem').and.callFake(mockSessionStorage.removeItem);
    spyOn(Storage.prototype, 'clear').and.callFake(mockSessionStorage.clear);
});