AngularHTTP攔截器測驗失敗，而攔截器作業正常

我正在使用 karma-jasmine 為 angular-12 應用程式撰寫單元測驗。而且，我仍然在 HTTP 攔截器測驗中被阻止。這個攔截器的作用是在對服務器的任何請求的頭部添加一個令牌。它在瀏覽器上運行良好，添加了令牌，我得到了服務器的回應。但是，單元測驗失敗，并且在我的請求的標頭中找不到授權。

下面是我的測驗檔案的代碼，可能是什么問題，我該如何解決？

describe('JwtInterceptor', () => {
  let client: HttpClient;
  let httpTestingController: HttpTestingController;
  let interceptor: JwtInterceptor;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
      ],
      providers: [
        JwtInterceptor,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JwtInterceptor,
          multi: true
        }
      ],
    });
    client = TestBed.inject(HttpClient)
    httpTestingController = TestBed.inject(HttpTestingController);
    interceptor = TestBed.inject(JwtInterceptor);
  });

  it('should be created', () => { /** This test succeed */
    expect(interceptor).toBeTruthy();
  });

  it('should add an Authorization header',() => { /** This is the test that fails */
    client.get('my-api-url')
          .subscribe((response)=>{
            expect(response).toBeTruthy();
          })         
    const httpRequest = httpTestingController.expectOne('my-api-url');
    expect(httpRequest.request.headers.has('Authorization')).toEqual(true);
  });
});

uj5u.com熱心網友回復：

使用您的任何服務方法發出 http 請求。這一個它可以正確驗證攔截器。也不要忘記在 TestBed 配置中提供 apiUrl。

import {TestBed} from '@angular/core/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
import {API_URL, JwtInterceptor} from './jwt.interceptor';
import {DataService} from './data.service';

describe('JwtInterceptor', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;
  let service: DataService;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        DataService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JwtInterceptor,
          multi: true
        },
        {
          provide: API_URL,
          useValue: {apiUrl: 'localhost'}
        }]
    });
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
    service = TestBed.get(DataService);
// for localstorage mocking
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 = {};
  }
};
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);
});



  afterEach(() => {
    httpTestingController.verify();
  });



  describe('making http calls', () => {
    it('adds authorization header', () => {
      const apiUrl = TestBed.get(API_URL);
      service.getData().subscribe(response => {
        expect(response).toBeTruthy();
      });

  localStorage.setItem('auth_token', 'any auth token here');
  const authToken = localStorage.getItem('auth_token');
  const req = httpTestingController.expectOne(apiUrl   '/getData');
  expect(req.request.headers.has('Authorization')).toEqual(true);
  expect(req.request.headers.get('Authorization')).toEqual(`Bearer ${authToken}`);
  });
 });

});

標籤：

上一篇：存根異步函式時遇到問題

下一篇：在Java中正確使用mockitoArgumentCaptor？[復制]