davidjerleke · davidjerleke · Jul 18, 2023 · Jul 15, 2023
diff --git a/packages/embla-carousel/src/__tests__/Axis.test.ts b/packages/embla-carousel/src/__tests__/Axis.test.ts
@@ -7,10 +7,10 @@ const ltrDirection = 'ltr'
 const rtlDirection = 'rtl'
 const horizontalSize = 100
 const verticalSize = 50
-const mockRect = {
+const mockRect = <DOMRect>{
   width: horizontalSize,
   height: verticalSize
-} as DOMRect
+}
 
 const getAxis = (
   axis: AxisOptionType,

diff --git a/packages/embla-carousel/src/__tests__/SlidesToScroll.test.ts b/packages/embla-carousel/src/__tests__/SlidesToScroll.test.ts
@@ -1,53 +1,294 @@
-import { SlidesToScroll } from '../components/SlidesToScroll'
+import { Axis } from '../components/Axis'
+import { Direction, DirectionOptionType } from '../components/Direction'
+import {
+  SlidesToScroll,
+  SlidesToScrollOptionType,
+  SlidesToScrollType
+} from '../components/SlidesToScroll'
+import { arrayKeys } from '../components/utils'
 
-const viewSize = 100
-const slideSizesWithGaps = [80, 50, 50, 39, 85, 15, 10, 91, 9]
-const slideSizesEmpty: [] = []
+const containerRect = <DOMRect>{
+  top: 196.3984375,
+  right: 690,
+  bottom: 386.3984375,
+  left: 102
+}
+
+const slideRectsLtr = <DOMRect[]>[
+  {
+    top: 196.3984375,
+    right: 411,
+    bottom: 386.3984375,
+    left: 122
+  },
+  {
+    top: 196.3984375,
+    right: 710,
+    bottom: 386.3984375,
+    left: 421
+  },
+  {
+    top: 196.3984375,
+    right: 1009,
+    bottom: 386.3984375,
+    left: 720
+  },
+  {
+    top: 196.3984375,
+    right: 1328,
+    bottom: 386.3984375,
+    left: 1039
+  },
+  {
+    top: 196.3984375,
+    right: 1627,
+    bottom: 386.3984375,
+    left: 1338
+  },
+  {
+    top: 196.3984375,
+    right: 1926,
+    bottom: 386.3984375,
+    left: 1637
+  },
+  {
+    top: 196.3984375,
+    right: 2245,
+    bottom: 386.3984375,
+    left: 1956
+  },
+  {
+    top: 196.3984375,
+    right: 2544,
+    bottom: 386.3984375,
+    left: 2255
+  },
+  {
+    top: 196.3984375,
+    right: 2843,
+    bottom: 386.3984375,
+    left: 2554
+  },
+  {
+    top: 196.3984375,
+    right: 3172,
+    bottom: 386.3984375,
+    left: 2883
+  }
+]
+
+const slideRectsRtl = <DOMRect[]>[
+  {
+    top: 196.3984375,
+    right: 670,
+    bottom: 386.3984375,
+    left: 381
+  },
+  {
+    top: 196.3984375,
+    right: 371,
+    bottom: 386.3984375,
+    left: 82
+  },
+  {
+    top: 196.3984375,
+    right: 72,
+    bottom: 386.3984375,
+    left: -217
+  },
+  {
+    top: 196.3984375,
+    right: -247,
+    bottom: 386.3984375,
+    left: -536
+  },
+  {
+    top: 196.3984375,
+    right: -546,
+    bottom: 386.3984375,
+    left: -835
+  },
+  {
+    top: 196.3984375,
+    right: -845,
+    bottom: 386.3984375,
+    left: -1134
+  },
+  {
+    top: 196.3984375,
+    right: -1164,
+    bottom: 386.3984375,
+    left: -1453
+  },
+  {
+    top: 196.3984375,
+    right: -1463,
+    bottom: 386.3984375,
+    left: -1752
+  },
+  {
+    top: 196.3984375,
+    right: -1762,
+    bottom: 386.3984375,
+    left: -2051
+  },
+  {
+    top: 196.3984375,
+    right: -2091,
+    bottom: 386.3984375,
+    left: -2380
+  }
+]
+
+const slideIndexes = arrayKeys(slideRectsLtr)
+const slideIndexesEmpty: [] = []
+const groupCount = 3
+const startGap = 20
+const endGap = 20
+const viewSize = 588
+
+const createSlidesToScroll = (
+  direction: DirectionOptionType = 'ltr',
+  loop: boolean = false,
+  slidesToScroll: SlidesToScrollOptionType = 'auto'
+): SlidesToScrollType => {
+  return SlidesToScroll(
+    Axis('x', direction),
+    Direction(direction),
+    viewSize,
+    slidesToScroll,
+    loop,
+    containerRect,
+    direction === 'ltr' ? slideRectsLtr : slideRectsRtl,
+    startGap,
+    endGap
+  )
+}
 
 describe('SlidesToScroll', () => {
   describe('Group by slide sizes', () => {
-    const slidesToScroll = SlidesToScroll(viewSize, slideSizesWithGaps, 'auto')
+    describe('Ltr', () => {
+      describe('Loop is disabled', () => {
+        test('Groups items into groups where slide sizes <= view size', () => {
+          const slidesToScroll = createSlidesToScroll()
+          const groups = slidesToScroll.groupSlides(slideIndexes)
 
-    test('Groups items into groups where slide sizes <= view size', () => {
-      const groups = slidesToScroll.groupSlides(slideSizesWithGaps)
-      expect(groups).toEqual([[80], [50, 50], [39], [85, 15], [10], [91, 9]])
-    })
+          expect(groups).toEqual([[0], [1, 2], [3, 4], [5], [6, 7], [8], [9]])
+        })
+      })
+
+      describe('Loop is enabled', () => {
+        test('Groups items into groups where slide sizes <= view size', () => {
+          const slidesToScroll = createSlidesToScroll('ltr', true)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1], [2], [3, 4], [5], [6, 7], [8], [9]])
+        })
+      })
 
-    test('Returns an empty array if an empty list is provided', () => {
-      const groups = slidesToScroll.groupSlides(slideSizesEmpty)
-      expect(groups).toEqual(slideSizesEmpty)
+      test('Returns an empty array if an empty list is provided', () => {
+        const slidesToScroll = createSlidesToScroll()
+        const groups = slidesToScroll.groupSlides(slideIndexesEmpty)
+
+        expect(groups).toEqual(slideIndexesEmpty)
+      })
+
+      test('Does not throw when a slide size > view size', () => {
+        const slidesToScroll = createSlidesToScroll()
+        const func = () => slidesToScroll.groupSlides([viewSize + 1])
+
+        expect(func).not.toThrow()
+      })
     })
 
-    test('Does not throw when a slide size > view size', () => {
-      const func = () => slidesToScroll.groupSlides([viewSize + 1])
-      expect(func).not.toThrow()
+    describe('Rtl', () => {
+      describe('Loop is disabled', () => {
+        test('Groups items into groups where slide sizes <= view size', () => {
+          const slidesToScroll = createSlidesToScroll('rtl')
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0], [1, 2], [3, 4], [5], [6, 7], [8], [9]])
+        })
+      })
+
+      describe('Loop is enabled', () => {
+        test('Groups items into groups where slide sizes <= view size', () => {
+          const slidesToScroll = createSlidesToScroll('rtl', true)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1], [2], [3, 4], [5], [6, 7], [8], [9]])
+        })
+      })
+
+      test('Returns an empty array if an empty list is provided', () => {
+        const slidesToScroll = createSlidesToScroll('rtl')
+        const groups = slidesToScroll.groupSlides(slideIndexesEmpty)
+
+        expect(groups).toEqual(slideIndexesEmpty)
+      })
+
+      test('Does not throw when a slide size > view size', () => {
+        const slidesToScroll = createSlidesToScroll('rtl')
+        const func = () => slidesToScroll.groupSlides([viewSize + 1])
+
+        expect(func).not.toThrow()
+      })
     })
   })
 
   describe('Group by number', () => {
-    const slidesToScroll = SlidesToScroll(viewSize, slideSizesWithGaps, 3)
-
-    test('Groups items into groups that equal the size of the given number', () => {
-      const groups = slidesToScroll.groupSlides(slideSizesWithGaps)
-      expect(groups).toEqual([
-        [80, 50, 50],
-        [39, 85, 15],
-        [10, 91, 9]
-      ])
-    })
+    describe('Ltr', () => {
+      describe('Loop is disabled', () => {
+        test('Groups items into groups that equal the size of the given number', () => {
+          const slidesToScroll = createSlidesToScroll('ltr', false, groupCount)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]])
+        })
+      })
+
+      describe('Loop is enabled', () => {
+        test('Groups items into groups that equal the size of the given number', () => {
+          const slidesToScroll = createSlidesToScroll('ltr', true, groupCount)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]])
+        })
+      })
 
