tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up tests

pull/5337/head
Artur Arseniev 3 years ago
parent
ba08b41bae
commit
bbde7ed4a9
3 changed files with 56 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/dom_components/model/Component.ts
  2. 2
      src/style_manager/model/PropertyComposite.ts
  3. 125
      test/specs/style_manager/model/Properties.ts

2
src/dom_components/model/Component.ts
View File

@ -1714,7 +1714,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
*/ */
getView(frame?: Frame) { getView(frame?: Frame) {
let { view, views, em } = this; let { view, views, em } = this;
const frm = frame || em.getCurrentFrameModel(); const frm = frame || em?.getCurrentFrameModel();
if (frm) { if (frm) {
view = views.filter(view => view.frameView === frm.view)[0]; view = views.filter(view => view.frameView === frm.view)[0];

2
src/style_manager/model/PropertyComposite.ts
View File

@ -372,7 +372,7 @@ export default class PropertyComposite<T extends Record<string, any> = PropertyC
return this; return this;
} }
hasValue(opts: Parameters<Property['hasValue']>[0]) { hasValue(opts?: Parameters<Property['hasValue']>[0]) {
return this.getProperties().some(prop => prop.hasValue(opts)); return this.getProperties().some(prop => prop.hasValue(opts));
} }

125
test/specs/style_manager/model/Properties.js → test/specs/style_manager/model/Properties.ts
View File

@ -1,15 +1,14 @@
import Editor from 'editor/model/Editor'; import { Component, CssRule, Property, PropertyComposite, PropertyStack } from '../../../../src';
import Editor from '../../../../src/editor/model/Editor';
describe('StyleManager properties logic', () => { describe('StyleManager properties logic', () => {
let obj; let obj: Editor['Styles'];
let em; let em: Editor;
let domc; let domc: Editor['Components'];
let dv; let dv: Editor['Devices'];
let cssc; let cssc: Editor['Css'];
let sm; let cmp: Component;
let cmp; let rule1: CssRule;
let rule1;
let rule2;
const sectorTest = 'sector-test'; const sectorTest = 'sector-test';
beforeEach(() => { beforeEach(() => {
@ -18,17 +17,15 @@ describe('StyleManager properties logic', () => {
avoidInlineStyle: true, avoidInlineStyle: true,
styleManager: { custom: true }, styleManager: { custom: true },
}); });
domc = em.get('DomComponents'); domc = em.Components;
cssc = em.get('CssComposer'); cssc = em.Css;
dv = em.get('DeviceManager'); dv = em.Devices;
sm = em.get('SelectorManager'); obj = em.Styles;
obj = em.get('StyleManager'); em.Pages.onLoad();
em.get('PageManager').onLoad(); cmp = domc.addComponent('<div class="cls"></div>') as Component;
cmp = domc.addComponent('<div class="cls"></div>');
}); });
afterEach(() => { afterEach(() => {
obj = null;
em.destroy(); em.destroy();
}); });
@ -42,8 +39,8 @@ describe('StyleManager properties logic', () => {
const propBTestId = `${propBTest}-sub`; const propBTestId = `${propBTest}-sub`;
const propCTestId = `${propCTest}-sub`; const propCTestId = `${propCTest}-sub`;
const propDTestId = `${propDTest}-sub`; const propDTestId = `${propDTest}-sub`;
let compTypeProp; let compTypeProp: PropertyComposite;
let compTypePropInn; let compTypePropInn: Property;
beforeEach(() => { beforeEach(() => {
rule1 = cssc.addRules('.cls { color: red; }')[0]; rule1 = cssc.addRules('.cls { color: red; }')[0];
@ -51,12 +48,13 @@ describe('StyleManager properties logic', () => {
properties: [ properties: [
{ {
extend: propTest, extend: propTest,
// @ts-ignore
detached: true, detached: true,
}, },
], ],
}); });
compTypeProp = obj.getProperty(sectorTest, propTest); compTypeProp = obj.getProperty(sectorTest, propTest) as PropertyComposite;
compTypePropInn = compTypeProp.getProperty(propATestId); compTypePropInn = compTypeProp.getProperty(propATestId)!;
em.setSelected(cmp); em.setSelected(cmp);
obj.__upSel(); obj.__upSel();
}); });
@ -89,7 +87,7 @@ describe('StyleManager properties logic', () => {
[propCTestId, '3px'], [propCTestId, '3px'],
[propDTestId, '4px'], [propDTestId, '4px'],
].forEach(item => { ].forEach(item => {
expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); expect(compTypeProp.getProperty(item[0])?.getFullValue()).toBe(item[1]);
}); });
}); });
@ -128,7 +126,7 @@ describe('StyleManager properties logic', () => {
[propCTest, '3px'], [propCTest, '3px'],
[propDTest, '4px'], [propDTest, '4px'],
].forEach(item => { ].forEach(item => {
expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); expect(compTypeProp.getProperty(item[0])?.getFullValue()).toBe(item[1]);
}); });
compTypeProp.upValue('11px'); compTypeProp.upValue('11px');
[ [
@ -137,11 +135,10 @@ describe('StyleManager properties logic', () => {
[propCTest, '11px'], [propCTest, '11px'],
[propDTest, '11px'], [propDTest, '11px'],
].forEach(item => { ].forEach(item => {
expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); expect(compTypeProp.getProperty(item[0])?.getFullValue()).toBe(item[1]);
}); });
obj.__upSel(); obj.__upSel();
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
color: 'red', color: 'red',
[propATest]: '11px', [propATest]: '11px',
[propBTest]: '11px', [propBTest]: '11px',
@ -155,7 +152,7 @@ describe('StyleManager properties logic', () => {
[propCTest, ''], [propCTest, ''],
[propDTest, ''], [propDTest, ''],
].forEach(item => { ].forEach(item => {
expect(compTypeProp.getProperty(item[0]).getFullValue()).toBe(item[1]); expect(compTypeProp.getProperty(item[0])?.getFullValue()).toBe(item[1]);
}); });
}); });
@ -215,7 +212,7 @@ describe('StyleManager properties logic', () => {
test('Custom fromStyle', () => { test('Custom fromStyle', () => {
compTypeProp.set('fromStyle', (style, { separator }) => { compTypeProp.set('fromStyle', (style, { separator }) => {
const values = style[propTest].split(separator); const values = (style[propTest] as string).split(separator);
return { return {
[propATest]: values[0], [propATest]: values[0],
[propBTest]: values[1], [propBTest]: values[1],
@ -270,9 +267,7 @@ describe('StyleManager properties logic', () => {
compTypeProp.clear(); compTypeProp.clear();
expect(compTypeProp.hasValue()).toBe(false); expect(compTypeProp.hasValue()).toBe(false);
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({});
__p: false,
});
}); });
test('Get the values from parent style', () => { test('Get the values from parent style', () => {
@ -298,7 +293,7 @@ describe('StyleManager properties logic', () => {
[propCTest, '11px'], [propCTest, '11px'],
[propDTest, '44px'], [propDTest, '44px'],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.hasValue()).toBe(true); expect(prop.hasValue()).toBe(true);
expect(prop.hasValue({ noParent: true })).toBe(false); expect(prop.hasValue({ noParent: true })).toBe(false);
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
@ -324,7 +319,7 @@ describe('StyleManager properties logic', () => {
[propCTest, '11px'], [propCTest, '11px'],
[propDTest, '44px'], [propDTest, '44px'],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
}); });
@ -338,7 +333,7 @@ describe('StyleManager properties logic', () => {
[propCTest, ''], [propCTest, ''],
[propDTest, ''], [propDTest, ''],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.hasValue()).toBe(false); expect(prop.hasValue()).toBe(false);
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
}); });
@ -361,21 +356,20 @@ describe('StyleManager properties logic', () => {
[propBTest, '2px'], [propBTest, '2px'],
[propCTest, '1px'], [propCTest, '1px'],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.hasValue({ noParent: true })).toBe(false); expect(prop.hasValue({ noParent: true })).toBe(false);
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
}); });
const propD = compTypeProp.getProperty(propDTest); const propD = compTypeProp.getProperty(propDTest)!;
expect(propD.hasValue({ noParent: true })).toBe(true); expect(propD.hasValue({ noParent: true })).toBe(true);
expect(propD.getFullValue()).toBe('44px'); expect(propD.getFullValue()).toBe('44px');
// By editing the last one, the rule should not take other values // By editing the last one, the rule should not take other values
propD.upValue('45px'); propD.upValue('45px');
compTypeProp.getProperty(propATest).upValue('11px'); compTypeProp.getProperty(propATest)?.upValue('11px');
obj.__upSel(); obj.__upSel();
expect(rule2.getStyle()).toEqual({ expect(rule2.getStyle()).toEqual({
__p: false,
[propATest]: '11px', [propATest]: '11px',
[propDTest]: '45px', [propDTest]: '45px',
}); });
@ -384,7 +378,7 @@ describe('StyleManager properties logic', () => {
[propBTest, '2px'], [propBTest, '2px'],
[propCTest, '1px'], [propCTest, '1px'],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.hasValue({ noParent: true })).toBe(false); expect(prop.hasValue({ noParent: true })).toBe(false);
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
}); });
@ -411,14 +405,14 @@ describe('StyleManager properties logic', () => {
test('Update on the rule reflects to the property correctly', () => { test('Update on the rule reflects to the property correctly', () => {
rule1.setStyle({ padding: '1px 2px 3px 4px' }); rule1.setStyle({ padding: '1px 2px 3px 4px' });
obj.__upSel(); obj.__upSel();
compTypeProp.getProperty(propCTest).upValue('50%'); compTypeProp.getProperty(propCTest)?.upValue('50%');
[ [
[propATest, '1px'], [propATest, '1px'],
[propBTest, '2px'], [propBTest, '2px'],
[propCTest, '50%'], [propCTest, '50%'],
[propDTest, '4px'], [propDTest, '4px'],
].forEach(item => { ].forEach(item => {
const prop = compTypeProp.getProperty(item[0]); const prop = compTypeProp.getProperty(item[0])!;
expect(prop.getFullValue()).toBe(item[1]); expect(prop.getFullValue()).toBe(item[1]);
}); });
}); });
@ -427,10 +421,9 @@ describe('StyleManager properties logic', () => {
compTypeProp.set('detached', false); compTypeProp.set('detached', false);
rule1.setStyle({ padding: '1px 2px 3px 4px' }); rule1.setStyle({ padding: '1px 2px 3px 4px' });
obj.__upSel(); obj.__upSel();
compTypeProp.getProperty(propCTest).upValue('50%'); compTypeProp.getProperty(propCTest)?.upValue('50%');
obj.__upSel(); obj.__upSel();
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
padding: '1px 2px 50% 4px', padding: '1px 2px 50% 4px',
}); });
}); });
@ -445,7 +438,7 @@ describe('StyleManager properties logic', () => {
otherProps.forEach(prop => { otherProps.forEach(prop => {
expect(style[prop]).toBe(''); expect(style[prop]).toBe('');
if (prop !== propTest) { if (prop !== propTest) {
expect(compTypeProp.getProperty(prop).hasValue()).toBe(false); expect(compTypeProp.getProperty(prop)?.hasValue()).toBe(false);
} }
}); });
}); });
@ -459,8 +452,8 @@ describe('StyleManager properties logic', () => {
const propsTest = [propATest, propBTest, propCTest]; const propsTest = [propATest, propBTest, propCTest];
const propStyleValue = 'valueA-1 valueB-1 valueC-1, valueA-2 valueB-2 valueC-2'; const propStyleValue = 'valueA-1 valueB-1 valueC-1, valueA-2 valueB-2 valueC-2';
const propStyleExtValue = 'valueC-1-ext, valueC-2-ext'; const propStyleExtValue = 'valueC-1-ext, valueC-2-ext';
let compTypeProp; let compTypeProp: PropertyStack;
let compTypePropInn; let compTypePropInn: Property;
beforeEach(() => { beforeEach(() => {
rule1 = cssc.addRules(` rule1 = cssc.addRules(`
@ -474,12 +467,13 @@ describe('StyleManager properties logic', () => {
{ {
type: 'stack', type: 'stack',
property: propTest, property: propTest,
// @ts-ignore
properties: propsTest.map(property => ({ property })), properties: propsTest.map(property => ({ property })),
}, },
], ],
}); });
compTypeProp = obj.getProperty(sectorTest, propTest); compTypeProp = obj.getProperty(sectorTest, propTest) as PropertyStack;
compTypePropInn = compTypeProp.getProperty(propATest); compTypePropInn = compTypeProp.getProperty(propATest)!;
em.setSelected(cmp); em.setSelected(cmp);
obj.__upSel(); obj.__upSel();
}); });
@ -533,7 +527,7 @@ describe('StyleManager properties logic', () => {
test('Custom fromStyle', () => { test('Custom fromStyle', () => {
compTypeProp.set('fromStyle', (style, { separatorLayers }) => { compTypeProp.set('fromStyle', (style, { separatorLayers }) => {
const layerValues = style[propTest].split(separatorLayers); const layerValues = (style[propTest] as string).split(separatorLayers);
return layerValues.map(value => ({ value })); return layerValues.map(value => ({ value }));
}); });
expect( expect(
@ -584,12 +578,12 @@ describe('StyleManager properties logic', () => {
}); });
test('Layers has the right values', () => { test('Layers has the right values', () => {
expect(compTypeProp.getLayer(0).getValues()).toEqual({ expect(compTypeProp.getLayer(0)?.getValues()).toEqual({
[propATest]: 'valueA-1', [propATest]: 'valueA-1',
[propBTest]: 'valueB-1', [propBTest]: 'valueB-1',
[propCTest]: 'valueC-1-ext', [propCTest]: 'valueC-1-ext',
}); });
expect(compTypeProp.getLayer(1).getValues()).toEqual({ expect(compTypeProp.getLayer(1)?.getValues()).toEqual({
[propATest]: 'valueA-2', [propATest]: 'valueA-2',
[propBTest]: 'valueB-2', [propBTest]: 'valueB-2',
[propCTest]: 'valueC-2-ext', [propCTest]: 'valueC-2-ext',
@ -603,12 +597,12 @@ describe('StyleManager properties logic', () => {
}); });
obj.__upSel(); obj.__upSel();
expect(compTypeProp.getLayers().length).toBe(2); expect(compTypeProp.getLayers().length).toBe(2);
expect(compTypeProp.getLayer(0).getValues()).toEqual({ expect(compTypeProp.getLayer(0)?.getValues()).toEqual({
[propATest]: 'valueAa-1', [propATest]: 'valueAa-1',
[propBTest]: 'valueB-1-ext', [propBTest]: 'valueB-1-ext',
[propCTest]: 'valueCc-1', [propCTest]: 'valueCc-1',
}); });
expect(compTypeProp.getLayer(1).getValues()).toEqual({ expect(compTypeProp.getLayer(1)?.getValues()).toEqual({
[propATest]: 'valueAa-2', [propATest]: 'valueAa-2',
[propBTest]: 'valueB-2-ext', [propBTest]: 'valueB-2-ext',
[propCTest]: 'valueCc-2', [propCTest]: 'valueCc-2',
@ -621,11 +615,10 @@ describe('StyleManager properties logic', () => {
[propCTest]: propStyleExtValue, [propCTest]: propStyleExtValue,
}); });
compTypeProp.selectLayerAt(0); compTypeProp.selectLayerAt(0);
compTypeProp.getProperty(propBTest).upValue('valueB-1-mod'); compTypeProp.getProperty(propBTest)?.upValue('valueB-1-mod');
compTypeProp.selectLayerAt(1); compTypeProp.selectLayerAt(1);
compTypeProp.getProperty(propCTest).upValue('valueC-2-mod'); compTypeProp.getProperty(propCTest)?.upValue('valueC-2-mod');
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
[propTest]: 'valueA-1 valueB-1-mod valueC-1-ext, valueA-2 valueB-2 valueC-2-mod', [propTest]: 'valueA-1 valueB-1-mod valueC-1-ext, valueA-2 valueB-2 valueC-2-mod',
}); });
}); });
@ -633,11 +626,10 @@ describe('StyleManager properties logic', () => {
test('Updating inner property (detached), it reflects on the rule', () => { test('Updating inner property (detached), it reflects on the rule', () => {
compTypeProp.set('detached', true); compTypeProp.set('detached', true);
compTypeProp.selectLayerAt(0); compTypeProp.selectLayerAt(0);
compTypeProp.getProperty(propBTest).upValue('valueB-1-mod'); compTypeProp.getProperty(propBTest)?.upValue('valueB-1-mod');
compTypeProp.selectLayerAt(1); compTypeProp.selectLayerAt(1);
compTypeProp.getProperty(propCTest).upValue('valueC-2-mod'); compTypeProp.getProperty(propCTest)?.upValue('valueC-2-mod');
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
[propATest]: 'valueA-1, valueA-2', [propATest]: 'valueA-1, valueA-2',
[propBTest]: 'valueB-1-mod, valueB-2', [propBTest]: 'valueB-1-mod, valueB-2',
[propCTest]: 'valueC-1-ext, valueC-2-mod', [propCTest]: 'valueC-1-ext, valueC-2-mod',
@ -647,7 +639,6 @@ describe('StyleManager properties logic', () => {
test('Removing layer, updates the rule', () => { test('Removing layer, updates the rule', () => {
compTypeProp.removeLayerAt(1); compTypeProp.removeLayerAt(1);
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
[propTest]: 'valueA-1 valueB-1 valueC-1-ext', [propTest]: 'valueA-1 valueB-1 valueC-1-ext',
}); });
}); });
@ -656,9 +647,7 @@ describe('StyleManager properties logic', () => {
compTypeProp.removeLayerAt(1); compTypeProp.removeLayerAt(1);
compTypeProp.removeLayerAt(0); compTypeProp.removeLayerAt(0);
expect(compTypeProp.getLayers().length).toBe(0); expect(compTypeProp.getLayers().length).toBe(0);
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({});
__p: false,
});
}); });
test('On clear removes all values', () => { test('On clear removes all values', () => {
@ -666,9 +655,7 @@ describe('StyleManager properties logic', () => {
compTypeProp.clear(); compTypeProp.clear();
expect(compTypeProp.hasValue()).toBe(false); expect(compTypeProp.hasValue()).toBe(false);
expect(compTypeProp.getLayers().length).toBe(0); expect(compTypeProp.getLayers().length).toBe(0);
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({});
__p: false,
});
}); });
test('On clear removes all values (detached)', () => { test('On clear removes all values (detached)', () => {
@ -676,9 +663,7 @@ describe('StyleManager properties logic', () => {
compTypeProp.clear(); compTypeProp.clear();
expect(compTypeProp.hasValue()).toBe(false); expect(compTypeProp.hasValue()).toBe(false);
expect(compTypeProp.getLayers().length).toBe(0); expect(compTypeProp.getLayers().length).toBe(0);
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({});
__p: false,
});
}); });
test('Get the values from parent style', () => { test('Get the values from parent style', () => {
@ -707,7 +692,6 @@ describe('StyleManager properties logic', () => {
{ at: 0 } { at: 0 }
); );
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
[propTest]: 'valueA-new valueB-new valueC-new, valueA-1 valueB-1 valueC-1-ext, valueA-2 valueB-2 valueC-2-ext', [propTest]: 'valueA-new valueB-new valueC-new, valueA-1 valueB-1 valueC-1-ext, valueA-2 valueB-2 valueC-2-ext',
}); });
}); });
@ -724,7 +708,6 @@ describe('StyleManager properties logic', () => {
); );
obj.__upSel(); obj.__upSel();
expect(rule1.getStyle()).toEqual({ expect(rule1.getStyle()).toEqual({
__p: false,
[propATest]: 'valueA-new AA, valueA-1, valueA-2', [propATest]: 'valueA-new AA, valueA-1, valueA-2',
[propBTest]: 'valueB-new BB, valueB-1, valueB-2', [propBTest]: 'valueB-new BB, valueB-1, valueB-2',
[propCTest]: 'valueC-new CC, valueC-1-ext, valueC-2-ext', [propCTest]: 'valueC-new CC, valueC-1-ext, valueC-2-ext',
Write Preview
Loading…
Cancel
Save