From 0795a778f2b9e90a92ac5a240811cc2427dc268d Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 7 Apr 2021 08:29:31 +0300 Subject: [PATCH] Fix wrong carousel transformation, direction to order (#33499) --- js/src/carousel.js | 12 +++++----- js/tests/unit/carousel.spec.js | 40 +++++++++++++++++----------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/js/src/carousel.js b/js/src/carousel.js index 76581ca5d42c..e336abb1eda2 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -336,10 +336,10 @@ class Carousel extends BaseComponent { if (event.key === ARROW_LEFT_KEY) { event.preventDefault() - this._slide(DIRECTION_LEFT) + this._slide(DIRECTION_RIGHT) } else if (event.key === ARROW_RIGHT_KEY) { event.preventDefault() - this._slide(DIRECTION_RIGHT) + this._slide(DIRECTION_LEFT) } } @@ -509,10 +509,10 @@ class Carousel extends BaseComponent { } if (isRTL()) { - return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT + return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT } - return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV + return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV } _orderToDirection(order) { @@ -521,10 +521,10 @@ class Carousel extends BaseComponent { } if (isRTL()) { - return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT + return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT } - return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT + return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT } // Static diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index dc3006fffd2b..75c3bbd6d8dc 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -317,7 +317,7 @@ describe('Carousel', () => { expect(carousel._addTouchEventListeners).toHaveBeenCalled() }) - it('should allow swiperight and call _slide with pointer events', done => { + it('should allow swiperight and call _slide (prev) with pointer events', done => { if (!supportPointerEvent) { expect().nothing() done() @@ -362,7 +362,7 @@ describe('Carousel', () => { }) }) - it('should allow swipeleft and call previous with pointer events', done => { + it('should allow swipeleft and call next with pointer events', done => { if (!supportPointerEvent) { expect().nothing() done() @@ -408,7 +408,7 @@ describe('Carousel', () => { }) }) - it('should allow swiperight and call _slide with touch events', done => { + it('should allow swiperight and call _slide (prev) with touch events', done => { Simulator.setType('touch') clearPointerEvents() document.documentElement.ontouchstart = () => {} @@ -447,7 +447,7 @@ describe('Carousel', () => { }) }) - it('should allow swipeleft and call _slide with touch events', done => { + it('should allow swipeleft and call _slide (next) with touch events', done => { Simulator.setType('touch') clearPointerEvents() document.documentElement.ontouchstart = () => {} @@ -601,7 +601,7 @@ describe('Carousel', () => { const carousel = new Carousel(carouselEl, {}) const onSlide = e => { - expect(e.direction).toEqual('right') + expect(e.direction).toEqual('left') expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true) expect(e.from).toEqual(0) expect(e.to).toEqual(1) @@ -613,7 +613,7 @@ describe('Carousel', () => { } const onSlide2 = e => { - expect(e.direction).toEqual('left') + expect(e.direction).toEqual('right') done() } @@ -636,7 +636,7 @@ describe('Carousel', () => { const carousel = new Carousel(carouselEl, {}) const onSlid = e => { - expect(e.direction).toEqual('right') + expect(e.direction).toEqual('left') expect(e.relatedTarget.classList.contains('carousel-item')).toEqual(true) expect(e.from).toEqual(0) expect(e.to).toEqual(1) @@ -648,7 +648,7 @@ describe('Carousel', () => { } const onSlid2 = e => { - expect(e.direction).toEqual('left') + expect(e.direction).toEqual('right') done() } @@ -1069,13 +1069,13 @@ describe('Carousel', () => { const carouselEl = fixtureEl.querySelector('div') const carousel = new Carousel(carouselEl, {}) - expect(carousel._directionToOrder('left')).toEqual('prev') + expect(carousel._directionToOrder('left')).toEqual('next') expect(carousel._directionToOrder('prev')).toEqual('prev') - expect(carousel._directionToOrder('right')).toEqual('next') + expect(carousel._directionToOrder('right')).toEqual('prev') expect(carousel._directionToOrder('next')).toEqual('next') - expect(carousel._orderToDirection('next')).toEqual('right') - expect(carousel._orderToDirection('prev')).toEqual('left') + expect(carousel._orderToDirection('next')).toEqual('left') + expect(carousel._orderToDirection('prev')).toEqual('right') }) it('"_directionToOrder" and "_orderToDirection" must return the right results when rtl=true', () => { @@ -1086,13 +1086,13 @@ describe('Carousel', () => { const carousel = new Carousel(carouselEl, {}) expect(util.isRTL()).toEqual(true, 'rtl has to be true') - expect(carousel._directionToOrder('left')).toEqual('next') + expect(carousel._directionToOrder('left')).toEqual('prev') expect(carousel._directionToOrder('prev')).toEqual('prev') - expect(carousel._directionToOrder('right')).toEqual('prev') + expect(carousel._directionToOrder('right')).toEqual('next') expect(carousel._directionToOrder('next')).toEqual('next') - expect(carousel._orderToDirection('next')).toEqual('left') - expect(carousel._orderToDirection('prev')).toEqual('right') + expect(carousel._orderToDirection('next')).toEqual('right') + expect(carousel._orderToDirection('prev')).toEqual('left') document.documentElement.dir = 'ltl' }) @@ -1106,11 +1106,11 @@ describe('Carousel', () => { carousel._slide('left') expect(spy).toHaveBeenCalledWith('left') - expect(spy2).toHaveBeenCalledWith('prev') + expect(spy2).toHaveBeenCalledWith('next') carousel._slide('right') expect(spy).toHaveBeenCalledWith('right') - expect(spy2).toHaveBeenCalledWith('next') + expect(spy2).toHaveBeenCalledWith('prev') }) it('"_slide" has to call "_directionToOrder" and "_orderToDirection" when rtl=true', () => { @@ -1124,11 +1124,11 @@ describe('Carousel', () => { carousel._slide('left') expect(spy).toHaveBeenCalledWith('left') - expect(spy2).toHaveBeenCalledWith('next') + expect(spy2).toHaveBeenCalledWith('prev') carousel._slide('right') expect(spy).toHaveBeenCalledWith('right') - expect(spy2).toHaveBeenCalledWith('prev') + expect(spy2).toHaveBeenCalledWith('next') document.documentElement.dir = 'ltl' })