-    test('Groups items that does not add up evenly at the end', () => {
-      const groups = slidesToScroll.groupSlides(slideSizesWithGaps.slice(0, -1))
-      expect(groups).toEqual([
-        [80, 50, 50],
-        [39, 85, 15],
-        [10, 91]
-      ])
+      test('Returns an empty array if an empty list is provided', () => {
+        const slidesToScroll = createSlidesToScroll('ltr', false, groupCount)
+        const groups = slidesToScroll.groupSlides(slideIndexesEmpty)
+
+        expect(groups).toEqual(slideIndexesEmpty)
+      })
     })
 
-    test('Returns an empty array if an empty list is provided', () => {
-      const groups = slidesToScroll.groupSlides(slideSizesEmpty)
-      expect(groups).toEqual(slideSizesEmpty)
+    describe('Rtl', () => {
+      describe('Loop is disabled', () => {
+        test('Groups items into groups that equal the size of the given number', () => {
+          const slidesToScroll = createSlidesToScroll('rtl', false, groupCount)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]])
+        })
+      })
+
+      describe('Loop is enabled', () => {
+        test('Groups items into groups that equal the size of the given number', () => {
+          const slidesToScroll = createSlidesToScroll('rtl', true, groupCount)
+          const groups = slidesToScroll.groupSlides(slideIndexes)
+
+          expect(groups).toEqual([[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]])
+        })
+      })
+
+      test('Returns an empty array if an empty list is provided', () => {
+        const slidesToScroll = createSlidesToScroll('rtl', false, groupCount)
+        const groups = slidesToScroll.groupSlides(slideIndexesEmpty)
+
+        expect(groups).toEqual(slideIndexesEmpty)
+      })
     })
   })
 })
diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
@@ -105,7 +105,7 @@ export function Engine(
   const alignment = Alignment(align, viewSize)
   const containSnaps = !loop && !!containScroll
   const readEdgeGap = loop || !!containScroll
-  const { slideSizes, slideSizesWithGaps } = SlideSizes(
+  const { slideSizes, slideSizesWithGaps, startGap, endGap } = SlideSizes(
     axis,
     containerRect,
     slideRects,
@@ -114,9 +114,15 @@ export function Engine(
     ownerWindow
   )
   const slidesToScroll = SlidesToScroll(
+    axis,
+    direction,
     viewSize,
-    slideSizesWithGaps,
-    groupSlides
+    groupSlides,
+    loop,
+    containerRect,
+    slideRects,
+    startGap,
+    endGap
   )
   const { snaps, snapsAligned } = ScrollSnaps(
     axis,

diff --git a/packages/embla-carousel/src/components/SlideSizes.ts b/packages/embla-carousel/src/components/SlideSizes.ts
@@ -4,6 +4,8 @@ import { arrayLast, arrayLastIndex, mathAbs, WindowType } from './utils'
 export type SlideSizesType = {
   slideSizes: number[]
   slideSizesWithGaps: number[]
+  startGap: number
+  endGap: number
 }
 
 export function SlideSizes(
@@ -47,7 +49,9 @@ export function SlideSizes(
 
   const self: SlideSizesType = {
     slideSizes,
-    slideSizesWithGaps
+    slideSizesWithGaps,
+    startGap,
+    endGap
   }
   return self
 }