diff --git a/examples/model/checkbox/index.html b/examples/model/checkbox/index.html deleted file mode 100644 index 521d3bd..0000000 --- a/examples/model/checkbox/index.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - v-model integration example for checkbox - - - - - -
-

Survey

- - Which do you like fruit ? - - - - - - - - - - - -

model value: {{selected}}

-
- - - diff --git a/examples/model/component/index.html b/examples/model/component/index.html deleted file mode 100644 index b0c2fa6..0000000 --- a/examples/model/component/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - component validation example - - - - - - - - -
- - - - - -

{{result.selected}}

-
- - - diff --git a/examples/model/radio/index.html b/examples/model/radio/index.html deleted file mode 100644 index 3c2326e..0000000 --- a/examples/model/radio/index.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - v-model integration example for radio - - - - - -
-

Survey

- - Which do you like fruit ? - - - - - - - - - - - -

model value: {{selected}}

-
- - - diff --git a/examples/model/select/index.html b/examples/model/select/index.html deleted file mode 100644 index 12e562a..0000000 --- a/examples/model/select/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - v-model intergration example for select - - - - - -
-
- - - -
-

Required !!

-

Sorry, The maximum is 3 languages !!

-
- -

model value: {{langs}}

-
- - - diff --git a/examples/model/text/index.html b/examples/model/text/index.html deleted file mode 100644 index 64dc1c9..0000000 --- a/examples/model/text/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - v-model integration example for text - - - - - -
- - - - -
-

too short username!!

-
- -

model value: {{msg}}

