CODEWITHSUNDEEP
angularkarma-jasmineauth0
glitchbane
glitchbane

Reputation: 337

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

I have successfully implemented Auth0 authentication in my Angular 2 app following documentation. I have installed auth0-lock, and typings for both auth0 and auth0-lock via npm install.

My app works very well, successfully signing up and authenticating users.

However, my unit test always fails with "Auth0Lock is not defined". Here is my test code, which incorporates the suggestion of another SO user to declare the Auth0Lock as below (with no effect):

/* 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();
  });
});

I can't get past a very simple test to get to what I need to test because of this error.

I have tried import * from auth0, and import * from auth0-lock but no change.

Here is my error:

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 contains the following:

  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"
        }
    }
  );

Upvotes: 1

Views: 930

Answers (2)

André
André

Reputation: 12737

In my case (Angular2 app) I fixed it like this:

My auth.service.ts file:

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', {});
  (...)

My auth.service.spec.ts file:

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();
  }));
});

Upvotes: 1

glitchbane
glitchbane

Reputation: 337

Answering my own question- and providing more information:

I had begun implementing Auth0 by including the script on my index.html page. Therefore the authentication worked when the app was running.

But while I added the following to my test, I failed to add it to my actual service, which, while undergoing test, did not have access to the script loaded through the CDN:

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

After adding it to the service, everything works.

As part of my investigation, I looked closely at the reason why the .default is required. The d.ts file is different from most in that the module is declared at the very end, and uses the syntax 

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

as opposed to exporting it directly.

Upvotes: 2

Related Questions