[SOLVED] How to test a view with a named slot?

auNoob · January 22, 2018, 10:43pm

When I try to test a view that has a named slot, <template><div slot="content">...</div></template> I get an error:

LOG: 'Error: Error invoking SlotCustomAttribute. Check the inner error for details.
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
...

When I take the slot="content" off the div everything works fine when running the tests. What can I do in my tests to fake/stub out this slot since I don’t need it for my testing?

bigopon · January 22, 2018, 10:47pm

While it may give you the impression that error comes from slot, to me it feels like issue lies somewhere else. May I know how you set up the test ? And the error stack ?

auNoob · January 22, 2018, 10:54pm

Sure, I setup a vanilla project using au new using WebPack, TypeScript, and Karma.

Here’s my repo https://github.com/jholland918/au-demo/

In that repo, the test I’m having trouble with is home.spec.ts
import { StageComponent } from ‘aurelia-testing’;
import { bootstrap } from ‘aurelia-bootstrapper’;
import { Home } from ‘…/…/src/home’;

describe('home', () => {
  let component;

  beforeEach(() => {
    component = StageComponent
      .withResources('home')
      .inView('<home></home>');
  });

  it('says Lorem Ipsum', done => {
    component.create(bootstrap).then(() => {
      const messageElement = document.querySelector('.home-message');
      expect(messageElement.innerHTML).toBe('Lorem Ipsum');
      done();
    }).catch(e => { console.log(e.toString()) });
  });

  afterEach(() => {
    component.dispose();
  });
});

Here’s the output:

