test(ruler): add ruler jest test (didi#395)

* fix(ActivityIndicator): fix wrong roller-success background-color

* feat(ruler): add new component Ruler

* feat(ruler): update for ruler

* feat(ruler): finish ruler

* code-style(activity-indicator): change color

* feat(ruler): remove mouse event and add throttle

* test(jest): add jest-canvas-mock

components/ruler/index.vue

@@ -76,15 +76,18 @@ export default {
 
     realMin() {
       const {scope, min} = this
-      const [left] = scope
+      const [left, right] = scope
+      if (min > right) {
+        return left
+      }
       return min > left ? min : left
     },
 
     realMax() {
       let {scope, max} = this
       const [left, right] = scope
       if (left > max) {
-        max = right
+        return right
       }
       return max > right ? right : max
     },

components/ruler/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Basic 1`] = `
+<div class="md-example-child md-example-child-single-component">
+  <p>当前值：1000</p>
+  <div class="container">
+    <div class="md-ruler"><canvas class="md-ruler-canvas"></canvas>
+      <div class="md-ruler-cursor"></div>
+      <div class="md-ruler-arrow"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Radio List 1`] = `
+<div class="md-example-child md-example-child-single-component">
+  <p>当前值：1300</p>
+  <div class="container">
+    <div class="md-ruler"><canvas class="md-ruler-canvas"></canvas>
+      <div class="md-ruler-cursor"></div>
+      <div class="md-ruler-arrow"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Radio With Field 1`] = `
+<div class="md-example-child md-example-child-single-component">
+  <p>当前值：1305</p>
+  <div class="container">
+    <div class="md-ruler"><canvas class="md-ruler-canvas"></canvas>
+      <div class="md-ruler-cursor"></div>
+      <div class="md-ruler-arrow"></div>
+    </div>
+  </div>
+</div>
+`;

components/ruler/test/cases/demo0.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1000,
+      scope: [1000, 2000],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>

components/ruler/test/cases/demo1.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="1800"
+        :min="1200"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1305,
+      scope: [1000, 2000],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>

components/ruler/test/cases/demo2.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="2000"
+        :min="1000"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1300,
+      scope: [1000, 2000],
+    }
+  },
+  mounted() {
+    window.triggerRuler2 = () => {
+      this.value = 1500
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>

components/ruler/test/demo.spec.js

@@ -0,0 +1,16 @@
+import Demo0 from './cases/demo0'
+import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
+import {renderToString} from '@vue/server-test-utils'
+
+describe('Radio', () => {
+  test(`Basic`, () => {
+    expect(renderToString(Demo0)).toMatchSnapshot()
+  })
+  test(`With Field`, () => {
+    expect(renderToString(Demo1)).toMatchSnapshot()
+  })
+  test(`List`, () => {
+    expect(renderToString(Demo2)).toMatchSnapshot()
+  })
+})