✅ write e2e for settings & apis (#34, #57)

* ✅ test for settings adaptiveHeight

* ✅ test for settings arrows

* ✅ test for settings asNavFor

* ✅ test for settings autoplay

* ✅ test for settings centerMode

* ✅ test for settings centerPadding

* ✅ test for settings className

* ✅ test for settings dots

* ✅ change test path as relative path(#53)

close: #53

* ✅ missing focusOnSelect make test fail

* ✅ settings className has been removed (#38)

* ✅ add test for dotsClass

* ✅ add test for draggable

* ✅ add test for edgeFriction

* 🎨 make readable test

* ✅ add test for focusOnSelect

* ✅ add test for infinite

* ✅ add test for initialSlide

* ✅ add test for pauseOnHover

* ✅ add test for pauseOnDotsHover

* ✅ add test for pauseOnFocus

* ✅ add test for responsive

* ✅ add test for rows

* ✅ add test for swipe

* ✅ add test for swipeToSlide

* 🎨 make clear the line is the statement rather than expression

* 🎨 refactor redundant code

* ✅ add test for touchThreshold

* 🎨 to be the same as settings seq

* ✅ add test for api prev

* ✅ add test for api next

* ✅ add test for api goTo

close: #34

demo/pages/examples/configs.js

@@ -27,6 +27,8 @@ export default {
     title: 'Simple Slides',
     settings: {
       dots: true,
+      dotsClass: 'slick-dots custom-dot-class',
+      edgeFriction: 0.35,
       infinite: false,
       speed: 500,
       slidesToShow: 1,
@@ -38,10 +40,12 @@ export default {
     numSlides: 9,
     settings: {
       dots: true,
+      focusOnSelect: true,
       infinite: true,
       speed: 500,
       slidesToShow: 3,
       slidesToScroll: 3,
+      touchThreshold: 5,
     },
   },
   responsive: {
@@ -87,9 +91,11 @@ export default {
     settings: {
       dots: true,
       infinite: true,
+      initialSlide: 2,
       speed: 500,
       slidesToShow: 3,
       slidesToScroll: 1,
+      swipeToSlide: true,
     },
   },
   'multiple-rows': {
@@ -108,6 +114,7 @@ export default {
     settings: {
       centerMode: true,
       centerPadding: '20px',
+      focusOnSelect: true,
       infinite: true,
       slidesToShow: 3,
       speed: 500,
@@ -168,6 +175,7 @@ export default {
   'auto-play': {
     title: 'Auto Play',
     settings: {
+      arrows: false,
       dots: true,
       infinite: true,
       slidesToShow: 3,
@@ -187,6 +195,8 @@ export default {
       slidesToScroll: 1,
       autoplay: true,
       autoplaySpeed: 2000,
+      pauseOnDotsHover: true,
+      pauseOnFocus: true,
       pauseOnHover: true,
     },
   },
@@ -225,6 +235,8 @@ export default {
     title: 'Vertical Swipe To Slide',
     template: verticalTemplate,
     settings: {
+      centerMode: true,
+      centerPadding: '30px',
       dots: true,
       infinite: true,
       slidesToShow: 3,

demo/pages/examples/index.vue

@@ -160,6 +160,9 @@ export default {
     enquire.register('(min-width: 0px) and (max-width: 600px)', this.onMobile)
     enquire.register('(min-width: 601px)', this.onDesktop)
   },
+  mounted() {
+    window.carousel = this.$refs.c1
+  },
   methods: {
     onMobile() {
       this.screen = 'mobile'

tests/e2e/specs/apis.js

@@ -0,0 +1,23 @@
+describe('APIs', () => {
+  describe('prev', () => {
+    it('should move the slide right', () => {
+      cy.visit('/#/example/multiple')
+      cy.window().then(window => window.carousel.prev())
+      cy.get('[data-index="8"]').should('be.visible')
+    })
+  })
+  describe('next', () => {
+    it('should move the slide left', () => {
+      cy.visit('/#/example/multiple')
+      cy.window().then(window => window.carousel.next())
+      cy.get('[data-index="3"]').should('be.visible')
+    })
+  })
+  describe('goTo', () => {
+    it('should move the given slide to current', () => {
+      cy.visit('/#/example/multiple')
+      cy.window().then(window => window.carousel.goTo(3))
+      cy.get('[data-index="3"]').should('be.visible')
+    })
+  })
+})