Skip to content

fix: SSR hydration issue #137

fix: SSR hydration issue

fix: SSR hydration issue #137

GitHub Actions / Tests results succeeded Dec 11, 2024 in 0s

73 passed, 0 failed and 0 skipped

Tests passed successfully

✅ junit-report.xml

73 tests were completed in 7s with 73 passed, 0 failed and 0 skipped.

Test suite Passed Failed Skipped Time
src/components/Carousel/Carousel.spec.ts 1✅ 37ms
src/components/Icon/Icon.spec.ts 3✅ 77ms
src/utils/camelCaseToKebabCase.spec.ts 6✅ 5ms
src/utils/except.spec.ts 1✅ 8ms
src/utils/formatCssVarValue.spec.ts 6✅ 6ms
src/utils/generateStyleVars.spec.ts 4✅ 7ms
src/utils/getMaxSlideIndex.spec.ts 9✅ 8ms
src/utils/getMinSlideIndex.spec.ts 10✅ 6ms
src/utils/getNumberInRange.spec.ts 5✅ 6ms
src/utils/getScrolledIndex.spec.ts 1✅ 3ms
src/utils/getTransformValues.spec.ts 1✅ 10ms
src/utils/mapNumberToRange.spec.ts 6✅ 6ms
tests/integration/aria.spec.ts 2✅ 43ms
tests/integration/carousel.spec.ts 12✅ 410ms
tests/integration/navigation.spec.ts 4✅ 82ms
tests/integration/pagination.spec.ts 2✅ 64ms

✅ src/components/Carousel/Carousel.spec.ts

src/components/Carousel/Carousel.spec.ts
  ✅ Carousel.ts > It renders correctly

✅ src/components/Icon/Icon.spec.ts

src/components/Icon/Icon.spec.ts
  ✅ Icon.ts > It should error if no iconName
  ✅ Icon.ts > It should error if iconName is invalid
  ✅ Icon.ts > It should render standalone

✅ src/utils/camelCaseToKebabCase.spec.ts

src/utils/camelCaseToKebabCase.spec.ts
  ✅ camelCaseToKebabCase > converts single camelCase word to kebab-case
  ✅ camelCaseToKebabCase > converts multiple camelCase words to kebab-case
  ✅ camelCaseToKebabCase > handles strings with no uppercase letters
  ✅ camelCaseToKebabCase > handles empty strings
  ✅ camelCaseToKebabCase > handles strings with numbers
  ✅ camelCaseToKebabCase > handles strings with special characters

✅ src/utils/except.spec.ts

src/utils/except.spec.ts
  ✅ except > should return an object without keys

✅ src/utils/formatCssVarValue.spec.ts

src/utils/formatCssVarValue.spec.ts
  ✅ formatCssVarValue > should append "px" to numeric values
  ✅ formatCssVarValue > should return string values with appropriate units unchanged
  ✅ formatCssVarValue > should append "px" to numeric strings
  ✅ formatCssVarValue > should trim and handle strings with spaces
  ✅ formatCssVarValue > should return "auto" for undefined values
  ✅ formatCssVarValue > should return the original value for invalid strings

✅ src/utils/generateStyleVars.spec.ts

src/utils/generateStyleVars.spec.ts
  ✅ generateStyleVars > should generate CSS variables for given styles
  ✅ generateStyleVars > should handle undefined values in styles
  ✅ generateStyleVars > should handle numeric values in styles
  ✅ generateStyleVars > should convert camelCase keys to kebab-case

✅ src/utils/getMaxSlideIndex.spec.ts

src/utils/getMaxSlideIndex.spec.ts
  ✅ getCurrentSlideIndex > wrap-around: true > When slidesCount is 0 should return 0
  ✅ getCurrentSlideIndex > wrap-around: true > When slidesCount larger than 0 should return (slidesCount - 1)
  ✅ getCurrentSlideIndex > wrap-around: false > When slidesCount is 0 should return 0
  ✅ getCurrentSlideIndex > wrap-around: false > When snapAlign is start should return (slidesCount - itemsToShow)
  ✅ getCurrentSlideIndex > wrap-around: false > When snapAlign is end should return (slidesCount - 1)
  ✅ getCurrentSlideIndex > wrap-around: false > When snapAlign is center/center-odd should return (slidesCount - Math.ceil((itemsToShow - 0.5) / 2))
  ✅ getCurrentSlideIndex > wrap-around: false > When snapAlign is center-even should return (slidesCount - Math.ceil(itemsToShow / 2))
  ✅ getCurrentSlideIndex > wrap-around: false > When snapAlign is missing should return slidesCount - 1
  ✅ getCurrentSlideIndex > wrap-around: false > When itemsToShow > slidesCount should return max slide index

