# Dependency injection of aurelia-authentication during testing

**URL:** <https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243>\
**Category:** Help Requests\
**Created:** [February 7, 2019, 12:34pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243 "2019-02-07T12:34:19Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 7, 2019, 12:34pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/1 "2019-02-07T12:34:19Z")

</div>

I recently changed my app to use `aurelia-authentication`. This is injected normally into my services

`authentication-service.ts`

```auto
import { AuthService } from "aurelia-authentication";

@autoinject
export class AuthenticationService {
  constructor(private readonly authService: AuthService) { }

etc
}

```

`authService` is injected into all the classes that require it, e.g.

```auto
import { HttpClient } from "aurelia-fetch-client";
import { AuthenticationService } from "./authentication-service";

@autoinject
export class DictionaryService extends BaseFetchService<IDictionary> implements IBaseFetchService<IDictionary, IListItem> {
  
  constructor(
    http: HttpClient,
    authService: AuthenticationService,  
  ) {
    super("api/dictionary", http, authService);
  }
etc

```

My jest tests look like

```auto
import { HttpClient } from "aurelia-fetch-client";
import { Container } from "aurelia-framework";
import { CostingsService } from "../../src/services/costings-service";

describe("CostingsService", () => {
  let auContainer: Container;
  let sut: CostingsService;

  beforeEach(() => {
    auContainer = new Container();
    auContainer.registerInstance(HttpClient);
    sut = auContainer.get(CostingsService);
  });

```

While the application works perfectly, all my tests now fail with:

```auto
​​Error: Error invoking AuthService. Check the inner error for details.​​
    ​​------------------------------------------------​​
    ​​Inner Error:​​
    ​​Message: Cannot read property 'getItem' of undefined​​
    ​​Inner Error Stack:​​
    ​​TypeError: Cannot read property 'getItem' of undefined​​
    ​​ at Storage.get (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-authentication\dist\commonjs\aurelia-authentication.js:549:61)​​
    ​​ at new AuthService (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-authentication\dist\commonjs\aurelia-authentication.js:1196:43)​​
    ​​ at Object.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:473:12)​​
    ​​ at InvocationHandler.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:419:166)​​
    ​​ at Container.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:690:23)​​
    ​​ at StrategyResolver.get (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:52:36)​​
    ​​ at Container.get (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:617:39)​​
    ​​ at Object.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:467:31)​​
    ​​ at InvocationHandler.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:419:166)​​
    ​​ at Container.invoke (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-dependency-injection\dist\commonjs\aurelia-dependency-injection.js:690:23)​​
    ​​End Inner Error Stack​​
    ​​------------------------------------------------​​

```

I’ve tried `auContainer.registerInstance(AuthService)` but that doesn’t work.

Clearly I still haven’t quite grapsed how DI works with aurelia!

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [February 7, 2019, 12:44pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/2 "2019-02-07T12:44:00Z")

</div>

I think the overall documentation on building out tests with plugins is poor. I can’t seem to get validation working either. I think the answer here will help me

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 7, 2019, 1:07pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/3 "2019-02-07T13:07:22Z")

</div>

```auto
auContainer.registerInstance(HttpClient);

```

Can you check your code again here, to see if TS is giving any warning? `registerInstance` call takes 2 parameters: a key and an instance as value. What you did above is basically registering `undefined` as an instance of `HttpClient`, which I think matches pretty well with the error you logged 😄

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 7, 2019, 1:12pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/4 "2019-02-07T13:12:48Z")

</div>

`auContainer.registerInstance(HttpClient);`

Oh that has always worked brilliantly for me, because I am never interested in the results of calls to HttpClient. I’m only interested in the other methods in the class.

I just included this (as per your previous advice) to get the tests to run. Also I have never seen an error because of this.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 7, 2019, 1:32pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/5 "2019-02-07T13:32:45Z")

</div>

> Can you check your code again here, to see if TS is giving any warning? `registerInstance` call takes 2 parameters: a key and an instance as value. What you did above is basically registering `undefined` as an instance of `HttpClient` , which I think matches pretty well with the error you logged 😄

Actually it’s a bit wrong, it’s not `undefined`, but it will be the key itself. Sorry for that.

It’s the Authentication that requires Storge on `PLATFORM.global` to be setup properly that caused the issues, as you can see from here [https://github.com/SpoonX/aurelia-authentication/blob/master/src/storage.js#L12](https://github.com/SpoonX/aurelia-authentication/blob/master/src/storage.js#L12)

I guess you didn’t initialize platform proper before running your test, so I would suggest doing:

```ts
import { initialize } from 'aurelia-pal-browser'; // for karma

initialize();

// ... tests here

```

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 7, 2019, 1:38pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/6 "2019-02-07T13:38:06Z")

</div>

Sorry - I’m lost. I’m not using karma - I’m using jest.

My `jest-pretest.ts` is

```auto
import { Options } from "aurelia-loader-nodejs";
import { globalize } from "aurelia-pal-nodejs";
import "aurelia-polyfills";
import * as path from "path";
Options.relativeToDir = path.join(__dirname, "unit");
globalize();

```

I don’t even seem to have `aurelia-pal-browser` installed - at least typescript is telling me it can’t find it.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 7, 2019, 1:50pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/7 "2019-02-07T13:50:41Z")

</div>

I see, it’s fine to use `aurelia-pal-nodejs` and jest. What is lacking is `localStorage` API for `aurelia-authentication` to work, for this, I would suggest you try out this work from @huochunpeng [https://github.com/aurelia/cli/pull/1019](https://github.com/aurelia/cli/pull/1019) , it adds localstorage API to jsdom environement.

Can you give it a try?

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 7, 2019, 2:14pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/8 "2019-02-07T14:14:24Z")

</div>

I had a look but was completely lost. What am I supposed to try exactly? Do I need to download a new version of something?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 7, 2019, 8:28pm UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/9 "2019-02-07T20:28:40Z")

</div>

Morning,

Tbh, I’m not sure 😄 I’ll check and put together step by step, maybe.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 8, 2019, 2:06am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/10 "2019-02-08T02:06:27Z")

</div>

Sorry for late reply. Try this one, easier for you [https://github.com/aurelia/pal-nodejs/pull/34](https://github.com/aurelia/pal-nodejs/pull/34)

You can update your package.json with

```auto
"aurelia-pal-nodejs": "huochunpeng/pal-nodejs#upgrade-jsdom",

```

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 8, 2019, 7:58am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/11 "2019-02-08T07:58:33Z")

</div>

> [@huochunpeng](#):
>
> “aurelia-pal-nodejs”: “huochunpeng/pal-nodejs#upgrade-jsdom”

Brilliant! All working now.

Million thanks

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 8, 2019, 9:20am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/12 "2019-02-08T09:20:24Z")

</div>

Mind my branch might break when we are ready to merge.

I checked in all dist files changes for easy testing, but I will remove them when it’s ready to merge.

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [February 8, 2019, 9:32am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/13 "2019-02-08T09:32:21Z")

</div>

Do you mind posting here when you do the merge?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 8, 2019, 10:46am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/14 "2019-02-08T10:46:06Z")

</div>

Sure, I will let you know.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 4, 2020, 1:18am UTC](https://discourse.aurelia.io/t/dependency-injection-of-aurelia-authentication-during-testing/2243/15 "2020-03-04T01:18:52Z")

</div>

fyi, aurelia-pal-nodejs v2 is released with jsdom v15.