如何使用 jasmine spy 为 window.location.pathname 编写单元测试？

Question

我有 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);
            this.router.navigate(['/autologin']);
          }
        }
        if (isAuthenticated) {
          this.navigateToStoredEndpoint();
        }
      });
    //console.log('windowPath',  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 },
        { provide: Router, 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 ', () => {
    spyOn(component.oidcSecurityService, '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();
        }
      });
   
  }

Answer 1

尝试添加如下内容：

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
});

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

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

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