如何使用茉莉花间谍为window.location.pathname编写单元测试？

如何解决如何使用茉莉花间谍为window.location.pathname编写单元测试？

我有angular 8应用程序，并且正在使用OidcSecurityService作为身份服务器。

我很忙，为此写一些单元测试。但是我陷入了以下代码部分：

 ngOnInit() {
    this.oidcSecurityService
      .checkAuth()
 
      .subscribe(isAuthenticated => {
        if (!isAuthenticated) {
          Eif ('/autologin' !== window.location.pathname) {
            this.write('redirect',window.location.pathname);
            this.router.navigate(['/autologin']);
          }
        }
        if (isAuthenticated) {
          this.navigateToStoredEndpoint();
        }
      });
    //console.log('windowPath',window.location.pathname);
  }

和完整的ts文件如下：

export class AppComponent implements OnInit {
  title = 'cityflows-client';
  constructor(public oidcSecurityService: OidcSecurityService,public router: Router) {}

  ngOnInit() {
    this.oidcSecurityService
      .checkAuth()

      .subscribe(isAuthenticated => {
        if (!isAuthenticated) {
          if ('/autologin' !== window.location.pathname) {
            this.write('redirect',window.location.pathname);
  }


  /**
   * Generate new set of access tokens for a http call
   */
  refreshSession() {
    this.oidcSecurityService.authorize();
  }

  /**
   * Redirect function for redirecting the user to the login page when application starts.
   */
  private navigateToStoredEndpoint() {
    const path = this.read('redirect');

    if (this.router.url === path) {
      return;
    }
    if (path.toString().includes('/unauthorized')) {
      this.router.navigate(['/']);
    } else {
      this.router.navigate([path]);
    }
  }

  /**
   *
   * @param key
   * For checking if user is authenticated for the URL
   * And if not will go back to root directory
   */
  private read(key: string): any {
    const data = localStorage.getItem(key);
    if (data != null) {
      return JSON.parse(data);
    }
    return;
  }

  /**
   *
   * @param key
   * @param value
   * for checking if url is the correct one
   */
  private write(key: string,value: any): void {
    localStorage.setItem(key,JSON.stringify(value));
  }
}

我的单元测试如下：

import { CommonModule } from '@angular/common';
import { TestBed,async,ComponentFixture } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { of } from 'rxjs';
import { AppComponent } from './app.component';
import { OidcSecurityServiceStub } from './shared/mocks/oidcSecurityServiceStub';
import { routes } from './app-routing.module';describe('AppComponent',() => {


  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let authenticatedService: OidcSecurityServiceStub;
  const routerSpy = { navigate: jasmine.createSpy('/autologin') };
  const routerNavigateSpy = { navigate: jasmine.createSpy('navigate') };

  let router: Router;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],providers: [
        { provide: OidcSecurityService,useClass: OidcSecurityServiceStub },{ provide: Router,useValue: routerSpy },useValue: routerNavigateSpy }
      ],declarations: [AppComponent]
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    authenticatedService = new OidcSecurityServiceStub();

    fixture.detectChanges();
  });

  it('should create the app',() => {
    expect(component).toBeTruthy();
  });

  it('Navigate if not authenticated',() => {
    spyOn(component.oidcSecurityService,'checkAuth').and.returnValue(of(false));
    component.ngOnInit();
    expect(routerSpy.navigate).not.toHaveBeenCalledWith(['/']);
    
  });

  it(' Should Navigate if not is root path ','checkAuth').and.returnValue(of(false));   
    component.ngOnInit();
    expect(routerSpy.navigate).not.toHaveBeenCalledWith('/autologin');
   
  }); 
});

但是在承保关系中，我在这条线上看到一个E：

   if ('/autologin' !== window.location.pathname) {

未采用其他路径。

那我要改变什么？

谢谢

我可以做到：

public href: string = '/';

然后：

  ngOnInit() {
    this.oidcSecurityService
      .checkAuth()

      .subscribe(isAuthenticated => {
        if (!isAuthenticated) {
          if ('/autologin' !== this.href) { 
            this.write('redirect',this.href);
            this.router.navigate(['/autologin']);
          }
        }
        if (isAuthenticated) {
          this.navigateToStoredEndpoint();
        }
      });
   
  }

解决方法

尝试添加如下内容：

it('should navigate to autologin',() => {
  const oldPathName = window.location.pathname;
  spyOn(component.oidcSecurityService,'checkAuth').and.returnValue(of(false));
  window.location.pathname = '/somethingElse'; // I am not sure if this will change the URL or not. 
// If it changes the URL in the browser,it can be bad.
  component.ngOnInit();
  expect(routerSpy.navigate).toHaveBeenCalledWith('/autologin');
  window.location.pathname = oldPathName; // restore it to the old version
});

您应该使用location.pathname，而不要使用ActivatedRoute。然后，您可以在单元测试中轻松模拟它。

https://angular.io/api/router/ActivatedRoute How to use ActivatedRoute in Angular 5?

或者甚至是路由器来获取当前URL。 Get current url in Angular