Angular 2 Auth0 应用程序工作正常但测试抛出 'Auth0Lock is not defined' 错误

Question

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

我的应用运行良好，成功注册并验证了用户。

但是，我的单元测试总是失败 "Auth0Lock is not defined"。这是我的测试代码，其中包含另一个 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();
  });
});

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

我试过 import * from auth0 和 import * from 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 is not defined' 错误

Angular 2 Auth0 app works fine but tests throw 'Auth0Lock is not defined' error

karma-jasmine

auth0

angular