diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index d39b4a6497..67d91cfbd5 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx @@ -74,6 +74,15 @@ export default (blocks) => { type: 'submit', name: 'Submit', }; + case 'mailpoet-form/divider': + return { + ...mapped, + id: 'divider', + type: 'divider', + name: 'Divider', + static: '0', + params: '', + }; default: return null; } diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx index 4d39106d4a..0b3522461a 100644 --- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx +++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx @@ -6,7 +6,7 @@ export default (data) => { if (!Array.isArray(data)) { throw new Error('Mapper expects form body to be an array.'); } - return data.map((item) => { + return data.map((item, index) => { const mapped = { clientId: item.id, isValid: true, @@ -64,6 +64,12 @@ export default (data) => { ...mapped, name: 'mailpoet-form/submit-button', }; + case 'divider': + return { + ...mapped, + name: 'mailpoet-form/divider', + clientId: `divider_${index}`, + }; default: return null; } diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index 84609298e2..ad4440c611 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js @@ -59,12 +59,22 @@ const lastNameBlock = { }, }; +const dividerBlock = { + clientId: 'some_random_123', + isValid: true, + innerBlocks: [], + name: 'mailpoet-form/divider', + attributes: {}, +}; + const checkBodyInputBasics = (input) => { expect(input.id).to.be.a('string'); expect(parseInt(input.position, 10)).to.be.a('number'); expect(input.type).to.be.a('string'); expect(input.type).to.be.not.empty; - expect(input.params).to.be.a('Object'); + if (input.id !== 'divider') { + expect(input.params).to.be.a('Object'); + } }; describe('Blocks to Form Body', () => { @@ -170,6 +180,28 @@ describe('Blocks to Form Body', () => { expect(input.params.label).to.be.equal('Subscribe!'); }); + it('Should map divider block to input data', () => { + const [divider] = formBlocksToBody([dividerBlock]); + checkBodyInputBasics(divider); + expect(divider.id).to.be.equal('divider'); + expect(divider.name).to.be.equal('Divider'); + expect(divider.type).to.be.equal('divider'); + expect(divider.position).to.be.equal('1'); + expect(divider.unique).to.be.equal('0'); + expect(divider.static).to.be.equal('0'); + expect(divider.params).to.be.equal(''); + }); + + it('Should map multiple dividers', () => { + const [divider1, divider2] = formBlocksToBody([dividerBlock, dividerBlock]); + checkBodyInputBasics(divider1); + checkBodyInputBasics(divider2); + expect(divider1.id).to.be.equal('divider'); + expect(divider2.id).to.be.equal('divider'); + expect(divider1.position).to.be.equal('1'); + expect(divider2.position).to.be.equal('2'); + }); + it('Should map multiple blocks at once', () => { const unknownBlock = { name: 'unknown', diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js index 3087f64c5e..1d01975f59 100644 --- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js +++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js @@ -72,6 +72,16 @@ const submitInput = { position: null, }; +const divider = { + type: 'divider', + name: 'Divider', + id: 'divider', + unique: '0', + static: '0', + params: '', + position: null, +}; + const checkBlockBasics = (block) => { expect(block.clientId).to.be.a('string'); expect(block.name).to.be.a('string'); @@ -173,6 +183,18 @@ describe('Form Body To Blocks', () => { expect(block.attributes.label).to.be.equal('Subscribe!'); }); + it('Should map dividers to blocks', () => { + const [block1, block2] = formBodyToBlocks([ + { ...divider, position: '1' }, + { ...divider, position: '2' }, + ]); + checkBlockBasics(block1); + expect(block1.clientId).to.be.equal('divider_0'); + expect(block1.name).to.be.equal('mailpoet-form/divider'); + expect(block2.clientId).to.be.equal('divider_1'); + expect(block2.name).to.be.equal('mailpoet-form/divider'); + }); + it('Should ignore unknown input type', () => { const blocks = formBodyToBlocks([{ ...submitInput, id: 'some-nonsense' }]); expect(blocks).to.be.empty;