devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
111 lines (109 loc) • 3.98 kB
JavaScript
/*!
* devextreme-vue
* Version: 25.1.5
* Build date: Wed Sep 03 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-vue
*/
import { mount } from '@vue/test-utils';
import { defineComponent, nextTick } from 'vue';
import DxTextBox from '../../text-box';
jest.setTimeout(1000);
beforeEach(() => {
jest.clearAllMocks();
});
describe('two-way binding', () => {
it('v-model works correctly', async () => {
expect.assertions(1);
const vm = defineComponent({
template: `<dx-text-box id="component1" v-model="testValue"></dx-text-box>
<dx-text-box id="component2" v-model="testValue"></dx-text-box>
`,
components: {
DxTextBox,
},
data() {
return {
testValue: 'value',
};
},
});
const wrapper = mount(vm);
const component = wrapper.getComponent('#component2').vm;
component.$_config.updateValue = jest.fn();
wrapper.getComponent('#component1').vm.$emit('update:modelValue', 'newValue');
await nextTick(() => {
expect(component.$_config.updateValue).toBeCalled();
});
});
it('v-model with argument works correctly', async () => {
expect.assertions(1);
const vm = defineComponent({
template: `<dx-text-box id="component1" v-model:value="testValue"></dx-text-box>
<dx-text-box id="component2" v-model:value="testValue"></dx-text-box>
`,
components: {
DxTextBox,
},
props: {
testValue: String,
},
});
const wrapper = mount(vm);
const component = wrapper.getComponent('#component2').vm;
component.$_config.updateValue = jest.fn();
await wrapper.setProps({ testValue: 'test' });
await nextTick(() => {
expect(component.$_config.updateValue).toBeCalled();
});
});
it('dxClass should be set when class attr ', async () => {
expect.assertions(1);
const vm = defineComponent({
template: `<dx-text-box id="component" :class="customClass"></dx-text-box>
`,
components: {
DxTextBox,
},
props: {
customClass: {
type: String,
default: 'custom1',
},
},
});
const wrapper = mount(vm);
const component = wrapper.getComponent('#component');
await wrapper.setProps({ customClass: 'custom2' });
await nextTick(() => {
expect(component.element.classList.toString()).toBe('custom2 dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
});
});
it('dxClass should be set when class attr is undefined', async () => {
expect.assertions(1);
const vm = defineComponent({
template: `<dx-text-box id="component" :class="{custom: customClass}"></dx-text-box>
`,
components: {
DxTextBox,
},
props: {
customClass: {
type: String,
default: true,
},
},
});
const wrapper = mount(vm);
const component = wrapper.getComponent('#component');
await wrapper.setProps({ customClass: false });
await nextTick(() => {
expect(component.element.classList.toString()).toBe('dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
});
});
});