mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
20 changed files with 458 additions and 178 deletions
@ -0,0 +1,82 @@ |
|||
|
|||
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'); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
@ -0,0 +1,101 @@ |
|||
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('Empty on clear', function() { |
|||
this.regView.model.set('style', {'prop':'value'}); |
|||
this.regView.model.set('style', {}); |
|||
this.regView.$el.html().should.equal(''); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
@ -0,0 +1,54 @@ |
|||
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; |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
@ -1,25 +0,0 @@ |
|||
|
|||
define(['panelModel','appDir/panel_commands/buttons/main'], |
|||
function(panelModel, commandsButtonsProvider) { |
|||
describe('Panel', function() { |
|||
|
|||
it('Contiene valori di default', function() { //Has default values
|
|||
var model = new panelModel({}); |
|||
model.should.be.ok; |
|||
model.get('name').should.equal(""); |
|||
model.get('visible').should.equal(true); |
|||
model.get('buttons').should.equal.undefined; |
|||
}); |
|||
it('Imposta valori passati', function() { //Sets passed attributes
|
|||
var model = new panelModel({ |
|||
name:'command', |
|||
visible: false, |
|||
buttons: commandsButtonsProvider.createButtons(), |
|||
}); |
|||
model.should.be.ok; |
|||
model.get('name').should.equal("command"); |
|||
model.get('visible').should.equal(false); |
|||
model.get('buttons').should.have.length(5); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -1,49 +0,0 @@ |
|||
|
|||
define(['panelModel', 'panelView', 'Buttons', 'appDir/panel_commands/buttons/main'], |
|||
function(panelModel,panelView, Buttons, commandsButtonsProvider) { |
|||
describe('PanelView', function() { |
|||
before(function () { |
|||
this.testPanelName = 'commands'; |
|||
this.$fixture = $("<div id='panel-fixture'></div>"); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
this.view = new panelView({ |
|||
model: new panelModel({ |
|||
name : this.testPanelName, |
|||
buttons: commandsButtonsProvider.createButtons(), |
|||
}), |
|||
eventsQ : { |
|||
commands: {createComponent : {}} |
|||
}, |
|||
}); |
|||
this.$fixture.empty().appendTo($("#fixtures")); |
|||
this.$fixture.html(this.view.render().el); |
|||
}); |
|||
afterEach(function () { |
|||
//this.view.model.destroy();
|
|||
}); |
|||
|
|||
after(function () { |
|||
//this.$fixture.remove();
|
|||
}); |
|||
describe("Inizializzazione", function () { |
|||
it('Render pannello', function() { //Has default values
|
|||
this.view.should.be.ok; |
|||
this.view.$el.attr('id').should.equal(this.testPanelName); |
|||
}); |
|||
it('Non deve essere vuoto', function() { |
|||
this.view.$el.find('.c a').should.have.length.above(0); |
|||
}); |
|||
it('Nessun elemento deve essere attivo', function() { |
|||
this.view.$el.find('.c a.active').should.have.length(0); |
|||
}); |
|||
}); |
|||
describe("Interazione", function(){ |
|||
it('Elemento attivo alla richiesta', function(){ |
|||
this.view.model.buttons.models[0].toggle(); |
|||
this.view.$el.find('.c a.active').should.have.length(1); |
|||
}); |
|||
}); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue