[WIP] 🚧 v3

.browserlistrc

@@ -1,2 +1 @@
 defaults
-ie 11

.eslintrc

@@ -7,6 +7,9 @@
     "browser": true,
     "es6": true
   },
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
   "rules": {
     "class-methods-use-this": "off",
     "no-console": "off",

.gitignore

@@ -7,3 +7,4 @@ report.html
 
 # Cypress
 cypress/videos/
+cypress/screenshots/

cypress.json

@@ -1,6 +1,5 @@
 {
   "baseUrl": "http://localhost:8080",
-  "firefoxGcInterval": null,
   "video": false,
   "viewportHeight": 660,
   "viewportWidth": 1000

cypress/integration/events.spec.js

@@ -29,10 +29,10 @@ describe('Events', () => {
     cy.getSlider('test').then(() => expect(fn).to.not.be.called);
 
     // Scroll to trigger a change, then confirm the callback fired.
-    // NOTE: Need extra `.wait()` so `expect` happens after the callback.
+    // NOTE: Need extra `.wait()` so `expect` happens after the callback has debounced.
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.getSlider('test').scrollTo('right')
-      .wait(0)
+      .wait(350)
       .then(() => expect(fn).to.be.calledOnce);
   });
 

cypress/integration/goto-buttons.spec.js

@@ -30,7 +30,8 @@ describe('Goto Buttons', () => {
         .should('equal', 'next');
     });
 
-    it('checks classes for prev/next terms if the button content is empty', () => {
+    // TODO: Class matching. Or remove???
+    xit('checks classes for prev/next terms if the button content is empty', () => {
       cy.get('#prev-terms-class button')
         .invoke('attr', 'data-snap-slider-goto')
         .should('equal', 'prev');
@@ -91,7 +92,9 @@ describe('Goto Buttons', () => {
   describe('Classes', () => {
     it('adds a current class to numeric buttons when their slide is current', () => {
       // Slide to the 3rd item.
-      cy.getSlider('test').children(':nth-child(3)').scrollIntoView();
+      // NOTE: Add `duration` so Intersection Observer fires.
+      // @see https://github.com/cypress-io/cypress/issues/3848#issuecomment-478132607
+      cy.getSlider('test').children(':nth-child(3)').scrollIntoView({ duration: 100 });
 
       // Current buttons should have the class.
       cy.get('#standard [data-snap-slider-goto*="3"]')

cypress/integration/html-api.spec.js

@@ -43,45 +43,6 @@ describe('HTML API', () => {
     });
   });
 
-  it('`[data-snap-slider-align]` specifies the CSS align value for older browsers', () => {
-    // Confirm slider start position, then go to the middle slide.
-    cy.getSlider('align').then(($el) => {
-      const slider = $el.get(0).SnapSlider;
-
-      expect(slider.container.scrollLeft).to.equal(0);
-
-      slider.goto('middle');
-    });
-
-    // Confirm slider position.
-    cy.getSlider('align').invoke('scrollLeft').should('equal', 152);
-  });
-
-  it('`[data-snap-slider-align]` is empty by default', () => {
-    cy.getSlider('align-default').then(($el) => {
-      const slider = $el.get(0).SnapSlider;
-
-      expect(slider.container.getAttribute('data-snap-slider-align')).to.equal('');
-    });
-  });
-
-  it('`[data-snap-slider-align]` only applies when CSS Scroll Snap is not supported', () => {
-    // Confirm slider start position, then go to the middle slide.
-    cy.getSlider('align-fallback').then(($el) => {
-      const slider = $el.get(0).SnapSlider;
-
-      expect(slider.container.scrollLeft).to.equal(0);
-
-      slider.goto('middle');
-    });
-
-    // Confirm slider position.
-    // NOTE: This test needs to be manually checked in Safari.
-    // Currently, Chrome snaps on JS scroll but Safari does not.
-    // Safari stays wherever JS scrolled it instead of snapping.
-    cy.getSlider('align').invoke('scrollLeft').should('equal', 0);
-  });
-
   it('`[data-snap-slider-nav]` inits nav elements', () => {
     // We know the nav loaded correctly if all its buttons
     // have `[data-snap-slider-goto]` attributes.
@@ -141,6 +102,10 @@ describe('HTML API', () => {
       .should('not.have.attr', 'data-snap-slider-goto');
   });
 
+  // TODO: Prev/next buttons.
+  // data-snap-slider-prev
+  // data-snap-slider-next
+
   it('`[data-snap-slider-goto="<SLIDE>"]` inits goto buttons in a container or nav element', () => {
     // Make sure slider hasn't scrolled yet.
     cy.getSlider('goto-buttons').invoke('scrollLeft').should('equal', 0);

cypress/integration/js-api.spec.js

@@ -152,22 +152,6 @@ describe('JS API', () => {
       });
     });
 
-    it('can specify the fallback alignment for older browsers', () => {
-      // Init the slider, but specify which elements should be considered slides.
-      cy.initSlider('.example', {
-        id: 'test',
-        align: 'end',
-      });
-
-      // Make sure the real slides are tracked, but not the non-slide element.
-      cy.getSlider('test').then(($el) => {
-        const slider = $el.get(0).SnapSlider;
-        const align = slider.container.getAttribute('data-snap-slider-align');
-
-        expect(align).to.equal('end');
-      });
-    });
-
     it('inits nav elements', () => {
       cy.initSlider('.example', {
         id: 'test',
@@ -377,7 +361,8 @@ describe('JS API', () => {
       });
     });
 
-    it('`goto()` can force-update the current slide', () => {
+    // TODO: Does anyone actually use the `force` option? Seems unnecessary.
+    xit('`goto()` can force-update the current slide', () => {
       cy.getSlider('test').then(($el) => {
         // Setup a callback to test whether the force-update works.
         const slider = $el.get(0).SnapSlider;
@@ -409,7 +394,8 @@ describe('JS API', () => {
       });
     });
 
-    it('`goto()` can ignore callbacks', () => {
+    // TODO: Should we still be able to ignore callbacks?
+    xit('`goto()` can ignore callbacks', () => {
       cy.getSlider('test').then(($el) => {
         // Setup a callback.
         const slider = $el.get(0).SnapSlider;
@@ -458,7 +444,9 @@ describe('JS API', () => {
         .should('include', '1');
     });
 
-    it('`addGotoButtons()` can also take options as the first argument', () => {
+    // TODO: Is this still a good design decision?
+    // Feels like it would be simpler to handle prev/next separately.
+    xit('`addGotoButtons()` can also take options as the first argument', () => {
       // Wait until slider has loaded.
       cy.getSlider('test');
 
@@ -488,7 +476,8 @@ describe('JS API', () => {
         .should('include', 'next');
     });
 
-    it('`getButtons()` returns all the buttons currently targeting this slider', () => {
+    // TODO: Update `addGotoButtons()` to set slider ID when button is not already part of a nav.
+    xit('`getButtons()` returns all the buttons currently targeting this slider', () => {
       let buttons = [];
 
       // Get buttons so we can check for them later.
@@ -528,7 +517,8 @@ describe('JS API', () => {
         .should('have.attr', 'data-snap-slider-goto');
     });
 
-    it('`addNav()` also accepts options', () => {
+    // TODO: Nav options!
+    xit('`addNav()` also accepts options', () => {
       // Init all nav elements.
       cy.getSlider('test').then(($el) => {
         const slider = $el.get(0).SnapSlider;
@@ -548,6 +538,7 @@ describe('JS API', () => {
         .should('not.have.attr', 'data-snap-slider-goto');
     });
 
+    // TODO: Deprecate in favor of `this.navs`.
     it('`getNavs()` returns all the navs currently targeting this slider', () => {
       let navs = [];
 
@@ -564,14 +555,15 @@ describe('JS API', () => {
         expect(slider.getNavs()).to.be.empty;
 
         // Add the navs.
-        slider.addNav('.example-nav');
+        slider.addNavs('.example-nav');
 
         // Confirm we get back the real navs.
         expect(slider.getNavs()).to.deep.equal(navs);
       });
     });
 
-    it('`update()` re-scrolls to the current slide', () => {
+    // TODO: Ignore callbacks!
+    xit('`update()` re-scrolls to the current slide', () => {
       cy.getSlider('test').then(($el) => {
         const slider = $el.get(0).SnapSlider;
         const callback = cy.spy();
@@ -591,66 +583,60 @@ describe('JS API', () => {
       });
     });
 
+    // TODO: Make sure destroy kills all callbacks and listeners.
     it('`destroy()` stops transitions, removes event listeners, and deletes slider references', () => {
       let slider;
-      let slides;
-      const scrollListener = cy.spy();
-      const scrollEndListener = cy.spy();
-      const arrowKeyListener = cy.spy();
-      const focusListener = cy.spy();
+      // let slides;
+      // const arrowKeyListener = cy.spy();
+      // const focusListener = cy.spy();
 
       cy.getSlider('test').then(($el) => {
         slider = $el.get(0).SnapSlider;
-        slides = slider.slides;
+        // slides = slider.slides;
 
-        // Spy on each event listener's callbacks to test whether they've been removed.
-        slider.on('scroll', scrollListener);
-        slider.on('scroll.end', scrollEndListener);
-        slider.on('change.keydown', arrowKeyListener);
-        slider.on('change.focusin', focusListener);
+        // // Spy on each event listener's callbacks to test whether they've been removed.
+        // // TODO: Should we still listen for arrow keys and focus events?
+        // slider.on('change.keydown', arrowKeyListener);
+        // slider.on('change.focusin', focusListener);
 
-        // Make sure to stop transitions and observers.
-        slider.stopTransition = cy.stub();
+        // Make sure to stop current debounce and observers.
+        slider.maybeSetCurrentDebounce.cancel = cy.stub();
+        slider.intersectionObserver.disconnect = cy.stub();
         slider.resizeObserver.disconnect = cy.stub();
 
-        // Trigger focus and arrow key to fire every event listener.
-        slides[1].focus();
-        slider.container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+        // // Trigger focus and arrow key to fire every event listener.
+        // slides[1].focus();
+        // slider.container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
       });
 
       // Wait so `expect` happens after the callback.
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.getSlider('test').wait(1000).then(() => {
-        expect(scrollListener).to.be.called;
-        expect(scrollEndListener).to.be.called;
-        expect(arrowKeyListener).to.be.called;
-        expect(focusListener).to.be.called;
+        // expect(arrowKeyListener).to.be.called;
+        // expect(focusListener).to.be.called;
 
-        // Now reset and try again!
-        scrollListener.resetHistory();
-        scrollEndListener.resetHistory();
-        arrowKeyListener.resetHistory();
-        focusListener.resetHistory();
+        // // Now reset and try again!
+        // arrowKeyListener.resetHistory();
+        // focusListener.resetHistory();
 
         // Kill it.
         slider.destroy();
 
-        // Did we stop transitions and observers?
-        expect(slider.stopTransition).to.be.called;
+        // Did we stop current debounce and observers?
+        expect(slider.maybeSetCurrentDebounce.cancel).to.be.called;
+        expect(slider.intersectionObserver.disconnect).to.be.called;
         expect(slider.resizeObserver.disconnect).to.be.called;
 
-        // Trigger focus and arrow key to fire every event listener.
-        slides[1].focus();
-        slider.container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+        // // Trigger focus and arrow key to fire every event listener.
+        // slides[1].focus();
+        // slider.container.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
       });
 
       // Wait so `expect` happens after the callback.
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.getSlider('test').wait(1000).then(() => {
-        expect(scrollListener).to.not.be.called;
-        expect(scrollEndListener).to.not.be.called;
-        expect(arrowKeyListener).to.not.be.called;
-        expect(focusListener).to.not.be.called;
+        // expect(arrowKeyListener).to.not.be.called;
+        // expect(focusListener).to.not.be.called;
       });
 
       // Last but not least, make sure we can't find any references to this slider anymore.
@@ -668,10 +654,12 @@ describe('JS API', () => {
     it('`reset()` re-initializes a slider', () => {
       cy.getSlider('test').then(($el) => {
         const slider = $el.get(0).SnapSlider;
+        const destroy = cy.spy(slider, 'destroy');
         const init = cy.spy(slider, 'init');
 
         slider.reset();
 
+        expect(destroy).to.be.called;
         expect(init).to.be.called;
       });
     });
@@ -719,17 +707,15 @@ describe('JS API', () => {
       });
     });
 
-    it('`reset()` can not change container or slider ID', () => {
+    it('`reset()` can not change slider ID', () => {
       cy.getSlider('test').then(($el) => {
         const slider = $el.get(0).SnapSlider;
-        const { container, id } = slider;
+        const { id } = slider;
 
         slider.reset({
-          container: '#navigation',
           id: 'fake',
         });
 
-        expect(slider.container).to.equal(container);
         expect(slider.id).to.equal(id);
       });
     });
@@ -785,7 +771,7 @@ describe('JS API', () => {
       cy.initSlider('.example', { id: 'test' });
     });
 
-    it('`getButtonTarget()` returns the slider ID and index for a goto button', () => {
+    xit('`getButtonTarget()` returns the slider ID and index for a goto button', () => {
       // Init nav and external goto buttons.
       cy.getSlider('test').then(($el) => {
         const slider = $el.get(0).SnapSlider;
@@ -810,7 +796,7 @@ describe('JS API', () => {
       });
     });
 
-    it('`debug()` prints slider information for different elements', () => {
+    xit('`debug()` prints slider information for different elements', () => {
       cy.getSlider('test').then(($el) => {
         const { any } = Cypress.sinon.match;
         const slider = $el.get(0).SnapSlider;

cypress/integration/scroll-offset.spec.js

@@ -16,7 +16,7 @@ describe('Scroll Offset', () => {
 
     // Confirm slider position.
     cy.getSlider('vertical-example').invoke('scrollLeft').should('equal', 0);
-    cy.getSlider('vertical-example').invoke('scrollTop').should('equal', 320);
+    cy.getSlider('vertical-example').invoke('scrollTop').should('equal', 288);
   });
 
   it('works with 2D sliders', () => {
@@ -25,14 +25,14 @@ describe('Scroll Offset', () => {
       const slider = $el.get(0).SnapSlider;
 
       expect(slider.container.scrollLeft).to.equal(320);
-      expect(slider.container.scrollTop).to.equal(240);
+      expect(slider.container.scrollTop).to.equal(224);
 
       slider.goto('last');
     });
 
     // Confirm slider position.
     cy.getSlider('2d-example').invoke('scrollLeft').should('equal', 640);
-    cy.getSlider('2d-example').invoke('scrollTop').should('equal', 480);
+    cy.getSlider('2d-example').invoke('scrollTop').should('equal', 448);
   });
 
   it('works with nested sliders', () => {