角茉莉花在route.navigate和window.location.reload上的测试失败

Question

我知道下面的错误

  An error was thrown in afterAll
  TypeError: this.router.navigate(...) is undefined in http://localhost:9876/_karma_webpack_/main.js (line 6552)
  59104/signOut/<@http://localhost:9876/_karma_webpack_/main.js:6552:25
  __tryOrUnsub@http://localhost:9876/_karma_webpack_/vendor.js:161782:16
  next@http://localhost:9876/_karma_webpack_/vendor.js:161721:22
  _next@http://localhost:9876/_karma_webpack_/vendor.js:161671:26
  next@http://localhost:9876/_karma_webpack_/vendor.js:161648:18
  subscribeToArray/<@http://localhost:9876/_karma_webpack_/vendor.js:166594:20
  _trySubscribe@http://localhost:9876/_karma_webpack_/vendor.js:161093:25
  subscribe@http://localhost:9876/_karma_webpack_/vendor.js:161079:22
  signOut@http://localhost:9876/_karma_webpack_/main.js:6547:38
  SignOutComponent@http://localhost:9876/_karma_webpack_/main.js:6544:14
  SignOutComponent_Factory@ng:///SignOutComponent/ɵfac.js:5:10
  hydrate@http://localhost:9876/_karma_webpack_/vendor.js:60414:35
  get@http://localhost:9876/_karma_webpack_/vendor.js:60233:33
  get@http://localhost:9876/_karma_webpack_/vendor.js:74309:33
  inject@http://localhost:9876/_karma_webpack_/vendor.js:83930:52
  inject@http://localhost:9876/_karma_webpack_/vendor.js:83826:37
  63231/</<@http://localhost:9876/_karma_webpack_/main.js:6499:80
  invoke@http://localhost:9876/_karma_webpack_/polyfills.js:600:26
  onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:167198:39
  invoke@http://localhost:9876/_karma_webpack_/polyfills.js:599:52
  run@http://localhost:9876/_karma_webpack_/polyfills.js:362:43
  runInTestZone@http://localhost:9876/_karma_webpack_/vendor.js:167478:34
  wrapTestInZone/<@http://localhost:9876/_karma_webpack_/vendor.js:167493:20
  <Jasmine>
  invokeTask@http://localhost:9876/_karma_webpack_/polyfills.js:634:31
  runTask@http://localhost:9876/_karma_webpack_/polyfills.js:406:47
  drainMicroTaskQueue@http://localhost:9876/_karma_webpack_/polyfills.js:810:35

当我在规范文件中运行下面的测试时

import { HttpClientModule } from '@angular/common/http';
import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { SessionStorageService } from '@shared/services/session-storage/session-storage.service';
import { SignOutComponent } from './signout.component';
import { SignInService } from '@shared/services/signin.service';
import { Router } from '@angular/router';
import { HomeComponent } from '../home/home.component';

describe('SignOut Component', () => {
  let component: SignOutComponent;
  let mockRouter: jasmine.SpyObj<Router>;
  let mockSignInService: jasmine.SpyObj<SignInService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [SignOutComponent],
      imports: [
        CommonModule,
        TranslateModule,
        RouterTestingModule,
        HttpClientModule,
        RouterTestingModule.withRoutes([
          {
            path: 'home',
            component: HomeComponent
          }
        ])
      ],
      providers: [
        SignOutComponent,
        {
          provide: Router,
          useValue: {
            navigate: jasmine.createSpy('navigate')
          }
        },
        {
          provide: SignInService,
          useValue: {
            signout: jasmine.createSpy('signout').and.returnValue(of({ token: 'accessToken', user: {} }))
          }
        },
        {
          provide: SessionStorageService,
          useValue: {
            get: jasmine.createSpy('get').and.returnValue(''),
            set: jasmine.createSpy('set').and.returnValue('')
          }
        }
      ]
    });
    component = TestBed.inject(SignOutComponent);
    mockRouter = TestBed.inject(Router) as jasmine.SpyObj<Router>;
    mockSignInService = TestBed.inject(SignInService) as jasmine.SpyObj<SignInService>;
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
    expect(mockSignInService.signout).toHaveBeenCalledTimes(1);
    expect(mockRouter.navigate).toHaveBeenCalled();
    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);
  });
});

