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 new file mode 100644 index 0000000000..013230426d --- /dev/null +++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx @@ -0,0 +1,26 @@ +export default (data) => ( + data.map((item) => { + const mapped = { + clientId: item.id, + isValid: true, + innerBlocks: [], + }; + switch (item.id) { + case 'email': + mapped.name = 'mailpoet-form/email-input'; + mapped.attributes = { + label: item.params.label, + labelWithinInput: !!item.params.label_within, + }; + return mapped; + case 'submit': + mapped.name = 'mailpoet-form/submit-button'; + mapped.attributes = { + label: item.params.label, + }; + return mapped; + default: + return null; + } + }).filter(Boolean) +); 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 new file mode 100644 index 0000000000..7d41e64e40 --- /dev/null +++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js @@ -0,0 +1,76 @@ +import { expect } from 'chai'; +import formBodyToBlocks from '../../../../assets/js/src/form_editor/store/form_body_to_blocks.jsx'; + +const emailInput = { + type: 'text', + name: 'Email', + id: 'email', + unique: '0', + static: '1', + params: { + label: 'Email', + required: 'true', + }, + position: null, +}; +const submitInput = { + type: 'submit', + name: 'Submit', + id: 'submit', + unique: '0', + static: '1', + params: { + label: 'Subscribe!', + }, + position: null, +}; + +const checkBlockBasics = (block) => { + expect(block.clientId).to.be.a('string'); + expect(block.name).to.be.a('string'); + expect(block.isValid).to.be.equal(true); + expect(block.innerBlocks).to.be.a('Array'); + expect(block.attributes).to.be.a('Object'); +}; + +describe('Form Body To Blocks', () => { + it('Should map email input to block', () => { + const [block] = formBodyToBlocks([{ ...emailInput, position: '1' }]); + checkBlockBasics(block); + expect(block.clientId).to.be.equal('email'); + expect(block.name).to.be.equal('mailpoet-form/email-input'); + expect(block.attributes.label).to.be.equal('Email'); + expect(block.attributes.labelWithinInput).to.be.equal(false); + }); + + it('Should map email with label within correctly', () => { + const email = { ...emailInput, position: '1' }; + email.params.label_within = '1'; + const [block] = formBodyToBlocks([email]); + expect(block.attributes.labelWithinInput).to.be.equal(true); + }); + + it('Should map submit button to block', () => { + const [block] = formBodyToBlocks([{ ...submitInput, position: '1' }]); + checkBlockBasics(block); + expect(block.clientId).to.be.equal('submit'); + expect(block.name).to.be.equal('mailpoet-form/submit-button'); + expect(block.attributes.label).to.be.equal('Subscribe!'); + }); + + it('Should ignore unknown input type', () => { + const blocks = formBodyToBlocks([{ ...submitInput, id: 'some-nonsense' }]); + expect(blocks).to.be.empty; + }); + + it('Should map more inputs at once', () => { + const email = { ...emailInput, position: '2' }; + const submit = { ...submitInput, position: '2' }; + const unknown = { id: 'unknown', position: '3' }; + const blocks = formBodyToBlocks([email, submit, unknown]); + expect(blocks.length).to.be.equal(2); + blocks.map(checkBlockBasics); + expect(blocks[0].name).to.be.equal('mailpoet-form/email-input'); + expect(blocks[1].name).to.be.equal('mailpoet-form/submit-button'); + }); +});