Add test + docs for new scrollTo API

README.md

@@ -95,7 +95,7 @@ It does not emit any event
 ### 1.1.0
 
 #### New features
- - scrollTo(index)
+ - Add new API `scrollTo(index)`
 
 ### 1.0.0
 

docs/README.md

@@ -62,6 +62,7 @@ It does not emit any event
 | Name    | parameters | return value | Description                     |
 |---------|------------|--------------|---------------------------------|
 | update  | none       | undefined    | Tells the component to recalculate the visible items. This can be useful in certain cases, for example if you change the height of the container |
+| scrollTo  | index (Number)       | undefined    | Scroll to the given index |
 
 
 ### Examples
@@ -81,6 +82,11 @@ It does not emit any event
 
 ## Changelog
 
+### 1.1.0
+
+#### New features
+ - Add new API `scrollTo(index)`
+
 ### 1.0.0
 
 #### New features

src/App.vue

@@ -15,6 +15,7 @@
           <input type="text" id="bench" v-model.number="bench" />
         </label>
         <input
+          id="scroll-to-btn"
           type="button"
           @click="$refs.vlist.scrollTo(100)"
           value="Scroll to index 100"

tests/e2e/specs/test.js

@@ -29,17 +29,17 @@ describe("vue-virtualized-list", () => {
 
   it("should render the right items at the beginning", () => {
     cy.visit("/")
-    cy.get(".item:first").contains("static text - content-0")
-    cy.get(".item:nth(20)").contains("static text - content-20")
+    cy.get(".item:first").contains("static text - #0 - content-0")
+    cy.get(".item:nth(20)").contains("static text - #20 - content-20")
   })
 
   it("should render the right items after scroll", () => {
     cy.visit("/")
     cy.get(".vue-virtualized-list__scroll")
       .scrollTo(0, 1000)
       .wait(250)
-      .get(".item:first").contains("static text - content-35")
-      .get(".item:nth(25)").contains("static text - content-60")
+      .get(".item:first").contains("static text - #35 - content-35")
+      .get(".item:nth(25)").contains("static text - #60 - content-60")
   })
 
   it("should render 5 elements as bench before the first and after the last visible ones", () => {
@@ -55,7 +55,7 @@ describe("vue-virtualized-list", () => {
       .get(".item:nth(-6)").should("be.visible")
   })
 
-  it.only("should render the specified amount of item as bench", () => {
+  it("should render the specified amount of item as bench", () => {
     cy.visit("/")
     cy.get(".vue-virtualized-list__scroll")
       .scrollTo(0, 1000)
@@ -65,4 +65,12 @@ describe("vue-virtualized-list", () => {
     cy.get(".vue-virtualized-list__scroll")
     .get(".item").should("have.length", 40)
   })
+
+  it("should let the user to scroll to a specific item with the 'scrollTo' API", () => {
+      cy.visit("/")
+        .get("#scroll-to-btn")
+        .click()
+        .get(".vue-virtualized-list__scroll")
+        .get(".item:nth(5)").contains("static text - #100 - content-100") // 5 because of the bench
+  })
 })