mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
16 changed files with 689 additions and 708 deletions
@ -0,0 +1,41 @@ |
|||
var Commands = require('commands'); |
|||
var Models = require('./model/CommandModels'); |
|||
|
|||
describe('Commands', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
let obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new Commands().init(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('No commands inside', () => { |
|||
expect(obj.get('test')).toEqual(null); |
|||
}); |
|||
|
|||
it('Push new command', () => { |
|||
var comm = { test: 'test'}; |
|||
obj.add('test', comm); |
|||
expect(obj.get('test').test).toEqual('test'); |
|||
}); |
|||
|
|||
it('No default commands at init', () => { |
|||
expect(obj.get('select-comp')).toEqual(null); |
|||
}); |
|||
|
|||
it('Default commands after loadDefaultCommands', () => { |
|||
obj.loadDefaultCommands(); |
|||
expect(obj.get('select-comp')).toNotEqual(null); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
@ -1,44 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Commands = require('Commands'); |
|||
var Models = require('undefined'); |
|||
|
|||
describe('Commands', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Commands().init(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('No commands inside', function() { |
|||
(obj.get('test') == null).should.equal(true); |
|||
}); |
|||
|
|||
it('Push new command', function() { |
|||
var comm = { test: 'test'}; |
|||
obj.add('test', comm); |
|||
(obj.get('test').test == 'test').should.equal(true); |
|||
}); |
|||
|
|||
it('No default commands at init', function() { |
|||
(obj.get('select-comp') == null).should.equal(true); |
|||
}); |
|||
|
|||
it('Default commands after loadDefaultCommands', function() { |
|||
obj.loadDefaultCommands(); |
|||
(obj.get('select-comp') == null).should.equal(false); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
}); |
|||
@ -1,44 +1,41 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Commands = require('undefined'); |
|||
const Command = require('commands/model/Command'); |
|||
const Commands = require('commands'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('Command', function() { |
|||
var obj; |
|||
module.exports = { |
|||
run() { |
|||
describe('Command', () => { |
|||
let obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Command(); |
|||
}); |
|||
beforeEach(() => { |
|||
obj = new Command(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has id property', function() { |
|||
obj.has('id').should.equal(true); |
|||
}); |
|||
it('Has id property', () => { |
|||
expect(obj.has('id')).toEqual(true); |
|||
}); |
|||
|
|||
}); |
|||
}); |
|||
|
|||
describe('Commands', function() { |
|||
var obj; |
|||
describe('Commands', () => { |
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Commands(); |
|||
}); |
|||
beforeEach(() => { |
|||
obj = new Commands(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object is ok', function() { |
|||
obj.should.be.ok; |
|||
}); |
|||
it('Object is ok', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
}); |
|||
|
|||
} |
|||
}; |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,208 +1,201 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var GrapesJS = require('GrapesJS'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('E2E tests', function() { |
|||
|
|||
var fixtures; |
|||
var fixture; |
|||
var grapesjs; |
|||
var gjs; |
|||
var cssc, clsm, domc; |
|||
var rulesSet; |
|||
var rulesSet2; |
|||
|
|||
before(function () { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="csscomposer-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
grapesjs = GrapesJS; |
|||
gjs = grapesjs.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { storageType: 'none', }, |
|||
container: 'csscomposer-fixture', |
|||
}); |
|||
cssc = gjs.CssComposer; |
|||
clsm = gjs.SelectorManager; |
|||
domc = gjs.DomComponents; |
|||
fixture.empty().appendTo(fixtures); |
|||
gjs.render(); |
|||
rulesSet = [ |
|||
{ selectors: [{name: 'test1'}, {name: 'test2'}] }, |
|||
{ selectors: [{name: 'test2'}, {name: 'test3'}] }, |
|||
{ selectors: [{name: 'test3'}] } |
|||
]; |
|||
rulesSet2 = [ |
|||
{ selectors: [{name: 'test1'}, {name: 'test2'}], state:':active' }, |
|||
{ selectors: [{name: 'test2'}, {name: 'test3'}] }, |
|||
{ selectors: [{name: 'test3'}], mediaText:'(max-width: 900px)' } |
|||
]; |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete grapesjs; |
|||
delete gjs; |
|||
delete cssc; |
|||
delete clsm; |
|||
}); |
|||
module.exports = { |
|||
run() { |
|||
describe('E2E tests', () => { |
|||
var fixtures; |
|||
var fixture; |
|||
var gjs; |
|||
var cssc; |
|||
var clsm; |
|||
var domc; |
|||
var rulesSet; |
|||
var rulesSet2; |
|||
|
|||
before(() => { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="csscomposer-fixture"></div>'); |
|||
}); |
|||
|
|||
after(function () { |
|||
fixture.remove(); |
|||
}); |
|||
beforeEach(function(done) { |
|||
//this.timeout(5000);
|
|||
gjs = grapesjs.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { storageType: 'none', }, |
|||
container: 'csscomposer-fixture', |
|||
}); |
|||
cssc = gjs.CssComposer; |
|||
clsm = gjs.SelectorManager; |
|||
domc = gjs.DomComponents; |
|||
fixture.empty().appendTo(fixtures); |
|||
gjs.render(); |
|||
rulesSet = [ |
|||
{ selectors: [{name: 'test1'}, {name: 'test2'}] }, |
|||
{ selectors: [{name: 'test2'}, {name: 'test3'}] }, |
|||
{ selectors: [{name: 'test3'}] } |
|||
]; |
|||
rulesSet2 = [ |
|||
{ selectors: [{name: 'test1'}, {name: 'test2'}], state:':active' }, |
|||
{ selectors: [{name: 'test2'}, {name: 'test3'}] }, |
|||
{ selectors: [{name: 'test3'}], mediaText:'(max-width: 900px)' } |
|||
]; |
|||
done(); |
|||
}); |
|||
|
|||
it('Rules are correctly imported from default property', function() { |
|||
var gj = new grapesjs.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { storageType: 'none', }, |
|||
cssComposer: { rules: rulesSet}, |
|||
container: 'csscomposer-fixture', |
|||
}); |
|||
var cssc = gj.editor.get('CssComposer'); |
|||
cssc.getAll().length.should.equal(rulesSet.length); |
|||
var cls = gj.editor.get('SelectorManager').getAll(); |
|||
cls.length.should.equal(3); |
|||
}); |
|||
afterEach(() => { |
|||
gjs = null; |
|||
cssc = null; |
|||
clsm = null; |
|||
}); |
|||
|
|||
after(() => { |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('New rule adds correctly the class inside selector manager', function() { |
|||
var rules = cssc.getAll(); |
|||
rules.add({ selectors: [{name: 'test1'}] }); |
|||
clsm.getAll().at(0).get('name').should.equal('test1'); |
|||
}); |
|||
it('Rules are correctly imported from default property', () => { |
|||
var gj = grapesjs.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { storageType: 'none', }, |
|||
cssComposer: { rules: rulesSet}, |
|||
container: 'csscomposer-fixture', |
|||
}); |
|||
var cssc = gj.editor.get('CssComposer'); |
|||
expect(cssc.getAll().length).toEqual(rulesSet.length); |
|||
var cls = gj.editor.get('SelectorManager').getAll(); |
|||
expect(cls.length).toEqual(3); |
|||
}); |
|||
|
|||
it('New rules are correctly imported inside selector manager', function() { |
|||
var rules = cssc.getAll(); |
|||
rulesSet.forEach(function(item){ |
|||
rules.add(item); |
|||
}); |
|||
var cls = clsm.getAll(); |
|||
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'); |
|||
}); |
|||
|
|||
it('Add rules from the new component added as a string with style tag', function() { |
|||
var comps = domc.getComponents(); |
|||
var rules = cssc.getAll(); |
|||
comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>"); |
|||
comps.length.should.equal(1); |
|||
rules.length.should.equal(2); |
|||
}); |
|||
it('New rule adds correctly the class inside selector manager', () => { |
|||
var rules = cssc.getAll(); |
|||
rules.add({ selectors: [{name: 'test1'}] }); |
|||
expect(clsm.getAll().at(0).get('name')).toEqual('test1'); |
|||
}); |
|||
|
|||
it('Add raw rule objects with addCollection', function() { |
|||
cssc.addCollection(rulesSet); |
|||
cssc.getAll().length.should.equal(3); |
|||
clsm.getAll().length.should.equal(3); |
|||
}); |
|||
it('New rules are correctly imported inside selector manager', () => { |
|||
var rules = cssc.getAll(); |
|||
rulesSet.forEach(item => { |
|||
rules.add(item); |
|||
}); |
|||
var cls = clsm.getAll(); |
|||
expect(cls.length).toEqual(3); |
|||
expect(cls.at(0).get('name')).toEqual('test1'); |
|||
expect(cls.at(1).get('name')).toEqual('test2'); |
|||
expect(cls.at(2).get('name')).toEqual('test3'); |
|||
}); |
|||
|
|||
it('Add raw rule objects twice with addCollection do not duplucate rules', function() { |
|||
var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); |
|||
var coll1 = cssc.addCollection(rulesSet2); |
|||
var coll2 = cssc.addCollection(rulesSet2Copy); |
|||
cssc.getAll().length.should.equal(3); |
|||
clsm.getAll().length.should.equal(3); |
|||
coll1.should.deep.equal(coll2); |
|||
}); |
|||
it('Add rules from the new component added as a string with style tag', () => { |
|||
var comps = domc.getComponents(); |
|||
var rules = cssc.getAll(); |
|||
comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>"); |
|||
expect(comps.length).toEqual(1); |
|||
expect(rules.length).toEqual(2); |
|||
}); |
|||
|
|||
it("Extend css rule style, if requested", function() { |
|||
var style1 = {color: 'red', width: '10px'}; |
|||
var style2 = {height: '20px', width: '20px'}; |
|||
var rule1 = { |
|||
selectors: ['test1'], |
|||
style: style1, |
|||
}; |
|||
var rule2 = { |
|||
selectors: ['test1'], |
|||
style: style2, |
|||
}; |
|||
var ruleOut = cssc.addCollection(rule1)[0]; |
|||
// ruleOut is a Model
|
|||
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
|||
var ruleResult = { |
|||
mediaText: '', |
|||
selectors: [{ |
|||
active: true, |
|||
label: 'test1', |
|||
name: 'test1', |
|||
type: 'class', |
|||
}], |
|||
selectorsAdd: '', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
color: 'red', |
|||
width: '10px' |
|||
} |
|||
}; |
|||
ruleOut.should.deep.equal(ruleResult); |
|||
var ruleOut = cssc.addCollection(rule2, {extend: 1})[0]; |
|||
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
|||
ruleResult.style = { |
|||
color: 'red', |
|||
height: '20px', |
|||
width: '20px', |
|||
} |
|||
ruleOut.should.deep.equal(ruleResult); |
|||
it('Add raw rule objects with addCollection', () => { |
|||
cssc.addCollection(rulesSet); |
|||
expect(cssc.getAll().length).toEqual(3); |
|||
expect(clsm.getAll().length).toEqual(3); |
|||
}); |
|||
|
|||
}); |
|||
it('Add raw rule objects twice with addCollection do not duplucate rules', () => { |
|||
var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); |
|||
var coll1 = cssc.addCollection(rulesSet2); |
|||
var coll2 = cssc.addCollection(rulesSet2Copy); |
|||
expect(cssc.getAll().length).toEqual(3); |
|||
expect(clsm.getAll().length).toEqual(3); |
|||
expect(coll1).toEqual(coll2); |
|||
}); |
|||
|
|||
it("Do not extend with different selectorsAdd", function() { |
|||
var style1 = {color: 'red', width: '10px'}; |
|||
var style2 = {height: '20px', width: '20px'}; |
|||
var rule1 = { |
|||
selectors: [], |
|||
selectorsAdd: '*', |
|||
style: style1, |
|||
}; |
|||
var rule2 = { |
|||
selectors: [], |
|||
selectorsAdd: 'p', |
|||
style: style2, |
|||
}; |
|||
var rule1Out = cssc.addCollection(rule1, {extend: 1})[0]; |
|||
var rule2Out = cssc.addCollection(rule2, {extend: 1})[0]; |
|||
rule1Out = JSON.parse(JSON.stringify(rule1Out)); |
|||
rule2Out = JSON.parse(JSON.stringify(rule2Out)); |
|||
var rule1Result = { |
|||
mediaText: '', |
|||
selectors: [], |
|||
selectorsAdd: '*', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
color: 'red', |
|||
width: '10px' |
|||
} |
|||
}; |
|||
var rule2Result = { |
|||
mediaText: '', |
|||
selectors: [], |
|||
selectorsAdd: 'p', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
height: '20px', |
|||
width: '20px', |
|||
} |
|||
}; |
|||
rule1Out.should.deep.equal(rule1Result); |
|||
rule2Out.should.deep.equal(rule2Result); |
|||
}); |
|||
it("Extend css rule style, if requested", () => { |
|||
var style1 = {color: 'red', width: '10px'}; |
|||
var style2 = {height: '20px', width: '20px'}; |
|||
var rule1 = { |
|||
selectors: ['test1'], |
|||
style: style1, |
|||
}; |
|||
var rule2 = { |
|||
selectors: ['test1'], |
|||
style: style2, |
|||
}; |
|||
var ruleOut = cssc.addCollection(rule1)[0]; |
|||
// ruleOut is a Model
|
|||
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
|||
var ruleResult = { |
|||
mediaText: '', |
|||
selectors: [{ |
|||
active: true, |
|||
label: 'test1', |
|||
name: 'test1', |
|||
type: 'class', |
|||
}], |
|||
selectorsAdd: '', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
color: 'red', |
|||
width: '10px' |
|||
} |
|||
}; |
|||
expect(ruleOut).toEqual(ruleResult); |
|||
var ruleOut = cssc.addCollection(rule2, {extend: 1})[0]; |
|||
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
|||
ruleResult.style = { |
|||
color: 'red', |
|||
height: '20px', |
|||
width: '20px', |
|||
} |
|||
expect(ruleOut).toEqual(ruleResult); |
|||
|
|||
it('Add raw rule objects with width via addCollection', function() { |
|||
var coll1 = cssc.addCollection(rulesSet2); |
|||
coll1[2].get('mediaText').should.equal(rulesSet2[2].mediaText); |
|||
}); |
|||
}); |
|||
|
|||
it("Do not extend with different selectorsAdd", () => { |
|||
var style1 = {color: 'red', width: '10px'}; |
|||
var style2 = {height: '20px', width: '20px'}; |
|||
var rule1 = { |
|||
selectors: [], |
|||
selectorsAdd: '*', |
|||
style: style1, |
|||
}; |
|||
var rule2 = { |
|||
selectors: [], |
|||
selectorsAdd: 'p', |
|||
style: style2, |
|||
}; |
|||
var rule1Out = cssc.addCollection(rule1, {extend: 1})[0]; |
|||
var rule2Out = cssc.addCollection(rule2, {extend: 1})[0]; |
|||
rule1Out = JSON.parse(JSON.stringify(rule1Out)); |
|||
rule2Out = JSON.parse(JSON.stringify(rule2Out)); |
|||
var rule1Result = { |
|||
mediaText: '', |
|||
selectors: [], |
|||
selectorsAdd: '*', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
color: 'red', |
|||
width: '10px' |
|||
} |
|||
}; |
|||
var rule2Result = { |
|||
mediaText: '', |
|||
selectors: [], |
|||
selectorsAdd: 'p', |
|||
state: '', |
|||
stylable: true, |
|||
style: { |
|||
height: '20px', |
|||
width: '20px', |
|||
} |
|||
}; |
|||
expect(rule1Out).toEqual(rule1Result); |
|||
expect(rule2Out).toEqual(rule2Result); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
it('Add raw rule objects with width via addCollection', () => { |
|||
var coll1 = cssc.addCollection(rulesSet2); |
|||
expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText); |
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -0,0 +1,167 @@ |
|||
var Models = require('./model/CssModels'); |
|||
var CssRuleView = require('./view/CssRuleView'); |
|||
var CssRulesView = require('./view/CssRulesView'); |
|||
var CssComposer = require('css_composer'); |
|||
var e2e = require('./e2e/CssComposer'); |
|||
var utils = require('./../test_utils.js'); |
|||
|
|||
describe('Css Composer', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
|
|||
var config; |
|||
var storagMock = utils.storageMock(); |
|||
var editorModel = { |
|||
getCss() {return 'testCss';}, |
|||
getCacheLoad() { |
|||
return storagMock.load(); |
|||
} |
|||
}; |
|||
|
|||
var setSmConfig = () => { |
|||
config.stm = storagMock; |
|||
config.stm.getConfig = () => ({ |
|||
storeCss: 1, |
|||
storeStyles: 1 |
|||
}); |
|||
}; |
|||
var setEm = () => { |
|||
config.em = editorModel; |
|||
} |
|||
|
|||
|
|||
beforeEach(() => { |
|||
config = {}; |
|||
obj = new CssComposer().init(config); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(CssComposer).toExist(); |
|||
}); |
|||
|
|||
it('storageKey returns array', () => { |
|||
expect(obj.storageKey() instanceof Array).toEqual(true); |
|||
}); |
|||
|
|||
it('storageKey returns correct composition', () => { |
|||
setSmConfig(); |
|||
expect(obj.storageKey()).toEqual(['css', 'styles']); |
|||
}); |
|||
|
|||
it('Store data', () => { |
|||
setSmConfig(); |
|||
setEm(); |
|||
var expected = { css: 'testCss', styles: '[]',}; |
|||
expect(obj.store(1)).toEqual(expected); |
|||
}); |
|||
|
|||
it("Rules are empty", () => { |
|||
expect(obj.getAll().length).toEqual(0); |
|||
}); |
|||
|
|||
it('Create new rule with correct selectors', () => { |
|||
var sel = new obj.Selectors(); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule = obj.add(sel.models); |
|||
expect(rule.get('selectors').at(0)).toEqual(s1); |
|||
}); |
|||
|
|||
it('Create new rule correctly', () => { |
|||
var sel = new obj.Selectors(); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule = obj.add(sel.models, 'state1', 'width1'); |
|||
expect(rule.get('state')).toEqual('state1'); |
|||
expect(rule.get('mediaText')).toEqual('width1'); |
|||
}); |
|||
|
|||
it("Add rule to collection", () => { |
|||
var sel = new obj.Selectors([{name: 'test1'}]); |
|||
var rule = obj.add(sel.models); |
|||
expect(obj.getAll().length).toEqual(1); |
|||
expect(obj.getAll().at(0).get('selectors').at(0).get('name')).toEqual('test1'); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selector", () => { |
|||
var sel = new obj.Selectors([{name: 'test1'}]); |
|||
var rule1 = obj.add(sel.models); |
|||
var rule2 = obj.get(sel.models); |
|||
expect(rule1).toEqual(rule2); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors", () => { |
|||
var sel1 = new obj.Selectors([{name: 'test1'}]); |
|||
var rule1 = obj.add(sel1.models); |
|||
|
|||
var sel2 = new obj.Selectors([{name: 'test21'}, {name: 'test22'}]); |
|||
var rule2 = obj.add(sel2.models); |
|||
|
|||
var rule3 = obj.get(sel2.models); |
|||
expect(rule3).toEqual(rule2); |
|||
}); |
|||
|
|||
it("Do not create multiple rules with the same name selectors", () => { |
|||
var sel1 = new obj.Selectors([{name: 'test21'}, {name: 'test22'}]); |
|||
var rule1 = obj.add(sel1.models); |
|||
|
|||
var sel2 = new obj.Selectors([{name: 'test22'}, {name: 'test21'}]); |
|||
var rule2 = obj.add(sel2.models); |
|||
expect(rule2).toEqual(rule1); |
|||
}); |
|||
|
|||
it("Don't duplicate rules", () => { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
|
|||
var rule1 = obj.add([s1, s3]); |
|||
var rule2 = obj.add([s3, s1]); |
|||
|
|||
expect(rule2).toEqual(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same mixed selectors", () => { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
var rule1 = obj.add([s1, s3]); |
|||
var rule2 = obj.get([s3, s1]); |
|||
expect(rule2).toEqual(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors and state", () => { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
var rule1 = obj.add([s1, s3], 'hover'); |
|||
var rule2 = obj.get([s3, s1], 'hover'); |
|||
expect(rule2).toEqual(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors, state and width", () => { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule1 = obj.add([s1], 'hover','1'); |
|||
var rule2 = obj.get([s1], 'hover', '1'); |
|||
expect(rule2).toEqual(rule1); |
|||
}); |
|||
|
|||
it("Renders correctly", () => { |
|||
expect(obj.render()).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
CssRuleView.run(); |
|||
CssRulesView.run(); |
|||
e2e.run(); |
|||
}); |
|||
@ -1,167 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var CssComposer = require('CssComposer'); |
|||
var e2e = require('undefined'); |
|||
var utils = require('./../test_utils.js'); |
|||
|
|||
describe('Css Composer', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
|
|||
var config; |
|||
var storagMock = utils.storageMock(); |
|||
var editorModel = { |
|||
getCss: function(){return 'testCss';}, |
|||
getCacheLoad: function(){ |
|||
return storagMock.load(); |
|||
} |
|||
}; |
|||
|
|||
var setSmConfig = function(){ |
|||
config.stm = storagMock; |
|||
config.stm.getConfig = function(){ |
|||
return { storeCss: 1, storeStyles: 1} |
|||
}; |
|||
}; |
|||
var setEm = function(){ |
|||
config.em = editorModel; |
|||
} |
|||
|
|||
|
|||
beforeEach(function () { |
|||
config = {}; |
|||
obj = new CssComposer().init(config); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
CssComposer.should.be.exist; |
|||
}); |
|||
|
|||
it('storageKey returns array', function() { |
|||
obj.storageKey().should.be.instanceOf(Array); |
|||
}); |
|||
|
|||
it('storageKey returns correct composition', function() { |
|||
setSmConfig(); |
|||
obj.storageKey().should.eql(['css', 'styles']); |
|||
}); |
|||
|
|||
it('Store data', function() { |
|||
setSmConfig(); |
|||
setEm(); |
|||
var expected = { css: 'testCss', styles: '[]',}; |
|||
obj.store(1).should.deep.equal(expected); |
|||
}); |
|||
|
|||
it("Rules are empty", function() { |
|||
obj.getAll().length.should.equal(0); |
|||
}); |
|||
|
|||
it('Create new rule with correct selectors', function() { |
|||
var sel = new obj.Selectors(); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule = obj.add(sel.models); |
|||
rule.get('selectors').at(0).should.deep.equal(s1); |
|||
}); |
|||
|
|||
it('Create new rule correctly', function() { |
|||
var sel = new obj.Selectors(); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule = obj.add(sel.models, 'state1', 'width1'); |
|||
rule.get('state').should.equal('state1'); |
|||
rule.get('mediaText').should.equal('width1'); |
|||
}); |
|||
|
|||
it("Add rule to collection", function() { |
|||
var sel = new obj.Selectors([{name: 'test1'}]); |
|||
var rule = obj.add(sel.models); |
|||
obj.getAll().length.should.equal(1); |
|||
obj.getAll().at(0).get('selectors').at(0).get('name').should.equal('test1'); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selector", function() { |
|||
var sel = new obj.Selectors([{name: 'test1'}]); |
|||
var rule1 = obj.add(sel.models); |
|||
var rule2 = obj.get(sel.models); |
|||
rule1.should.deep.equal(rule2); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors", function() { |
|||
var sel1 = new obj.Selectors([{name: 'test1'}]); |
|||
var rule1 = obj.add(sel1.models); |
|||
|
|||
var sel2 = new obj.Selectors([{name: 'test21'}, {name: 'test22'}]); |
|||
var rule2 = obj.add(sel2.models); |
|||
|
|||
var rule3 = obj.get(sel2.models); |
|||
rule3.should.deep.equal(rule2); |
|||
}); |
|||
|
|||
it("Do not create multiple rules with the same name selectors", function() { |
|||
var sel1 = new obj.Selectors([{name: 'test21'}, {name: 'test22'}]); |
|||
var rule1 = obj.add(sel1.models); |
|||
|
|||
var sel2 = new obj.Selectors([{name: 'test22'}, {name: 'test21'}]); |
|||
var rule2 = obj.add(sel2.models); |
|||
rule2.should.deep.equal(rule1); |
|||
}); |
|||
|
|||
it("Don't duplicate rules", function() { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
|
|||
var rule1 = obj.add([s1, s3]); |
|||
var rule2 = obj.add([s3, s1]); |
|||
|
|||
rule2.should.deep.equal(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same mixed selectors", function() { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
var rule1 = obj.add([s1, s3]); |
|||
var rule2 = obj.get([s3, s1]); |
|||
rule2.should.deep.equal(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors and state", function() { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var s2 = sel.add({name: 'test2'}); |
|||
var s3 = sel.add({name: 'test3'}); |
|||
var rule1 = obj.add([s1, s3], 'hover'); |
|||
var rule2 = obj.get([s3, s1], 'hover'); |
|||
rule2.should.deep.equal(rule1); |
|||
}); |
|||
|
|||
it("Returns correct rule with the same selectors, state and width", function() { |
|||
var sel = new obj.Selectors([]); |
|||
var s1 = sel.add({name: 'test1'}); |
|||
var rule1 = obj.add([s1], 'hover','1'); |
|||
var rule2 = obj.get([s1], 'hover', '1'); |
|||
rule2.should.deep.equal(rule1); |
|||
}); |
|||
|
|||
it("Renders correctly", function() { |
|||
obj.render().should.be.ok; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
CssRuleView.run(); |
|||
CssRulesView.run(); |
|||
e2e.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,82 +1,81 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Selectors = require('undefined'); |
|||
var Selector = require('SelectorManager/model/Selector'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('CssRule', function() { |
|||
|
|||
beforeEach(function () { |
|||
this.obj = new CssRule(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Has selectors property', function() { |
|||
this.obj.has('selectors').should.equal(true); |
|||
}); |
|||
|
|||
it('Has style property', function() { |
|||
this.obj.has('style').should.equal(true); |
|||
}); |
|||
|
|||
it('Has state property', function() { |
|||
this.obj.has('state').should.equal(true); |
|||
}); |
|||
|
|||
it('No default selectors', function() { |
|||
this.obj.get('selectors').length.should.equal(0); |
|||
}); |
|||
|
|||
it('Compare returns true with the same selectors', function() { |
|||
var s1 = this.obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = this.obj.get('selectors').add({ name: 'test2' }); |
|||
this.obj.compare([s1, s2]).should.equal(true); |
|||
}); |
|||
|
|||
it('Compare with different state', function() { |
|||
var s1 = this.obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = this.obj.get('selectors').add({ name: 'test2' }); |
|||
this.obj.set('state','hover'); |
|||
this.obj.compare([s1, s2]).should.equal(false); |
|||
this.obj.compare([s1, s2], 'hover').should.equal(true); |
|||
}); |
|||
|
|||
it('Compare with different mediaText', function() { |
|||
var s1 = this.obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = this.obj.get('selectors').add({ name: 'test2' }); |
|||
this.obj.set('state','hover'); |
|||
this.obj.set('mediaText','1000'); |
|||
this.obj.compare([s1, s2]).should.equal(false); |
|||
this.obj.compare([s1, s2], 'hover').should.equal(false); |
|||
this.obj.compare([s2, s1], 'hover', '1000').should.equal(true); |
|||
}); |
|||
var CssRule = require('css_composer/model/CssRule'); |
|||
var CssRules = require('css_composer/model/CssRules'); |
|||
var Selectors = require('selector_manager/model/Selectors'); |
|||
var Selector = require('selector_manager/model/Selector'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('CssRule', () => { |
|||
let obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new CssRule(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has selectors property', () => { |
|||
expect(obj.has('selectors')).toEqual(true); |
|||
}); |
|||
|
|||
it('Has style property', () => { |
|||
expect(obj.has('style')).toEqual(true); |
|||
}); |
|||
|
|||
it('Has state property', () => { |
|||
expect(obj.has('state')).toEqual(true); |
|||
}); |
|||
|
|||
it('No default selectors', () => { |
|||
expect(obj.get('selectors').length).toEqual(0); |
|||
}); |
|||
|
|||
it('Compare returns true with the same selectors', () => { |
|||
var s1 = obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = obj.get('selectors').add({ name: 'test2' }); |
|||
expect(obj.compare([s1, s2])).toEqual(true); |
|||
}); |
|||
|
|||
it('Compare with different state', () => { |
|||
var s1 = obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = obj.get('selectors').add({ name: 'test2' }); |
|||
obj.set('state','hover'); |
|||
expect(obj.compare([s1, s2])).toEqual(false); |
|||
expect(obj.compare([s1, s2], 'hover')).toEqual(true); |
|||
}); |
|||
|
|||
it('Compare with different mediaText', () => { |
|||
var s1 = obj.get('selectors').add({ name: 'test1' }); |
|||
var s2 = obj.get('selectors').add({ name: 'test2' }); |
|||
obj.set('state','hover'); |
|||
obj.set('mediaText','1000'); |
|||
expect(obj.compare([s1, s2])).toEqual(false); |
|||
expect(obj.compare([s1, s2], 'hover')).toEqual(false); |
|||
expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true); |
|||
}); |
|||
|
|||
describe('CssRules', function() { |
|||
}); |
|||
|
|||
it('Creates collection item correctly', function() { |
|||
var c = new CssRules(); |
|||
var m = c.add({}); |
|||
m.should.be.an.instanceOf(CssRule); |
|||
}); |
|||
describe('CssRules', () => { |
|||
|
|||
it('Creates collection item correctly', () => { |
|||
var c = new CssRules(); |
|||
var m = c.add({}); |
|||
expect(m instanceof CssRule).toEqual(true); |
|||
}); |
|||
|
|||
describe('Selectors', function() { |
|||
}); |
|||
|
|||
it('Creates collection item correctly', function() { |
|||
var c = new Selectors(); |
|||
var m = c.add({}); |
|||
m.should.be.an.instanceOf(Selector); |
|||
}); |
|||
describe('Selectors', () => { |
|||
|
|||
it('Creates collection item correctly', () => { |
|||
var c = new Selectors(); |
|||
var m = c.add({}); |
|||
expect(m instanceof Selector).toEqual(true); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,121 +1,121 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var CssRuleView = require('undefined'); |
|||
var CssRule = require('CssComposer/model/CssRule'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('CssRuleView', function() { |
|||
|
|||
before(function () { |
|||
this.$fixtures = $("#fixtures"); |
|||
this.$fixture = $('<div class="cssrule-fixture"></div>'); |
|||
}); |
|||
var CssRuleView = require('css_composer/view/CssRuleView'); |
|||
var CssRule = require('css_composer/model/CssRule'); |
|||
|
|||
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); |
|||
}); |
|||
module.exports = { |
|||
run() { |
|||
describe('CssRuleView', () => { |
|||
|
|||
afterEach(function () { |
|||
this.view.model.destroy(); |
|||
}); |
|||
let obj; |
|||
|
|||
after(function () { |
|||
this.$fixture.remove(); |
|||
}); |
|||
before(function () { |
|||
this.$fixtures = $("#fixtures"); |
|||
this.$fixture = $('<div class="cssrule-fixture"></div>'); |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
CssRuleView.should.be.exist; |
|||
}); |
|||
beforeEach(function () { |
|||
var m = new CssRule(); |
|||
obj = new CssRuleView({ |
|||
model: m |
|||
}); |
|||
this.$fixture.empty().appendTo(this.$fixtures); |
|||
this.$fixture.html(obj.render().el); |
|||
}); |
|||
|
|||
it('Correct behaviour of renderSelectors with single selector', function() { |
|||
this.view.model.get('selectors').add({name: 'test'}); |
|||
this.view.renderSelectors().should.equal('.test'); |
|||
}); |
|||
afterEach(() => { |
|||
obj.model.destroy(); |
|||
}); |
|||
|
|||
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'); |
|||
}); |
|||
after(function () { |
|||
this.$fixture.remove(); |
|||
}); |
|||
|
|||
it('Correct behaviour of renderProperties with single property', function() { |
|||
this.view.model.set('style', {'prop': 'value'}); |
|||
this.view.renderProperties().should.equal('prop:value;'); |
|||
}); |
|||
it('Object exists', () => { |
|||
expect(CssRuleView).toExist(); |
|||
}); |
|||
|
|||
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('Correct behaviour of renderSelectors with single selector', () => { |
|||
obj.model.get('selectors').add({name: 'test'}); |
|||
expect(obj.renderSelectors()).toEqual('.test'); |
|||
}); |
|||
|
|||
it('Empty style inside', function() { |
|||
this.$fixture.html().should.equal('<style></style>'); |
|||
}); |
|||
it('Correct behaviour of renderSelectors with multiple selectors', () => { |
|||
obj.model.get('selectors').add([{name: 'test2'}, {name: 'test1'}]); |
|||
expect(obj.renderSelectors()).toEqual('.test2.test1'); |
|||
}); |
|||
|
|||
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>'); |
|||
}); |
|||
it('Correct behaviour of renderProperties with single property', () => { |
|||
obj.model.set('style', {'prop': 'value'}); |
|||
expect(obj.renderProperties()).toEqual('prop:value;'); |
|||
}); |
|||
|
|||
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('Render media queries', function() { |
|||
this.regView.model.set('style', {'prop':'value'}); |
|||
this.regView.model.set('mediaText', '(max-width: 999px)'); |
|||
this.regView.$el.html().should.equal('@media (max-width: 999px){.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(''); |
|||
}); |
|||
it('Correct behaviour of renderProperties with multiple properties', () => { |
|||
obj.model.set('style', {'prop2': 'value2', 'prop3': 'value3'}); |
|||
expect(obj.renderProperties()).toEqual('prop2:value2;prop3:value3;'); |
|||
}); |
|||
|
|||
it('Empty style inside', function() { |
|||
expect(this.$fixture.html()).toEqual('<style></style>'); |
|||
}); |
|||
|
|||
it('On update of style always empty as there is no selectors', function() { |
|||
obj.model.set('style', {'prop':'value'}); |
|||
expect(this.$fixture.html()).toEqual('<style></style>'); |
|||
}); |
|||
|
|||
describe('CssRuleView with selectors', () => { |
|||
|
|||
let objReg; |
|||
|
|||
beforeEach(() => { |
|||
var m = new CssRule({ |
|||
selectors: [{name:'test1'}, {name:'test2'}] |
|||
}); |
|||
objReg = new CssRuleView({ |
|||
model: m |
|||
}); |
|||
objReg.render(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
objReg.model.destroy(); |
|||
}); |
|||
|
|||
it('Empty with no style', () => { |
|||
expect(objReg.$el.html()).toEqual(''); |
|||
}); |
|||
|
|||
it('Not empty on update of style', () => { |
|||
objReg.model.set('style', {'prop':'value'}); |
|||
expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); |
|||
}); |
|||
|
|||
it('State correctly rendered', () => { |
|||
objReg.model.set('style', {'prop':'value'}); |
|||
objReg.model.set('state', 'hover'); |
|||
expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}'); |
|||
}); |
|||
|
|||
it('State render changes on update', () => { |
|||
objReg.model.set('style', {'prop':'value'}); |
|||
objReg.model.set('state', 'hover'); |
|||
objReg.model.set('state', ''); |
|||
expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); |
|||
}); |
|||
|
|||
it('Render media queries', () => { |
|||
objReg.model.set('style', {'prop':'value'}); |
|||
objReg.model.set('mediaText', '(max-width: 999px)'); |
|||
expect(objReg.$el.html()).toEqual('@media (max-width: 999px){.test1.test2{prop:value;}}'); |
|||
}); |
|||
|
|||
it('Empty on clear', () => { |
|||
objReg.model.set('style', {'prop':'value'}); |
|||
objReg.model.set('style', {}); |
|||
expect(objReg.$el.html()).toEqual(''); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,55 +1,53 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var CssRulesView = require('undefined'); |
|||
var CssRules = require('CssComposer/model/CssRules'); |
|||
|
|||
module.exports = { |
|||
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; |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
var CssRulesView = require('css_composer/view/CssRulesView'); |
|||
var CssRules = require('css_composer/model/CssRules'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('CssRulesView', () => { |
|||
|
|||
let obj; |
|||
|
|||
before(function () { |
|||
this.$fixtures = $("#fixtures"); |
|||
this.$fixture = $('<div class="cssrules-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
var col = new CssRules([]); |
|||
obj = new CssRulesView({ |
|||
collection: col |
|||
}); |
|||
this.$fixture.empty().appendTo(this.$fixtures); |
|||
this.$fixture.html(obj.render().el); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj.collection.reset(); |
|||
}); |
|||
|
|||
after(function () { |
|||
this.$fixture.remove(); |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(CssRulesView).toExist(); |
|||
}); |
|||
|
|||
it("Collection is empty", () => { |
|||
expect(obj.$el.html()).toNotExist(); |
|||
}); |
|||
|
|||
it("Add new rule", () => { |
|||
sinon.stub(obj, "addToCollection"); |
|||
obj.collection.add({}); |
|||
expect(obj.addToCollection.calledOnce).toExist(true); |
|||
}); |
|||
|
|||
it("Render new rule", () => { |
|||
obj.collection.add({}); |
|||
expect(obj.$el.html()).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
Loading…
Reference in new issue