Angular 使用业力进行单元测试：会话存储 "cannot read property of undefined"

Question

我有一项服务，可在用户登录时将基本用户 "config" 信息存储在会话存储中。然后我在整个应用程序中调用该服务以在需要时 return 配置。

export class ClientConfigService {
  response: LoginConfig = initialClientConfig;
  private configResponse = new BehaviorSubject(this.response);
  configData = this.configResponse.asObservable();

  constructor(private apiService: ApiService) { }

  setSessionStorage(data: LoginConfig) {
    sessionStorage.setItem('client', JSON.stringify(data));
    this.configResponse.next(data);
  }

  getClientConfig(clientId: string) {
    const clientSetup =  { startUrl: `${environment.apiUrl}/${clientId}` };

    return this.apiService.post(`yd-core/npb/start`, clientSetup).subscribe((data: LoginConfig) => {
      this.configResponse.next(data);
    });
  }

  getPageData() {
    const sessionConfig: LoginConfig = JSON.parse(sessionStorage.getItem('config'));

    return sessionConfig.client.config;
  }

  getClientId() {
    const sessionConfig: LoginConfig = JSON.parse(sessionStorage.getItem('config'));

    return sessionConfig.client.clientId;
  }

  getCurrentUser() {
    const sessionConfig: LoginConfig = JSON.parse(sessionStorage.getItem('config'));

    return sessionConfig.user;
  }
}

当我运行 ng 测试时，我得到很多 TypeError: Cannot read property 'client' of null

的实例

我知道我需要模拟会话存储..我在这里尝试但没有效果

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

import { ClientConfigService } from './client-config.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ApiService } from './api.service';
import { initialClientConfig } from '../models/user';

describe('ClientConfigService', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    window.sessionStorage.setItem('client', JSON.stringify({client : {} })); 
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterModule.forRoot([]),
      ],
      providers: [
        ApiService
      ]
    })
  .compileComponents();
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  it('should be created', () => {
    const service: ClientConfigService = TestBed.get(ClientConfigService);
    expect(service).toBeTruthy();
  });
});

Answer 1

我可能遗漏了一些东西，但我觉得唯一一次设置 sessionStorage 是使用 'client' 键，但每次从 sessionStorage，您正在使用 'config' 键。能不能简单到你把钥匙弄错了？

Answer 2

我认为这更像是一个依赖注入问题。您希望这条线起作用：

  const service: ClientConfigService = TestBed.get(ClientConfigService);

当 ClientConfigService 不是您的测试模块的一部分时。此外，因为您的 ClientConfigService 依赖于 ApiService；您必须确保您已经满足 ApiService 服务的依赖要求。

理想情况下，在单元测试中，您应该一次只测试一件事。我建议您通过更改此测试来模拟您的 ApiService：

providers: [
        ApiService
      ]

对此：

providers: [
        {provide: ApiService, useValue: {"...mock properties here"}}
      ]

希望对您有所帮助，艾萨克

Answer 3

问题是我简单地命名了错误的密钥。我在做

window.sessionStorage.setItem('client', JSON.stringify({client : {} }));

而不是

window.sessionStorage.setItem('config', JSON.stringify(initialClientConfig))

Angular 使用业力进行单元测试：会话存储 "cannot read property of undefined"

Angular unit testing with karma: Session Storage "cannot read property of undefined"

unit-testing

karma-jasmine

angular