START:
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 0 of 2 SUCCESS (0 secs / 0 secs)
  the app
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 1 of 2 SUCCESS (0 secs / 0 secs)
LOG: 'Error: Error invoking SlotCustomAttribute. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (webpack-internal:///3:410:11)
    at Container.get (webpack-internal:///3:614:5)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at Object.invoke (webpack-internal:///3:466:31)
    at InvocationHandler.invoke (webpack-internal:///3:430:166)
    at Container.invoke (webpack-internal:///3:701:23)
    at ProviderResolver.get (webpack-internal:///1:2073:72)
    at Container.get (webpack-internal:///3:640:21)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at HtmlBehaviorResource.create (webpack-internal:///1:4115:56)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at HtmlBehaviorResource.create (webpack-internal:///1:4127:39)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at TemplatingEngine.enhance (webpack-internal:///1:4945:24)
    at eval (webpack-internal:///aurelia-framework:92:28)
    at Promise._execute (webpack-internal:///37:971:9)
    at Promise._resolveFromExecutor (webpack-internal:///37:3249:18)
    at new Promise (webpack-internal:///37:2845:10)
    at Aurelia.enhance (webpack-internal:///aurelia-framework:90:12)
    at eval (webpack-internal:///74:54:36)
    at tryCatcher (webpack-internal:///37:5256:23)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3278:31)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3220:14)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at eval (webpack-internal:///37:175:25)
    at MutationObserver.eval (webpack-internal:///37:4510:17)
End Inner Error Stack
------------------------------------------------
LOG: 'Error: Error invoking SlotCustomAttribute. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (webpack-internal:///3:410:11)
    at Container.get (webpack-internal:///3:614:5)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at Object.invoke (webpack-internal:///3:466:31)
    at InvocationHandler.invoke (webpack-internal:///3:430:166)
    at Container.invoke (webpack-internal:///3:701:23)
    at ProviderResolver.get (webpack-internal:///1:2073:72)
    at Container.get (webpack-internal:///3:640:21)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at HtmlBehaviorResource.create (webpack-internal:///1:4115:56)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at HtmlBehaviorResource.create (webpack-internal:///1:4127:39)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at TemplatingEngine.enhance (webpack-internal:///1:4945:24)
    at eval (webpack-internal:///aurelia-framework:92:28)
    at Promise._execute (webpack-internal:///37:971:9)
    at Promise._resolveFromExecutor (webpack-internal:///37:3249:18)
    at new Promise (webpack-internal:///37:2845:10)
    at Aurelia.enhance (webpack-internal:///aurelia-framework:90:12)
    at eval (webpack-internal:///74:54:36)
    at tryCatcher (webpack-internal:///37:5256:23)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3278:31)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3220:14)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at eval (webpack-internal:///37:175:25)
    at MutationObserver.eval (webpack-internal:///37:4510:17)
End Inner Error Stack
------------------------------------------------
'
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 1 of 2 SUCCESS (0 secs / 0 secs)
LOG: 'Error: Error invoking SlotCustomAttribute. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (webpack-internal:///3:410:11)
    at Container.get (webpack-internal:///3:614:5)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at Object.invoke (webpack-internal:///3:466:31)
    at InvocationHandler.invoke (webpack-internal:///3:430:166)
    at Container.invoke (webpack-internal:///3:701:23)
    at ProviderResolver.get (webpack-internal:///1:2073:72)
    at Container.get (webpack-internal:///3:640:21)
    at Container.elementContainerGet [as get] (webpack-internal:///1:2128:15)
    at HtmlBehaviorResource.create (webpack-internal:///1:4115:56)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at HtmlBehaviorResource.create (webpack-internal:///1:4127:39)
    at applyInstructions (webpack-internal:///1:2230:31)
    at ViewFactory.create (webpack-internal:///1:2451:7)
    at TemplatingEngine.enhance (webpack-internal:///1:4945:24)
    at eval (webpack-internal:///aurelia-framework:92:28)
    at Promise._execute (webpack-internal:///37:971:9)
    at Promise._resolveFromExecutor (webpack-internal:///37:3249:18)
    at new Promise (webpack-internal:///37:2845:10)
    at Aurelia.enhance (webpack-internal:///aurelia-framework:90:12)
    at eval (webpack-internal:///74:54:36)
    at tryCatcher (webpack-internal:///37:5256:23)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3278:31)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3220:14)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at Promise._resolveCallback (webpack-internal:///37:3198:57)
    at Promise._settlePromiseFromHandler (webpack-internal:///37:3290:17)
    at Promise._settlePromise (webpack-internal:///37:3335:18)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at Promise._fulfill (webpack-internal:///37:3404:18)
    at PromiseArray._resolve (webpack-internal:///37:3669:19)
    at PromiseArray._promiseFulfilled (webpack-internal:///37:3687:14)
    at Promise._settlePromise (webpack-internal:///37:3340:26)
    at Promise._settlePromise0 (webpack-internal:///37:3380:10)
    at Promise._settlePromises (webpack-internal:///37:3459:18)
    at eval (webpack-internal:///37:175:25)
    at MutationObserver.eval (webpack-internal:///37:4510:17)
End Inner Error Stack
------------------------------------------------
'
  home
Chrome 63.0.3239 (Windows 10 0.0.0) home says Lorem Ipsum FAILED
        Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
        Error: Cannot call ComponentTester.dispose() before ComponentTester.create()
            at ComponentTester.dispose (webpack-internal:///74:68:19)
            at Object.eval (webpack-internal:///157:21:19)
            at UserContext.asyncFn (webpack-internal:///153:122:61)
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0 secs / 0 secs)
Chrome 63.0.3239 (Windows 10 0.0.0) home says Lorem Ipsum FAILED
        Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
        Error: Cannot call ComponentTester.dispose() before ComponentTester.create()
            at ComponentTester.dispose (webpack-internal:///74:68:19)
            at Object.eval (webpack-internal:///157:21:19)
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (5.032 secs / 0 secs)

Finished in 5.032 secs / 0 secs @ 16:53:43 GMT-0600 (Central Standard Time)

SUMMARY:
√ 1 test completed
× 1 test failed

FAILED TESTS:
  home
    × says Lorem Ipsum
      Chrome 63.0.3239 (Windows 10 0.0.0)
    Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

stevies · June 17, 2018, 11:39am

Did you ever get this fixed? I am hitting the same problem - cannot test a view containing a slot.

Error: Unhandled promise rejection: Error invoking SlotCustomAttribute. Check the inner error for details.
	------------------------------------------------
	Inner Error:
	Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
	Inner Error Stack:
	Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

bigopon · June 17, 2018, 10:10pm

Yes its fixed. It will be released soon. The root issue is because platform code was not set to run before everything else in test env

Sayan751 · June 19, 2018, 10:25am

It’s great to know this is fixed

Is there any tentative release plan for the new versions? End of this month?

bigopon · June 19, 2018, 10:53pm

I think it’s this week, Rob seems to be releasing the final bits out (including this in aurelia-templating)

bigopon · June 20, 2018, 6:50am

It’s released, the tag is 1.8.0-rc.1

Sayan751 · June 20, 2018, 7:44am

Sweet, aurelia-templating@1.8.0-rc.1 indeed fixed my broken test cases, related to named slot

Might be a stupid question, but it seems that this release does not solve the problem with compose, as stated here or here. Is that problem related completely with aurelia-templating-resources?

bigopon · June 20, 2018, 8:24am

Yes, it indeed is. Good news is it’s also fixed https://github.com/aurelia/templating-resources/commit/9f5153baf939253f71f71faf1c705a51e6ea3f99#diff-b35ef9cea152278f82d6180410dd778d It’s also planned in this release batch so we will be good to go soon

Topic		Replies	Views
How to use slot inside template? Help Requests	4	1452	March 27, 2019
Vanilla web components slots Help Requests	7	1038	April 4, 2018
Error while testing view with value.bind or class.bind Help Requests	7	556	June 24, 2022
[SOLVED] How to unit-test a custom element, built with "compose"? Help Requests	0	1057	June 18, 2018
How to unit test <compose> element? Help Requests	3	621	March 6, 2020

[SOLVED] How to test a view with a named slot?

Related topics