Bug fix for #707.

davidjerleke · Jan 22, 2024 · a394f0c · a394f0c
1 parent 80d7314
commit a394f0c
Show file tree

Hide file tree

Showing 62 changed files with 10,489 additions and 9,982 deletions.
diff --git a/packages/embla-carousel/src/__tests__/align-ltr.test.ts b/packages/embla-carousel/src/__tests__/align-ltr.test.ts
@@ -0,0 +1,102 @@
+import EmblaCarousel from '../components/EmblaCarousel'
+import { mockTestElements } from './mocks'
+import {
+  FIXTURE_ALIGN_LTR_1,
+  FIXTURE_ALIGN_LTR_2
+} from './fixtures/align-ltr.fixture'
+
+const FIRST_SNAP_INDEX = 0
+
+describe('➡️  Align - Horizontal LTR', () => {
+  describe('Is correct for slides WITHOUT MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_LTR_1), {
+      containScroll: false
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [0, -800, -1200, -1400, -1900]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -500, -800, -1150, -1550]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [200, -200, -400, -900, -1200]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+
+  describe('Is correct for slides WITH MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_LTR_2), {
+      containScroll: false
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [-10, -830, -1250, -1470, -1990]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -530, -850, -1220, -1640]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [190, -230, -450, -970, -1290]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+})
diff --git a/packages/embla-carousel/src/__tests__/align-rtl.test.ts b/packages/embla-carousel/src/__tests__/align-rtl.test.ts
@@ -0,0 +1,104 @@
+import EmblaCarousel from '../components/EmblaCarousel'
+import { mockTestElements } from './mocks'
+import {
+  FIXTURE_ALIGN_RTL_1,
+  FIXTURE_ALIGN_RTL_2
+} from './fixtures/align-rtl.fixture'
+
+const FIRST_SNAP_INDEX = 0
+
+describe('➡️  Align - Horizontal RTL', () => {
+  describe('Is correct for slides WITHOUT MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_RTL_1), {
+      containScroll: false,
+      direction: 'rtl'
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [0, -800, -1200, -1400, -1900]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -500, -800, -1150, -1550]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [200, -200, -400, -900, -1200]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+
+  describe('Is correct for slides WITH MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_RTL_2), {
+      containScroll: false,
+      direction: 'rtl'
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [-10, -830, -1250, -1470, -1990]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -530, -850, -1220, -1640]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [190, -230, -450, -970, -1290]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+})
diff --git a/packages/embla-carousel/src/__tests__/align-vertical.test.ts b/packages/embla-carousel/src/__tests__/align-vertical.test.ts
@@ -0,0 +1,104 @@
+import EmblaCarousel from '../components/EmblaCarousel'
+import { mockTestElements } from './mocks'
+import {
+  FIXTURE_ALIGN_Y_1,
+  FIXTURE_ALIGN_Y_2
+} from './fixtures/align-vertical.fixture'
+
+const FIRST_SNAP_INDEX = 0
+
+describe('➡️  Align - Vertical', () => {
+  describe('Is correct for slides WITHOUT MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_Y_1), {
+      containScroll: false,
+      axis: 'y'
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [0, -800, -1200, -1400, -1900]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -500, -800, -1150, -1550]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [200, -200, -400, -900, -1200]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+
+  describe('Is correct for slides WITH MARGINS and ALIGN is:', () => {
+    const emblaApi = EmblaCarousel(mockTestElements(FIXTURE_ALIGN_Y_2), {
+      containScroll: false,
+      axis: 'y'
+    })
+
+    test('Start', () => {
+      emblaApi.reInit({ align: 'start' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [-10, -830, -1250, -1470, -1990]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Center', () => {
+      emblaApi.reInit({ align: 'center' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -530, -850, -1220, -1640]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('End', () => {
+      emblaApi.reInit({ align: 'end' })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [190, -230, -450, -970, -1290]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+
+    test('Custom', () => {
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
+
+      const engine = emblaApi.internalEngine()
+      const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]
+
+      expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+      expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX])
+    })
+  })
+})