mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-02-11 07:39:00 +00:00
fix: emit only allowed values from text element form
* Add allowedValues property to control permitted fields * Add unit tests for values-changed event filtering
This commit is contained in:
parent
f4c02fb5a7
commit
a03499a115
2 changed files with 91 additions and 0 deletions
web-frontend
modules/builder/components/elements/components/forms/general
test/unit/core/components
|
@ -50,6 +50,7 @@ export default {
|
|||
mixins: [elementForm],
|
||||
data() {
|
||||
return {
|
||||
allowedValues: ['value', 'format', 'styles'],
|
||||
values: {
|
||||
value: '',
|
||||
format: TEXT_FORMAT_TYPES.PLAIN,
|
||||
|
|
|
@ -0,0 +1,90 @@
|
|||
import { mount } from '@vue/test-utils'
|
||||
import { TEXT_FORMAT_TYPES } from '@baserow/modules/builder/enums'
|
||||
import TextElementForm from '@baserow/modules/builder/components/elements/components/forms/general/TextElementForm'
|
||||
|
||||
describe('TextElementForm', () => {
|
||||
let wrapper
|
||||
|
||||
const defaultProps = {
|
||||
defaultValues: {
|
||||
value: 'test text',
|
||||
format: TEXT_FORMAT_TYPES.PLAIN,
|
||||
styles: {},
|
||||
// Add some non-allowed properties
|
||||
someOtherProp: 'should not be included',
|
||||
anotherProp: 123,
|
||||
},
|
||||
}
|
||||
|
||||
const mountComponent = (props = {}) => {
|
||||
return mount(TextElementForm, {
|
||||
propsData: {
|
||||
...defaultProps,
|
||||
...props,
|
||||
},
|
||||
mocks: {
|
||||
$t: (key) => key,
|
||||
$registry: {
|
||||
getOrderedList: () => [],
|
||||
},
|
||||
},
|
||||
provide: {
|
||||
workspace: {},
|
||||
builder: {
|
||||
theme: {},
|
||||
},
|
||||
currentPage: {},
|
||||
elementPage: {},
|
||||
mode: 'edit',
|
||||
},
|
||||
stubs: {
|
||||
FormGroup: true,
|
||||
RadioGroup: true,
|
||||
InjectedFormulaInput: true,
|
||||
CustomStyle: true,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mountComponent()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
wrapper.destroy()
|
||||
})
|
||||
|
||||
test('only emits allowed values when values change', async () => {
|
||||
// Verify initial state
|
||||
expect(wrapper.vm.allowedValues).toEqual(['value', 'format', 'styles'])
|
||||
|
||||
// Simulate value change
|
||||
await wrapper.setData({
|
||||
values: {
|
||||
format: TEXT_FORMAT_TYPES.MARKDOWN,
|
||||
styles: { color: 'red' },
|
||||
},
|
||||
})
|
||||
|
||||
// Get the last emitted values-changed event
|
||||
const emittedValues = wrapper.emitted('values-changed')
|
||||
expect(emittedValues).toBeTruthy()
|
||||
const lastEmittedValues = emittedValues[emittedValues.length - 1][0]
|
||||
|
||||
// Verify only allowed values are present
|
||||
expect(Object.keys(lastEmittedValues)).toEqual([
|
||||
'value',
|
||||
'format',
|
||||
'styles',
|
||||
])
|
||||
expect(lastEmittedValues).toEqual({
|
||||
value: 'test text',
|
||||
format: TEXT_FORMAT_TYPES.MARKDOWN,
|
||||
styles: { color: 'red' },
|
||||
})
|
||||
|
||||
// Verify non-allowed values are not present
|
||||
expect(lastEmittedValues.someOtherProp).toBeUndefined()
|
||||
expect(lastEmittedValues.anotherProp).toBeUndefined()
|
||||
})
|
||||
})
|
Loading…
Reference in a new issue