apache · asfgit · May 27, 2017 · May 26, 2017 · May 26, 2017 · May 26, 2017
diff --git a/test/mocha.opts b/test/mocha.opts
@@ -1,2 +1,2 @@
 --recursive
---bail
+--bail
diff --git a/test/pages/components/scroller-fixed.vue b/test/pages/components/scroller-fixed.vue
@@ -1,10 +1,12 @@
 <template>
-  <scroller ref="container" class="container" @scroll="onscroll">
-      <div><text>{{vp}}|{{p1}}|{{p2}}</text></div>
-    <div v-for="item in items" style="background-color:yellow;height:300"><text >row</text></div>
-    <div ref="panel" class="fixed-panel"></div>
-    <div ref="panel2" class="fixed-panel2"></div>
-  </scroller>
+  <div>
+    <scroller ref="container" class="container" @scroll="onscroll">
+      <div test-id='div_1' style="position:fixed; top: 0; left: 100px;"><text test-id='text_1'>{{vp}}|{{p1}}|{{p2}}</text></div>
+      <div v-for="item in items" style="background-color:yellow;height:300"><text >row</text></div>
+      <div ref="panel" class="fixed-panel"></div>
+      <div ref="panel2" class="fixed-panel2"></div>
+    </scroller>
+  </div>
 </template>
 <style>
   .container {

diff --git a/test/pages/components/slider-common.vue b/test/pages/components/slider-common.vue
@@ -0,0 +1,229 @@
+<template>
+  <div style="padding: 23px">
+    <div class="segment">
+      <text class="segment-title">OnScroll & OnChange Event</text>
+      <div class="debug-panel" style="margin: 10px">
+        <text test-id='s1_p'>{{progress}}</text>
+        <text test-id='s1_f'>{{flag}}</text>
+        <text test-id='s1_d'>{{direction}}</text>
+        <text test-id='s1_i'>{{index}}</text>
+      </div>
+      <div style="height: 60px; flex-direction: row;">
+        <div test-id='s1_page0' style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center"
+             @click="goto(0)">
+          <text class="page-title">Page 1</text>
+        </div>
+        <div test-id='s1_page1' style="flex: 1;background-color: aquamarine;justify-content: center;align-items: center"
+             @click="goto(1)">
+          <text class="page-title">Page 2</text>
+        </div>
+        <div test-id='s1_page2' style="flex: 1;background-color: darkcyan;justify-content: center;align-items: center"
+             @click="goto(2)">
+          <text class="page-title">Page 3</text>
+        </div>
+      </div>
+      <div style="height: 10px;background-color: skyblue">
+        <div :style="{ width: '233px', height: '10px', marginLeft: progress, backgroundColor: 'black' }"></div>
+      </div>
+      <slider test-id='slider_1' ref="slider_1" class="slider" interval="4500" @change="onchange" append="tree"
+              :index="index"
+              @scroll="onscroll" offset-x-accuracy="0.01">
+        <div class="frame" v-for="img in imageList">
+          <image class="image" resize="cover" :src="img.src"></image>
+          <text class="title">{{img.title}}</text>
+        </div>
+        <indicator style="height: 20px"></indicator>
+      </slider>
+    </div>
+    <div class="segment" style="margin-top: 20px">
+      <text class="segment-title">Infinite Scroll = true</text>
+      <div class="debug-panel">
+        <text test-id='s2_switch' :style="{ height: '48px', padding: '10px', backgroundColor: bg1, fontWeight: 'bold' }"
+              @click="toggle(1, true)">{{status1}}
+        </text>
+        <div style="flex-direction: row">
+          <text style="padding: 10px;">switch count:</text>
+          <text test-id='s2_count' style="font-size: 40px;margin-right: 10px;color: green">{{count1}}</text>
+        </div>
+      </div>
+      <slider test-id='slider_2' class="slider" :auto-play="autoPlay1" interval="500" @change="update(1)">
+        <div class="frame" v-for="img in imageList2">
+          <image class="image" resize="cover" :src="img.src"></image>
+          <text class="title">{{img.title}}</text>
+        </div>
+      </slider>
+    </div>
+
+    <div class="segment" style="margin-top: 20px">
+      <text class="segment-title">Infinite Scroll = false</text>
+      <div class="debug-panel">
+        <text test-id='s3_switch' :style="{ height: '48px', padding: '10px', backgroundColor: bg2, fontWeight: 'bold' }"
+              @click="toggle(2, true)">{{status2}}
+        </text>
+        <div style="flex-direction: row">
+          <text style="padding: 10px;">switch count:</text>
+          <text test-id='s3_count' style="font-size: 40px;margin-right: 10px;color: green">{{count2}}</text>
+        </div>
+      </div>
+      <slider test-id='slider_3' class="slider" infinite="false" :auto-play="autoPlay2" interval="500"
+              @change="update(2)">
+        <div class="frame" v-for="img in imageList2">
+          <image class="image" resize="cover" :src="img.src"></image>
+          <text class="title">{{img.title}}</text>
+        </div>
+        <indicator style="height: 20px"></indicator>
+      </slider>
+    </div>
+  </div>
+</template>
+<style scoped>
+  .page-title {
+    color: black;
+    font-size: 30px;
+    font-weight: bold;
+  }
+
+  .segment-title {
+    font-size: 30px;
+    background-color: lightgray;
+    padding: 10px;
+  }
+
+  .segment {
+    border-color: black;
+    border-width: 2px;
+  }
+
+  .image {
+    width: 700px;
+    height: 200px;
+  }
+
+  .slider {
+    width: 700px;
+    height: 200px;
+  }
+
+  .title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    padding-left: 20px;
+    width: 200px;
+    color: #FFFFFF;
+    font-size: 36px;
+    line-height: 60px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .frame {
+    width: 700px;
+    height: 200px;
+  }
+
+  .debug-panel {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+</style>
+<script>
+  module.exports = {
+    data: {
+      imageList: [{
+        title: 'Page 1',
+        src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
+      }, {
+        title: 'Page 2',
+        src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
+      }, {
+        title: 'Page 3',
+        src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
+      }],
+      imageList2: [{
+        title: 'Page 1',
+        src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
+      }, {
+        title: 'Page 2',
+        src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
+      }],
+      index: 0,
+      progress: 0,
+      ratio: 0,
+      direction: 'unknown',
+      count: 0,
+      switchCount: 0,
+      flag: false,
+      autoPlay1: false,
+      autoPlay2: false,
+      bg1: 'greenyellow',
+      bg2: 'greenyellow'
+      ,
+      status1: 'PLAY'
+      ,
+      status2: 'PLAY'
+      ,
+      count1: 0
+      ,
+      count2: 0
+    },
+    methods: {
+      goto(i) {
+        this.index = i;
+        this.progress = i * 233;
+      },
+      onscroll(e) {
+        var ratio = parseFloat(e.offsetXRatio);
+        if (Math.abs(ratio) > 0.05) {
+          if (ratio < 0) {
+            this.direction = 'left';
+          } else if (ratio > 0) {
+            this.direction = 'right';
+          }
+        }
+        this.progress = 233 * this.index + 233 * -ratio;
+        this.count++;
+        this.flag = this.count <= 100;
+      },
+      onchange(e) {
+        this.goto(parseInt(e.index));
+        this.switchCount++;
+        this.count = 0;
+      },
+      update(index) {
+        if (index == 1) {
+          this.count1++;
+        } else if (index == 2) {
+          this.count2++;
+        }
+      },
+      toggle(index, repeat) {
+        var self = this;
+        if (index == 1) {
+          if (this.autoPlay1) {
+            this.status1 = 'PLAY';
+            this.bg1 = 'greenyellow';
+          } else {
+            this.status1 = 'STOP';
+            this.bg1 = 'red';
+          }
+          this.autoPlay1 = !this.autoPlay1;
+        } else if (index == 2) {
+          if (this.autoPlay2) {
+            this.status2 = 'PLAY';
+            this.bg2 = 'greenyellow';
+          } else {
+            this.status2 = 'STOP';
+            this.bg2 = 'red';
+          }
+          this.autoPlay2 = !this.autoPlay2;
+        }
+
+        if (repeat) {
+          setTimeout(function () {
+            self.toggle(index, false);
+          }, 5000);
+        }
+      },
+    },
+  };
+</script>
diff --git a/test/screenshot/border-android.png b/test/screenshot/border-android.png
diff --git a/test/scripts/components/recycler.test.js b/test/scripts/components/recycler.test.js
@@ -43,7 +43,7 @@ describe('recycler @ignore-android @ignore-ios', function () {
   });
 
   after(function () {
-      return util.quit(driver); 
+      return util.quit(driver);
   })
 
   let scaleFactor = 0
@@ -361,20 +361,20 @@ describe('recycler @ignore-android @ignore-ios', function () {
     .elementById((isAndroid ? 'cell27' : 'cell28'))
     .click()
     .elementById('stickyText1')
-    .text() 
+    .text()
     .then(text => {
       console.log(text)
       originContentOffset = Number.parseInt(text.replace('Content Offset:-',''))
     })
-    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5,duration:2})
+    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5, duration: 2})
     .sleep(1000)
