How to unit test AuthService in Angular SDK

Help
1

I have followed the documentation on Auth0 Angular SDK for Single Page Apps but there is no documentation on writing unit tests.

I have tried defining authService in my spec file as follows:
beforeEach(() => {
authService = TestBed.inject(AuthService);
}

But I get the following error:
NullInjectorError: R3InjectorError(DynamicTestModule)[AuthService → InjectionToken auth0.client → InjectionToken auth0.client]:
NullInjectorError: No provider for InjectionToken auth0.client!

Please let me know how to test the Angular SDK AuthService

2 Likes
2

Hey there!

We don’t have specific guidance on how to run tests for specific parts of our stack. We only offer general guidance on testing your integrations with Auth0 stack. More on that here:

3

Hello, thank you for the reply.

Is there a way to write the unit test cases for @auth0/auth0-angular SDK or are there any examples on this? I need to be able to mock the AuthService or test it in any possible way. I could not find anything on this based on the links.

1 Like
4

As I said above we don’t have content for each specific part of the stack, rather general content on testing with Auth0.

5

@Kia.kia Hello, have you solved this somehow? I have the same issue

1 Like
6

@Kia.kia & @andrew.p1 (and all others coming across this later):
I could solve this by making sure that I have the AuthModule.forRoot({...}) also in the imports array of the TestBed of each *.spec.ts file:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...,
        AuthModule.forRoot({
          domain: 'YOURTENANTDOMAIN.DATACENTER.auth0.com',
          clientId: '...',
        }),
      ],
    }).compileComponents(); // edit 1: this compileComponents() call is only needed if you have to import other components that require it to run the test

In further development of my current project I will try to learn more if you need to have valid credentials in there or not. I hope I will not forget to update this once I have done a bit more with it.

@konrad.sopala I am slightly disappointed that you don’t find anything about this in the Quickstarters that are provided - no hints, no examples, no best practices. Unit testing is nothing new or fancy, so having it included in your guides would be an improvement that we should not need to ask for…

3 Likes
7

Hey there Manuel! Totally understand that but in order to fight for it for you it will be best if you can create such topic providing all the necessary context in our Feedback category here:

1 Like
8

Did so, can be found here: Include unit-testing examples / best practices in documentation

2 Likes
9

Thanks a lot for that!

10

So actually, since this is a unit test, the external service doesn’t need to be invoked. Instead, as outlined at Angular, create a mock of the service. You can then manipulate your mock class attributes, trigger the detectChanges function and test your code’s reaction.

For example:

  /*
   * Stub for AuthService
   */
  let authStub: Partial <AuthService>;
  authStub = {
    isAuthenticated$: asyncData<boolean>(false)
  }

Note that isAuthenticated returns an Observable boolean, so you have to write a small function to wrap the value you want to set. Here’s the code that I put into my testing folder, courtesy of the documentation link referenced above:

/**
 * Create async observable that emits-once and completes
 * after a JS engine turn
 */
import { defer } from "rxjs";

export function asyncData<T>(data: T) {
    return defer(() => Promise.resolve(data));
  }

You can, of course, set other attributes of the service interface through this to set up your test conditions as needed.

Hope this helps,

Max

1 Like
11

Thank you, @max9. Looks like a good idea to approach the topic from this angle. :100: