Closed JojoDz closed 2 years ago
I don't see an html wrapping around Speedometer
.
Please try
<div style="width: 300px; height: 300px"> -> add an enclosing div which is missing in your code sample
<Speedometer />
</div>
I added the missing html wrapping (just above). With your suggestion, I added :
<div class="account__speedometer" style="width: 300px; height: 300px">
<Speedometer
height={180}
maxValue={100}
value={100*quota.used/quota.total}
currentValueText={$_('account.volume.title', { values: { userVolumeStorage: $number(quota.used/quota.total, { style: 'percent' }) }})}
needleColor="#f2ebe3"
segments={3}
customSegmentStops={[0, 75, 90, 100]}
segmentColors={["#00D692", "#FFE032", "#FF504D"]}
/>
</div>
But still get the same error message ...
After deeper analysis, we found that the problem might come from bind:this
.
We were helped by this issue.
It occurs both with gaugeDiv
and d3_ref
.
We managed to get a green test by adding a delay in mountGauge and updateGauge. So it seems related to bootstrap workflow of Svelte components. Also the test works in Webstorm.
Glad things are working for you. I'm closing this issue as it is not related to the library.
We're using the speedometer in our app and great thanks for it.
We are unit testing with jest, and when we include the Speedometer in one svelte component, we have the following error :
When we follow the stack it leads to
mountGauge
:So
gaugeDiv
is undefined. We've seen the unit tests of svelte-speedometer, and we don't understand why it fails with our tests.Do you have an idea why gaugeDiv would not be bound ?
As @palerdot suggested, we rendered the speedometer inside a div, but the test still fails.
This is an extract of the Svelte file where we added Speedometer :
Here is the sample test code where we get the TypeError message :
The complete error message :
I guess the problem lies in the fact that we are using two components from different libraries on the same Svelte page and both having onMount() parts : Speedometer and our customized Confirm Button (with a popup from the lib PopperJs). But how can I be sure? Do you have any other ideas ?