diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index b705be166..625dce2f4 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -18,28 +18,10 @@ require('block_manager'), require('trait_manager'), ]; -require('backbone'); -require('backbone-undo'); +var Backbone = require('backbone'); +var UndoManager = require('backbone-undo'); var key = require('keymaster'); -/* -require('Utils'); -require('StorageManager'); -require('DeviceManager'); -require('Parser'); -require('SelectorManager'); -require('ModalDialog'); -require('CodeManager'); -require('Panels'); -require('RichTextEditor'); -require('StyleManager'); -require('AssetManager'); -require('CssComposer'); -require('DomComponents'); -require('Canvas'); -require('Commands'); -require('BlockManager'); -require('TraitManager'); -*/ + module.exports = Backbone.Model.extend({ defaults: { @@ -187,7 +169,7 @@ module.exports = Backbone.Model.extend({ var cmp = this.get('DomComponents'); if(cmp && this.config.undoManager){ var that = this; - this.um = new Backbone.UndoManager({ + this.um = new UndoManager({ register: [cmp.getComponents(), this.get('CssComposer').getAll()], track: true }); @@ -202,9 +184,9 @@ module.exports = Backbone.Model.extend({ that.trigger('component:update'); }); - Backbone.UndoManager.removeUndoType("change"); + UndoManager.removeUndoType("change"); var beforeCache; - Backbone.UndoManager.addUndoType("change:style", { + UndoManager.addUndoType("change:style", { "on": function (model, value, opts) { var opt = opts || {}; if(!beforeCache){ diff --git a/src/grapesjs/index.js b/src/grapesjs/index.js index 4bde4985c..7f14ff74c 100644 --- a/src/grapesjs/index.js +++ b/src/grapesjs/index.js @@ -5,8 +5,6 @@ Editor = require('editor'), PluginManager = require('plugin_manager'); - window['_'] = require('underscore'); - var plugins = new PluginManager(); var editors = []; diff --git a/src/rich_text_editor/view/TextEditorView.js b/src/rich_text_editor/view/TextEditorView.js index b3f50dc73..a84619a1f 100644 --- a/src/rich_text_editor/view/TextEditorView.js +++ b/src/rich_text_editor/view/TextEditorView.js @@ -1,5 +1,3 @@ -var $ = require('jquery'); - var readFileIntoDataUrl = fileInfo => { var loader = $.Deferred(), fReader = new FileReader(); diff --git a/test/helper.js b/test/helper.js index 86517a1e5..34201b3a5 100644 --- a/test/helper.js +++ b/test/helper.js @@ -1,18 +1,37 @@ import _ from 'underscore'; import expect from 'expect'; import sinon from 'sinon'; -import jquery from 'jquery'; import Backbone from 'backbone'; +import grapesjs from './../src'; import { JSDOM } from 'jsdom'; +import jquery from 'jquery'; const dom = new JSDOM(''); -global.window = dom.window; -global.document = dom.window.document; +const window = dom.window; +const $ = jquery(window); + +//https://www.npmjs.com/package/proxyquire + +// Fix for the spectrum lib +var Module = require('module'); +var originalRequire = Module.prototype.require; + +Module.prototype.require = function(name) { + if (name == 'jquery') { + return $; + } + return originalRequire.apply(this, arguments); +}; + +global.window = window; +global.document = window.document; +global.$ = $; global._ = _; global.expect = expect; global.sinon = sinon; -dom.window.$ = jquery(dom.window); -Backbone.$ = dom.window.$; +global.grapesjs = grapesjs; +window.$ = $; +Backbone.$ = $; Object.keys(window).forEach((key) => { if (!(key in global)) { diff --git a/test/main.js b/test/main.js index c5f15b474..91eec0d48 100644 --- a/test/main.js +++ b/test/main.js @@ -1,11 +1,9 @@ -import grapesjs from './../src'; -//import AssetManager from './specs/asset_manager'; +//import grapesjs from './../src'; describe('Main', () => { describe('Startup', () => { it('Main object should be loaded', () => { - //Grapes = require('editor/main'); expect(grapesjs).toExist(); }); }); @@ -14,5 +12,6 @@ describe('Main', () => { require(`${path}asset_manager`); require(`${path}block_manager`); require(`${path}code_manager`); - + require(`${path}commands`); + require(`${path}css_composer`); }); diff --git a/test/specs/commands/index.js b/test/specs/commands/index.js new file mode 100644 index 000000000..f3a83f2ac --- /dev/null +++ b/test/specs/commands/index.js @@ -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(); diff --git a/test/specs/commands/main.js b/test/specs/commands/main.js deleted file mode 100644 index 6cca92040..000000000 --- a/test/specs/commands/main.js +++ /dev/null @@ -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(); -}); \ No newline at end of file diff --git a/test/specs/commands/model/CommandModels.js b/test/specs/commands/model/CommandModels.js index 50041d787..b31179dd6 100644 --- a/test/specs/commands/model/CommandModels.js +++ b/test/specs/commands/model/CommandModels.js @@ -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(); + }); - }); + }); - } - }; - -}); \ No newline at end of file + } +}; diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index ea08070d1..b06f88f3d 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -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 = $('
'); - }); - - 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 = $('
'); + }); - 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("
Test
"); - 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("
Test
"); + 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); }); - } - }; -}); \ No newline at end of file + it('Add raw rule objects with width via addCollection', () => { + var coll1 = cssc.addCollection(rulesSet2); + expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText); + }); + }); + } +}; diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js new file mode 100644 index 000000000..382f5f160 --- /dev/null +++ b/test/specs/css_composer/index.js @@ -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(); +}); diff --git a/test/specs/css_composer/main.js b/test/specs/css_composer/main.js deleted file mode 100644 index 3e6ef3a7a..000000000 --- a/test/specs/css_composer/main.js +++ /dev/null @@ -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(); - - }); -}); \ No newline at end of file diff --git a/test/specs/css_composer/model/CssModels.js b/test/specs/css_composer/model/CssModels.js index 934b5077c..e4e360c44 100644 --- a/test/specs/css_composer/model/CssModels.js +++ b/test/specs/css_composer/model/CssModels.js @@ -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); }); - } - }; -}); \ No newline at end of file + }); + } +}; diff --git a/test/specs/css_composer/view/CssRuleView.js b/test/specs/css_composer/view/CssRuleView.js index b6ebb8d41..c827e29fe 100644 --- a/test/specs/css_composer/view/CssRuleView.js +++ b/test/specs/css_composer/view/CssRuleView.js @@ -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 = $('
'); - }); +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 = $('
'); + }); - 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(''); - }); + 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(''); - }); + 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(''); + }); + + it('On update of style always empty as there is no selectors', function() { + obj.model.set('style', {'prop':'value'}); + expect(this.$fixture.html()).toEqual(''); + }); + + 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(''); + }); }); - } - }; -}); \ No newline at end of file + }); + } +}; diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js index 53f23636f..fbca5f2e8 100644 --- a/test/specs/css_composer/view/CssRulesView.js +++ b/test/specs/css_composer/view/CssRulesView.js @@ -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 = $('
'); - }); - - 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; - }); - - }); - } - }; - -}); \ No newline at end of file +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 = $('
'); + }); + + 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(); + }); + + }); + } +}; diff --git a/test/specs/test_utils.js b/test/specs/test_utils.js index cf3bc442f..91f42d4e7 100644 --- a/test/specs/test_utils.js +++ b/test/specs/test_utils.js @@ -1,4 +1,4 @@ -define(() => ({ +module.exports = { storageMock: function() { var db = {}; return { @@ -14,4 +14,4 @@ define(() => ({ }, }; } -})); +}; diff --git a/webpack.config.js b/webpack.config.js index a801f5193..5f29956e5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,8 @@ if(env !== 'dev'){ ] } -plugins.push(new webpack.ProvidePlugin({$: 'jquery'})); +plugins.push(new webpack.ProvidePlugin({_: 'underscore'})); + module.exports = { entry: './src', output: {