Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use block editor's color settings for block colors mapping

Browse Source 
[MAILPOET-2754]
This commit is contained in:
Rostislav Wolny
2020-03-11 10:25:01 +01:00
committed by Veljko V
parent 4ec53d2d52
commit 8a66fd1811
7 changed files with 364 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
tests/javascript/form_editor/store/blocks_to_form_body.spec.js
View File

@ -1,5 +1,5 @@
import { expect } from 'chai';
import formBlocksToBody from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
import formBlocksToBodyFactory from '../../../../assets/js/src/form_editor/store/blocks_to_form_body.jsx';
import {
emailBlock,
lastNameBlock,
@ -16,6 +16,16 @@ import {
nestedColumns,
} from './block_to_form_test_data.js';
const colorDefinitions = [{
name: 'Black',
slug: 'black',
color: '#000000',
}, {
name: 'White',
slug: 'white',
color: '#ffffff',
}];
const checkBodyInputBasics = (input) => {
expect(input.id).to.be.a('string');
expect(parseInt(input.position, 10)).to.be.a('number');
@ -23,6 +33,8 @@ const checkBodyInputBasics = (input) => {
expect(input.type).to.be.not.empty;
};
const formBlocksToBody = formBlocksToBodyFactory(colorDefinitions, []);
describe('Blocks to Form Body', () => {
it('Should throw an error for wrong input', () => {
const error = 'Mapper expects blocks to be an array.';
@ -174,7 +186,8 @@ describe('Blocks to Form Body', () => {
type: 'text',
updated_at: '2019-12-10T15:05:06+00:00',
};
const [input] = formBlocksToBody([customTextBlock], [customField]);
const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
const [input] = map([customTextBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('1');
expect(input.name).to.be.equal('Custom Field name');
@ -201,7 +214,8 @@ describe('Blocks to Form Body', () => {
type: 'select',
updated_at: '2019-12-10T15:05:06+00:00',
};
const [input] = formBlocksToBody([customSelectBlock], [customField]);
const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
const [input] = map([customSelectBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('6');
expect(input.name).to.be.equal('Custom Select');
@ -229,7 +243,8 @@ describe('Blocks to Form Body', () => {
type: 'radio',
updated_at: '2019-12-10T15:05:06+00:00',
};
const [input] = formBlocksToBody([customRadioBlock], [customField]);
const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
const [input] = map([customRadioBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('2');
expect(input.name).to.be.equal('Custom Field name');
@ -259,7 +274,8 @@ describe('Blocks to Form Body', () => {
type: 'checkbox',
updated_at: '2019-12-13T15:22:07+00:00',
};
const [input] = formBlocksToBody([customCheckBox], [customField]);
const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
const [input] = map([customCheckBox]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('3');
expect(input.name).to.be.equal('Custom Checkbox');
@ -288,7 +304,8 @@ describe('Blocks to Form Body', () => {
type: 'date',
updated_at: '2019-12-13T15:22:07+00:00',
};
const [input] = formBlocksToBody([customDateBlock], [customField]);
const map = formBlocksToBodyFactory(colorDefinitions, [customField]);
const [input] = map([customDateBlock]);
checkBodyInputBasics(input);
expect(input.id).to.be.equal('6');
expect(input.name).to.be.equal('Custom Date');
@ -343,16 +360,20 @@ describe('Blocks to Form Body', () => {
it('Should map colors for columns', () => {
const columns = { ...nestedColumns };
columns.attributes = {
textColor: 'vivid-red',
textColor: 'black',
backgroundColor: 'white',
customBackgroundColor: '#ffffff',
customTextColor: '#dd0000',
};
const [mapped] = formBlocksToBody([columns]);
expect(mapped.params.text_color).to.be.equal('vivid-red');
expect(mapped.params.background_color).to.be.equal('white');
expect(mapped.params.custom_background_color).to.be.equal('#ffffff');
expect(mapped.params.custom_text_color).to.be.equal('#dd0000');
expect(mapped.params.text_color).to.be.equal('#000000');
expect(mapped.params.background_color).to.be.equal('#ffffff');
columns.attributes = {
customTextColor: '#aaaaaa',
customBackgroundColor: '#bbbbbb',
};
const [mapped2] = formBlocksToBody([columns]);
expect(mapped2.params.text_color).to.be.equal('#aaaaaa');
expect(mapped2.params.background_color).to.be.equal('#bbbbbb');
});
it('Should map class name for columns and column', () => {

61
tests/javascript/form_editor/store/form_body_to_blocks.spec.js
View File

@ -1,5 +1,5 @@
import { expect } from 'chai';
import { formBodyToBlocks } from '../../../../assets/js/src/form_editor/store/form_body_to_blocks.jsx';
import { formBodyToBlocksFactory } from '../../../../assets/js/src/form_editor/store/form_body_to_blocks.jsx';
import {
emailInput,
@ -17,6 +17,18 @@ import {
nestedColumns,
} from './form_to_block_test_data.js';
const colorDefinitions = [{
name: 'Black',
slug: 'black',
color: '#000000',
}, {
name: 'White',
slug: 'white',
color: '#ffffff',
}];
const formBodyToBlocks = formBodyToBlocksFactory(colorDefinitions, []);
const checkBlockBasics = (block) => {
expect(block.clientId).to.be.a('string');
expect(block.name).to.be.a('string');
@ -36,10 +48,10 @@ describe('Form Body To Blocks', () => {
it('Should throw an error for wrong custom fields input', () => {
const error = 'Mapper expects customFields to be an array.';
expect(() => formBodyToBlocks([], null)).to.throw(error);
expect(() => formBodyToBlocks([], 'hello')).to.throw(error);
expect(() => formBodyToBlocks([], () => {})).to.throw(error);
expect(() => formBodyToBlocks([], 1)).to.throw(error);
expect(() => formBodyToBlocksFactory([], null)).to.throw(error);
expect(() => formBodyToBlocksFactory([], 'hello')).to.throw(error);
expect(() => formBodyToBlocksFactory([], () => {})).to.throw(error);
expect(() => formBodyToBlocksFactory([], 1)).to.throw(error);
});
it('Should map email input to block', () => {
@ -177,7 +189,8 @@ describe('Form Body To Blocks', () => {
type: 'text',
updated_at: '2019-12-10T15:05:06+00:00',
};
const [block] = formBodyToBlocks([{ ...customTextInput, position: '1' }], [customField]);
const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
const [block] = map([{ ...customTextInput, position: '1' }]);
checkBlockBasics(block);
expect(block.clientId).to.be.equal('1_0');
expect(block.name).to.be.equal('mailpoet-form/custom-text-customfieldname');
@ -204,7 +217,8 @@ describe('Form Body To Blocks', () => {
type: 'radio',
updated_at: '2019-12-10T15:05:06+00:00',
};
const [block] = formBodyToBlocks([{ ...customRadioInput, position: '1' }], [customField]);
const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
const [block] = map([{ ...customRadioInput, position: '1' }]);
checkBlockBasics(block);
expect(block.clientId).to.be.equal('3_0');
expect(block.name).to.be.equal('mailpoet-form/custom-radio-name');
@ -233,7 +247,8 @@ describe('Form Body To Blocks', () => {
},
position: null,
};
const [block] = formBodyToBlocks([{ ...customCheckboxInput, position: '1' }], [customField]);
const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
const [block] = map([{ ...customCheckboxInput, position: '1' }]);
checkBlockBasics(block);
expect(block.clientId).to.be.equal('4_0');
expect(block.name).to.be.equal('mailpoet-form/custom-checkbox-customcheck');
@ -261,7 +276,8 @@ describe('Form Body To Blocks', () => {
},
position: null,
};
const [block] = formBodyToBlocks([{ ...customSelectInput, position: '1' }], [customField]);
const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
const [block] = map([{ ...customSelectInput, position: '1' }]);
checkBlockBasics(block);
expect(block.clientId).to.be.equal('5_0');
expect(block.name).to.be.equal('mailpoet-form/custom-select-customselect');
@ -286,7 +302,8 @@ describe('Form Body To Blocks', () => {
type: 'date',
updated_at: '2019-12-13T15:22:07+00:00',
};
const [block] = formBodyToBlocks([{ ...customDateInput, position: '1' }], [customField]);
const map = formBodyToBlocksFactory(colorDefinitions, [customField]);
const [block] = map([{ ...customDateInput, position: '1' }]);
checkBlockBasics(block);
expect(block.clientId).to.be.equal('6_0');
expect(block.name).to.be.equal('mailpoet-form/custom-date-customdate');
@ -345,16 +362,24 @@ describe('Form Body To Blocks', () => {
it('Should map columns colors', () => {
const nested = { ...nestedColumns, position: '1' };
nested.params = {
text_color: 'vivid-red',
background_color: 'white',
custom_text_color: '#dd0000',
custom_background_color: '#ffffff',
text_color: '#ffffff',
background_color: '#000000',
};
const [block] = formBodyToBlocks([nested]);
expect(block.attributes.textColor).to.be.equal('vivid-red');
expect(block.attributes.backgroundColor).to.be.equal('white');
expect(block.attributes.customTextColor).to.be.equal('#dd0000');
expect(block.attributes.customBackgroundColor).to.be.equal('#ffffff');
expect(block.attributes.textColor).to.be.equal('white');
expect(block.attributes.backgroundColor).to.be.equal('black');
expect(block.attributes.customTextColor).to.be.undefined;
expect(block.attributes.customBackgroundColor).to.be.undefined;
nested.params = {
text_color: '#aaaaaa',
background_color: '#bbbbbb',
};
const [block2] = formBodyToBlocks([nested]);
expect(block2.attributes.textColor).to.be.undefined;
expect(block2.attributes.backgroundColor).to.be.undefined;
expect(block2.attributes.customTextColor).to.be.equal('#aaaaaa');
expect(block2.attributes.customBackgroundColor).to.be.equal('#bbbbbb');
});
it('Should map class name', () => {

1
tests/javascript/form_editor/store/form_to_block_test_data.js
View File

@ -193,6 +193,7 @@ export const nestedColumns = {
{
position: '1',
type: 'columns',
params: {},
body: [
{
position: '1',