✅ src/utils/getMinSlideIndex.spec.ts

src/utils/getMinSlideIndex.spec.ts
  ✅ getCurrentSlideIndex > warp-around: true > When slidesCount is 0 should return 0
  ✅ getCurrentSlideIndex > warp-around: true > When slidesCount larger than 0 should return 0
  ✅ getCurrentSlideIndex > warp-around: false > When slidesCount is 0 should return 0
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is start should return 0
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is end should return (itemsToShow - 1)
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is center/center-odd should return (Math.floor((itemsToShow - 1) / 2))
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is center-even should return (Math.floor((itemsToShow - 2) / 2))
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is missing should return 0
  ✅ getCurrentSlideIndex > warp-around: false > When snapAlign is invalid should return 0
  ✅ getCurrentSlideIndex > warp-around: false > When itemsToShow > slidesCount should return 0

✅ src/utils/getNumberInRange.spec.ts

src/utils/getNumberInRange.spec.ts
  ✅ getCurrentSlideIndex > When the number inside the range should return the same value
  ✅ getCurrentSlideIndex > When the number is larger than the range should return the max value
  ✅ getCurrentSlideIndex > When the number is smaller than the range should return the min value
  ✅ getCurrentSlideIndex > When the min is larger than max should return val
  ✅ getCurrentSlideIndex > doesn`t bound a NaN min or max

✅ src/utils/getScrolledIndex.spec.ts

src/utils/getScrolledIndex.spec.ts
  ✅ getScrolledIndex.ts > returns a number in range with offset

✅ src/utils/getTransformValues.spec.ts

src/utils/getTransformValues.spec.ts
  ✅ getTransformValues.ts > gets the transform matrix of an element

✅ src/utils/mapNumberToRange.spec.ts

src/utils/mapNumberToRange.spec.ts
  ✅ getCurrentSlideIndex > When the number inside the range should return the same value
  ✅ getCurrentSlideIndex > When the number is larger than the range should return correctly mapped value
  ✅ getCurrentSlideIndex > When the number is smaller than the range should return correctly mapped value
  ✅ getCurrentSlideIndex > When min is non zero should return correctly mapped value
  ✅ getCurrentSlideIndex > Keeps float values less than 1 over max
  ✅ getCurrentSlideIndex > Wraps float values more than 1 over max

✅ tests/integration/aria.spec.ts

tests/integration/aria.spec.ts
  ✅ Aria.ts > renders properly with a carousel
  ✅ Aria.ts > doesn't render without a carousel

✅ tests/integration/carousel.spec.ts

tests/integration/carousel.spec.ts
  ✅ Carousel.ts > It renders *five* slides correctly
  ✅ Carousel.ts > Should display *one* visible item
  ✅ Carousel.ts > Should display *one* next item
  ✅ Carousel.ts > Should navigate to the focused slide
  ✅ Carousel.ts > Should navigate the carousel with arrow keys
  ✅ Slotted Carousel.ts > It renders *three* slides correctly
  ✅ Slotted Carousel.ts > Should display *one* visible item
  ✅ Slotted Carousel.ts > Should display *one* next item
  ✅ Wrap around Carousel.ts > renders wrapAround correctly
  ✅ SSR Carousel > renders server side properly
  ✅ SSR Carousel > renders slotted server side properly
  ✅ SSR Carousel > doesn't get hydration mismatch with breakpoints

✅ tests/integration/navigation.spec.ts

tests/integration/navigation.spec.ts
  ✅ Navigation.ts > renders properly with a carousel
  ✅ Navigation.ts > doesn't render without a carousel
  ✅ Navigation.ts > inherits attrs on buttons
  ✅ Navigation.ts > renders custom icons

✅ tests/integration/pagination.spec.ts

tests/integration/pagination.spec.ts
  ✅ Navigation.ts > renders properly with a carousel
  ✅ Navigation.ts > doesn't render without a carousel