LocalStorageのテストで作ったmockのlengthの挙動がおかしい【angularCLI】

Question

前提・実現したいこと

angularCLIを使っています。
ブラウザのローカルストレージを使うサービスクラスのテストがしたいです。

試したこと

LocalStorageのテストなのでmockを作りました。
LocalStorageに3つのデータが入っていれば
LocalStorage.lengthは3が返ってくるはずで、実際のブラウザで試したら3が返ってきました。
しかしテストコードのmockだと3ではなく0が返ってきます。

TokenServiceのテストのここが怪しいと思ったんですが
文法的に問題なさそうでした。

      length: () => {
        return Object.keys(store).length;
      }

正しい挙動にするにはどうしたからよいですか。

TokenService

import {Injectable} from '@angular/core';

@Injectable()
export class TokenService {
  private TOKEN_KEY = 'id_token';

  constructor() {
  }

  setAccessToken(token: string) {
    localStorage.setItem(this.TOKEN_KEY, token);
  }

  getAccessToken(): string {
    return localStorage.getItem(this.TOKEN_KEY);
  }

  getAccessTokenNum() {
    return localStorage.length;
  }
}

TokenServiceのテスト

import {TestBed} from '@angular/core/testing';

import {TokenService} from './token-service.service';

describe('TokenService', () => {
  let service: TokenService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [TokenService]
    });
    service = TestBed.get(TokenService);

    let store = {};
    const mockLocalStorage = {
      getItem: (key: string): string => {
        return key in store ? store[key] : null;
      },
      setItem: (key: string, value: string) => {
        store[key] = `${value}`;
      },
      removeItem: (key: string) => {
        delete store[key];
      },
      clear: () => {
        store = {};
      },
      length: () => {
        return Object.keys(store).length;
      }
    };

    spyOn(localStorage, 'getItem')
      .and.callFake(mockLocalStorage.getItem);
    spyOn(localStorage, 'setItem')
      .and.callFake(mockLocalStorage.setItem);
    spyOn(localStorage, 'removeItem')
      .and.callFake(mockLocalStorage.removeItem);
    spyOn(localStorage, 'clear')
      .and.callFake(mockLocalStorage.clear);
    spyOn(localStorage, 'length')
      .and.callFake(mockLocalStorage.length);
  });

  it('should be created',
    () => {
      expect(service).toBeTruthy();
    });

  it('should store the token in localStorage',
    () => {
      service.setAccessToken('sometoken');
      expect(localStorage.getItem('id_token')).toEqual('sometoken');
    });

  it('should return stored token from localStorage',
    () => {
      localStorage.setItem('id_token', 'anothertoken');
      expect(service.getAccessToken()).toEqual('anothertoken');
    });

  it('should return stored token number from localStorage',
    () => {
      localStorage.setItem('id_token-0', 'aiu');
      localStorage.setItem('id_token-1', 'eo');
      localStorage.setItem('id_token-2', 'ka');
      expect(service.getAccessTokenNum).toEqual(3);
    });

  it('mock-length-test',
    () => {
      localStorage.setItem('id_token-0', 'aiu');
      localStorage.setItem('id_token-1', 'eo');
      localStorage.setItem('id_token-2', 'ka');
      expect(localStorage.length).toEqual(3);
    });
});

発生している問題・エラーメッセージ

5 specs, 2 failures
Spec List | Failures
TokenService should return stored token number from localStorage
Expected Function to equal 3.
Error: Expected Function to equal 3.
    at stack (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2455:17)
    at buildExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2425:14)
    at Spec.expectationResultFactory (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:901:18)
    at Spec.addExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:524:34)
    at Expectation.addExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:845:21)
    at Expectation.toEqual (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2369:12)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/token-service.service.spec.ts:67:41)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
TokenService mock-length-test
Expected 0 to equal 3.
Error: Expected 0 to equal 3.
    at stack (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2455:17)
    at buildExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2425:14)
    at Spec.expectationResultFactory (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:901:18)
    at Spec.addExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:524:34)
    at Expectation.addExpectationResult (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:845:21)
    at Expectation.toEqual (http://localhost:9876/absoluteC:/Users/gsakurai/IdeaProjects/Angular-practice/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2369:12)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/token-service.service.spec.ts:75:35)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.j

追記

LocalStorageのlengthはプロパティでした。
なのでspyOnは

    spyOnProperty(localStorage, 'length', 'get').and.returnValue(mockLocalStorage.length());

となるはずでした。
しかし、しかし、setItemで何を入れてもstore{}の数が0から変わりません、なぜでしょうか？

Answer 1

これでどうでしょう？
getAccessTokenNumという関数を実行してないので
「関数オブジェクト」と「3」を比べてます

expect(service.getAccessTokenNum).toEqual(3);
↓
expect(service.getAccessTokenNum()).toEqual(3);

mock-length-test
こちらはまだよくわかりません。。。
もうすこし調べてみます。