test(ruler): add ruler jest test (#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,7 +76,10 @@ export default {
 
     realMin() {
       const {scope, min} = this
-      const [left] = scope
+      const [left, right] = scope
+      if (min > right) {
+        return left
+      }
       return min > left ? min : left
     },
 
@@ -84,7 +87,7 @@ export default {
       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()
+  })
+})

components/ruler/test/index.spec.js

@@ -1,16 +1,220 @@
-import SingleComponent from '../index'
-import {mount} from 'avoriaz'
+import {Ruler} from 'mand-mobile'
+import {mount} from '@vue/test-utils'
+import triggerTouch from '../../popup/test/touch-trigger'
 
-describe('SingleComponent', () => {
+describe('Ruler', () => {
   let wrapper
 
   afterEach(() => {
     wrapper && wrapper.destroy()
   })
 
-  it('create a simple ruler', () => {
-    wrapper = mount(SingleComponent)
+  it('create a ruler', () => {
+    wrapper = mount(Ruler)
 
-    expect(wrapper.hasClass('md-ruler')).to.be.true
+    expect(wrapper.classes()).toContain('md-ruler')
+  })
+
+  it('touch the ruler bigger', () => {
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    // to bigger
+    triggerTouch(wrapper.element, 'touchstart', 0, 0)
+    triggerTouch(window, 'touchmove', 100, 0)
+    triggerTouch(window, 'touchmove', 50, 0)
+    triggerTouch(wrapper.element, 'touchend', 50, 0)
+
+    expect(value).toBeGreaterThan(50)
+  })
+
+  it('touch the ruler lesser', () => {
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    // to bigger
+    triggerTouch(wrapper.element, 'touchstart', 0, 0)
+    triggerTouch(window, 'touchmove', 100, 0)
+    triggerTouch(window, 'touchmove', 150, 0)
+    triggerTouch(wrapper.element, 'touchend', 50, 0)
+
+    expect(value).toBeLessThan(50)
+  })
+
+  it('touch the ruler over max', () => {
+    const max = 90
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+        max,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    // over max
+    triggerTouch(wrapper.element, 'touchstart', 0, 0)
+    triggerTouch(window, 'touchmove', 5000, 0)
+    triggerTouch(window, 'touchmove', 0, 0)
+    triggerTouch(wrapper.element, 'touchend', 0, 0)
+
+    expect(value).toEqual(max)
+  })
+
+  it('touch the ruler below min', () => {
+    const min = 10
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+        min,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    // below min
+    triggerTouch(wrapper.element, 'touchstart', 0, 0)
+    triggerTouch(window, 'touchmove', 100, 0)
+    triggerTouch(window, 'touchmove', 5000, 0)
+    triggerTouch(wrapper.element, 'touchend', 5000, 0)
+
+    expect(value).toEqual(min)
+  })
+
+  it('change value', () => {
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    value = 90
+    wrapper.setProps({value: 90})
+
+    expect(value).toEqual(90)
+  })
+
+  it('change value when touching', () => {
+    let value = 50
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        value,
+      },
+      listeners: {
+        input(val) {
+          value = val
+        },
+      },
+    })
+
+    triggerTouch(wrapper.element, 'touchstart', 0, 0)
+    triggerTouch(window, 'touchmove', 100, 0)
+
+    wrapper.setProps({value: 10})
+
+    triggerTouch(window, 'touchmove', 5000, 0)
+    triggerTouch(wrapper.element, 'touchend', 5000, 0)
+
+    expect(value).toEqual(0)
+  })
+
+  it('value bigger than max', () => {
+    wrapper = mount(Ruler, {
+      propsData: {
+        value: 10000,
+      },
+    })
+
+    expect(wrapper.vm.value).toEqual(10000)
+  })
+
+  it('props max over the max of scope', () => {
+    const scope = [0, 100]
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        scope,
+        max: 110,
+      },
+    })
+
+    expect(wrapper.vm.realMax).toEqual(scope[1])
+  })
+
+  it('props max below the min of scope', () => {
+    const scope = [0, 100]
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        scope,
+        max: -10,
+      },
+    })
+
+    expect(wrapper.vm.realMax).toEqual(scope[1])
+  })
+
+  it('props mix below the min of scope', () => {
+    const scope = [0, 100]
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        scope,
+        min: -10,
+      },
+    })
+
+    expect(wrapper.vm.realMin).toEqual(scope[0])
+  })
+
+  it('props mix over the max of scope', () => {
+    const scope = [0, 100]
+
+    wrapper = mount(Ruler, {
+      propsData: {
+        scope,
+        min: 110,
+      },
+    })
+
+    expect(wrapper.vm.realMin).toEqual(scope[0])
   })
 })

jest.config.js

@@ -2,7 +2,7 @@ const TEST_TYPE = process.env.TEST_TYPE || 'components'
 // const TEST_BUNDLE = TEST_TYPE === 'bundle' ? 'lib/mand-mobile.umd' : ''
 
 module.exports = {
-  setupFiles: ['<rootDir>/test/jest.init.js'],
+  setupFiles: ['jest-canvas-mock', '<rootDir>/test/jest.init.js'],
   moduleFileExtensions: [
     'js',
     'json',
@@ -42,4 +42,4 @@ module.exports = {
   ],
   coverageReporters: ['html', 'lcov', 'text-summary'],
   coverageDirectory: './test/coverage'
-}
+}

package.json

@@ -146,6 +146,7 @@
     "inject-loader": "^3.0.0",
     "inquirer": "^3.3.0",
     "jest": "^23.6.0",
+    "jest-canvas-mock": "^2.0.0-beta.1",
     "jest-serializer-vue": "^2.0.2",
     "jest-svg-sprite-loader": "^1.0.1",
     "jest-transform-stub": "^1.0.0",