diff --git a/packages/editor/src/fields/StyleSetter/components/Box.vue b/packages/editor/src/fields/StyleSetter/components/Box.vue index c3c20bd3..7656d56c 100644 --- a/packages/editor/src/fields/StyleSetter/components/Box.vue +++ b/packages/editor/src/fields/StyleSetter/components/Box.vue @@ -4,7 +4,7 @@ {{ item.text }} { expect(wrapper.findAll('input').length).toBe(8); }); + test('根据 model 显示 margin/padding 值', () => { + const wrapper = mount(Box, { + props: { + model: { + marginTop: '10', + marginRight: '20', + marginBottom: '30', + marginLeft: '40', + paddingTop: '1', + paddingRight: '2', + paddingBottom: '3', + paddingLeft: '4', + }, + }, + }); + const values = wrapper.findAll('input').map((i) => (i.element as HTMLInputElement).value); + expect(values).toEqual(['10', '20', '30', '40', '1', '2', '3', '4']); + }); + + test('model 变更时输入框值同步更新', async () => { + const wrapper = mount(Box, { + props: { model: { marginTop: '10', marginRight: '20' } }, + }); + expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('10'); + + await wrapper.setProps({ model: { marginTop: '50', marginRight: '60' } }); + expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('50'); + expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('60'); + }); + test('change 事件携带值与对应字段名', async () => { const wrapper = mount(Box, { props: { model: { marginTop: '10' } } }); const input = wrapper.findAll('input')[0]; @@ -40,6 +70,13 @@ describe('StyleSetter Position', () => { expect(wrapper.findAll('input').length).toBe(4); }); + test('model 变更时输入框值同步更新', async () => { + const wrapper = mount(Position, { props: { model: { top: '0', right: '10' } } }); + await wrapper.setProps({ model: { top: '20', right: '30' } }); + expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('20'); + expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('30'); + }); + test('change 事件触发并携带 modifyKey', async () => { const wrapper = mount(Position, { props: { model: { top: '0' } } }); const input = wrapper.findAll('input')[1];