-    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5,duration:2})
+    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5, duration: 2})
     .elementById('stickyText1')
     .text()
     .then(text => {
       console.log(text)
       const contentOffset = Number.parseInt(text.replace('Content Offset:-',''))
-      assert.isOk(originContentOffset - contentOffset > 20 / scaleFactor)
+      assert.isOk(originContentOffset - contentOffset > screenHeight / scaleFactor)
     })
     .elementById('fixed1')
     .click()
@@ -391,7 +391,7 @@ describe('recycler @ignore-android @ignore-ios', function () {
       console.log(text)
       originContentOffset = Number.parseInt(text.replace('Content Offset:-',''))
     })
-    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5})
+    .touch('drag', {fromX:recyclerWidth / 2, fromY:screenHeight / 5, toX:recyclerWidth / 2, toY: screenHeight * 4 / 5,duration: 2})
     .elementById('stickyText1')
     .text()
     .then(text => {

diff --git a/test/scripts/components/scroller-fixed.test.js b/test/scripts/components/scroller-fixed.test.js
@@ -32,7 +32,7 @@ describe('scroller fixed position item ', function () {
   before(function () {
     return util.init(driver)
       .get(util.getPage('/components/scroller-fixed.js'))
-      .waitForElementByXPath('//scroller[1]/div[1]',util.getGETActionWaitTimeMills(),1000)
+      .waitForElementById('div_1',util.getGETActionWaitTimeMills(),1000)
   });
 
   after(function () {
@@ -43,7 +43,8 @@ describe('scroller fixed position item ', function () {
   it('#1 position:fixed items', () => {
     return driver
     .dragUpAndDown()
-    .elementByXPath('//scroller[1]/div[1]/text[1]')
+    .sleep(1000)
+    .elementById('text_1')
     .text()
     .then((text)=>{
         var parts = text.split("|");