fix switch style & fix input tests & switch tests.

MrRaindrop · MrRaindrop · commit 59fff85df3c7 · 2018-01-18T13:51:10.000+08:00
diff --git a/build/karma.config.js b/build/karma.config.js
@@ -70,11 +70,12 @@ module.exports = function (config) {
       resolve('test/components/input.js'),
       resolve('test/components/image.js'),
       resolve('test/components/render-function.js'),
+      resolve('test/components/switch.js'),
       resolve('test/components/text.js'),
       resolve('test/core/style.js'),
-      '../test/utils/**/*.js',
-      '../test/modules/**/*.js',
-      '../test/misc/**/*.js'
+      '../test/utils/*.js',
+      '../test/modules/*.js',
+      '../test/misc/*.js'
       ///////////////////////////////////////////
       // '../test/core/*.js',
       // '../test/!(utils|core)/*.js'
@@ -102,8 +103,6 @@ module.exports = function (config) {
     browserDisconnectTimeout: 10000,
     preprocessors: {
       '../test/**/*.js': ['rollup', 'coverage']
-      // '../src/**/*.js': ['rollup', 'coverage']
-      // '../test/**/!(components|examples|core)/!(component).js': ['rollup', 'coverage']
     },
     rollupPreprocessor: rollupConfig,
 
diff --git a/examples/components/switch.vue b/examples/components/switch.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div class="ct">
+      <switch class="switch" checked="false"></switch>
+      <switch class="switch" checked="true"></switch>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .ct {
+    height: 300px;
+    background-color: #f7f7f7;
+    align-items: center;
+    justify-content: center;
+  }
+  .switch {
+    margin: 20px;
+  }
+</style>
diff --git a/examples/test/components/switch.vue b/examples/test/components/switch.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="switch-ct">
+      <text class="label">simple</text>
+      <switch ref="simple"></switch>
+    </div>
+    <div class="switch-ct">
+      <text class="label">checked</text>
+      <switch ref="checked" checked="true"></switch>
+    </div>
+    <div class="switch-ct">
+      <text class="label">disabled</text>
+      <switch ref="disabledChecked" disabled="true" checked="true"></switch>
+      <switch ref="disabled" disabled="true"></switch>
+    </div>
+    <div class="switch-ct">
+      <text class="label">onchange</text>
+      <switch ref="change" @change="onchange"></switch>
+      <text ref="changeInfo" class="info">{{checked}}</text>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked: false
+      }
+    },
+    methods: {
+      onchange (event) {
+        console.log(`onchage, value: ${event.value}`)
+        this.checked = event.value
+        this.callSpy && this.callSpy('change', event.value)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .switch-ct {
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-top: 60px;
+  }
+  .label {
+    font-size: 40px;
+    line-height: 60px;
+    width: 350px;
+    color: #666;
+    text-align: right;
+    margin-right: 20px;
+  }
+  .info {
+    font-size: 30px;
+    line-height: 60px;
+    color: #BBB;
+    margin-left: 10px;
+  }
+</style>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "weex-vue-render",
   "description": "Web renderer for weex project written in Vue DSL.",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "license": "Apache-2.0",
   "main": "dist/index.common.js",
   "keywords": [
@@ -25,7 +25,7 @@
     "build:plugins": "node build/build.js plugins",
     "build:examples": "node build/build-examples",
     "build:test": "node build/build-examples --test",
-    "test": "npm run build:test && karma start build/karma.config.js",
+    "test": "npm run build:test && node --max_old_space_size=4096 node_modules/karma/bin/karma start build/karma.config.js",
     "ci": "npm run test",
     "serve": "serve -p 12580"
   },
diff --git a/packages/weex-vue-render/README.md b/packages/weex-vue-render/README.md
@@ -31,7 +31,9 @@ App.$el = '#root'
 new App()
 ```
 
-> If import the UMD formated bundle to the html, then you dont't have to call `init` manually.
+> The way to require  ES modules and CommonJS modules may have a slice of difference between different versions of Vue and Vue-loader, and this is totally depending on Vue and the loader, so please check out related documents.
+
+> If your import the UMD formated bundle to the html, then you dont't have to call `init` manually.
 
 ```html
 <script>{{Vue runtime}}</script>
diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weex-vue-render",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Web renderer for weex project written in Vue DSL.",
   "license": "Apache-2.0",
   "main": "dist/index.common.js",
diff --git a/src/components/switch/index.js b/src/components/switch/index.js
@@ -16,10 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import './style.css'
 
 function getSwitch (weex) {
   const { extractComponentStyle } = weex
-  const { createEvent } = weex.utils
+  const { dispatchNativeEvent } = weex.utils
 
   return {
     name: 'weex-switch',
@@ -41,7 +42,7 @@ function getSwitch (weex) {
     },
     computed: {
       wrapperClass () {
-        const classArray = ['weex-switch']
+        const classArray = ['weex-el', 'weex-switch']
         this.isChecked && classArray.push('weex-switch-checked')
         this.isDisabled && classArray.push('weex-switch-disabled')
         return classArray.join(' ')
@@ -52,7 +53,7 @@ function getSwitch (weex) {
         // TODO: handle the events
         if (!this.isDisabled) {
           this.isChecked = !this.isChecked
-          this.$emit('change', createEvent(this, 'change', { value: this.isChecked }))
+          dispatchNativeEvent(this.$el, 'change', { value: this.isChecked })
         }
       }
     },
@@ -64,8 +65,8 @@ function getSwitch (weex) {
           const handler = evt => {
             this.toggle()
           }
-          this._removeClickHandler = el.removeEventListener.bind(el, 'click', handler)
-          el.addEventListener('click', handler)
+          this._removeClickHandler = el.removeEventListener.bind(el, 'weex$tap', handler)
+          el.addEventListener('weex$tap', handler)
         }
       }
     },
@@ -79,10 +80,6 @@ function getSwitch (weex) {
     },
 
     render (createElement) {
-      /* istanbul ignore next */
-      // if (process.env.NODE_ENV === 'development') {
-      //   validateStyles('switch', this.$vnode.data && this.$vnode.data.staticStyle)
-      // }
       return createElement('span', {
         attrs: { 'weex-type': 'switch' },
         staticClass: this.wrapperClass,
diff --git a/src/components/switch/style.css b/src/components/switch/style.css
@@ -20,12 +20,7 @@
 .weex-switch {
   border: 0.013333rem solid #dfdfdf;
   cursor: pointer;
-  display: inline-block;
-  position: relative;
   vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   box-sizing: content-box;
   background-clip: content-box;
@@ -36,8 +31,6 @@
   border-color: #dfdfdf;
   box-shadow: #dfdfdf 0 0 0 0 inset;
   border-radius: 0.8rem;
-  -webkit-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
-  -moz-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
   transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
 }
 
@@ -65,8 +58,6 @@
   position: absolute;
   top: 0;
   left: 0;
-  -webkit-transition: background-color 0.4s, left 0.2s;
-  -moz-transition: background-color 0.4s, left 0.2s;
   transition: background-color 0.4s, left 0.2s;
 }
 
diff --git a/test/components/input.js b/test/components/input.js
@@ -17,16 +17,19 @@
  * under the License.
  */
 import { init } from '../helper'
+import input from '../../src/components/input'
 
 init('components input', (Vue, helper) => {
 
   const id = 'components.input'
   const spys = ['input', 'change']
   let vm, refs
+  const { toArray } = helper.utils
 
   before(() => {
     vm = helper.createVm(id, {
-      spys
+      spys,
+      plugins: [input]
     })
     refs = vm.$refs
   })
@@ -37,14 +40,16 @@ init('components input', (Vue, helper) => {
 
   describe('basic input behaviours', function () {
     it('<input> components.', function () {
+      debugger
       expect(refs.txtInput.nodeName.toLowerCase()).to.equal('p')
       expect(refs.txtChange.nodeName.toLowerCase()).to.equal('p')
-      expect(refs.inputText.nodeName.toLowerCase()).to.equal('input')
-      expect(refs.inputText.type.toLowerCase()).to.equal('text')
+      expect(refs.inputText.$el.nodeName.toLowerCase()).to.equal('input')
+      expect(toArray(refs.inputText.$el.classList)).include.members(['weex-input', 'weex-el'])
+      expect(refs.inputText.$el.type.toLowerCase()).to.equal('text')
     })
 
     it('emit input events.', function (done) {
-      const input = refs.inputText
+      const input = refs.inputText.$el
       helper.utils.once(input, 'input', function (e) {
         expect(e.target.value).to.be.equal('abc')
         done()
@@ -55,7 +60,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('emit change events.', function (done) {
-      const input = refs.inputText
+      const input = refs.inputText.$el
       helper.utils.once(input, 'change', function (e) {
         expect(e.target.value).to.be.equal('def')
         done()
@@ -66,7 +71,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('v-model for two way data binding', function (done) {
-      const input = refs.vModelInput
+      const input = refs.vModelInput.$el
       const text = refs.vModelText
       const prevValue = 'two way binding value'
       const newValue = 'v-model works!'
@@ -81,7 +86,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key default', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
@@ -91,7 +96,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key go', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
@@ -101,7 +106,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key next', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
@@ -111,7 +116,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key search', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
@@ -121,7 +126,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key send', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
@@ -131,7 +136,7 @@ init('components input', (Vue, helper) => {
     })
 
     it('return key done', function (done) {
-      const input = refs.inputReturnDefault
+      const input = refs.inputReturnDefault.$el
       helper.utils.dispatchEvent(input, 'keyup', {
         keyCode: 13
       }, function () {
diff --git a/test/components/switch.js b/test/components/switch.js
diff --git a/test/helper/main.js b/test/helper/main.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "weex-vue-render",`
`3`		`- "version": "1.0.14",`
	`3`	`+ "version": "1.0.15",`
`4`	`4`	`"description": "Web renderer for weex project written in Vue DSL.",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"main": "dist/index.common.js",`