Skip to content

Commit

Permalink
fix: set the preview property for custom controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasnetau
lucasnetau committed Oct 31, 2023
1 parent 477f7ca commit de67461
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/js/control/custom.js
View file
Expand Up @@ -33,7 +33,7 @@ export default class controlCustom extends control {
'description',
'subtype',
'id',
'isPreview',
'preview',
'required',
'title',
'aria-required',
Expand Down
90 changes: 69 additions & 21 deletions tests/control/custom.test.js
View file
Expand Up @@ -23,7 +23,7 @@ describe('Test Custom Control', () => {
}
}

const fb = await $(fbWrap).formBuilder({fields, templates}).promise
const fb = await fbWrap.formBuilder({fields, templates}).promise
const field = {
type: 'starRating',
className: 'form-control'
Expand All @@ -32,7 +32,7 @@ describe('Test Custom Control', () => {

expect(cbOnRender.mock.calls).toHaveLength(1)

$(fbWrap).find('li.input-control[data-type="starRating"]').click()
fbWrap.find('li.input-control[data-type="starRating"]').click()

expect(cbOnRender.mock.calls).toHaveLength(2)
})
Expand All @@ -58,11 +58,11 @@ describe('Test Custom Control', () => {
}
}

const fr = await $(fbWrap).formRender({formData, templates}).promise
fbWrap.formRender({formData, templates})

expect(cbOnRender.mock.calls).toHaveLength(1)

expect($(fbWrap).find('#starRating-1697591966052-0')[0].outerHTML).toBe('<span id="starRating-1697591966052-0"></span>')
expect(fbWrap.find('#starRating-1697591966052-0')[0].outerHTML).toBe('<span id="starRating-1697591966052-0"></span>')

})

Expand Down Expand Up @@ -92,7 +92,7 @@ describe('Test Custom Control', () => {
}
}