不知道我错过了什么。

按照下面的链接，我尝试了一种不同的方法，但是它没有起作用。

Jasmine testcase for angular2 router.navigate()

下面是组件代码

import { Router } from '@angular/router';
import { SignInService } from '@shared/services/signin.service';
import { SessionStorageService } from '@shared/services/session-storage/session-storage.service';

@Component({
  selector: 'app-signout',
  templateUrl: './signout.component.html',
  styleUrls: ['./signout.component.scss']
})
export class SignOutComponent {
  constructor(private router: Router, private signInService: SignInService, private sessionStorageService: SessionStorageService) {
    this.signOut();
  }

  signOut() {
    this.signInService.signout().subscribe(res => {
      this.sessionStorageService.set('isUserSignedIn', 'false');
      this.sessionStorageService.set('token', '');
      this.sessionStorageService.set('athleteId', '');
      this.sessionStorageService.set('user', '');

      this.router.navigate(['/home']).then(() => {
        window.location.reload();
      });
    });
  }
}

我必须实现window.location.reload来强制页面重新加载，因为它没有重定向到正确的页面，

Answer 1

经过几次修改后，我才能让它发挥作用。

创建组件时的

• 控件，因为这就是在服务上调用此函数的
• 间谍，并在创建组件
• 之前设置返回的值，将窗口重新加载到一个新的函数/服务，这样您就可以监视而不是实际上在单元测试

中调用window.location.reload。

describe('SignOut Component', () => {
  let component: SignOutComponent;
  let mockRouter: jasmine.SpyObj<Router>;
  let mockSignInService: jasmine.SpyObj<SignInService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [SignOutComponent],
      imports: [
        CommonModule,
        TranslateModule,
        RouterTestingModule,
        HttpClientModule,
        RouterTestingModule.withRoutes([
          {
            path: 'home',
            component: HomeComponent
          }
        ])
      ],
      providers: [
        // usually don't need to provide the component here
        SignOutComponent,
        {
          provide: Router,
          useValue: {
            navigate: jasmine.createSpy('navigate')
          }
        },
        {
          provide: SignInService,
          useValue: {
            signout: jasmine.createSpy('signout').and.returnValue(of({ token: 'accessToken', user: {} })),
            // add this method only so we can spy on it and not call reload for real during the test
            reloadWindowLocation: jasmine.createSpy('reloadWindowLocation')
          }
        },
        {
          provide: SessionStorageService,
          useValue: {
            get: jasmine.createSpy('get').and.returnValue(''),
            set: jasmine.createSpy('set').and.returnValue('')
          }
        }
      ]
    });    
    // move creation to inside of the test - you can also move into a local function
  });

  it('should create the component', () => {
    // set up spies to return values BEFORE you create the component
    mockRouter = TestBed.inject(Router) as jasmine.SpyObj<Router>;
    mockSignInService = TestBed.inject(SignInService) as jasmine.SpyObj<SignInService>;
    // set router to resolve a promise, as you are wanting that to happen
    mockRouter.navigate.and.resolveTo(true);

    // now create the component
    component = TestBed.inject(SignOutComponent);
    // normally I do the following to create a component
    // const fixture = TestBed.createComponent(AppComponent);
    // const component = fixture.componentInstance;

    expect(component).toBeTruthy();
    expect(mockSignInService.signout).toHaveBeenCalledTimes(1);
    expect(mockRouter.navigate).toHaveBeenCalled();
    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);
    // move your window.location.reload to somewhere we can spy on it and not call it for real during the unit test
    expect(mockSignInService.reloadWindowLocation).toHaveBeenCalled();
  });
});

如果这对你不起作用，请告诉我。

Answer 2

实际上，我通过删除路由器并在需要导航时在组件中使用下面的代码来解决这个问题。

window.location.href = '/home';

然后，我在测试文件中添加了这个选项，以避免重新加载页面。

window.onbeforeunload = jasmine.createSpy();