1
0
Fork 0
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:
Evren Ozkan 2025-01-20 21:27:19 +01:00
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

View file

@ -50,6 +50,7 @@ export default {
mixins: [elementForm],
data() {
return {
allowedValues: ['value', 'format', 'styles'],
values: {
value: '',
format: TEXT_FORMAT_TYPES.PLAIN,

View file

@ -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()
})
})