javascript - Angular 5 本地存储单元测试

Question

我在 Jasmin Karma Angular 测试中收到错误“ SyntaxError: Unexpected token u in JSON at position 0 ”。我意识到这个错误是由于本地存储 JSON 解析造成的。此外，我在 src/app/projects/project-details/project-details.component.spec.ts(77,40) 中收到“错误”：错误 TS2304：找不到名称“m”。' 在控制台中。

this.RowSelected = JSON.parse(localStorage['ProjectArray']);

我尝试将我的组件代码更改为以下内容，JSON U Token 似乎消失了，但似乎抛出了一个新错误，例如“Typerror：无法将属性 'projectId' 读取为 null”。有人可以帮我模拟我的应用程序的本地存储。谢谢。

this.RowSelected = JSON.parse(localStorage['ProjectArray'] || null);

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', () => {
  let component: ProjectDetailsComponent;
  let fixture: ComponentFixture<ProjectDetailsComponent>;

  
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule, BsDatepickerModule, HttpClientTestingModule, RouterTestingModule.withRoutes([]) ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      declarations: [ ProjectDetailsComponent ],
      providers: [StoreDataService, ProjectSearchService]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    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 & 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', () => {
    component.RowSelected = JSON.parse(m.getItem('ProjectArray'));
  });
});

标签： javascriptangularlocal-storagekarma-jasmine