fix: handle indices properly when cellAlign is center or right (#…

…952) * refactor: simplify some boolean logic * refactor: remove default value for slideIndex In order to determine when the slideIndex was intentionally set by a user. * fix: better initial cell index when slides not left-aligned * fix: make autoplay continue to the last slide when cellAlign != left and slidesToShow > 1 * test: add some failing tests before modifying getDotIndexes to handle cellAlign * fix: handle non-left cellAlign values when generating dot controls * fix: only avoid whitespace with default index with scrollMode="remainder" * test: add failing tests for case of final slide being omitted * fix: show a dot corresponding to the last slide when cellAlign=center|right * test: add failing tests for prev/next button disabling * fix: correct button disabling when cellAlign=center|right * refactor: rename count->slideCount * test: add failing tests for prev/next button index calculation * fix: make the prev/next buttons jump to appropriate indices with cellAlign=center|right * refactor: simplify now that prevSlide and nextSlide cannot overstep their bounds * test: fix cypress test based on old behavior * test: use speed prop to make e2e tests run faster * build: avoid autoplay causing flakiness in Chromatic checks * chore: tweak behavior for dot generation when whitespace is allowed * chore: prevent additional scrolling when all remaining slides visible * chore: handle case of all slides fitting in from start * chore: handle case of all slides fitting in from start (right align) * test: add extra case of all slides fitting in from start (center align)
FormidableLabs · Aug 10, 2022 · 60036ad · 60036ad · vercel · Aug 10, 2022
1 parent 29a3983
commit 60036ad
Show file tree

Hide file tree

Showing 16 changed files with 723 additions and 183 deletions.
diff --git a/.changeset/dull-mails-own.md b/.changeset/dull-mails-own.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': patch
+---
+
+make the prev/next buttons jump to appropriate indices with cellAlign=center|right
diff --git a/.changeset/gentle-comics-glow.md b/.changeset/gentle-comics-glow.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': patch
+---
+
+make autoplay continue to the last slide when cellAlign != left and slidesToShow > 1
diff --git a/.changeset/pink-mirrors-design.md b/.changeset/pink-mirrors-design.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': patch
+---
+
+correct button disabling when cellAlign=center|right
diff --git a/.changeset/shy-jeans-study.md b/.changeset/shy-jeans-study.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': patch
+---
+
+show a dot corresponding to the last slide when cellAlign=center|right
diff --git a/.changeset/wicked-radios-yawn.md b/.changeset/wicked-radios-yawn.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': patch
+---
+
+fix initial index when autoplayReverse=true and cellAlign is not left
diff --git a/packages/nuka/cypress/integration/carousel.spec.js b/packages/nuka/cypress/integration/carousel.spec.js
@@ -2,9 +2,15 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
 
 context('Carousel', () => {
+  // Speed up transition animation time
+  const sharedParams = { speed: 50 };
+
   describe('Carousel variations', () => {
     it('should render carousel with 4 slides and only 1 visible slide and go through all of the slides', () => {
-      cy.visit('http://localhost:3000/?slides=4');
+      const params = { ...sharedParams };
+      cy.visit(
+        `http://localhost:3000/?slides=4&params=${JSON.stringify(params)}`
+      );
 
       cy.get('.slider-frame').should(
         'have.attr',
@@ -57,6 +63,7 @@ context('Carousel', () => {
 
     it('should render carousel with 6 slides and 2 visible slides and slides to scroll equal to 2', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 2,
         slidesToScroll: 2
       };
@@ -95,6 +102,7 @@ context('Carousel', () => {
 
     it('should render carousel with 5 slides and 2 visible slides without controls', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 2,
         withoutControls: true
       };

diff --git a/packages/nuka/cypress/integration/infinity-carousel.spec.js b/packages/nuka/cypress/integration/infinity-carousel.spec.js
@@ -2,9 +2,13 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
 
 context('Infinity Carousel', () => {
+  // Speed up transition animation time
+  const sharedParams = { speed: 50 };
+
   describe('Infinity Carousel variations', () => {
     it('should render infinity carousel with 4 slides and only 1 visible slide and go through all of the slides', () => {
       const params = {
+        ...sharedParams,
         wrapAround: true
       };
 
@@ -22,16 +26,13 @@ context('Infinity Carousel', () => {
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
 
-      cy.wait(500);
-
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
         .find('img')
         .should('have.attr', 'data-slide', 'Slide 2');
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -40,7 +41,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -49,7 +49,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -58,7 +57,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -67,7 +65,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -76,7 +73,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -85,7 +81,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -94,7 +89,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Next').should('not.be.disabled');
       cy.get('button').contains('Prev').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -103,7 +97,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Next').should('not.be.disabled');
       cy.get('button').contains('Prev').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -112,7 +105,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Next').should('not.be.disabled');
       cy.get('button').contains('Prev').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -121,7 +113,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Next').should('not.be.disabled');
       cy.get('button').contains('Prev').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 1)
@@ -131,6 +122,7 @@ context('Infinity Carousel', () => {
 
     it('should render infinity carousel with 4 slides and 3 visible slides and go through all of the slides', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 3,
         wrapAround: true
       };
@@ -149,7 +141,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 3)
@@ -159,18 +150,15 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 3)
         .find('img')
         .first()
         .should('have.attr', 'data-slide', 'Slide 3');
-      cy.wait(500);
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 3)
@@ -180,7 +168,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 3)
@@ -190,7 +177,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 3)
@@ -201,6 +187,7 @@ context('Infinity Carousel', () => {
 
     it('should render infinity carousel with 6 slides and 2 visible slides and slides to scroll equal to 2', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 2,
         slidesToScroll: 2,
         wrapAround: true
@@ -218,7 +205,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 2)
@@ -228,7 +214,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 2)
@@ -238,7 +223,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 2)
@@ -248,7 +232,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 2)
@@ -259,6 +242,7 @@ context('Infinity Carousel', () => {
 
     it('should render infinity carousel with 4 slides and all of them should be visible and go through all of the slides', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 4,
         wrapAround: true
       };
@@ -277,7 +261,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -287,7 +270,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -297,7 +279,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -307,7 +288,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -317,7 +297,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -327,7 +306,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -337,7 +315,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -347,7 +324,6 @@ context('Infinity Carousel', () => {
 
       cy.get('button').contains('Prev').should('not.be.disabled');
       cy.get('button').contains('Next').should('not.be.disabled').click();
-      cy.wait(500);
 
       cy.get('.slide.slide-visible')
         .should('have.length', 4)
@@ -358,6 +334,7 @@ context('Infinity Carousel', () => {
 
     it('should render infinity carousel with 5 slides and 2 visible slides without controls', () => {
       const params = {
+        ...sharedParams,
         slidesToShow: 2,
         withoutControls: true,
         wrapAround: true