Closed suraj776 closed 2 months ago
@suraj776 have you created the necessary mocks? See:
@davidjerleke yes, i do have all the mocks. Still getting error and it is from AutoHeight plugin.If i remove plugin, test cases do work.
Thanks for clarifying @suraj776. I guess we need a null check here in the code.
@davidjerleke actually here, here you need to add null check before map.
@suraj776 no here, because we're mapping the selectedIndexes
variable which is undefined. We could do:
- const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()]
+ const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()] || []
But that might lead to errors in other places. Like the function that depends on the highestInView()
function:
function setContainerHeight(): void {
emblaApi.containerNode().style.height = `${highestInView()}px`
}
Can you create a CodeSandbox that reproduces the problem? If you do I can solve it faster.
@davidjerleke
Please check this sandbox code. https://codesandbox.io/p/devbox/elegant-moser-forked-psvcn3
npm run test
@suraj776 thanks. That helps. So this solves it:
function highestInView(): number | null {
const { slideRegistry } = emblaApi.internalEngine()
const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()]
if (!selectedIndexes) return null // Bail here if no selectedIndexes are found
return selectedIndexes
.map((index) => slideHeights[index])
.reduce((a, b) => Math.max(a, b), 0)
}
function setContainerHeight(): void {
const height = highestInView()
if (height === null) return // Bail here if we don't have any height to apply
emblaApi.containerNode().style.height = `${highestInView()}px`
}
Feel free to create a PR with the solution above.
Best, David
@davidjerleke, Thanks for quick support.
@suraj776 I just released a bug fix for this in v8.3.1.
Which variants of Embla Carousel are you using?
Steps to reproduce
I'm trying to create a integration test using React Testing library.
Error:- I'm getting.
_detail: TypeError: Cannot read properties of undefined (reading 'map') at map (/node_modules/embla-carousel-auto-height/src/components/AutoHeight.ts:51:8) at highestInView (/nodemodules/embla-carousel-auto-height/src/components/AutoHeight.ts:56:48)
Expected Behavior
It should be mockable when applying mocks.
Additional Context
I have also tried...
What browsers are you seeing the problem on?
All browsers
Version
^8.2.0
CodeSandbox
No response
Before submitting