const fb = await $(fbWrap).formBuilder({fields, templates}).promise
const fb = await fbWrap.formBuilder({fields, templates}).promise
const field = {
type: 'text',
className: 'form-control'
Expand All @@ -101,7 +101,7 @@ describe('Test Custom Control', () => {

expect(cbOnRender.mock.calls).toHaveLength(1)

$(fbWrap).find('li.input-control[data-type="text"]').click()
fbWrap.find('li.input-control[data-type="text"]').click()

expect(cbOnRender.mock.calls).toHaveLength(2)
})
Expand Down Expand Up @@ -135,24 +135,24 @@ describe('Test Custom Control', () => {
},
}

const fb = await $(fbWrap).formBuilder({fields, templates, typeUserAttrs: { customText: { dataAttr: { value: '', label: 'textDataAttr'} } }}).promise
const fb = await fbWrap.formBuilder({fields, templates, typeUserAttrs: { customText: { dataAttr: { value: '', label: 'textDataAttr'} } }}).promise
const field = {
type: 'customText',
className: 'form-control api-class',
value: 'Added by API',
}
fb.actions.addField(field)

let renderedCtl = $(fbWrap).find('.prev-holder input')
let renderedCtl = fbWrap.find('.prev-holder input')
expect(renderedCtl.attr('class')).toBe('form-control api-class')
expect(renderedCtl.attr('value')).toBe('Added by API')
expect(renderedCtl.attr('id')).toMatch(new RegExp('^customText-.*'))

fb.actions.clearFields()

$(fbWrap).find('li.input-control[data-type="customText"]').click()
fbWrap.find('li.input-control[data-type="customText"]').click()

renderedCtl = $(fbWrap).find('.prev-holder input')
renderedCtl = fbWrap.find('.prev-holder input')
expect(renderedCtl.attr('class')).toBe('form-control custom-class')
expect(renderedCtl.attr('value')).toBe('String to look for')
expect(renderedCtl.attr('id')).toMatch(new RegExp('^customText-.*'))
Expand Down Expand Up @@ -209,11 +209,11 @@ describe('Test Custom Control', () => {

]

const fb = await $(fbWrap).formBuilder({fields, templates, inputSets}).promise
const fb = await fbWrap.formBuilder({fields, templates, inputSets}).promise

$(fbWrap).find('li.input-set-control[data-type="test-input-set"]').click()
fbWrap.find('li.input-set-control[data-type="test-input-set"]').click()

const renderedCtl = $(fbWrap).find('.prev-holder input')
const renderedCtl = fbWrap.find('.prev-holder input')
expect(renderedCtl.eq(0).attr('class')).toBe('form-control custom-class')
expect(renderedCtl.eq(0).attr('value')).toBe('String to look for')
expect(renderedCtl.eq(0).attr('type')).toBe('customText')
Expand Down Expand Up @@ -243,7 +243,7 @@ describe('Test Custom Control', () => {
},
}

const fb = await $(fbWrap).formBuilder({fields, templates, }).promise
const fb = await fbWrap.formBuilder({fields, templates, }).promise
const field = {
type: 'customText',
className: 'form-control api-class',
Expand Down Expand Up @@ -272,15 +272,15 @@ describe('Test Custom Control', () => {
}
}

const fb = await $(fbWrap).formBuilder({fields, templates}).promise
const fb = await fbWrap.formBuilder({fields, templates}).promise
const field = {
type: 'customString',
className: 'form-control row-1 col-md-12'
}
fb.actions.addField(field)

expect(fbWrap.find('.stage-wrap li[type="customString"]')).toHaveLength(1)
const renderedCtl = $(fbWrap).find('.prev-holder span')
const renderedCtl = fbWrap.find('.prev-holder span')
expect(renderedCtl.attr('class')).toBe('form-control')
expect(renderedCtl.text()).toBe('Placeholder')
})
Expand All @@ -303,19 +303,67 @@ describe('Test Custom Control', () => {
}
}

const fb = await $(fbWrap).formBuilder({fields, templates}).promise
const fb = await fbWrap.formBuilder({fields, templates}).promise
const field = {
type: 'customString',
className: 'form-control row-1 col-md-12'
}
fb.actions.addField(field)

expect(fbWrap.find('.stage-wrap li[type="customString"]')).toHaveLength(1)
expect($(fbWrap).find('.prev-holder div')).toHaveLength(2)
expect($(fbWrap).find('.prev-holder input')).toHaveLength(1)
expect($(fbWrap).find('.prev-holder span')).toHaveLength(1)
const renderedCtl = $(fbWrap).find('.prev-holder span')
expect(fbWrap.find('.prev-holder div')).toHaveLength(2)
expect(fbWrap.find('.prev-holder input')).toHaveLength(1)
expect(fbWrap.find('.prev-holder span')).toHaveLength(1)
const renderedCtl = fbWrap.find('.prev-holder span')
expect(renderedCtl.attr('class')).toBe('form-control')
expect(renderedCtl.text()).toBe('Placeholder')
})

test('preview property set to true for custom control in formBuilder', async () => {
const fbWrap = $('<div>')

const fields = [{
label: 'Custom with string field',
attrs: {
type: 'customString'
},
icon: '🌟'
}]
const templates = {
customString: function(fieldData) {
return {
field: (fieldData.preview) ? '<span>preview</span>' : '<span>not preview</span>'
}
}
}

const fb = await fbWrap.formBuilder({fields, templates}).promise
const field = { type: 'customString', }
fb.actions.addField(field)

const renderedCtl = fbWrap.find('.prev-holder span')
expect(renderedCtl.text()).toBe('preview')
})

test('preview property falsy for custom control in formRender', async () => {
const fbWrap = $('<div>')
const formData = [
{
'type': 'customString',
'required': false,
'label': 'custom',
'name': 'custom-string'
},
]
const templates = {
customString: function(fieldData) {
return {
field: (fieldData.preview) ? '<span>preview</span>' : '<span>not preview</span>'
}
}
}

fbWrap.formRender({formData, templates})
expect(fbWrap.find('span')[0].textContent).toBe('not preview')
})
})

0 comments on commit de67461

Please sign in to comment.