Как добавить служебные переменные Angular 6+ в app-routing.module.spec.ts и проверить перенаправление маршрутизатора - PullRequest
Новая
       25

Как добавить служебные переменные Angular 6+ в app-routing.module.spec.ts и проверить перенаправление маршрутизатора

0 голосов
/ 11 февраля 2019

Я пытаюсь проверить, успешно ли перенаправлен пользователь, если для переменной authenticated установлено значение true.

Я пытался внедрить свой LoginService в beforeEach и установить authenticatedпеременная в ложь.Затем в модульном тесте установите для этой переменной значение true.Затем я ожидаю, что мой охранник обнаружит тот факт, что для authenticated установлено значение true, и, в свою очередь, перенаправит на страницу панели инструментов.

app-routing-module.spec.ts: 

import { LoginService } from './services/login.service';
import { Router } from "@angular/router";
import { RouterTestingModule } from '@angular/router/testing';
import { Location } from "@angular/common";
import { routes } from "./app-routing.module";
import { AppComponent } from './components/app.component';


describe('AppRoutingModule, () => {
      let location: Location;
      let router: Router;

  beforeEach(() => {
      TestBed.configureTestingModule({
          declarations: [AppComponent],
          providers: [LoginService]
      })

      router = TestBed.get(Router);
      location = TestBed.get(Location);
      fixture = TestBed.createComponent(AppComponent);
      router.initialNavigation();
  });

  beforeEach(inject([LoginService], (loginService: LoginService) => {
    loginService.authenticated = false;
  }))

  it('should redirect the user form the LoginComponent to the DashboardComponent if the user is already logged in', inject([LoginService](loginService: LoginService) => {
    loginService.authenticated = true;
    console.log(loginService);
    router.navigate([""]).then(() => {
      expect(location.path()).toBe("/dashboard");
    });
  }))
})

login.guard.ts: 

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { LoginService } from '../services/login.service';
import { Observable } from 'rxjs/index';


@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {

  constructor(private router: Router, private loginService: LoginService) { 
}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    console.log('checked authenticated guard');
    if (this.loginService.authenticated === true) {
      this.loginService.navigationState.next(true);
      return true;
    } else {
      this.router.navigate(['']);
      return false;
    }
  }
}

login.service.ts: 

public authenticated = false;

app-routing.module.ts: 

export const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: CurrentActivityComponent, canActivate: [LoginGuard] }
]

Я ожидаю, что тест пройден, перенаправив пользователя на «панель мониторинга», но он завершится неудачно с: Expected '/' to be '/dashboard'.

Я подозреваю, что это связано с тем, как я внедряю свой сервис.Но я не уверен, что я делаю неправильно.

1 Ответ

0 голосов
/ 11 февраля 2019

В вашем тесте вы переходите к основному маршруту (router.navigate([""])), который вообще не охраняется (другими словами, ваш охранник не вызывается).Охранник будет вызван, только если вы на самом деле попытаетесь получить доступ к охраняемому маршруту.Поэтому в вашем тесте вам нужно будет перейти на панель мониторинга (router.navigate(['dashboard'])), чтобы она прошла.

Чтобы добиться описанного вами поведения перенаправления, для этой цели вам нужно было бы добавить еще одну защиту дляпервый маршрут.

PS: Jasmine также поставляется со шпионами, которые позволяют вам отделить ваши тесты компонентов от реализации сервиса, указав возвращаемое значение метода сервиса.Они не работают с простыми свойствами (без getter / setter).Если у вас есть метод isAuthenticated в вашем сервисе, он будет выглядеть следующим образом: 

const loginService = fixture.debugElement.injector.get(LoginService);
spyOn(loginService, 'isAuthenticated').and.returnValue(true);

Шпионы ограничены для каждого ИТ-блока, что означает, что они не оказывают побочных эффектов на другие ваши тесты.

...