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

Update PropertyView tests

up-style-manager
Artur Arseniev 5 years ago
parent
66d05dcec0
commit
2c52b3d7f3
2 changed files with 15 additions and 185 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      test/specs/style_manager/view/LayerView.js
  2. 145
      test/specs/style_manager/view/PropertyView.js

55
test/specs/style_manager/view/LayerView.js
View File

@ -1,55 +0,0 @@
import LayerView from 'style_manager/view/LayerView';
import Layers from 'style_manager/model/Layers';
describe('LayerView', () => {
var component;
var fixtures;
var target;
var model;
var view;
beforeEach(() => {
var coll = new Layers();
model = coll.add({});
view = new LayerView({
model
});
document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild;
fixtures.appendChild(view.render().el);
});
afterAll(() => {
component = null;
view = null;
model = null;
});
test('Rendered correctly', () => {
var layer = view.el;
expect(fixtures.querySelector('.layer')).toBeTruthy();
expect(layer.querySelector('#label')).toBeTruthy();
expect(layer.querySelector('#close-layer')).toBeTruthy();
expect(view.getPropertiesWrapper()).toBeTruthy();
expect(view.getPreviewEl()).toBeTruthy();
});
test('Is not active by default', () => {
expect(view.$el.hasClass('active')).toEqual(false);
});
test('Is possible to activate it', () => {
view.model.set('active', 1);
expect(view.$el.hasClass('active')).toEqual(true);
});
test('Is possible to activate it with active()', () => {
view.active();
expect(view.$el.hasClass('active')).toEqual(true);
});
test('No preview', () => {
var style = view.el.querySelector('#preview').style;
expect(style.cssText).toBeFalsy();
});
});

145
test/specs/style_manager/view/PropertyView.js
View File

@ -1,4 +1,3 @@
import Backbone from 'backbone';
import PropertyView from 'style_manager/view/PropertyView';
import Property from 'style_manager/model/Property';
import Editor from 'editor/model/Editor';
@ -14,8 +13,6 @@ describe('PropertyView', () => {
var target;
var model;
var view;
var propTarget;
var options;
var propName = 'testprop';
var propValue = 'testvalue';
var defValue = 'testDefault';
@ -24,16 +21,13 @@ describe('PropertyView', () => {
em = new Editor({});
dcomp = new DomComponents();
compOpts = { em, componentTypes: dcomp.componentTypes };
propTarget = { ...Backbone.Events };
target = new Component({}, compOpts);
component = new Component({}, compOpts);
model = new Property({ property: propName });
propTarget.model = component;
options = {
model = new Property({ property: propName }, { em });
view = new PropertyView({
model,
propTarget
};
view = new PropertyView(options);
config: { em },
});
document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild;
view.render();
@ -61,7 +55,7 @@ describe('PropertyView', () => {
test('Input value is empty', () => {
expect(view.model.get('value')).toBeFalsy();
expect(view.getInputValue()).toBeFalsy();
expect(view.getInputEl().value).toBeFalsy();
});
test('Model not change without update trigger', () => {
@ -69,127 +63,18 @@ describe('PropertyView', () => {
expect(view.model.get('value')).toBeFalsy();
});
// Tests inputValueChanged()
test('Update model on input change', () => {
view.getInputEl().value = propValue;
view.inputValueChanged();
view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
expect(view.model.get('value')).toEqual(propValue);
});
// Tests modelValueChanged() -> ...
test('Update input on value change', () => {
view.model.set('value', propValue);
expect(view.getInputValue()).toEqual(propValue);
});
test('Update target on value change', () => {
view.model.set('value', propValue);
var compStyle = view.getTargetModel().get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
expect(compStyle).toEqual(assertStyle);
});
test('Update target on value change with functionName', () => {
view.model.set('functionName', 'testfunc');
view.model.set('value', propValue);
var compStyle = view.getTargetModel().get('style');
var assertStyle = {};
assertStyle[propName] = 'testfunc(' + propValue + ')';
expect(compStyle).toEqual(assertStyle);
});
test('Clean target from the property if its value is empty', () => {
test('Update input on value change', done => {
view.model.set('value', propValue);
view.model.set('value', '');
var compStyle = view.getTargetModel().get('style');
expect(compStyle).toEqual({});
});
test('Check stylable element', () => {
expect(view.isTargetStylable()).toEqual(true);
component.set('stylable', false);
expect(view.isTargetStylable()).toEqual(false);
component.set('stylable', [propName]);
expect(view.isTargetStylable()).toEqual(true);
component.set('stylable', ['test1', propName]);
expect(view.isTargetStylable()).toEqual(true);
component.set('stylable', ['test1', 'test2']);
expect(view.isTargetStylable()).toEqual(false);
});
test('Target style is empty without values', () => {
expect(view.getTargetValue()).toBeFalsy();
});
test('Target style is correct', () => {
var style = {};
style[propName] = propValue;
component.set('style', style);
expect(view.getTargetValue()).toEqual(propValue);
});
test('Target style is empty with an other style', () => {
var style = {};
style[propName + '2'] = propValue;
component.set('style', style);
expect(view.getTargetValue()).toBeFalsy();
});
test('Fetch value from function', () => {
view.selectedComponent = component;
const val = `testfun(${propValue})`;
component.set('style', { [propName]: val });
view.model.set('functionName', 'testfun');
expect(view.getTargetValue()).toEqual(val);
});
describe('With target setted', () => {
beforeEach(() => {
target.model = component;
view = new PropertyView({
model,
propTarget: target
});
fixtures.innerHTML = '';
view.render();
fixtures.appendChild(view.el);
});
test('updateTargetStyle', () => {
view.updateTargetStyle(propValue);
var style = {};
style[propName] = propValue;
expect(component.get('style')).toEqual(style);
});
test('updateTargetStyle with custom property', () => {
view.updateTargetStyle(propValue, propName + '2');
var style = {};
style[propName + '2'] = propValue;
expect(component.get('style')).toEqual(style);
});
test('Update value and input on target swap', () => {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
expect(view.model.get('value')).toEqual(propValue);
expect(view.getInputValue()).toEqual(propValue);
});
test('Update value after multiple swaps', () => {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = propValue + '2';
component.set('style', style);
view.propTarget.trigger('update');
expect(view.model.get('value')).toEqual(propValue + '2');
expect(view.getInputValue()).toEqual(propValue + '2');
});
setTimeout(() => {
expect(view.getInputEl().value).toEqual(propValue);
done();
}, 11);
});
describe('Init property', () => {
@ -197,10 +82,10 @@ describe('PropertyView', () => {
component = new Component();
model = new Property({
property: propName,
defaults: defValue
default: defValue,
});
view = new PropertyView({
model
model,
});
fixtures.innerHTML = '';
view.render();
@ -208,7 +93,7 @@ describe('PropertyView', () => {
});
test('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue);
expect(view.model.getValue()).toEqual(defValue);
});
test('Placeholder as default', () => {
@ -217,7 +102,7 @@ describe('PropertyView', () => {
});
test('Input value is set up to default', () => {
expect(view.getInputValue()).toEqual(defValue);
expect(view.getInputEl().value).toEqual(defValue);
});
});
});

Write Preview
Loading…
Cancel
Save