-
- - - diff --git a/src/components/validity/lifecycles.js b/src/components/validity/lifecycles.js index c5ec236..89b0476 100644 --- a/src/components/validity/lifecycles.js +++ b/src/components/validity/lifecycles.js @@ -50,9 +50,6 @@ export default function (Vue: GlobalAPI): Object { // for event control flags this._modified = false - // for v-model integration flag - this._modelIntegrationMode = 'NONE' - // watch validation raw results this._watchValidationRawResults() @@ -96,26 +93,10 @@ export default function (Vue: GlobalAPI): Object { toggleClasses(this.$el, this.classes.pristine, addClass) } - function updated () { - if (this._modelIntegrationMode === 'MODEL_AND_USER') { - const maybeChangeModel: ?boolean = this._elementable.modelValueEqual(this._vnode) - if (!this._applyWithUserHandler && maybeChangeModel !== null && !maybeChangeModel) { - this._elementable.fireInputableEvent() - } - delete this._applyWithUserHandler - } else if (this._modelIntegrationMode === 'MODEL') { - const maybeChangeModel: ?boolean = this._elementable.modelValueEqual(this._vnode) - if (maybeChangeModel !== null && !maybeChangeModel) { - this._elementable.fireInputableEvent() - } - } - } - return { created, destroyed, - mounted, - updated + mounted } } diff --git a/src/components/validity/methods-event.js b/src/components/validity/methods-event.js index 08bed95..7e0d241 100644 --- a/src/components/validity/methods-event.js +++ b/src/components/validity/methods-event.js @@ -2,115 +2,12 @@ import { MODEL_NOTIFY_EVENT } from '../../util' export default function (Vue: GlobalAPI): Object { - const { toArray } = Vue.util function _fireEvent (type: string, ...args: Array): void { this.$emit(type, ...args) } - function _interceptEvents (child: VNode, multiple: boolean): void { - (multiple ? (child.children || []) : [child]).forEach((child: VNode) => { this._wrapEvent(child) }) - } - - function _wrapEvent (child: VNode): Object { - const ret: Object = {} - if (!child.tag || !child.data) { return ret } - - const dir: ?VNodeDirective = getModelDirective(child) - if (!dir) { return ret } - - const { type, orgListeners, listeners } = getEventSources(child) - const modelHandler: Function = Array.isArray(orgListeners) ? orgListeners[0] : orgListeners - const userHandler: ?Function = Array.isArray(orgListeners) ? orgListeners[1] : null - - let integrationMode = this._modelIntegrationMode - if (modelHandler && userHandler) { - integrationMode = this._modelIntegrationMode = 'MODEL_AND_USER' - } else if (modelHandler && !userHandler) { - integrationMode = this._modelIntegrationMode = 'MODEL' - } - - const modelApplyer = (args) => { - return (applicable: ?boolean) => { - if (userHandler) { - this._applyWithUserHandler = true - } - if (applicable === undefined || applicable === true) { - modelHandler.apply(child.context, args) - } - } - } - - const modifier: ?boolean = (dir.modifiers || {}).validity - - const validity = this - listeners[type] = function () { - const args: Array = toArray(arguments, 0) - if (integrationMode === 'MODEL_AND_USER') { - const event: any = args[0] - if (event[MODEL_NOTIFY_EVENT] === 'DOM') { - delete event[MODEL_NOTIFY_EVENT] - userHandler && userHandler.apply(child.context, args) - return - } else if (event[MODEL_NOTIFY_EVENT] === 'COMPONENT') { - const value: any = event.value - args[0] = value - userHandler && userHandler.apply(child.context, args) - return - } - - if (modifier) { - const fn = validity._applyer = modelApplyer(args) - args.push(fn) - userHandler && userHandler.apply(child.context, args) - } else { - userHandler && userHandler.apply(child.context, args) - modelHandler.apply(child.context, args) - } - } else if (integrationMode === 'MODEL') { - if (modifier) { - validity._applyer = modelApplyer(args) - } else { - modelHandler.apply(child.context, args) - } - } - } - - ret.dir = dir - return ret - } - - function pass (applicable: ?boolean) { - // TODO: should be implementsed error cases - if (this._modelIntegrationMode !== 'NONE' && this._applyer) { - this._applyer(applicable) - } - } - return { - _fireEvent, - _interceptEvents, - _wrapEvent, - pass - } -} - -function getModelDirective (child: VNode): ?VNodeDirective { - return ((child.data && child.data.directives) || []).find(dir => { return dir.name === 'model' }) -} - -function getEventSources (child: VNode): Object { - const sources: Object = {} - const listeners = sources.listeners = child.componentOptions - ? child.componentOptions.listeners - : (child.data && child.data.on) - sources.type = - (child.tag === 'input' && (child.data && child.data.attrs && child.data.attrs.type) === 'text') || - (child.tag && child.tag.match(/vue-component/)) - ? 'input' - : 'change' - if (listeners) { - sources.orgListeners = listeners[sources.type] + _fireEvent } - return sources } diff --git a/src/components/validity/render.js b/src/components/validity/render.js index d327714..2f254e7 100644 --- a/src/components/validity/render.js +++ b/src/components/validity/render.js @@ -3,7 +3,6 @@ export default function (Vue: GlobalAPI): Object { return { render (h: Function): VNode { - this._interceptEvents(this.child, this.multiple) return this.child } } diff --git a/src/elements/component.js b/src/elements/component.js index 7a1f21a..4b19e9d 100644 --- a/src/elements/component.js +++ b/src/elements/component.js @@ -1,10 +1,7 @@ /* @flow */ -import { MODEL_NOTIFY_EVENT } from '../util' -import Helper from './helper' export default function (Vue: GlobalAPI): any { const { looseEqual } = Vue.util - const { modelValueEqual } = Helper(Vue) class ComponentElement { _vm: ValidityComponent @@ -59,16 +56,6 @@ export default function (Vue: GlobalAPI): any { this._watchers.forEach(watcher => { watcher() }) this._watchers = [] } - - fireInputableEvent (): void { - const args = { value: this.getValue() } - args[MODEL_NOTIFY_EVENT] = 'COMPONENT' - this._vnode.child.$emit('input', args) - } - - modelValueEqual (vnode: VNode): ?boolean { - return modelValueEqual(vnode) - } } return ComponentElement diff --git a/src/elements/helper.js b/src/elements/helper.js deleted file mode 100644 index 84de7fd..0000000 --- a/src/elements/helper.js +++ /dev/null @@ -1,25 +0,0 @@ -/* @flow */ -import { MODEL_NOTIFY_EVENT } from '../util' - -export default function (Vue: GlobalAPI): Object { - const { looseEqual } = Vue.util - - function addEventInfo (e: any) { - e[MODEL_NOTIFY_EVENT] = 'DOM' - } - - function modelValueEqual (vnode: VNode): ?boolean { - const directives: Array = (vnode.data && vnode.data.directives) || [] - const directive: ?VNodeDirective = directives.find((dir: VNodeDirective) => { - return dir.name === 'model' - }) - return (!directive || directive.oldValue === undefined) - ? null - : looseEqual(directive.value, directive.oldValue) - } - - return { - addEventInfo, - modelValueEqual - } -} diff --git a/src/elements/multi.js b/src/elements/multi.js index c40ad48..3a46acf 100644 --- a/src/elements/multi.js +++ b/src/elements/multi.js @@ -1,10 +1,7 @@ /* @flow */ -import { triggerEvent } from '../util' -import Helper from './helper' export default function (Vue: GlobalAPI): any { const { looseEqual } = Vue.util - const { addEventInfo, modelValueEqual } = Helper(Vue) class MultiElement { _vm: ValidityComponent @@ -56,25 +53,6 @@ export default function (Vue: GlobalAPI): any { }) } - fireInputableEvent (): void { - this._eachItems(item => { - triggerEvent(item, 'change', addEventInfo) - }) - } - - modelValueEqual (vnode: VNode): ?boolean { - let ret: ?boolean = null - const children: Array = (this._vm.child && this._vm.child.children) || [] - for (let i = 0; i < children.length; i++) { - const maybeEqual: ?boolean = modelValueEqual(children[i]) - if (!maybeEqual) { - ret = maybeEqual - break - } - } - return ret - } - _getCheckedValue (): Array { const value: Array = [] this._eachItems(item => { diff --git a/src/elements/single.js b/src/elements/single.js index f42b687..f907288 100644 --- a/src/elements/single.js +++ b/src/elements/single.js @@ -1,10 +1,7 @@ /* @flow */ -import { triggerEvent } from '../util' -import Helper from './helper' export default function (Vue: GlobalAPI): any { const { looseEqual } = Vue.util - const { addEventInfo, modelValueEqual } = Helper(Vue) class SingleElement { _vm: ValidityComponent @@ -82,23 +79,6 @@ export default function (Vue: GlobalAPI): any { } } } - - fireInputableEvent (): void { - const el = this._vm.$el - if (el.tagName === 'SELECT') { - triggerEvent(el, 'change', addEventInfo) - } else { - if (el.type === 'checkbox') { - triggerEvent(el, 'change', addEventInfo) - } else { - triggerEvent(el, 'input', addEventInfo) - } - } - } - - modelValueEqual (vnode: VNode): ?boolean { - return modelValueEqual(vnode) - } } return SingleElement diff --git a/src/util.js b/src/util.js index e4b9ab4..765e92a 100644 --- a/src/util.js +++ b/src/util.js @@ -6,8 +6,6 @@ const inBrowser = const UA = inBrowser && window.navigator.userAgent.toLowerCase() const isIE9 = UA && UA.indexOf('msie 9.0') > 0 -export const MODEL_NOTIFY_EVENT: string = '__VUE_VALIDATOR_MODEL_NOTIFY_EVENT__' - export function getClass (el: any): string { let classname: string | Object = el.className if (typeof classname === 'object') { @@ -65,10 +63,3 @@ export function toggleClasses (el: any, key: string, fn: Function): void { fn(el, keys[i]) } } - -export function triggerEvent (el: any, event: string, fn: Function): void { - const e: any = document.createEvent('HTMLEvents') - e.initEvent(event, true, true) - fn && fn(e) - el.dispatchEvent(e) -} diff --git a/test/unit/components/validity-functional.test.js b/test/unit/components/validity-functional.test.js index 90acf76..cc45029 100644 --- a/test/unit/components/validity-functional.test.js +++ b/test/unit/components/validity-functional.test.js @@ -1003,562 +1003,4 @@ describe('validity functional component', () => { }) }) }) - - describe('v-model integrations', () => { - const props = { - field: 'field1', - validators: { required: { rule: true, message: 'required !!' }} - } - - function createModelDirective (key, value, modifier) { - const modifiers = modifier ? { validity: true } : {} - return [{ - expression: key, - modifiers, - name: 'model', - value: value - }] - } - - function textboxModelHanlder (prop) { - return function ($event) { - if ($event.target.composing) { return } - this[prop] = $event.target.value - } - } - - function checkboxModelHandler (prop, value) { - return function ($event) { - const $$a = this[prop] - const $$el = $event.target - const $$c = $$el.checked - if (Array.isArray($$a)) { - const $$v = value - const $$i = this._i($$a, $$v) - if ($$c) { - $$i < 0 && (this[prop] = $$a.concat($$v)) - } else { - $$i > -1 && (this[prop] = $$a.slice(0, $$i).concat($$a.slice($$i + 1))) - } - } else { - this[prop] = $$c - } - } - } - - function selectModelHandler (prop, isArray) { - return function ($event) { - const values = Array.prototype.filter.call( - $event.target.options, function (o) { return o.selected } - ).map(function (o) { - return '_value' in o ? o._value : o.value - }) - this[prop] = isArray ? values : values[0] - } - } - - function componentModelHandler (prop) { - return function ($event) { this[prop] = $event } - } - - describe('up to model', () => { - describe('text', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { msg: 'hello' }, - components, - render (h) { - return h('div', [ - h('p', [this.msg]), - h('validity', { props }, [ - h('input', { - ref: 'input', - attrs: { type: 'text' }, - directives: createModelDirective('msg', this.msg, true), - on: { - input: [ - textboxModelHanlder('msg'), - (e, $apply) => { valid && $apply() } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { input } = vm.$refs - waitForUpdate(() => { - input.value = 'world' - triggerEvent(input, 'input') - }).thenWaitFor(1).then(() => { - assert.equal(vm.msg, 'world') - }).then(() => { - // simulate valid value changing - valid = false - input.value = '' - triggerEvent(input, 'input') - }).thenWaitFor(1).then(() => { - assert.equal(vm.msg, 'world') - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(input, 'input') - }).thenWaitFor(1).then(() => { - assert.equal(vm.msg, '') - }).then(done) - }) - }) - - describe('checkbox', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { checked: false }, - components, - render (h) { - return h('div', [ - h('p', [this.checked]), - h('validity', { props }, [ - h('input', { - ref: 'checkbox', - attrs: { type: 'checkbox' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - checkboxModelHandler('checked'), - (e, $apply) => { valid && $apply() } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { checkbox } = vm.$refs - waitForUpdate(() => { - checkbox.checked = true - triggerEvent(checkbox, 'change') - }).thenWaitFor(1).then(() => { - assert(vm.checked) - }).then(() => { - // simulate valid value changing - valid = false - checkbox.checked = false - triggerEvent(checkbox, 'change') - }).thenWaitFor(1).then(() => { - assert(vm.checked) - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(checkbox, 'change') - }).thenWaitFor(1).then(() => { - assert(!vm.checked) - }).then(done) - }) - }) - - describe('select', () => { - describe('single', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { selected: 'one' }, - components, - render (h) { - return h('div', [ - h('p', [this.selected]), - h('validity', { props }, [ - h('select', { - ref: 'select', - directives: createModelDirective('selected', this.selected, true), - on: { - change: [ - selectModelHandler('selected', false), - (e, $apply) => { valid && $apply() } - ] - } - }, [ - h('option', { attrs: { value: 'one' }}), - h('option', { attrs: { value: 'two' }}), - h('option', { attrs: { value: 'three' }}) - ]) - ]) - ]) - } - }).$mount(el) - const { select } = vm.$refs - waitForUpdate(() => { - select.selectedIndex = 1 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'two') - }).then(() => { - // simulate valid value changing - valid = false - select.selectedIndex = 2 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'two') - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'three') - }).then(done) - }) - }) - - describe('multiple', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { items: [] }, - components, - render (h) { - return h('div', [ - h('p', [this.items]), - h('validity', { props }, [ - h('select', { - ref: 'select', - attrs: { multiple: true }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - selectModelHandler('items', true), - (e, $apply) => { valid && $apply() } - ] - } - }, [ - h('option', { ref: 'option1', attrs: { value: 'one' }}), - h('option', { ref: 'option2', attrs: { value: 'two' }}), - h('option', { ref: 'option3', attrs: { value: 'three' }}) - ]) - ]) - ]) - } - }).$mount(el) - const { select, option1, option2, option3 } = vm.$refs - waitForUpdate(() => { - option1.selected = true - option2.selected = true - option3.selected = false - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one', 'two']) - }).then(() => { - // simulate valid value changing - valid = false - option1.selected = false - option2.selected = false - option3.selected = false - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one', 'two']) - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, []) - }).then(done) - }) - }) - }) - - describe('component', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { - selected: '', - options: [ - { text: 'One', value: 'one' }, - { text: 'Two', value: 'two' }, - { text: 'Three', value: 'three' } - ] - }, - components, - render (h) { - return h('div', [ - h('p', [this.selected]), - h('validity', { props }, [ - h('comp-input', { - ref: 'comp', - props: { options: this.options }, - directives: createModelDirective('selected', 'one', true), - on: { - input: [ - componentModelHandler('selected'), - (e, $apply) => { valid && $apply() } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { comp } = vm.$refs - const { select } = comp.$refs - waitForUpdate(() => { - select.selectedIndex = 1 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'two') - }).then(() => { - // simulate valid value changing - valid = false - select.selectedIndex = 2 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'two') - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'three') - }).then(done) - }) - }) - }) - - describe('down to validity component', () => { - describe('text', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { msg: 'hello' }, - components, - render (h) { - return h('div', [ - h('p', [this.msg]), - h('validity', { props }, [ - h('input', { - ref: 'textbox', - attrs: { type: 'text' }, - directives: createModelDirective('msg', this.msg, true), - on: { - input: [ - textboxModelHanlder('msg'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { textbox } = vm.$refs - waitForUpdate(() => { - vm.msg = 'world' - }).thenWaitFor(1).then(() => { - /* assert.equal(textbox.value, 'world') */ - assert(callCount === 1) - }).then(() => { - textbox.value = '' - triggerEvent(textbox, 'input') - }).thenWaitFor(1).then(() => { - assert.equal(vm.msg, '') - assert(callCount === 2) - }).then(done) - }) - }) - - describe('checkbox', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { checked: false }, - components, - render (h) { - return h('div', [ - h('p', [this.checked]), - h('validity', { props }, [ - h('input', { - ref: 'checkbox', - attrs: { type: 'checkbox' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - checkboxModelHandler('checked'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { checkbox } = vm.$refs - waitForUpdate(() => { - vm.checked = true - }).thenWaitFor(1).then(() => { - assert(callCount === 1) - }).then(() => { - checkbox.checked = false - triggerEvent(checkbox, 'change') - }).thenWaitFor(1).then(() => { - assert(callCount === 2) - assert(vm.checked === false) - }).then(done) - }) - }) - - describe('select', () => { - describe('single', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { selected: 'one' }, - components, - render (h) { - return h('div', [ - h('p', [this.selected]), - h('validity', { props }, [ - h('select', { - ref: 'select', - directives: createModelDirective('selected', this.selected, true), - on: { - change: [ - selectModelHandler('selected', false), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }, [ - h('option', { attrs: { value: 'one' }}), - h('option', { attrs: { value: 'two' }}), - h('option', { attrs: { value: 'three' }}) - ]) - ]) - ]) - } - }).$mount(el) - const { select } = vm.$refs - waitForUpdate(() => { - vm.selected = 'two' - }).thenWaitFor(1).then(() => { - assert(callCount === 2) // 1? found strange behavor of select - }).then(() => { - select.selectedIndex = 2 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert(callCount === 3) // 2 - assert.equal(vm.selected, 'three') - }).then(done) - }) - }) - - describe('multiple', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { items: [] }, - components, - render (h) { - return h('div', [ - h('p', [this.items]), - h('validity', { props }, [ - h('select', { - ref: 'select', - attrs: { multiple: true }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - selectModelHandler('items', true), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }, [ - h('option', { ref: 'option1', attrs: { value: 'one' }}), - h('option', { ref: 'option2', attrs: { value: 'two' }}), - h('option', { ref: 'option3', attrs: { value: 'three' }}) - ]) - ]) - ]) - } - }).$mount(el) - const { select, option1, option2, option3 } = vm.$refs - waitForUpdate(() => { - vm.items = ['one', 'two'] - }).thenWaitFor(1).then(() => { - assert(callCount === 2) // 1? found strange behavor of select - }).then(() => { - option1.selected = false - option2.selected = false - option3.selected = true - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['three']) - assert(callCount === 3) // 2? - }).then(done) - }) - }) - }) - - describe('component', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { - selected: '', - options: [ - { text: 'One', value: 'one' }, - { text: 'Two', value: 'two' }, - { text: 'Three', value: 'three' } - ] - }, - components, - render (h) { - return h('div', [ - h('p', [this.selected]), - h('validity', { props }, [ - h('comp-input', { - ref: 'comp', - props: { options: this.options }, - directives: createModelDirective('selected', this.selected, true), - on: { - input: [ - componentModelHandler('selected'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { comp } = vm.$refs - const { select } = comp.$refs - waitForUpdate(() => { - vm.selected = 'two' - }).thenWaitFor(1).then(() => { - assert(callCount === 1) - }).then(() => { - select.selectedIndex = 2 - triggerEvent(select, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.selected, 'three') - assert(callCount === 2) - }).then(done) - }) - }) - }) - }) }) diff --git a/test/unit/components/validity-group-functional.test.js b/test/unit/components/validity-group-functional.test.js index 5670c47..82910aa 100644 --- a/test/unit/components/validity-group-functional.test.js +++ b/test/unit/components/validity-group-functional.test.js @@ -228,280 +228,4 @@ describe('validity-group functional component', () => { }) }) }) - - describe('v-model integrations', () => { - const props = { - field: 'field1', - validators: { required: { rule: true, message: 'required !!' }} - } - - function createModelDirective (key, value, modifier) { - const modifiers = modifier ? { validity: true } : {} - return [{ - expression: key, - modifiers, - name: 'model', - value: value - }] - } - - function checkboxModelHandler (prop, value) { - return function ($event) { - const $$a = this[prop] - const $$el = $event.target - const $$c = $$el.checked - if (Array.isArray($$a)) { - const $$v = value - const $$i = this._i($$a, $$v) - if ($$c) { - $$i < 0 && (this[prop] = $$a.concat($$v)) - } else { - $$i > -1 && (this[prop] = $$a.slice(0, $$i).concat($$a.slice($$i + 1))) - } - } else { - this[prop] = $$c - } - } - } - - function radioModelHanlder (prop, value) { - return function ($event) { this[prop] = value } - } - - describe('up to model', () => { - describe('checkbox', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { items: [] }, - components, - render (h) { - return h('div', [ - h('p', [this.items]), - h('validity-group', { props }, [ - h('input', { - ref: 'checkbox1', - attrs: { type: 'checkbox', value: 'one' }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - checkboxModelHandler('items', 'one'), - (e, $apply) => { valid && $apply() } - ] - } - }), - h('input', { - ref: 'checkbox2', - attrs: { type: 'checkbox', value: 'two' }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - checkboxModelHandler('items', 'two'), - (e, $apply) => { valid && $apply() } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { checkbox1, checkbox2 } = vm.$refs - waitForUpdate(() => { - checkbox1.checked = true - triggerEvent(checkbox1, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one']) - }).then(() => { - // simulate valid value changing - valid = false - checkbox2.checked = true - triggerEvent(checkbox2, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one']) - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(checkbox2, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one', 'two']) - }).then(done) - }) - }) - - describe('radio', () => { - it('should be work', done => { - let valid = true - const vm = new Vue({ - data: { checked: '' }, - components, - render (h) { - return h('div', [ - h('p', [this.checked]), - h('validity-group', { props }, [ - h('input', { - ref: 'radio1', - attrs: { type: 'radio', name: 'g1', value: 'one' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - radioModelHanlder('checked', 'one'), - (e, $apply) => { valid && $apply() } - ] - } - }), - h('input', { - ref: 'radio2', - attrs: { type: 'radio', name: 'g1', value: 'two' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - radioModelHanlder('checked', 'two'), - (e, $apply) => { valid && $apply() } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { radio1, radio2 } = vm.$refs - waitForUpdate(() => { - radio1.checked = true - triggerEvent(radio1, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.checked, 'one') - }).then(() => { - // simulate valid value changing - valid = false - radio2.checked = true - triggerEvent(radio2, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.checked, 'one') - }).then(() => { - // simulate invalid value changing - valid = true - triggerEvent(radio2, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.checked, 'two') - }).then(done) - }) - }) - }) - - describe('down to model', () => { - describe('checkbox', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { items: [] }, - components, - render (h) { - return h('div', [ - h('p', [this.items]), - h('validity-group', { props }, [ - h('input', { - ref: 'checkbox1', - attrs: { type: 'checkbox', value: 'one' }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - checkboxModelHandler('items', 'one'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }), - h('input', { - ref: 'checkbox2', - attrs: { type: 'checkbox', value: 'two' }, - directives: createModelDirective('items', this.items, true), - on: { - change: [ - checkboxModelHandler('items', 'two'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { checkbox2 } = vm.$refs - waitForUpdate(() => { - vm.items = ['one'] - }).thenWaitFor(1).then(() => { - assert(callCount === 2) // 1? found strange befaivor... - }).then(() => { - checkbox2.checked = true - triggerEvent(checkbox2, 'change') - }).thenWaitFor(1).then(() => { - assert.deepEqual(vm.items, ['one', 'two']) - assert(callCount === 3) - }).then(done) - }) - }) - - describe('radio', () => { - it('should be work', done => { - let callCount = 0 - const vm = new Vue({ - data: { checked: '' }, - components, - render (h) { - return h('div', [ - h('p', [this.checked]), - h('validity-group', { props }, [ - h('input', { - ref: 'radio1', - attrs: { type: 'radio', name: 'g1', value: 'one' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - radioModelHanlder('checked', 'one'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }), - h('input', { - ref: 'radio2', - attrs: { type: 'radio', name: 'g1', value: 'two' }, - directives: createModelDirective('checked', this.checked, true), - on: { - change: [ - radioModelHanlder('checked', 'two'), - (e, $apply) => { - callCount++ - $apply && $apply() - } - ] - } - }) - ]) - ]) - } - }).$mount(el) - const { radio2 } = vm.$refs - waitForUpdate(() => { - vm.checked = 'one' - }).thenWaitFor(1).then(() => { - assert(callCount === 2) // 1? strange befaivor... - }).then(() => { - radio2.checked = true - triggerEvent(radio2, 'change') - }).thenWaitFor(1).then(() => { - assert.equal(vm.checked, 'two') - assert(callCount === 3) - }).then(done) - }) - }) - }) - }) })