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

Add PanelView tests

pull/36/head
Artur Arseniev 10 years ago
parent
bd305d738e
commit
c162e3e5fc
6 changed files with 98 additions and 266 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. 31
      src/panels/view/PanelView.js
  2. 82
      test/specs/panels/e2e/CssComposer.js
  3. 7
      test/specs/panels/main.js
  4. 114
      test/specs/panels/view/CssRuleView.js
  5. 54
      test/specs/panels/view/CssRulesView.js
  6. 76
      test/specs/panels/view/PanelView.js

31
src/panels/view/PanelView.js
View File

@ -1,20 +1,20 @@
define(['backbone','./ButtonsView'],
function(Backbone, ButtonsView) {
/**
/**
* @class PanelView
* */
return Backbone.View.extend({
initialize: function(o){
this.config = o.config;
this.pfx = this.config.stylePrefix;
this.buttons = this.model.get('buttons');
this.className = this.pfx + 'panel';
this.id = this.pfx + this.model.get('id');
this.config = o.config || {};
this.pfx = this.config.stylePrefix || '';
this.buttons = this.model.get('buttons');
this.className = this.pfx + 'panel';
this.id = this.pfx + this.model.get('id');
this.listenTo(this.model, 'change:appendContent', this.appendContent);
this.listenTo(this.model, 'change:content', this.updateContent);
},
/**
* Append content of the panel
* */
@ -22,7 +22,7 @@ function(Backbone, ButtonsView) {
{
this.$el.append(this.model.get('appendContent'));
},
/**
* Update content
* */
@ -30,15 +30,18 @@ function(Backbone, ButtonsView) {
{
this.$el.html(this.model.get('content'));
},
render: function() {
this.$el.attr('class', _.result(this, 'className'));
this.$el.attr('id', this.id);
if(this.id)
this.$el.attr('id', this.id);
if(this.buttons.length){
var buttons = new ButtonsView({
collection : this.buttons,
config : this.config,
collection: this.buttons,
config: this.config,
});
this.$el.append(buttons.render().el);
}

82
test/specs/panels/e2e/CssComposer.js
View File

@ -1,82 +0,0 @@
define(function(require) {
return {
run : function(){
describe('E2E tests', function() {
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div id="csscomposer-fixture"></div>');
});
beforeEach(function () {
this.Grapes = require('editor/main');
this.gjs = new this.Grapes({
stylePrefix: '',
storageType: 'none',
storageManager: { storageType: 'none', },
assetManager: { storageType: 'none', },
container: 'csscomposer-fixture',
});
this.cssc = this.gjs.editor.get('CssComposer');
this.clsm = this.gjs.editor.get('ClassManager');
this.$fixture.empty().appendTo(this.$fixtures);
this.gjs.render();
this.rulesSet = [
{ selectors: [{name: 'test1'}, {name: 'test2'}] },
{ selectors: [{name: 'test2'}, {name: 'test3'}] },
{ selectors: [{name: 'test3'}] }
];
});
afterEach(function () {
delete this.Grapes;
delete this.gjs;
delete this.cssc;
delete this.clsm;
});
after(function () {
this.$fixture.remove();
});
it('Rules are correctly imported from default property', function() {
var gj = new this.Grapes({
stylePrefix: '',
storageType: 'none',
storageManager: { storageType: 'none', },
assetManager: { storageType: 'none', },
cssComposer: { defaults: this.rulesSet},
container: 'csscomposer-fixture',
});
var cssc = gj.editor.get('CssComposer');
cssc.getRules().length.should.equal(this.rulesSet.length);
var cls = gj.editor.get('ClassManager').getClasses();
cls.length.should.equal(3);
});
it('New rule adds correctly the class inside classe manager', function() {
var rules = this.cssc.getRules();
rules.add({ selectors: [{name: 'test1'}] });
this.clsm.getClasses().at(0).get('name').should.equal('test1');
});
it('New rules are correctly imported inside classe manager', function() {
var rules = this.cssc.getRules();
this.rulesSet.forEach(function(item){
rules.add(item);
});
var cls = this.clsm.getClasses();
cls.length.should.equal(3);
cls.at(0).get('name').should.equal('test1');
cls.at(1).get('name').should.equal('test2');
cls.at(2).get('name').should.equal('test3');
});
});
}
};
});

7
test/specs/panels/main.js
View File

@ -2,11 +2,13 @@ var modulePath = './../../../test/specs/panels';
define([
'Panels',
modulePath + '/model/PanelModels'
modulePath + '/model/PanelModels',
modulePath + '/view/PanelView'
],
function(
Panels,
Models
Models,
PanelView
) {
describe('Panels', function() {
@ -99,6 +101,7 @@ define([
});
Models.run();
PanelView.run();
});
});

114
test/specs/panels/view/CssRuleView.js
View File

@ -1,114 +0,0 @@
var path = 'CssComposer/view/';
define([path + 'CssRuleView', 'CssComposer/model/CssRule'],
function(CssRuleView, CssRule) {
return {
run : function(){
describe('CssRuleView', function() {
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div class="cssrule-fixture"></div>');
});
beforeEach(function () {
var m = new CssRule();
this.view = new CssRuleView({
model: m
});
this.$fixture.empty().appendTo(this.$fixtures);
this.$fixture.html(this.view.render().el);
});
afterEach(function () {
this.view.model.destroy();
});
after(function () {
this.$fixture.remove();
});
it('Object exists', function() {
CssRuleView.should.be.exist;
});
it('Correct behaviour of renderSelectors with single selector', function() {
this.view.model.get('selectors').add({name: 'test'});
this.view.renderSelectors().should.equal('.test');
});
it('Correct behaviour of renderSelectors with multiple selectors', function() {
this.view.model.get('selectors').add([{name: 'test2'}, {name: 'test1'}]);
this.view.renderSelectors().should.equal('.test2.test1');
});
it('Correct behaviour of renderProperties with single property', function() {
this.view.model.set('style', {'prop': 'value'});
this.view.renderProperties().should.equal('prop:value;');
});
it('Correct behaviour of renderProperties with multiple properties', function() {
this.view.model.set('style', {'prop2': 'value2', 'prop3': 'value3'});
this.view.renderProperties().should.equal('prop2:value2;prop3:value3;');
});
it('Empty style inside', function() {
this.$fixture.html().should.equal('<style></style>');
});
it('On update of style always empty as there is no selectors', function() {
this.view.model.set('style', {'prop':'value'});
this.$fixture.html().should.equal('<style></style>');
});
describe('CssRuleView with selectors', function() {
beforeEach(function () {
var m = new CssRule({
selectors: [{name:'test1'}, {name:'test2'}]
});
this.regView = new CssRuleView({
model: m
});
this.regView.render();
});
afterEach(function () {
this.regView.model.destroy();
});
it('Empty with no style', function() {
this.regView.$el.html().should.equal('');
});
it('Not empty on update of style', function() {
this.regView.model.set('style', {'prop':'value'});
this.regView.$el.html().should.equal('.test1.test2{prop:value;}');
});
it('State correctly rendered', function() {
this.regView.model.set('style', {'prop':'value'});
this.regView.model.set('state', 'hover');
this.regView.$el.html().should.equal('.test1.test2:hover{prop:value;}');
});
it('State render changes on update', function() {
this.regView.model.set('style', {'prop':'value'});
this.regView.model.set('state', 'hover');
this.regView.model.set('state', '');
this.regView.$el.html().should.equal('.test1.test2{prop:value;}');
});
it('Empty on clear', function() {
this.regView.model.set('style', {'prop':'value'});
this.regView.model.set('style', {});
this.regView.$el.html().should.equal('');
});
});
});
}
};
});

54
test/specs/panels/view/CssRulesView.js
View File

@ -1,54 +0,0 @@
var path = 'CssComposer/view/';
define([path + 'CssRulesView', 'CssComposer/model/CssRules'],
function(CssRulesView, CssRules) {
return {
run : function(){
describe('CssRulesView', function() {
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div class="cssrules-fixture"></div>');
});
beforeEach(function () {
var col = new CssRules([]);
this.view = new CssRulesView({
collection: col
});
this.$fixture.empty().appendTo(this.$fixtures);
this.$fixture.html(this.view.render().el);
});
afterEach(function () {
this.view.collection.reset();
});
after(function () {
this.$fixture.remove();
});
it('Object exists', function() {
CssRulesView.should.be.exist;
});
it("Collection is empty", function (){
this.view.$el.html().should.be.empty;
});
it("Add new rule", function (){
sinon.stub(this.view, "addToCollection");
this.view.collection.add({});
this.view.addToCollection.calledOnce.should.equal(true);
});
it("Render new rule", function (){
this.view.collection.add({});
this.view.$el.html().should.not.be.empty;
});
});
}
};
});

76
test/specs/panels/view/PanelView.js
View File

@ -0,0 +1,76 @@
var path = 'Panels/view/';
define([path + 'PanelView', 'Panels/model/Panel'],
function(PanelView, Panel) {
return {
run : function(){
describe('PanelView', function() {
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="cssrule-fixture"></div>');
});
beforeEach(function () {
model = new Panel();
view = new PanelView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
});
it('Panel empty', function() {
$fixture.html().should.be.equal('<div class="panel"></div>');
});
it('Append content', function() {
model.set('appendContent','test');
model.set('appendContent','test2');
view.$el.html().should.be.equal('testtest2');
});
it('Update content', function() {
model.set('content','test');
model.set('content','test2');
view.$el.html().should.be.equal('test2');
});
describe('Init with options', function() {
beforeEach(function () {
model = new Panel({
buttons: [{}]
});
view = new PanelView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
});
});
}
};
});
Write Preview
Loading…
Cancel
Save