feat: [FIND-7602] Enhanced slide transition to work for multiple slides

[ali2-godaddy]

Summary

Enhanced the slide transition so that goToSlide works for multiple slides at a time when looping left or right. Previously there was a bug with goToSlide where when looping around left, the offset would be incorrect and cause the animation to look incorrect. This fixes that issue and enforces the use of the direction argument when looping the slider around left or right.

Changelog

Enhanced the slide transition so that goToSlide respects the direction prop and works for transitioning multiple slides at a time when infinite is set to true.

Also enhanced jsdom to mock viewport width and height for tests.

Test Plan

Added unit tests for calcLeftOffset for various scenarios and conducted manual testing of infinite and non-infinite scrolling cases.

Before:

Video.Project.9.mp4

After:

Video.Project.9.mp4

[jsanthosh-godaddy]

@ali2-godaddy : Can you please include some screenshots/recordings of the change?

[Copilot]

Pull request overview

This PR enhances the carousel's slide transition logic to properly handle multi-slide transitions in infinite scroll mode, particularly when looping around the carousel boundaries. The changes fix a bug where the goToSlide function would incorrectly calculate offsets when looping left, and enforce the use of the direction argument for proper animation behavior.

Changes:

• Fixed offset calculation in calcLeftOffset to detect and handle looping transitions
• Added logic to use clone slides for smooth wrapping animations
• Refactored code formatting and style consistency throughout the codebase
• Enhanced test setup to mock viewport dimensions for more accurate testing

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
test/unit/carousel.tests.js	Removed old test file (renamed to .test.jsx)
test/unit/carousel.test.jsx	Renamed from .tests.js with added tests for calcLeftOffset scenarios including looping transitions
test/setup.js	Added jsdom mocks for offsetWidth and offsetHeight to enable viewport testing
src/stories/CustomArrows.js	Fixed missing semicolon
src/index.js	Enhanced calcLeftOffset with looping detection logic, formatted code, and updated stopDragging to set transitioningFrom
package.json	Updated test commands and added jsdom-testing-mocks dependency
.mocharc.json	Added mocha configuration file with test setup requirements

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jsanthosh-godaddy]

@ali2-godaddy : Was wondering if we can make the card height of the cards in the carousal the same ?
In the recording they don't look the same

[ali2-godaddy]

@ali2-godaddy : Was wondering if we can make the card height of the cards in the carousal the same ? In the recording they don't look the same

This can be configured by setting the slideHeight prop.

[jsanthosh-godaddy]

LGTM, Please get approval from Chris as well.

[chrisvogt]

nitpick: Since you are renaming the carousel.test.jsx test with this PR, this field can actually be removed. Now it matches the default Vitest setup.

Example

Suggested change

include: ['test/**/*.test.{js,jsx}'],

[ali2-godaddy]

Good point, addressed

[chrisvogt]

Hi @ali2-godaddy — I noticed this package-lock.json change points the registry back to Artifactory. Since this package is open source, public consumers won’t be able to install it if the lockfile references Artifactory.

Could we reset the lockfile to main and re-apply the updates using npm as the registry?

Steps that should work:

1. git reset origin/main package-lock.json

2. Temporarily use the public npm registry (without changing your global config):

   npm install --registry=https://registry.npmjs.org/ --package-lock-only
   

3. Voilà. Now you can check in the updated package-lock.json, which should reference npm as the registry.

This shouldn’t change anything for internal consumers — running npm internally will still use Artifactory as the configured registry, which proxies and caches npmjs automatically.

[chrisvogt]

BTW—This is probably the only comment of mine that should block anything, because if published as is, non-GoDaddy consumers who download this package won't be able to install it unless they delete or ignore the package lock file.

[jsanthosh-godaddy]

Ohh yea, good point. I think I might have missed this step in my previous PR as well 🤦

[ali2-godaddy]

Addressed