Как я могу обойти вход auth0 для углового тестирования? - PullRequest
Новая
       13

Как я могу обойти вход auth0 для углового тестирования?

0 голосов
/ 21 мая 2019

Я пытаюсь написать тесты для моего приложения Angular / Auth0.Когда в localStorage ничего нет или срок действия их токена истек, он направляет пользователя в домен auth0 для входа.Однако мне трудно издеваться над пользователем, чтобы обойти экран входа в систему auth0.

app.component.ts: 

export class AppComponent {
  constructor( public auth: AuthService) { auth.handleAuthentication() }
}

auth.service.ts: 

export class AuthService {
  authConfig = {
    clientID: //omitted for privacy,
    domain: //omitted for privacy,
    callbackURL: window.location.origin + '/home',
    apiUrl: //omitted for privacy
  }

  auth0 = new auth0.WebAuth({
    clientID: this.authConfig.clientID,
    domain: this.authConfig.domain,
    responseType: 'token id_token',
    audience: this.authConfig.apiUrl,
    redirectUri: this.authConfig.callbackURL,
    scope: 'openid profile email',
  })

  constructor() { }

  public login(): void {
    this.auth0.authorize()
  }

  public logout(): void {
    localStorage.removeItem('access_token')
    localStorage.removeItem('id_token')
    localStorage.removeItem('expires_at')
    this.login()
  }

  public handleAuthentication(): void {
    if( this.isAuthenticated() ) return

    // if the token is old, logout
    if(localStorage.getItem('expires_at') && !this.isAuthenticated()) { 
      this.logout()
    } else {
      this.auth0.parseHash((err, authResult) => {

        // if we didn't just log in, and we don't have an expiration token, login
        if(authResult === null && !localStorage.getItem('expires_at')) {
          this.login()
        }

        if(authResult && authResult.accessToken && authResult.idToken) {
          this.setSession(authResult)
        }
      })
    }
  }

  private setSession(authResult: any): void {
    // Set the time that the Access Token will expire at
    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime())
    localStorage.setItem('sub', authResult.idTokenPayload.sub)
    localStorage.setItem('email', authResult.idTokenPayload.sub.split('|')[2])
    localStorage.setItem('access_token', authResult.accessToken)
    localStorage.setItem('id_token', authResult.idToken)
    localStorage.setItem('expires_at', expiresAt)
  }

  // Check whether the current time is past the access token's expiration time
  public isAuthenticated(): boolean {
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'))
    return new Date().getTime() < expiresAt
  }
}

app.component.spec.ts: 

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ 
        RouterTestingModule,
        MaterialModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    console.log('inside create app in app spec');
    expect(app).toBeTruthy();
  });
});

auth.service.spec.ts: 

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthService } from './auth.service';
import { DebugElement } from '@angular/core';

describe('AuthService', () => {
  let service: AuthService;
  let authSpy;
  let fixture: ComponentFixture<AuthService>;
  let debugElement: DebugElement;

  beforeAll( () => {
    const expiry = JSON.stringify(new Date().setHours(5));
    localStorage.setItem('sub', 'sub')
    localStorage.setItem('email', 'test@test.com')
    localStorage.setItem('access_token', '1234')
    localStorage.setItem('id_token', '1234')
    localStorage.setItem('expires_at', expiry);
  })

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule ],
      providers: [ AuthService ]
    });

    service = new AuthService();
    authSpy = spyOn(service, 'isAuthenticated').and.returnValue(true);
  });

  afterAll( () => {
    service = null;
  })

  it('should be created', () => {
    const service: AuthService = TestBed.get(AuthService);
    console.log('inside auth service spec');
    expect(service).toBeTruthy();
  });

  it ('should return true when all localStorage set', () => {
    //this is not returning true even if it gets to run, which 70% of the time it doesn't
    expect( service.isAuthenticated() ).toBeTruthy();
  });
});

Теперь, если я просто запускаю это вбраузер без тестов работает нормально.Вход в систему пользователя, маршрутизация их в / home.Но тесты выводят меня на экран входа в систему auth0 (возможно, до 2-6 тестов раньше), и если я использую вход в систему, он говорит 404: /home.

Кажется, я не могу найти хорошего тестированиядокументы для auth0, Angular и маршрутизации ... Любая помощь высоко ценится

1 Ответ

1 голос
/ 21 мая 2019

Вместо запуска auth.handleAuthentication() в constructor, запустите его в методе ngOnInit. Это позволяет вам создавать экземпляр компонента и тестировать его функциональность, не отправляя его для входа в систему.

Большая часть документации Angular, которую я прочитал, рекомендует этот подход и ограничивает объем кода, который делается в конструкторе в любом сервисе или компоненте.

...