Question

我已经在我的Angular 2应用程序中成功实现了Auth0身份验证。我已经安装了auth0-lock，并通过npm install安装了auth0和auth0-lock。

我的应用效果非常好，成功注册并验证用户身份。

但是，我的单元测试始终失败，并且“未定义Auth0Lock”。这是我的测试代码，其中包含另一个SO用户的建议，以声明Auth0Lock如下（没有效果）：

/* tslint:disable:no-unused-variable */

import { TestBed, async, inject } from '@angular/core/testing';
import {AuthService} from "./auth.service";
import {RouterTestingModule} from "@angular/router/testing";
let Auth0Lock = require('auth0-lock').default;

describe('AuthService', () => {
  let service: AuthService = null;

  let router: any = {
    navigate: jasmine.createSpy('navigate')
  };

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

  beforeEach(inject([AuthService], (auth: AuthService) => {
    service = auth;
  }));

  it('should exist', () => {
    expect(service).toBeTruthy();
  });
});

由于这个错误，我无法通过一个非常简单的测试来获得我需要测试的内容。

我已尝试从auth0导入*，并从auth0-lock导入*但没有更改。

这是我的错误：

ReferenceError: Auth0Lock is not defined
    at new AuthService (webpack:///./src/app/features/user/authentication/auth.service.ts?:21:25)
    at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:175:67)
    at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:253:51)
    at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///./~/@angular/core/src/linker/ng_module_factory.js?:155:44)
    at TestBed.get (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:817:51)
    at eval (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:823:65)
    at Array.map (native)
    at TestBed.execute (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:823:33)
    at Object.eval (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:911:49)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:242:26)
    at ProxyZoneSpec.onInvoke (webpack:///./~/zone.js/dist/proxy.js?:79:39)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:241:32)
    at Zone.run (webpack:///./~/zone.js/dist/zone.js?:113:43)
    at Object.eval (webpack:///./~/zone.js/dist/jasmine-patch.js?:102:34)

fwiw，auth.service.ts？：21：25包含以下内容：

  lock = new Auth0Lock (mtmConfig.clientID, mtmConfig.domain, {
    allowedConnections: ['Username-Password-Authentication'],
    avatar: null,
    theme: {
          primaryColor: "#E79287",
          foregroundColor: "#000000",
          logo: "https://some real url/"
        },
    languageDictionary: {
          title: "the title"
        }
    }
  );

Answer 1

回答我自己的问题 - 并提供更多信息：

我已经开始通过在index.html页面上包含脚本来实现Auth0。因此，当应用程序运行时，身份验证仍然有效。

但是当我在测试中添加以下内容时，我无法将其添加到我的实际服务中，在进行测试时，该服务无法访问通过CDN加载的脚本：

let Auth0Lock = require('auth0-lock').default;

将其添加到服务后，一切正常。

作为调查的一部分，我仔细研究了.default需要的原因。 d.ts文件与大多数文件的不同之处在于模块在最后声明，并使用语法

declare module "auth0-lock" {
    export default Auth0Lock;
}

而不是直接导出。

Answer 2

在我的案例中（Angular2应用程序）我修复了它：

我的auth.service.ts文件：

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import Auth0Lock from 'auth0-lock'; // the fix

// forget this
// declare var Auth0Lock: any;

@Injectable()
export class AuthService {

  // Configure Auth0
  lock = new Auth0Lock('LXu6eVhR6kdiugITygiuyIUYGkjh', 'mydomain.auth0.com', {});
  (...)

我的auth.service.spec.ts文件：

import { TestBed, inject } from '@angular/core/testing';
import { AuthService } from './auth.service';

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

  it('should ...', inject([AuthService], (service: AuthService) => {
    expect(service).toBeTruthy();
  }));
});

Angular 2 Auth0应用程序工作正常，但测试抛出'Auth0Lock未定义'错误

2 个答案: