I have a simple “factory” element that looks like as follows.
<template>
<compose repeat.for="segment of segments"
view-model.bind="segment.ViewModelClass"
model.bind="segment.Model"></compose>
</template>
I am trying to unit-test this component using something like the following.
let component: ComponentTester<MyFactory> = StageComponent.withResources("MyFactory/MyFactory");
component.inView("<my-factory segments.bind='segments'></my-factory>")
.boundTo({ segments })
.create(bootstrap)
....
However, when I do so, I get the following DI error.
Error: Error invoking Compose. Check the inner error for details.
Inner Error Stack:
Error: Constructor Parameter with index 0 cannot be null or undefined. Are you trying to inject/register something that doesn’t exist with DI?
at Object.invokeWithDynamicDependencies (webpack-internal:///./node_modules/aurelia-dependency-injection/dist/native-modules/aurelia-dependency-injection.js:449:13)…
One might say that I am testing a code (compose
), which is not mine, and already unit-tested. But the problem is when I use my-factory
custom element in my-other-custom-element
, the mere usage of my-factory
breaks all the test cases for my-other-custom-element
due to the same error. The usage of my-factory
looks as follows.
<template>
<require from="path/to/MyFactory"></require>
...
<my-factory segments.bind="segments"></my-factory>
...
</template>
This is the reason, I need to fix this error.
It seems that this error is due to the fact that the first ctor argument of compose
is DOM.Element
, which is initialized by aurelia-pal
. And it seems that during initialization at the time of testing, there is some problem initializing pal
correctly (and in correct order?). Is there any way to correct this situation? May be using manually handled lifecyle? However, as I am not really sure how to proceed, please suggest.
Link to my SO Question: javascript - How to unit-test a custom element, built with "compose"? - Stack Overflow