title: Angular 5 Local Storage Unit Testing
body: <p>I am getting an error '<strong>SyntaxError: Unexpected token u in JSON at position 0</strong>'  in Jasmin Karma Angular testing. I recoginzed that this error is due to local storage JSON parsing. Also I am getting '<strong>ERROR in src/app/projects/project-details/project-details.component.spec.ts(77,40): error TS2304: Cannot find name 'm'.</strong>' in the console. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.RowSelected = JSON.parse(localStorage['ProjectArray']);</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried  changing my component code to the below, JSON U Token seems to gone but a new error seems to throw like 'Typerror: cannot read property 'projectId' as null'. Can someone help me in mocking local storage for my app. Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.RowSelected = JSON.parse(localStorage['ProjectArray'] || null);</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { ProjectDetailsComponent } from './project-details.component';
  import { FormsModule } from '@angular/forms';
  import { BsDatepickerModule } from 'ngx-bootstrap';
  import { ProjectSearchService } from '../../core/project-services/project-search.service';
  import { StoreDataService } from '../../core/project-services/store-data.service';
  import { RouterTestingModule } from '@angular/router/testing';
  import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  describe('ProjectDetailsComponent', () =&gt; {
    let component: ProjectDetailsComponent;
    let fixture: ComponentFixture&lt;ProjectDetailsComponent&gt;;
  
    
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [ FormsModule, BsDatepickerModule, HttpClientTestingModule, RouterTestingModule.withRoutes([]) ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
        declarations: [ ProjectDetailsComponent ],
        providers: [StoreDataService, ProjectSearchService]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(ProjectDetailsComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      function storageMock() {
      var storage = {};
        return {
        setItem: function(key, value) {
          storage[key] = value || '';
        },
        getItem: function(key) {
          return key in storage ? storage[key] : null;
        },
        removeItem: function(key) {
          delete storage[key];
        },
        get length() {
          return Object.keys(storage).length;
        },
        key: function(i) {
          var keys = Object.keys(storage);
          return keys[i] || null;
        }
      };
    }
      let mockConfig = JSON.stringify({
              projectId: "015104072",
              csj: "015104072",
              ccsj: "015104072",
              controlSection: "015104",
              projectType: "Construction",
              projectSubtype: "Roadway",
              district: "Austin",
              county: "Williamson",
              assignedTo: null,
              projectStatus: "Active",
              projectStage: "Ready to Let",
              projectClassification: "Intersection &amp; Operational Imprv",
              letScheduleFiscalYear: "2018",
              dateCreated: "2018-07-20",
              highway: "US 183"
    });
    //Set storage
   let m =  storageMock();
   m.setItem('ProjectArray', mockConfig);
    
      Object.defineProperty(window, 'localStorage', { value: m });
    });
  
    it('should create', () =&gt; {
      component.RowSelected = JSON.parse(m.getItem('ProjectArray'));
    });
  });</code></pre>
  </div>
  </div>
  </p>