mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
139 changed files with 8719 additions and 7372 deletions
@ -0,0 +1,16 @@ |
|||
{ |
|||
"env": { |
|||
"browser": true, |
|||
"node": true |
|||
}, |
|||
"parserOptions": { |
|||
"sourceType": "module" |
|||
}, |
|||
"rules": { |
|||
"strict": 0, |
|||
"quotes": [0, "single"], |
|||
"eol-last": [0], |
|||
"no-mixed-requires": [0], |
|||
"no-underscore-dangle": [0] |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,5 +1,7 @@ |
|||
module.exports = { |
|||
|
|||
'blocks': [], |
|||
blocks: [], |
|||
|
|||
appendTo: '', |
|||
|
|||
}; |
|||
|
|||
@ -1,11 +1,26 @@ |
|||
var Backbone = require('backbone'); |
|||
var Category = require('./Category'); |
|||
|
|||
module.exports = Backbone.Model.extend({ |
|||
|
|||
defaults :{ |
|||
defaults: { |
|||
label: '', |
|||
content: '', |
|||
category: '', |
|||
attributes: {}, |
|||
}, |
|||
|
|||
initialize(opts = {}) { |
|||
let category = this.get('category'); |
|||
|
|||
if (category) { |
|||
if (typeof category == 'string') { |
|||
var catObj = new Category({ |
|||
id: category, |
|||
label: category, |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.Collection.extend({ |
|||
model: require('./Category'), |
|||
}); |
|||
@ -0,0 +1,12 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.Model.extend({ |
|||
|
|||
defaults: { |
|||
id: '', |
|||
label: '', |
|||
open: true, |
|||
attributes: {}, |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,82 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.View.extend({ |
|||
|
|||
template: _.template(` |
|||
<div class="<%= pfx %>title"> |
|||
<i class="<%= pfx %>caret-icon"></i> |
|||
<%= label %> |
|||
</div> |
|||
<div class="<%= pfx %>blocks-c"></div> |
|||
`),
|
|||
|
|||
events: {}, |
|||
|
|||
initialize(o = {}, config = {}) { |
|||
this.config = config; |
|||
const pfx = this.config.pStylePrefix || ''; |
|||
this.pfx = pfx; |
|||
this.caretR = 'fa fa-caret-right'; |
|||
this.caretD = 'fa fa-caret-down'; |
|||
this.iconClass = `${pfx}caret-icon`; |
|||
this.activeClass = `${pfx}open`; |
|||
this.className = `${pfx}block-category`; |
|||
this.events[`click .${pfx}title`] = 'toggle'; |
|||
this.listenTo(this.model, 'change:open', this.updateVisibility); |
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
updateVisibility() { |
|||
if(this.model.get('open')) |
|||
this.open(); |
|||
else |
|||
this.close(); |
|||
}, |
|||
|
|||
open() { |
|||
this.el.className = `${this.className} ${this.activeClass}`; |
|||
this.getIconEl().className = `${this.iconClass} ${this.caretD}`; |
|||
this.getBlocksEl().style.display = ''; |
|||
}, |
|||
|
|||
close() { |
|||
this.el.className = this.className; |
|||
this.getIconEl().className = `${this.iconClass} ${this.caretR}`; |
|||
this.getBlocksEl().style.display = 'none'; |
|||
}, |
|||
|
|||
toggle() { |
|||
var model = this.model; |
|||
model.set('open', !model.get('open')); |
|||
}, |
|||
|
|||
getIconEl() { |
|||
if (!this.iconEl) { |
|||
this.iconEl = this.el.querySelector('.' + this.iconClass); |
|||
} |
|||
|
|||
return this.iconEl; |
|||
}, |
|||
|
|||
getBlocksEl() { |
|||
if (!this.blocksEl) { |
|||
this.blocksEl = this.el.querySelector('.' + this.pfx + 'blocks-c'); |
|||
} |
|||
|
|||
return this.blocksEl; |
|||
}, |
|||
|
|||
append(el) { |
|||
this.getBlocksEl().appendChild(el); |
|||
}, |
|||
|
|||
render() { |
|||
this.el.innerHTML = this.template({ |
|||
pfx: this.pfx, |
|||
label: this.model.get('label'), |
|||
}); |
|||
this.el.className = this.className; |
|||
this.updateVisibility(); |
|||
return this; |
|||
}, |
|||
}); |
|||
@ -0,0 +1,34 @@ |
|||
module.exports = { |
|||
|
|||
run(editor, sender, opts) { |
|||
var el = (opts && opts.el) || ''; |
|||
var canvas = editor.Canvas; |
|||
var dragger = this.dragger; |
|||
var options = opts.options || {}; |
|||
var canvasView = canvas.getCanvasView(); |
|||
options.prefix = editor.getConfig().stylePrefix; |
|||
options.mousePosFetcher = canvas.getMouseRelativePos; |
|||
options.posFetcher = canvasView.getElementPos.bind(canvasView); |
|||
|
|||
// Create the resizer for the canvas if not yet created
|
|||
if(!dragger) { |
|||
dragger = editor.Utils.Dragger.init(options); |
|||
this.dragger = dragger; |
|||
} |
|||
|
|||
dragger.setOptions(options); |
|||
dragger.focus(el); |
|||
|
|||
if (options.event) { |
|||
dragger.start(options.event); |
|||
} |
|||
|
|||
return dragger; |
|||
}, |
|||
|
|||
stop() { |
|||
if(this.canvasResizer) |
|||
this.canvasResizer.blur(); |
|||
}, |
|||
|
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
var Component = require('./Component'); |
|||
|
|||
module.exports = Component.extend({ |
|||
|
|||
getName() { |
|||
let name = this.get('tagName'); |
|||
return name.charAt(0).toUpperCase() + name.slice(1); |
|||
}, |
|||
|
|||
}, { |
|||
|
|||
isComponent(el) { |
|||
if (SVGElement && el instanceof SVGElement) { |
|||
return {type: 'svg'}; |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,9 @@ |
|||
const ComponentView = require('./ComponentView'); |
|||
|
|||
module.exports = ComponentView.extend({ |
|||
|
|||
_createElement: function(tagName) { |
|||
return document.createElementNS('http://www.w3.org/2000/svg', tagName); |
|||
} |
|||
|
|||
}); |
|||
@ -0,0 +1,74 @@ |
|||
.#{$app-prefix}blocks-c { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.#{$app-prefix}block-category { |
|||
width: 100%; |
|||
|
|||
&.#{$app-prefix}open { |
|||
@extend .#{$app-prefix}category-open; |
|||
} |
|||
|
|||
.#{$app-prefix}title { |
|||
@extend .#{$app-prefix}category-title; |
|||
} |
|||
|
|||
.#{$app-prefix}caret-icon { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}block { |
|||
@include user-select(none); |
|||
|
|||
@extend .#{$app-prefix}bg-main; |
|||
|
|||
width: 45%; |
|||
padding: 1em; |
|||
box-sizing: border-box; |
|||
height: 90px; |
|||
cursor: all-scroll; |
|||
font-size: 11px; |
|||
font-weight: lighter; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
border: 1px solid rgba(0, 0, 0, 0.2); |
|||
border-radius: 3px; |
|||
margin: 10px 2.5% 5px; |
|||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); |
|||
transition: all 0.2s ease 0s; |
|||
transition-property: box-shadow, color; |
|||
|
|||
&:hover { |
|||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}block-svg { |
|||
width: 61%; |
|||
} |
|||
|
|||
.#{$app-prefix}block-svg-path { |
|||
@extend .#{$app-prefix}color-main; |
|||
} |
|||
|
|||
.#{$app-prefix}block.fa { |
|||
font-size: 2em; |
|||
line-height: 2em; |
|||
padding: 11px; |
|||
} |
|||
|
|||
.#{$app-prefix}block-label { |
|||
line-height: normal; |
|||
font-size: 0.65rem; |
|||
font-weight: normal; |
|||
font-family: Helvetica, sans-serif; |
|||
} |
|||
|
|||
.#{$app-prefix}block.#{$app-prefix}bdrag { |
|||
width: auto; |
|||
padding: 0; |
|||
} |
|||
@ -0,0 +1,323 @@ |
|||
var getBoundingRect = (el, win) => { |
|||
var w = win || window; |
|||
var rect = el.getBoundingClientRect(); |
|||
return { |
|||
left: rect.left + w.pageXOffset, |
|||
top: rect.top + w.pageYOffset, |
|||
width: rect.width, |
|||
height: rect.height |
|||
}; |
|||
}; |
|||
|
|||
module.exports = { |
|||
|
|||
// TODO move to opts
|
|||
setKey(keys, command) { |
|||
//key(keys, command);
|
|||
}, |
|||
|
|||
/** |
|||
* Return element position |
|||
* @param {HTMLElement} el |
|||
* @return {Object} |
|||
*/ |
|||
getElementRect(el) { |
|||
var posFetcher = this.opts.posFetcher || ''; |
|||
return posFetcher ? posFetcher(el, { |
|||
avoidFrameOffset: 1, |
|||
}) : getBoundingRect(el); |
|||
}, |
|||
|
|||
/** |
|||
* Init the resizer |
|||
* @param {Object} opts |
|||
*/ |
|||
init(opts) { |
|||
this.setOptions(opts); |
|||
this.handleMouseDown = this.handleMouseDown.bind(this); |
|||
this.drag = this.drag.bind(this); |
|||
this.move = this.move.bind(this); |
|||
this.stop = this.stop.bind(this); |
|||
this.setKey('up, right, down, left', this.handleKey); |
|||
return this; |
|||
}, |
|||
|
|||
/** |
|||
* Update options |
|||
* @param {Object} options |
|||
*/ |
|||
setOptions(opts) { |
|||
this.opts = opts || {}; |
|||
}, |
|||
|
|||
/** |
|||
* Focus dragger on the element |
|||
* @param {HTMLElement} el |
|||
*/ |
|||
focus(el) { |
|||
// Avoid focusing on already focused element
|
|||
if (el && el === this.el) { |
|||
return; |
|||
} |
|||
|
|||
this.getDocumentEl(el); |
|||
this.blur(); |
|||
this.el = el; |
|||
this.handlers = this.opts.dragHandlers || [el]; |
|||
|
|||
|
|||
var elRect = this.getElementRect(el); //<-- TODO have wrong top:left
|
|||
this.elRect = elRect; |
|||
this.startTop = elRect.top; |
|||
this.startLeft = elRect.left; |
|||
|
|||
// TODO init snapper
|
|||
|
|||
this.getDocumentEl().on('mousedown', this.handleMouseDown); |
|||
}, |
|||
|
|||
/** |
|||
* Blur from the focused element |
|||
*/ |
|||
blur() { |
|||
this.getDocumentEl().off('mousedown', this.handleMouseDown); |
|||
this.el = null; |
|||
}, |
|||
|
|||
/** |
|||
* Start dragging |
|||
* @param {Event} e |
|||
*/ |
|||
start(e) { |
|||
this.startPos = this.getMousePos(e); |
|||
var docs = this.getDocumentEl(); |
|||
docs.on('mousemove', this.drag); |
|||
docs.on('mouseup', this.stop); |
|||
|
|||
// Start callback
|
|||
var onStart = this.opts.onStart; |
|||
if(typeof onStart === 'function') { |
|||
onStart(e, { |
|||
docs, |
|||
el: this.el, |
|||
start: this.startPos, |
|||
elRect: this.elRect, |
|||
}); |
|||
} |
|||
|
|||
this.drag(e); |
|||
}, |
|||
|
|||
/** |
|||
* Stop dragging |
|||
*/ |
|||
stop(e) { |
|||
var docs = this.getDocumentEl(); |
|||
docs.off('mousemove', this.drag); |
|||
docs.off('mouseup', this.stop); |
|||
this.lockedAxis = null; |
|||
|
|||
// Stop callback
|
|||
var onEnd = this.opts.onEnd; |
|||
if(typeof onEnd === 'function') { |
|||
onEnd(e, { |
|||
docs, |
|||
delta: this.delta, |
|||
end: { |
|||
x: this.startLeft + this.delta.x, |
|||
y: this.startTop + this.delta.y, |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Handle mousedown to check if it's possible to drag |
|||
* @param {Event} e |
|||
*/ |
|||
handleMouseDown(e) { |
|||
var el = e.target; |
|||
if (this.isHandler(el)) { |
|||
this.start(e); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Detects if the clicked element is a valid handler |
|||
* @param {HTMLElement} el |
|||
* @return {Boolean} |
|||
*/ |
|||
isHandler(el) { |
|||
var handlers = this.handlers; |
|||
|
|||
for (var n in handlers) { |
|||
if (handlers[n] === el) return true; |
|||
} |
|||
|
|||
return false; |
|||
}, |
|||
|
|||
/** |
|||
* Handle key press |
|||
* @param {Event} e |
|||
* @param {Object} handler |
|||
*/ |
|||
handleKey(e, handler) { |
|||
switch (handler.shortcut) { |
|||
case 'up': |
|||
this.move(0, -1); |
|||
break; |
|||
case 'right': |
|||
this.move(1, 0); |
|||
break; |
|||
case 'down': |
|||
this.move(0, 1); |
|||
break; |
|||
case 'left': |
|||
this.move(-1, 0); |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Returns documents |
|||
*/ |
|||
getDocumentEl(el) { |
|||
var el = el || this.el; |
|||
if (!this.$doc) { |
|||
var docs = [document]; |
|||
if (el) { |
|||
docs.push(el.ownerDocument); |
|||
} |
|||
this.$doc = $(docs); |
|||
} |
|||
return this.$doc; |
|||
}, |
|||
|
|||
/** |
|||
* Get mouse coordinates |
|||
* @param {Event} event |
|||
* @return {Object} |
|||
*/ |
|||
getMousePos(e) { |
|||
var mouseFetch = this.opts.mousePosFetcher; |
|||
return mouseFetch ? mouseFetch(e) : { |
|||
x: e.clientX, |
|||
y: e.clientY |
|||
}; |
|||
}, |
|||
|
|||
/** |
|||
* Drag event |
|||
* @param {Event} event |
|||
*/ |
|||
drag(e) { |
|||
var lockedAxis = this.lockedAxis; |
|||
var currentPos = this.getMousePos(e); |
|||
var delta = { |
|||
x: currentPos.x - this.startPos.x, |
|||
y: currentPos.y - this.startPos.y |
|||
}; |
|||
// Lock one axis
|
|||
if (e.shiftKey) { |
|||
if (!lockedAxis) { |
|||
var relX = delta.x; |
|||
var relY = delta.y; |
|||
var absX = Math.abs(relX); |
|||
var absY = Math.abs(relY); |
|||
|
|||
// Vertical or Horizontal lock
|
|||
if (relY >= absX || relY <= -absX) { |
|||
lockedAxis = 'x'; |
|||
} else if (relX > absY || relX < -absY) { |
|||
lockedAxis = 'y'; |
|||
} |
|||
} |
|||
} else { |
|||
lockedAxis = null; |
|||
} |
|||
|
|||
if (lockedAxis === 'x') { |
|||
delta.x = this.startPos.x; |
|||
} |
|||
|
|||
if (lockedAxis === 'y') { |
|||
delta.y = this.startPos.y; |
|||
} |
|||
|
|||
this.lockedAxis = lockedAxis; |
|||
this.delta = delta; |
|||
this.move(delta.x, delta.y); |
|||
|
|||
// Drag callback
|
|||
const onDrag = this.opts.onDrag; |
|||
if(typeof onDrag === 'function') { |
|||
onDrag(e, { |
|||
delta, |
|||
current: { |
|||
x: this.startLeft + delta.x, |
|||
y: this.startTop + delta.y |
|||
}, |
|||
lockedAxis |
|||
}); |
|||
} |
|||
|
|||
// In case the mouse button was released outside of the window
|
|||
if (e.which === 0) { |
|||
this.stop(e); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Move the element |
|||
* @param {integer} x |
|||
* @param {integer} y |
|||
*/ |
|||
move: function(x, y) { |
|||
this.moveX(x); |
|||
this.moveY(y); |
|||
}, |
|||
|
|||
/** |
|||
* Move in x direction |
|||
* @param {integer} x |
|||
*/ |
|||
moveX(x) { |
|||
var el = this.el; |
|||
var opts = this.opts; |
|||
var xPos = this.startLeft + x; |
|||
const setX = this.opts.setX; |
|||
|
|||
if (typeof setX === 'function') { |
|||
setX(xPos, { |
|||
el, |
|||
start: this.startLeft, |
|||
delta: x, |
|||
}); |
|||
} else { |
|||
el.style.left = xPos + 'px'; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Move in y direction |
|||
* @param {integer} y |
|||
*/ |
|||
moveY(y) { |
|||
var el = this.el; |
|||
var opts = this.opts; |
|||
var yPos = this.startTop + y; |
|||
const setY = this.opts.setY; |
|||
|
|||
if (typeof setY === 'function') { |
|||
setY(yPos, { |
|||
el, |
|||
start: this.startTop, |
|||
delta: y, |
|||
}); |
|||
} else { |
|||
el.style.top = yPos + 'px'; |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
@ -1,15 +1,28 @@ |
|||
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(); |
|||
}); |
|||
}); |
|||
|
|||
require('./specs/asset_manager/main.js'); |
|||
|
|||
const path = './specs/'; |
|||
require(`${path}asset_manager`); |
|||
require(`${path}block_manager`); |
|||
require(`${path}code_manager`); |
|||
require(`${path}commands`); |
|||
require(`${path}css_composer`); |
|||
require(`${path}device_manager`); |
|||
require(`${path}dom_components`); |
|||
require(`${path}grapesjs`); |
|||
require(`${path}modal`); |
|||
require(`${path}panels`); |
|||
require(`${path}parser`); |
|||
require(`${path}plugin_manager`); |
|||
require(`${path}selector_manager`); |
|||
require(`${path}storage_manager`); |
|||
require(`${path}style_manager`); |
|||
require(`${path}trait_manager`); |
|||
}); |
|||
|
|||
@ -0,0 +1,75 @@ |
|||
var BlockManager = require('block_manager'); |
|||
var BlocksView = require('./view/BlocksView'); |
|||
|
|||
describe('BlockManager', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
var idTest; |
|||
var optsTest; |
|||
|
|||
beforeEach(() => { |
|||
idTest = 'h1-block'; |
|||
optsTest = { |
|||
label: 'Heading', |
|||
content: '<h1>Test</h1>' |
|||
}; |
|||
obj = new BlockManager().init(); |
|||
obj.render(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
it('No blocks inside', () => { |
|||
expect(obj.getAll().length).toEqual(0); |
|||
}); |
|||
|
|||
it('No categories inside', () => { |
|||
expect(obj.getCategories().length).toEqual(0); |
|||
}); |
|||
|
|||
it('Add new block', () => { |
|||
var model = obj.add(idTest, optsTest); |
|||
expect(obj.getAll().length).toEqual(1); |
|||
}); |
|||
|
|||
it('Added block has correct data', () => { |
|||
var model = obj.add(idTest, optsTest); |
|||
expect(model.get('label')).toEqual(optsTest.label); |
|||
expect(model.get('content')).toEqual(optsTest.content); |
|||
}); |
|||
|
|||
it('Add block with attributes', () => { |
|||
optsTest.attributes = {'class':'test'}; |
|||
var model = obj.add(idTest, optsTest); |
|||
expect(model.get('attributes').class).toEqual('test'); |
|||
}); |
|||
|
|||
it('The id of the block is unique', () => { |
|||
var model = obj.add(idTest, optsTest); |
|||
var model2 = obj.add(idTest, {other: 'test'}); |
|||
expect(model).toEqual(model2); |
|||
}); |
|||
|
|||
it('Get block by id', () => { |
|||
var model = obj.add(idTest, optsTest); |
|||
var model2 = obj.get(idTest); |
|||
expect(model).toEqual(model2); |
|||
}); |
|||
|
|||
it('Render blocks', () => { |
|||
expect(obj.render()).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
BlocksView.run(); |
|||
|
|||
}); |
|||
@ -1,74 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var BlockManager = require('BlockManager'); |
|||
var BlocksView = require('undefined'); |
|||
|
|||
describe('BlockManager', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
var idTest; |
|||
var optsTest; |
|||
|
|||
beforeEach(function () { |
|||
idTest = 'h1-block'; |
|||
optsTest = { |
|||
label: 'Heading', |
|||
content: '<h1>Test</h1>' |
|||
}; |
|||
obj = new BlockManager().init(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
obj.should.be.exist; |
|||
}); |
|||
|
|||
it('No blocks inside', function() { |
|||
var coll = obj.getAll(); |
|||
coll.length.should.equal(0); |
|||
}); |
|||
|
|||
it('Add new block', function() { |
|||
var model = obj.add(idTest, optsTest); |
|||
obj.getAll().length.should.equal(1); |
|||
}); |
|||
|
|||
it('Added block has correct data', function() { |
|||
var model = obj.add(idTest, optsTest); |
|||
model.get('label').should.equal(optsTest.label); |
|||
model.get('content').should.equal(optsTest.content); |
|||
}); |
|||
|
|||
it('Add block with attributes', function() { |
|||
optsTest.attributes = {'class':'test'}; |
|||
var model = obj.add(idTest, optsTest); |
|||
model.get('attributes').class.should.equal('test'); |
|||
}); |
|||
|
|||
it('The id of the block is unique', function() { |
|||
var model = obj.add(idTest, optsTest); |
|||
var model2 = obj.add(idTest, {other: 'test'}); |
|||
model.should.deep.equal(model2); |
|||
}); |
|||
|
|||
it('Get block by id', function() { |
|||
var model = obj.add(idTest, optsTest); |
|||
var model2 = obj.get(idTest); |
|||
model.should.deep.equal(model2); |
|||
}); |
|||
|
|||
it('Render blocks', function() { |
|||
obj.render().should.be.ok; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
BlocksView.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,91 +1,88 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var BlocksView = require('undefined'); |
|||
var Blocks = require('BlockManager/model/Blocks'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('BlocksView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
var ppfx; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="devices-fixture"></div>'); |
|||
}); |
|||
var Backbone = require('backbone'); |
|||
var BlocksView = require('block_manager/view/BlocksView'); |
|||
var Blocks = require('block_manager/model/Blocks'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('BlocksView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
var ppfx; |
|||
|
|||
before(() => { |
|||
$fixtures = $('#fixtures'); |
|||
$fixture = $('<div class="devices-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Blocks([]); |
|||
view = new BlocksView({ collection: model }); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
model = new Blocks([]); |
|||
view = new BlocksView({ collection: model }); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.collection.reset(); |
|||
}); |
|||
afterEach(() => { |
|||
view.collection.reset(); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it("The container is not empty", function (){ |
|||
view.el.outerHTML.should.be.not.empty; |
|||
}); |
|||
it("The container is not empty", () => { |
|||
expect(view.el.outerHTML).toExist(); |
|||
}); |
|||
|
|||
it("No children inside", function (){ |
|||
view.el.children.length.should.equal(0); |
|||
}); |
|||
it("No children inside", () => { |
|||
expect(view.getBlocksEl().children.length).toEqual(0); |
|||
}); |
|||
|
|||
it("Render children on add", function (){ |
|||
model.add({}); |
|||
view.el.children.length.should.equal(1); |
|||
model.add([{},{}]); |
|||
view.el.children.length.should.equal(3); |
|||
}); |
|||
it("Render children on add", () => { |
|||
model.add({}); |
|||
expect(view.getBlocksEl().children.length).toEqual(1); |
|||
model.add([{},{}]); |
|||
expect(view.getBlocksEl().children.length).toEqual(3); |
|||
}); |
|||
|
|||
it("Destroy children on remove", () => { |
|||
model.add([{},{}]); |
|||
expect(view.getBlocksEl().children.length).toEqual(2); |
|||
model.at(0).destroy(); |
|||
expect(view.getBlocksEl().children.length).toEqual(1); |
|||
}); |
|||
|
|||
it("Destroy children on remove", function (){ |
|||
model.add([{},{}]); |
|||
view.el.children.length.should.equal(2); |
|||
model.at(0).destroy(); |
|||
view.el.children.length.should.equal(1); |
|||
describe('With configs', () => { |
|||
|
|||
beforeEach(() => { |
|||
ppfx = 'pfx-t-'; |
|||
editorModel = new Backbone.Model(); |
|||
model = new Blocks([ |
|||
{name:'test1'}, |
|||
{name:'test2'} |
|||
]); |
|||
view = new BlocksView({ |
|||
collection: model, |
|||
},{ |
|||
pStylePrefix: ppfx |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
describe('With configs', function() { |
|||
|
|||
beforeEach(function () { |
|||
ppfx = 'pfx-t-'; |
|||
editorModel = new Backbone.Model(); |
|||
model = new Blocks([ |
|||
{name:'test1'}, |
|||
{name:'test2'} |
|||
]); |
|||
view = new BlocksView({ |
|||
collection: model, |
|||
},{ |
|||
pStylePrefix: ppfx |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
it("Render children", function (){ |
|||
view.el.children.length.should.equal(2); |
|||
}); |
|||
|
|||
it("Render container", function (){ |
|||
view.el.getAttribute('class').should.equal(ppfx + 'blocks-c'); |
|||
}); |
|||
it("Render children", () => { |
|||
expect(view.getBlocksEl().children.length).toEqual(2); |
|||
}); |
|||
|
|||
}); |
|||
it("Render container", () => { |
|||
expect(view.getBlocksEl().getAttribute('class')).toEqual(ppfx + 'blocks-c'); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -0,0 +1,43 @@ |
|||
var CodeManager = require('code_manager'); |
|||
var Models = require('./model/CodeModels'); |
|||
|
|||
describe('Code Manager', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
let obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new CodeManager(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(CodeManager).toExist(); |
|||
}); |
|||
|
|||
it('No code generators inside', () => { |
|||
expect(obj.getGenerators()).toEqual({}); |
|||
}); |
|||
|
|||
it('No code viewers inside', () => { |
|||
expect(obj.getViewers()).toEqual({}); |
|||
}); |
|||
|
|||
it('Add and get code generator', () => { |
|||
obj.addGenerator('test', 'gen'); |
|||
expect(obj.getGenerator('test')).toEqual('gen'); |
|||
}); |
|||
|
|||
it('Add and get code viewer', () => { |
|||
obj.addViewer('test', 'view'); |
|||
expect(obj.getViewer('test')).toEqual('view'); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
}); |
|||
@ -1,47 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var CodeManager = require('CodeManager'); |
|||
var Models = require('undefined'); |
|||
|
|||
describe('Code Manager', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new CodeManager(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
CodeManager.should.be.exist; |
|||
}); |
|||
|
|||
it('No code generators inside', function() { |
|||
obj.getGenerators().should.be.empty; |
|||
}); |
|||
|
|||
it('No code viewers inside', function() { |
|||
obj.getViewers().should.be.empty; |
|||
}); |
|||
|
|||
it('Add and get code generator', function() { |
|||
obj.addGenerator('test', 'gen'); |
|||
obj.getGenerator('test').should.equal('gen'); |
|||
}); |
|||
|
|||
it('Add and get code viewer', function() { |
|||
obj.addViewer('test', 'view'); |
|||
obj.getViewer('test').should.equal('view'); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,221 +1,218 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var CssGenerator = require('undefined'); |
|||
var DomComponents = require('DomComponents'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
var CssComposer = require('CssComposer'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
var comp; |
|||
|
|||
describe('HtmlGenerator', function() { |
|||
beforeEach(function () { |
|||
this.obj = new HtmlGenerator(); |
|||
var dcomp = new DomComponents(); |
|||
comp = new Component({}, { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Build correctly one component', function() { |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly empty component inside', function() { |
|||
var m1 = comp.get('components').add({}); |
|||
this.obj.build(comp).should.equal('<div></div>'); |
|||
}); |
|||
|
|||
it('Build correctly not empty component inside', function() { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
this.obj.build(comp).should.equal('<article data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
|
|||
it('Build correctly component with classes', function() { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
['class1', 'class2'].forEach(function(item){ |
|||
m1.get('classes').add({name: item}); |
|||
}); |
|||
this.obj.build(comp).should.equal('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
}); |
|||
|
|||
describe('CssGenerator', function() { |
|||
var newCssComp = function(){ |
|||
return new CssComposer().init(); |
|||
}; |
|||
beforeEach(function () { |
|||
this.obj = new CssGenerator(); |
|||
var dcomp = new DomComponents(); |
|||
comp = new Component({}, { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Build correctly one component', function() { |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly empty component inside', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly component with style inside', function() { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
style: { |
|||
'prop1': 'value1', |
|||
'prop2': 'value2' |
|||
} |
|||
}); |
|||
this.obj.build(comp).should.equal('#' + m1.cid +'{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly component with class styled', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly component styled with class and state', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('state', 'hover'); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1:hover{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
|
|||
it('Build correctly with more classes', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build rules with mixed classes', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build rules with only not class based selectors', function() { |
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly with class styled out', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
var rule2 = cssc.add(cls2); |
|||
rule2.set('style',{'prop2':'value2'}); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Rule with media query', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
rule.set('mediaText', '(max-width: 999px)'); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('@media (max-width: 999px){.class1.class2{prop1:value1;}}'); |
|||
}); |
|||
|
|||
it('Rules mixed with media queries', function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
|
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
var rule2 = cssc.add(cls2); |
|||
rule2.set('style',{'prop2':'value2'}); |
|||
|
|||
var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); |
|||
rule3.set('style',{'prop3':'value3'}); |
|||
var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); |
|||
rule4.set('style',{'prop4':'value4'}); |
|||
|
|||
var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); |
|||
rule5.set('style',{'prop5':'value5'}); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'+ |
|||
'@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}'+ |
|||
'@media (max-width: 100px){.class1{prop5:value5;}}'); |
|||
}); |
|||
|
|||
it("Avoid useless code", function() { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
comp.get('components').remove(m1); |
|||
this.obj.build(comp, cssc).should.equal(''); |
|||
}); |
|||
}) |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
const CssGenerator = require('code_manager/model/CssGenerator'); |
|||
const HtmlGenerator = require('code_manager/model/HtmlGenerator'); |
|||
const DomComponents = require('dom_components'); |
|||
const Component = require('dom_components/model/Component'); |
|||
const CssComposer = require('css_composer'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
let comp; |
|||
let obj; |
|||
|
|||
describe('HtmlGenerator', () => { |
|||
beforeEach(() => { |
|||
obj = new HtmlGenerator(); |
|||
var dcomp = new DomComponents(); |
|||
comp = new Component({}, { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Build correctly one component', () => { |
|||
expect(obj.build(comp)).toEqual(''); |
|||
|
|||
}); |
|||
|
|||
it('Build correctly empty component inside', () => { |
|||
var m1 = comp.get('components').add({}); |
|||
expect(obj.build(comp)).toEqual('<div></div>'); |
|||
}); |
|||
|
|||
it('Build correctly not empty component inside', () => { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
expect(obj.build(comp)).toEqual('<article data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
|
|||
it('Build correctly component with classes', () => { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
['class1', 'class2'].forEach(item => { |
|||
m1.get('classes').add({name: item}); |
|||
}); |
|||
expect(obj.build(comp)).toEqual('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
}); |
|||
|
|||
describe('CssGenerator', () => { |
|||
var newCssComp = () => new CssComposer().init(); |
|||
beforeEach(() => { |
|||
obj = new CssGenerator(); |
|||
var dcomp = new DomComponents(); |
|||
comp = new Component({}, { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Build correctly one component', () => { |
|||
expect(obj.build(comp)).toEqual(''); |
|||
}); |
|||
|
|||
it('Build correctly empty component inside', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
expect(obj.build(comp)).toEqual(''); |
|||
}); |
|||
|
|||
it('Build correctly component with style inside', () => { |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
style: { |
|||
'prop1': 'value1', |
|||
'prop2': 'value2' |
|||
} |
|||
}); |
|||
expect(obj.build(comp)).toEqual('#' + m1.cid +'{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly component with class styled', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly component styled with class and state', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('state', 'hover'); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1:hover{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
|
|||
it('Build correctly with more classes', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build rules with mixed classes', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build rules with only not class based selectors', () => { |
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([]); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly with class styled out', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
var rule2 = cssc.add(cls2); |
|||
rule2.set('style',{'prop2':'value2'}); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Rule with media query', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
rule.set('mediaText', '(max-width: 999px)'); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('@media (max-width: 999px){.class1.class2{prop1:value1;}}'); |
|||
}); |
|||
|
|||
it('Rules mixed with media queries', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
|
|||
var rule = cssc.add([cls1, cls2]); |
|||
rule.set('style',{'prop1':'value1'}); |
|||
var rule2 = cssc.add(cls2); |
|||
rule2.set('style',{'prop2':'value2'}); |
|||
|
|||
var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); |
|||
rule3.set('style',{'prop3':'value3'}); |
|||
var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); |
|||
rule4.set('style',{'prop4':'value4'}); |
|||
|
|||
var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); |
|||
rule5.set('style',{'prop5':'value5'}); |
|||
|
|||
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}'+ |
|||
'@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}'+ |
|||
'@media (max-width: 100px){.class1{prop5:value5;}}'); |
|||
}); |
|||
|
|||
it('Avoid useless code', () => { |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = newCssComp(); |
|||
var rule = cssc.add(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
|
|||
comp.get('components').remove(m1); |
|||
expect(obj.build(comp, cssc)).toEqual(''); |
|||
}); |
|||
}) |
|||
} |
|||
}; |
|||
|
|||
@ -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(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(); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -0,0 +1,67 @@ |
|||
const DeviceManager = require('device_manager'); |
|||
const DevicesView = require('./view/DevicesView'); |
|||
|
|||
describe('DeviceManager', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
var testNameDevice; |
|||
var testWidthDevice; |
|||
|
|||
beforeEach(() => { |
|||
testNameDevice = 'Tablet'; |
|||
testWidthDevice = '100px'; |
|||
obj = new DeviceManager().init(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
it('No device inside', () => { |
|||
var coll = obj.getAll(); |
|||
expect(coll.length).toEqual(0); |
|||
}); |
|||
|
|||
it('Add new device', () => { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
expect(obj.getAll().length).toEqual(1); |
|||
}); |
|||
|
|||
it('Added device has correct data', () => { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
expect(model.get('name')).toEqual(testNameDevice); |
|||
expect(model.get('width')).toEqual(testWidthDevice); |
|||
}); |
|||
|
|||
it('Add device width options', () => { |
|||
var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'}); |
|||
expect(model.get('opt')).toEqual('value'); |
|||
}); |
|||
|
|||
it('The name of the device is unique', () => { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
var model2 = obj.add(testNameDevice, '2px'); |
|||
expect(model).toEqual(model2); |
|||
}); |
|||
|
|||
it('Get device by name', () => { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
var model2 = obj.get(testNameDevice); |
|||
expect(model).toEqual(model2); |
|||
}); |
|||
|
|||
it('Render devices', () => { |
|||
expect(obj.render()).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
DevicesView.run(); |
|||
|
|||
}); |
|||
@ -1,70 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var DeviceManager = require('DeviceManager'); |
|||
var DevicesView = require('undefined'); |
|||
|
|||
describe('DeviceManager', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
var testNameDevice; |
|||
var testWidthDevice; |
|||
|
|||
beforeEach(function () { |
|||
testNameDevice = 'Tablet'; |
|||
testWidthDevice = '100px'; |
|||
obj = new DeviceManager().init(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
obj.should.be.exist; |
|||
}); |
|||
|
|||
it('No device inside', function() { |
|||
var coll = obj.getAll(); |
|||
coll.length.should.equal(0); |
|||
}); |
|||
|
|||
it('Add new device', function() { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
obj.getAll().length.should.equal(1); |
|||
}); |
|||
|
|||
it('Added device has correct data', function() { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
model.get('name').should.equal(testNameDevice); |
|||
model.get('width').should.equal(testWidthDevice); |
|||
}); |
|||
|
|||
it('Add device width options', function() { |
|||
var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'}); |
|||
model.get('opt').should.equal('value'); |
|||
}); |
|||
|
|||
it('The name of the device is unique', function() { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
var model2 = obj.add(testNameDevice, '2px'); |
|||
model.should.deep.equal(model2); |
|||
}); |
|||
|
|||
it('Get device by name', function() { |
|||
var model = obj.add(testNameDevice, testWidthDevice); |
|||
var model2 = obj.get(testNameDevice); |
|||
model.should.deep.equal(model2); |
|||
}); |
|||
|
|||
it('Render devices', function() { |
|||
obj.render().should.be.ok; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
DevicesView.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,83 +1,79 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var DevicesView = require('undefined'); |
|||
var Devices = require('DeviceManager/model/Devices'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('DevicesView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
const DevicesView = require('device_manager/view/DevicesView'); |
|||
const Devices = require('device_manager/model/Devices'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('DevicesView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="devices-fixture"></div>'); |
|||
}); |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="devices-fixture"></div>'); |
|||
}); |
|||
beforeEach(() => { |
|||
model = new Devices([]); |
|||
view = new DevicesView({ |
|||
collection: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Devices([]); |
|||
view = new DevicesView({ |
|||
collection: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
afterEach(() => { |
|||
view.collection.reset(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.collection.reset(); |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
it("The content is not empty", () => { |
|||
expect(view.el.innerHTML).toExist(); |
|||
}); |
|||
|
|||
it("The content is not empty", function (){ |
|||
view.el.innerHTML.should.be.not.empty; |
|||
}); |
|||
it("No options without devices", () => { |
|||
expect(view.getOptions()).toEqual(''); |
|||
}); |
|||
|
|||
it("No options without devices", function (){ |
|||
view.getOptions().should.equal(''); |
|||
}); |
|||
it("Render new button", () => { |
|||
view.collection.add({}); |
|||
expect(view.$el.html()).toExist(); |
|||
}); |
|||
|
|||
it("Render new button", function (){ |
|||
view.collection.add({}); |
|||
view.$el.html().should.not.be.empty; |
|||
describe('With configs', () => { |
|||
|
|||
beforeEach(() => { |
|||
editorModel = new Backbone.Model(); |
|||
model = new Devices([ |
|||
{name:'test1'}, |
|||
{name:'test2'} |
|||
]); |
|||
view = new DevicesView({ |
|||
collection: model, |
|||
config: { em: editorModel } |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
describe('With configs', function() { |
|||
it("Update device on select change", () => { |
|||
view.$el.find('select').val('test2'); |
|||
view.updateDevice(); |
|||
expect(view.config.em.get('device')).toEqual('test2'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
editorModel = new Backbone.Model(); |
|||
model = new Devices([ |
|||
{name:'test1'}, |
|||
{name:'test2'} |
|||
]); |
|||
view = new DevicesView({ |
|||
collection: model, |
|||
config: { em: editorModel } |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
it("Update device on select change", function (){ |
|||
view.$el.find('select').val('test2'); |
|||
view.updateDevice(); |
|||
view.config.em.get('device').should.equal('test2'); |
|||
}); |
|||
|
|||
it("Render options", function (){ |
|||
view.getOptions().should.equal('<option value="test1">test1</option><option value="test2">test2</option>'); |
|||
}); |
|||
|
|||
}); |
|||
it("Render options", () => { |
|||
expect(view.getOptions()).toEqual('<option value="test1">test1</option><option value="test2">test2</option>'); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -0,0 +1,115 @@ |
|||
const DomComponents = require('dom_components'); |
|||
const ComponentModels = require('./model/Component'); |
|||
const ComponentView = require('./view/ComponentV'); |
|||
const ComponentsView = require('./view/ComponentsView'); |
|||
const ComponentTextView = require('./view/ComponentTextView'); |
|||
const ComponentImageView = require('./view/ComponentImageView'); |
|||
const utils = require('./../test_utils.js'); |
|||
|
|||
describe('DOM Components', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
var config; |
|||
var storagMock = utils.storageMock(); |
|||
var editorModel = { |
|||
config: { |
|||
loadCompsOnRender: 0, |
|||
}, |
|||
get() {return;}, |
|||
getHtml() {return 'testHtml';}, |
|||
getComponents() {return {test: 1};}, |
|||
getCacheLoad() { |
|||
return storagMock.load(); |
|||
} |
|||
}; |
|||
// Methods
|
|||
var setSmConfig = () => { |
|||
config.stm = storagMock; |
|||
config.stm.getConfig = () => ({ |
|||
storeHtml: 1, |
|||
storeComponents: 1 |
|||
}); |
|||
}; |
|||
var setEm = () => { |
|||
config.em = editorModel; |
|||
} |
|||
|
|||
|
|||
beforeEach(() => { |
|||
config = {}; |
|||
obj = new DomComponents().init(config); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(DomComponents).toExist(); |
|||
}); |
|||
|
|||
it('storageKey returns array', () => { |
|||
expect(obj.storageKey() instanceof Array).toEqual(true); |
|||
}); |
|||
|
|||
it('storageKey returns correct composition', () => { |
|||
config.stm = { |
|||
getConfig() { |
|||
return { |
|||
storeHtml: 1, |
|||
storeComponents: 1, |
|||
} |
|||
} |
|||
}; |
|||
expect(obj.storageKey()).toEqual(['html', 'components']); |
|||
}); |
|||
|
|||
it('Store data', () => { |
|||
setSmConfig(); |
|||
setEm(); |
|||
var expected = { |
|||
html: 'testHtml', |
|||
components: '{"test":1}', |
|||
}; |
|||
expect(obj.store(1)).toEqual(expected); |
|||
}); |
|||
|
|||
it('Store and load data', () => { |
|||
setSmConfig(); |
|||
setEm(); |
|||
obj.store(); |
|||
expect(obj.load()).toEqual({test: 1}); |
|||
}); |
|||
|
|||
it('Wrapper exists', () => { |
|||
expect(obj.getWrapper()).toExist(); |
|||
}); |
|||
|
|||
it('No components inside', () => { |
|||
expect(obj.getComponents().length).toEqual(0); |
|||
}); |
|||
|
|||
it('Add new component', () => { |
|||
var comp = obj.addComponent({}); |
|||
expect(obj.getComponents().length).toEqual(1); |
|||
}); |
|||
|
|||
it('Add more components at once', () => { |
|||
var comp = obj.addComponent([{},{}]); |
|||
expect(obj.getComponents().length).toEqual(2); |
|||
}); |
|||
|
|||
it('Render wrapper', () => { |
|||
expect(obj.render()).toExist(); |
|||
}); |
|||
}); |
|||
|
|||
ComponentModels.run(); |
|||
ComponentView.run(); |
|||
ComponentsView.run(); |
|||
ComponentTextView.run(); |
|||
ComponentImageView.run(); |
|||
|
|||
}); |
|||
@ -1,125 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var DomComponents = require('DomComponents'); |
|||
var ComponentImageView = require('undefined'); |
|||
var utils = require('./../test_utils.js'); |
|||
|
|||
describe('DOM Components', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
var config; |
|||
var storagMock = utils.storageMock(); |
|||
var editorModel = { |
|||
config: { |
|||
loadCompsOnRender: 0, |
|||
}, |
|||
get: function(){return;}, |
|||
getHtml: function(){return 'testHtml';}, |
|||
getComponents: function(){return {test: 1};}, |
|||
getCacheLoad: function(){ |
|||
return storagMock.load(); |
|||
} |
|||
}; |
|||
// Methods
|
|||
var setSmConfig = function(){ |
|||
config.stm = storagMock; |
|||
config.stm.getConfig = function(){ |
|||
return { |
|||
storeHtml: 1, |
|||
storeComponents: 1, |
|||
} |
|||
}; |
|||
}; |
|||
var setEm = function(){ |
|||
config.em = editorModel; |
|||
} |
|||
|
|||
|
|||
beforeEach(function () { |
|||
config = {}; |
|||
obj = new DomComponents().init(config); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
DomComponents.should.be.exist; |
|||
}); |
|||
|
|||
it('storageKey returns array', function() { |
|||
obj.storageKey().should.be.instanceOf(Array); |
|||
}); |
|||
|
|||
it('storageKey returns correct composition', function() { |
|||
config.stm = { |
|||
getConfig: function(){ |
|||
return { |
|||
storeHtml: 1, |
|||
storeComponents: 1, |
|||
} |
|||
} |
|||
}; |
|||
obj.storageKey().should.eql(['html', 'components']); |
|||
}); |
|||
|
|||
it('Store data', function() { |
|||
setSmConfig(); |
|||
setEm(); |
|||
var expected = { |
|||
html: 'testHtml', |
|||
components: '{"test":1}', |
|||
}; |
|||
obj.store(1).should.deep.equal(expected); |
|||
}); |
|||
|
|||
it('Store and load data', function() { |
|||
setSmConfig(); |
|||
setEm(); |
|||
obj.store(); |
|||
// Load object between html and components
|
|||
obj.load().should.deep.equal({test: 1}); |
|||
}); |
|||
|
|||
it('Wrapper exists', function() { |
|||
obj.getWrapper().should.not.be.empty; |
|||
}); |
|||
|
|||
it('No components inside', function() { |
|||
obj.getComponents().length.should.equal(0); |
|||
}); |
|||
|
|||
it('Add new component', function() { |
|||
var comp = obj.addComponent({}); |
|||
obj.getComponents().length.should.equal(1); |
|||
}); |
|||
|
|||
it('Add more components at once', function() { |
|||
var comp = obj.addComponent([{},{}]); |
|||
obj.getComponents().length.should.equal(2); |
|||
}); |
|||
|
|||
it('Render wrapper', function() { |
|||
obj.render().should.be.ok; |
|||
}); |
|||
|
|||
it.skip('Add components at init', function() { |
|||
obj = new DomComponents().init({ |
|||
components : [{}, {}, {}] |
|||
}); |
|||
obj.getComponents().length.should.equal(3); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
ComponentModels.run(); |
|||
ComponentView.run(); |
|||
ComponentsView.run(); |
|||
ComponentTextView.run(); |
|||
ComponentImageView.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,285 +1,281 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var DomComponents = require('DomComponents'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
var ComponentImage = require('DomComponents/model/ComponentImage'); |
|||
var ComponentText = require('DomComponents/model/ComponentText'); |
|||
var ComponentLink = require('DomComponents/model/ComponentLink'); |
|||
var ComponentMap = require('DomComponents/model/ComponentMap'); |
|||
var ComponentVideo = require('DomComponents/model/ComponentVideo'); |
|||
var Components = require('DomComponents/model/Components'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
var obj; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
describe('Component', function() { |
|||
|
|||
beforeEach(function () { |
|||
obj = new Component(); |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Has no children', function() { |
|||
obj.get('components').length.should.equal(0); |
|||
}); |
|||
|
|||
it.skip('Clones correctly', function() { |
|||
var sAttr = obj.attributes; |
|||
var cloned = obj.clone(); |
|||
var eAttr = cloned.attributes; |
|||
eAttr.components = {}; |
|||
sAttr.components = {}; |
|||
eAttr.traits = {}; |
|||
sAttr.traits = {}; |
|||
sAttr.should.deep.equal(eAttr); |
|||
}); |
|||
|
|||
it('Clones correctly with traits', function() { |
|||
obj.get('traits').at(0).set('value', 'testTitle'); |
|||
var cloned = obj.clone(); |
|||
cloned.set('stylable', 0); |
|||
cloned.get('traits').at(0).set('value', 'testTitle2'); |
|||
obj.get('traits').at(0).get('value').should.equal('testTitle'); |
|||
obj.get('stylable').should.equal(true); |
|||
}); |
|||
|
|||
it('Has expected name', function() { |
|||
obj.getName().should.equal('Box'); |
|||
}); |
|||
|
|||
it('Has expected name 2', function() { |
|||
obj.cid = 'c999'; |
|||
obj.set('type','testType'); |
|||
obj.getName().should.equal('TestType'); |
|||
}); |
|||
|
|||
it('Component toHTML', function() { |
|||
obj.toHTML().should.equal('<div></div>'); |
|||
}); |
|||
|
|||
it('Component toHTML with attributes', function() { |
|||
obj = new Component({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
obj.toHTML().should.equal('<article data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
|
|||
it('Component toHTML with classes', function() { |
|||
obj = new Component({ |
|||
tagName: 'article' |
|||
}); |
|||
['class1', 'class2'].forEach(function(item){ |
|||
obj.get('classes').add({name: item}); |
|||
}); |
|||
obj.toHTML().should.equal('<article class="class1 class2"></article>'); |
|||
}); |
|||
|
|||
it('Component toHTML with children', function() { |
|||
obj = new Component({tagName: 'article'}, compOpts); |
|||
obj.get('components').add({tagName: 'span'}); |
|||
obj.toHTML().should.equal('<article><span></span></article>'); |
|||
}); |
|||
|
|||
it('Component toHTML with more children', function() { |
|||
obj = new Component({tagName: 'article'}, compOpts); |
|||
obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]); |
|||
obj.toHTML().should.equal('<article><span></span><div></div></article>'); |
|||
}); |
|||
|
|||
it('Component toHTML with no closing tag', function() { |
|||
obj = new Component({void: 1}); |
|||
obj.toHTML().should.equal('<div/>'); |
|||
}); |
|||
|
|||
it('Component parse empty div', function() { |
|||
var el = document.createElement('div'); |
|||
obj = Component.isComponent(el); |
|||
obj.should.deep.equal({tagName: 'div'}); |
|||
}); |
|||
|
|||
it('Component parse span', function() { |
|||
var el = document.createElement('span'); |
|||
obj = Component.isComponent(el); |
|||
obj.should.deep.equal({tagName: 'span'}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Image Component', function() { |
|||
|
|||
beforeEach(function () { |
|||
obj = new ComponentImage(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Has src property', function() { |
|||
obj.has('src').should.equal(true); |
|||
}); |
|||
|
|||
it('Not droppable', function() { |
|||
obj.get('droppable').should.equal(false); |
|||
}); |
|||
|
|||
it('ComponentImage toHTML', function() { |
|||
obj = new ComponentImage(); |
|||
obj.toHTML().should.equal('<img/>'); |
|||
}); |
|||
|
|||
it('Component toHTML with attributes', function() { |
|||
obj = new ComponentImage({ |
|||
attributes: {'alt': 'AltTest'}, |
|||
src: 'testPath' |
|||
}); |
|||
obj.toHTML().should.equal('<img alt="AltTest" src="testPath"/>'); |
|||
}); |
|||
|
|||
it('Refuse not img element', function() { |
|||
var el = document.createElement('div'); |
|||
obj = ComponentImage.isComponent(el); |
|||
obj.should.equal(''); |
|||
}); |
|||
|
|||
it('Component parse img element', function() { |
|||
var el = document.createElement('img'); |
|||
obj = ComponentImage.isComponent(el); |
|||
obj.should.deep.equal({type: 'image'}); |
|||
}); |
|||
|
|||
it('Component parse img element with src', function() { |
|||
var el = document.createElement('img'); |
|||
el.src = 'http://localhost/'; |
|||
obj = ComponentImage.isComponent(el); |
|||
obj.should.deep.equal({type: 'image'}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Text Component', function() { |
|||
|
|||
beforeEach(function () { |
|||
obj = new ComponentText(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Has content property', function() { |
|||
obj.has('content').should.equal(true); |
|||
}); |
|||
|
|||
it('Not droppable', function() { |
|||
obj.get('droppable').should.equal(false); |
|||
}); |
|||
|
|||
it('Component toHTML with attributes', function() { |
|||
obj = new ComponentText({ |
|||
attributes: {'data-test': 'value'}, |
|||
content: 'test content' |
|||
}); |
|||
obj.toHTML().should.equal('<div data-test="value">test content</div>'); |
|||
}); |
|||
const DomComponents = require('dom_components'); |
|||
const Component = require('dom_components/model/Component'); |
|||
const ComponentImage = require('dom_components/model/ComponentImage'); |
|||
const ComponentText = require('dom_components/model/ComponentText'); |
|||
const ComponentLink = require('dom_components/model/ComponentLink'); |
|||
const ComponentMap = require('dom_components/model/ComponentMap'); |
|||
const ComponentVideo = require('dom_components/model/ComponentVideo'); |
|||
const Components = require('dom_components/model/Components'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
var obj; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
describe('Component', () => { |
|||
|
|||
beforeEach(() => { |
|||
obj = new Component(); |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
describe('Link Component', function() { |
|||
it('Has no children', () => { |
|||
expect(obj.get('components').length).toEqual(0); |
|||
}); |
|||
|
|||
it('Component parse a element', function() { |
|||
var el = document.createElement('a'); |
|||
obj = ComponentLink.isComponent(el); |
|||
obj.should.deep.equal({type: 'link'}); |
|||
}); |
|||
it('Clones correctly', () => { |
|||
var sAttr = obj.attributes; |
|||
var cloned = obj.clone(); |
|||
var eAttr = cloned.attributes; |
|||
eAttr.components = {}; |
|||
sAttr.components = {}; |
|||
eAttr.traits = {}; |
|||
sAttr.traits = {}; |
|||
expect(sAttr.length).toEqual(eAttr.length); |
|||
}); |
|||
|
|||
it('Clones correctly with traits', () => { |
|||
obj.get('traits').at(0).set('value', 'testTitle'); |
|||
var cloned = obj.clone(); |
|||
cloned.set('stylable', 0); |
|||
cloned.get('traits').at(0).set('value', 'testTitle2'); |
|||
expect(obj.get('traits').at(0).get('value')).toEqual('testTitle'); |
|||
expect(obj.get('stylable')).toEqual(true); |
|||
}); |
|||
|
|||
it('Has expected name', () => { |
|||
expect(obj.getName()).toEqual('Box'); |
|||
}); |
|||
|
|||
it('Has expected name 2', () => { |
|||
obj.cid = 'c999'; |
|||
obj.set('type','testType'); |
|||
expect(obj.getName()).toEqual('TestType'); |
|||
}); |
|||
|
|||
describe('Map Component', function() { |
|||
it('Component toHTML', () => { |
|||
expect(obj.toHTML()).toEqual('<div></div>'); |
|||
}); |
|||
|
|||
it('Component parse map iframe', function() { |
|||
var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed'; |
|||
var el = $('<iframe src="' + src + '"></iframe>'); |
|||
obj = ComponentMap.isComponent(el.get(0)); |
|||
obj.should.deep.equal({type: 'map', src: src}); |
|||
it('Component toHTML with attributes', () => { |
|||
obj = new Component({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
expect(obj.toHTML()).toEqual('<article data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
|
|||
it('Component parse not map iframe', function() { |
|||
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>'); |
|||
obj = ComponentMap.isComponent(el.get(0)); |
|||
obj.should.equal(''); |
|||
it('Component toHTML with classes', () => { |
|||
obj = new Component({ |
|||
tagName: 'article' |
|||
}); |
|||
['class1', 'class2'].forEach(item => { |
|||
obj.get('classes').add({name: item}); |
|||
}); |
|||
expect(obj.toHTML()).toEqual('<article class="class1 class2"></article>'); |
|||
}); |
|||
|
|||
it('Component toHTML with children', () => { |
|||
obj = new Component({tagName: 'article'}, compOpts); |
|||
obj.get('components').add({tagName: 'span'}); |
|||
expect(obj.toHTML()).toEqual('<article><span></span></article>'); |
|||
}); |
|||
|
|||
describe('Video Component', function() { |
|||
it('Component toHTML with more children', () => { |
|||
obj = new Component({tagName: 'article'}, compOpts); |
|||
obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]); |
|||
expect(obj.toHTML()).toEqual('<article><span></span><div></div></article>'); |
|||
}); |
|||
|
|||
it('Component parse video', function() { |
|||
var src = 'http://localhost/'; |
|||
var el = $('<video src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
obj.should.deep.equal({type: 'video'}); //src: src
|
|||
}); |
|||
it('Component toHTML with no closing tag', () => { |
|||
obj = new Component({void: 1}); |
|||
expect(obj.toHTML()).toEqual('<div/>'); |
|||
}); |
|||
|
|||
it('Component parse youtube video iframe', function() { |
|||
var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; |
|||
var el = $('<iframe src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
obj.should.deep.equal({type: 'video', provider: 'yt', src: src}); |
|||
}); |
|||
it('Component parse empty div', () => { |
|||
var el = document.createElement('div'); |
|||
obj = Component.isComponent(el); |
|||
expect(obj).toEqual({tagName: 'div'}); |
|||
}); |
|||
|
|||
it('Component parse span', () => { |
|||
var el = document.createElement('span'); |
|||
obj = Component.isComponent(el); |
|||
expect(obj).toEqual({tagName: 'span'}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Image Component', () => { |
|||
|
|||
beforeEach(() => { |
|||
obj = new ComponentImage(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has src property', () => { |
|||
expect(obj.has('src')).toEqual(true); |
|||
}); |
|||
|
|||
it('Not droppable', () => { |
|||
expect(obj.get('droppable')).toEqual(false); |
|||
}); |
|||
|
|||
it('ComponentImage toHTML', () => { |
|||
obj = new ComponentImage(); |
|||
expect(obj.toHTML()).toEqual('<img/>'); |
|||
}); |
|||
|
|||
it('Component parse vimeo video iframe', function() { |
|||
var src = 'http://player.vimeo.com/video/2?'; |
|||
var el = $('<iframe src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
obj.should.deep.equal({type: 'video', provider: 'vi', src: src}); |
|||
it('Component toHTML with attributes', () => { |
|||
obj = new ComponentImage({ |
|||
attributes: {'alt': 'AltTest'}, |
|||
src: 'testPath' |
|||
}); |
|||
expect(obj.toHTML()).toEqual('<img alt="AltTest" src="testPath"/>'); |
|||
}); |
|||
|
|||
it('Refuse not img element', () => { |
|||
var el = document.createElement('div'); |
|||
obj = ComponentImage.isComponent(el); |
|||
expect(obj).toEqual(''); |
|||
}); |
|||
|
|||
describe('Components', function() { |
|||
it('Component parse img element', () => { |
|||
var el = document.createElement('img'); |
|||
obj = ComponentImage.isComponent(el); |
|||
expect(obj).toEqual({type: 'image'}); |
|||
}); |
|||
|
|||
it('Component parse img element with src', () => { |
|||
var el = document.createElement('img'); |
|||
el.src = 'http://localhost/'; |
|||
obj = ComponentImage.isComponent(el); |
|||
expect(obj).toEqual({type: 'image'}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Text Component', () => { |
|||
|
|||
beforeEach(() => { |
|||
obj = new ComponentText(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has content property', () => { |
|||
expect(obj.has('content')).toEqual(true); |
|||
}); |
|||
|
|||
it('Not droppable', () => { |
|||
expect(obj.get('droppable')).toEqual(false); |
|||
}); |
|||
|
|||
it('Component toHTML with attributes', () => { |
|||
obj = new ComponentText({ |
|||
attributes: {'data-test': 'value'}, |
|||
content: 'test content' |
|||
}); |
|||
expect(obj.toHTML()).toEqual('<div data-test="value">test content</div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
it('Creates component correctly', function() { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({}); |
|||
m.should.be.an.instanceOf(Component); |
|||
}); |
|||
describe('Link Component', () => { |
|||
|
|||
it('Creates image component correctly', function() { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({ type: 'image' }); |
|||
m.should.be.an.instanceOf(ComponentImage); |
|||
}); |
|||
it('Component parse a element', () => { |
|||
var el = document.createElement('a'); |
|||
obj = ComponentLink.isComponent(el); |
|||
expect(obj).toEqual({type: 'link'}); |
|||
}); |
|||
|
|||
it('Creates text component correctly', function() { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({ type: 'text' }); |
|||
m.should.be.an.instanceOf(ComponentText); |
|||
}); |
|||
}); |
|||
|
|||
describe('Map Component', () => { |
|||
|
|||
it('Component parse map iframe', () => { |
|||
var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed'; |
|||
var el = $('<iframe src="' + src + '"></iframe>'); |
|||
obj = ComponentMap.isComponent(el.get(0)); |
|||
expect(obj).toEqual({type: 'map', src}); |
|||
}); |
|||
|
|||
it('Component parse not map iframe', () => { |
|||
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>'); |
|||
obj = ComponentMap.isComponent(el.get(0)); |
|||
expect(obj).toEqual(''); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Video Component', () => { |
|||
|
|||
it('Component parse video', () => { |
|||
var src = 'http://localhost/'; |
|||
var el = $('<video src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
expect(obj).toEqual({type: 'video', src}); |
|||
}); |
|||
|
|||
it('Component parse youtube video iframe', () => { |
|||
var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; |
|||
var el = $('<iframe src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
expect(obj).toEqual({type: 'video', provider: 'yt', src}); |
|||
}); |
|||
|
|||
it('Component parse vimeo video iframe', () => { |
|||
var src = 'http://player.vimeo.com/video/2?'; |
|||
var el = $('<iframe src="' + src + '"></video>'); |
|||
obj = ComponentVideo.isComponent(el.get(0)); |
|||
expect(obj).toEqual({type: 'video', provider: 'vi', src}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Components', () => { |
|||
|
|||
beforeEach(() => { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
} |
|||
}); |
|||
|
|||
it('Creates component correctly', () => { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({}); |
|||
expect(m instanceof Component).toEqual(true); |
|||
}); |
|||
|
|||
it('Creates image component correctly', () => { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({ type: 'image' }); |
|||
expect(m instanceof ComponentImage).toEqual(true); |
|||
}); |
|||
|
|||
it('Creates text component correctly', () => { |
|||
var c = new Components({}, compOpts); |
|||
var m = c.add({ type: 'text' }); |
|||
expect(m instanceof ComponentText).toEqual(true); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,59 +1,55 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var ComponentImageView = require('undefined'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('ComponentImageView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Component(); |
|||
view = new ComponentImageView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', function() { |
|||
view.el.getAttribute('onmousedown').should.equal('return false'); |
|||
view.el.getAttribute('class').should.equal(view.classEmpty); |
|||
}); |
|||
|
|||
it('TagName is <img>', function() { |
|||
view.el.tagName.should.equal('IMG'); |
|||
}); |
|||
|
|||
it('Update src attribute', function() { |
|||
model.set('src','./'); |
|||
view.el.getAttribute('src').should.equal('./'); |
|||
}); |
|||
|
|||
it('Renders correctly', function() { |
|||
view.render().should.be.ok; |
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
const ComponentImageView = require('dom_components/view/ComponentImageView'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('ComponentImageView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
model = new Component(); |
|||
view = new ComponentImageView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', () => { |
|||
expect(view.el.getAttribute('onmousedown')).toEqual('return false'); |
|||
expect(view.el.getAttribute('class')).toEqual(view.classEmpty); |
|||
}); |
|||
|
|||
it('TagName is <img>', () => { |
|||
expect(view.el.tagName).toEqual('IMG'); |
|||
}); |
|||
|
|||
it('Update src attribute', () => { |
|||
model.set('src', './'); |
|||
expect(view.el.getAttribute('src')).toEqual('./'); |
|||
}); |
|||
|
|||
it('Renders correctly', () => { |
|||
expect(view.render()).toExist(); |
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,59 +1,55 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var ComponentTextView = require('undefined'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('ComponentTextView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Component(); |
|||
view = new ComponentTextView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', function() { |
|||
$fixture.html().should.equal('<div data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
it('Input content is stored in model', function() { |
|||
//view.enableEditing();
|
|||
view.el.innerHTML = 'test'; |
|||
//view.disableEditing();
|
|||
//model.get('content').should.equal('test');
|
|||
}); |
|||
|
|||
it('Init with content', function() { |
|||
model = new Component({ content: 'test' }); |
|||
view = new ComponentTextView({ model: model }); |
|||
view.render().el.innerHTML.should.equal('test'); |
|||
}); |
|||
const ComponentTextView = require('dom_components/view/ComponentTextView'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('ComponentTextView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
model = new Component(); |
|||
view = new ComponentTextView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', () => { |
|||
expect($fixture.html()).toEqual('<div data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
it('Input content is stored in model', () => { |
|||
//view.enableEditing();
|
|||
view.el.innerHTML = 'test'; |
|||
//view.disableEditing();
|
|||
//model.get('content').should.equal('test');
|
|||
}); |
|||
|
|||
it('Init with content', () => { |
|||
model = new Component({ content: 'test' }); |
|||
view = new ComponentTextView({ model }); |
|||
expect(view.render().el.innerHTML).toEqual('test'); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,143 +1,139 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var ComponentView = require('undefined'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
var DomComponents = require('DomComponents'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('ComponentView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var hClass = 'hc-state'; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
model = new Component(); |
|||
view = new ComponentView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', function() { |
|||
$fixture.html().should.equal('<div data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
it('Add helper class on update of state', function() { |
|||
model.set('state', 'test'); |
|||
$fixture.html().should.equal('<div data-highlightable="1" class="' + hClass + '"></div>'); |
|||
}); |
|||
|
|||
it('Clean form helper state', function() { |
|||
model.set('state', 'test'); |
|||
model.set('state', ''); |
|||
$fixture.html().should.equal('<div data-highlightable="1" class=""></div>'); |
|||
}); |
|||
|
|||
it('Add helper class on status update', function() { |
|||
model.set('status', 'selected'); |
|||
$fixture.html().should.equal('<div data-highlightable="1" class="selected"></div>'); |
|||
}); |
|||
|
|||
it('Get string of classes', function() { |
|||
model.set('attributes', { class: ['test', 'test2']}); |
|||
view.getClasses().should.equal('test test2'); |
|||
}); |
|||
|
|||
it('Update attributes', function() { |
|||
model.set('attributes', { |
|||
title: 'value', |
|||
'data-test': 'value2', |
|||
}); |
|||
view.el.getAttribute('title').should.equal('value'); |
|||
view.el.getAttribute('data-test').should.equal('value2'); |
|||
}); |
|||
|
|||
it('Update style', function() { |
|||
model.set('style', { |
|||
color: 'red', |
|||
float: 'left' |
|||
}); |
|||
view.el.getAttribute('style').should.equal('color:red;float:left;'); |
|||
}); |
|||
|
|||
it('Clean style', function() { |
|||
model.set('style', { color: 'red'}); |
|||
model.set('style', {}); |
|||
view.el.getAttribute('style').should.equal(''); |
|||
}); |
|||
|
|||
it('Get style string', function() { |
|||
model.set('style', { |
|||
color: 'red', |
|||
float: 'left' |
|||
}); |
|||
view.getStyleString().should.equal('color:red;float:left;'); |
|||
}); |
|||
|
|||
it('Add class', function() { |
|||
model.get('classes').add({name: 'test'}); |
|||
view.el.getAttribute('class').should.equal('test'); |
|||
}); |
|||
|
|||
it('Add classes', function() { |
|||
model.get('classes').add([{name: 'test'}, {name: 'test2'}]); |
|||
view.el.getAttribute('class').should.equal('test test2'); |
|||
}); |
|||
|
|||
it('Update on remove of some class', function() { |
|||
var cls1 = model.get('classes').add({name: 'test'}); |
|||
var cls12 = model.get('classes').add({name: 'test2'}); |
|||
model.get('classes').remove(cls1); |
|||
view.el.getAttribute('class').should.equal('test2'); |
|||
}); |
|||
|
|||
it('Init with different tag', function() { |
|||
model = new Component({ tagName: 'span' }); |
|||
view = new ComponentView({ model: model }); |
|||
view.render().el.tagName.should.equal('SPAN'); |
|||
}); |
|||
|
|||
it('Init with nested components', function() { |
|||
model = new Component({ |
|||
components: [ |
|||
{ tagName: 'span'}, |
|||
{ attributes: { title: 'test'}} |
|||
] |
|||
}, compOpts); |
|||
view = new ComponentView({ |
|||
model: model, |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
view.render().$el.html().should.equal('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
const ComponentView = require('dom_components/view/ComponentView'); |
|||
const Component = require('dom_components/model/Component'); |
|||
const DomComponents = require('dom_components'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('ComponentView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var hClass = 'hc-state'; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
model = new Component(); |
|||
view = new ComponentView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Component empty', () => { |
|||
expect($fixture.html()).toEqual('<div data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
it('Add helper class on update of state', () => { |
|||
model.set('state', 'test'); |
|||
expect($fixture.html()).toEqual('<div data-highlightable="1" class="' + hClass + '"></div>'); |
|||
}); |
|||
|
|||
it('Clean form helper state', () => { |
|||
model.set('state', 'test'); |
|||
model.set('state', ''); |
|||
expect($fixture.html()).toEqual('<div data-highlightable="1" class=""></div>'); |
|||
}); |
|||
|
|||
it('Add helper class on status update', () => { |
|||
model.set('status', 'selected'); |
|||
expect($fixture.html()).toEqual('<div data-highlightable="1" class="selected"></div>'); |
|||
}); |
|||
|
|||
it('Get string of classes', () => { |
|||
model.set('attributes', { class: ['test', 'test2']}); |
|||
expect(view.getClasses()).toEqual('test test2'); |
|||
}); |
|||
|
|||
it('Update attributes', () => { |
|||
model.set('attributes', { |
|||
title: 'value', |
|||
'data-test': 'value2', |
|||
}); |
|||
expect(view.el.getAttribute('title')).toEqual('value'); |
|||
expect(view.el.getAttribute('data-test')).toEqual('value2'); |
|||
}); |
|||
|
|||
it('Update style', () => { |
|||
model.set('style', { |
|||
color: 'red', |
|||
float: 'left' |
|||
}); |
|||
expect(view.el.getAttribute('style')).toEqual('color:red;float:left;'); |
|||
}); |
|||
|
|||
it('Clean style', () => { |
|||
model.set('style', { color: 'red'}); |
|||
model.set('style', {}); |
|||
expect(view.el.getAttribute('style')).toEqual(''); |
|||
}); |
|||
|
|||
it('Get style string', () => { |
|||
model.set('style', { |
|||
color: 'red', |
|||
float: 'left' |
|||
}); |
|||
expect(view.getStyleString()).toEqual('color:red;float:left;'); |
|||
}); |
|||
|
|||
it('Add class', () => { |
|||
model.get('classes').add({name: 'test'}); |
|||
expect(view.el.getAttribute('class')).toEqual('test'); |
|||
}); |
|||
|
|||
it('Add classes', () => { |
|||
model.get('classes').add([{name: 'test'}, {name: 'test2'}]); |
|||
expect(view.el.getAttribute('class')).toEqual('test test2'); |
|||
}); |
|||
|
|||
it('Update on remove of some class', () => { |
|||
var cls1 = model.get('classes').add({name: 'test'}); |
|||
var cls12 = model.get('classes').add({name: 'test2'}); |
|||
model.get('classes').remove(cls1); |
|||
expect(view.el.getAttribute('class')).toEqual('test2'); |
|||
}); |
|||
|
|||
it('Init with different tag', () => { |
|||
model = new Component({ tagName: 'span' }); |
|||
view = new ComponentView({ model }); |
|||
expect(view.render().el.tagName).toEqual('SPAN'); |
|||
}); |
|||
|
|||
it('Init with nested components', () => { |
|||
model = new Component({ |
|||
components: [ |
|||
{ tagName: 'span'}, |
|||
{ attributes: { title: 'test'}} |
|||
] |
|||
}, compOpts); |
|||
view = new ComponentView({ |
|||
model, |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
expect(view.render().$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>'); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,64 +1,60 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var DomComponents = require('DomComponents'); |
|||
var ComponentsView = require('undefined'); |
|||
var Components = require('DomComponents/model/Components'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('ComponentsView', function() { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
model = new Components([], compOpts); |
|||
view = new ComponentsView({ |
|||
collection: model, |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
const DomComponents = require('dom_components'); |
|||
const ComponentsView = require('dom_components/view/ComponentsView'); |
|||
const Components = require('dom_components/model/Components'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('ComponentsView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var dcomp; |
|||
var compOpts; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="components-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.collection.reset(); |
|||
}); |
|||
beforeEach(() => { |
|||
dcomp = new DomComponents(); |
|||
compOpts = { |
|||
defaultTypes: dcomp.componentTypes, |
|||
}; |
|||
model = new Components([], compOpts); |
|||
view = new ComponentsView({ |
|||
collection: model, |
|||
defaultTypes: dcomp.componentTypes, |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
afterEach(() => { |
|||
view.collection.reset(); |
|||
}); |
|||
|
|||
it("Collection is empty", function (){ |
|||
view.$el.html().should.be.empty; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it("Add new component", function (){ |
|||
sinon.stub(view, "addToCollection"); |
|||
view.collection.add({}); |
|||
view.addToCollection.calledOnce.should.equal(true); |
|||
}); |
|||
it("Collection is empty", () => { |
|||
expect(view.$el.html()).toNotExist(); |
|||
}); |
|||
|
|||
it("Render new component", function (){ |
|||
view.collection.add({}); |
|||
view.$el.html().should.not.be.empty; |
|||
}); |
|||
it("Add new component", () => { |
|||
sinon.stub(view, "addToCollection"); |
|||
view.collection.add({}); |
|||
expect(view.addToCollection.calledOnce).toEqual(true); |
|||
}); |
|||
|
|||
it("Render new component", () => { |
|||
view.collection.add({}); |
|||
expect(view.$el.html()).toExist(); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -0,0 +1,221 @@ |
|||
const PluginManager = require('plugin_manager'); |
|||
|
|||
describe('GrapesJS', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
var fixtures; |
|||
var fixture; |
|||
var editorName; |
|||
var htmlString; |
|||
var config; |
|||
var cssString; |
|||
var documentEl; |
|||
|
|||
var storage; |
|||
var storageId = 'testStorage'; |
|||
var storageMock = { |
|||
store(data) { |
|||
storage = data; |
|||
}, |
|||
load(keys) { |
|||
return storage; |
|||
}, |
|||
}; |
|||
|
|||
before(() => { |
|||
editorName = 'editor-fixture'; |
|||
fixtures = $("#fixtures"); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
htmlString = '<div class="test1"></div><div class="test2"></div>'; |
|||
cssString = '.test2{color:red}.test3{color:blue}'; |
|||
documentEl = '<style>' + cssString + '</style>' + htmlString; |
|||
config = { |
|||
container: '#' + editorName, |
|||
storageManager: { |
|||
autoload: 0, |
|||
type:'none' |
|||
}, |
|||
} |
|||
obj = grapesjs; |
|||
fixture = $('<div id="' + editorName + '"></div>'); |
|||
fixture.empty().appendTo(fixtures); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
config = {}; |
|||
obj = null; |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('Main object should be loaded', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
it('Init new editor', () => { |
|||
var editor = obj.init(config); |
|||
expect(editor).toExist(); |
|||
}); |
|||
|
|||
it('New editor is empty', () => { |
|||
var editor = obj.init(config); |
|||
var html = editor.getHtml(); |
|||
var css = editor.getCss(); |
|||
var protCss = editor.getConfig().protectedCss; |
|||
expect((html ? html : '')).toNotExist(); |
|||
expect((css ? css : '')).toEqual(protCss); |
|||
expect(editor.getComponents().length).toEqual(0); |
|||
expect(editor.getStyle().length).toEqual(0); |
|||
}); |
|||
|
|||
it('Init editor with html', () => { |
|||
config.components = htmlString; |
|||
var editor = obj.init(config); |
|||
var comps = editor.DomComponents.getComponents(); |
|||
expect(comps.length).toEqual(2); |
|||
expect(comps.at(0).get('classes').at(0).get('name')).toEqual('test1'); |
|||
}); |
|||
|
|||
it('Init editor with css', () => { |
|||
config.style = cssString; |
|||
var editor = obj.init(config); |
|||
var rules = editor.CssComposer.getAll(); |
|||
expect(rules.length).toEqual(2); |
|||
expect(rules.at(0).get('selectors').at(0).get('name')).toEqual('test2'); |
|||
}); |
|||
|
|||
it.skip('Init editor from element', () => { |
|||
config.fromElement = 1; |
|||
fixture.html(documentEl); |
|||
var editor = obj.init(config); |
|||
var html = editor.getHtml(); |
|||
var css = editor.getCss(); |
|||
var protCss = editor.getConfig().protectedCss; |
|||
/* |
|||
(html ? html : '').should.equal(htmlString); |
|||
(css ? css : '').should.equal(protCss + '.test2{color:red;}');// .test3 is discarded in css
|
|||
editor.getComponents().length.should.equal(2); |
|||
editor.getStyle().length.should.equal(2); |
|||
*/ |
|||
|
|||
expect((html ? html : '')).toEqual(htmlString); |
|||
expect(editor.getComponents().length).toEqual(2); |
|||
// .test3 is discarded in css
|
|||
expect((css ? css : '')).toEqual(protCss + '.test2{color:red;}'); |
|||
// bust is still here
|
|||
expect(editor.getStyle().length).toEqual(2); |
|||
}); |
|||
|
|||
it('Set components as HTML', () => { |
|||
var editor = obj.init(config); |
|||
editor.setComponents(htmlString); |
|||
expect(editor.getComponents().length).toEqual(2); |
|||
}); |
|||
|
|||
it('Set components as array of objects', () => { |
|||
var editor = obj.init(config); |
|||
editor.setComponents([{}, {}, {}]); |
|||
expect(editor.getComponents().length).toEqual(3); |
|||
}); |
|||
|
|||
it('Set style as CSS', () => { |
|||
var editor = obj.init(config); |
|||
editor.setStyle(cssString); |
|||
editor.setStyle(cssString); |
|||
var styles = editor.getStyle(); |
|||
expect(styles.length).toEqual(2); |
|||
expect(styles.at(1).get('selectors').at(0).get('name')).toEqual('test3'); |
|||
}); |
|||
|
|||
it('Set style as as array of objects', () => { |
|||
var editor = obj.init(config); |
|||
editor.setStyle([ |
|||
{selectors: ['test4']}, |
|||
{selectors: ['test5']} |
|||
]); |
|||
var styles = editor.getStyle(); |
|||
expect(styles.length).toEqual(2); |
|||
expect(styles.at(1).get('selectors').at(0).get('name')).toEqual('test5'); |
|||
}); |
|||
|
|||
it('Adds new storage as plugin and store data there', () => { |
|||
var pluginName = storageId + '-plugin'; |
|||
obj.plugins.add(pluginName, edt => { |
|||
edt.StorageManager.add(storageId, storageMock); |
|||
}); |
|||
config.storageManager.type = storageId; |
|||
config.plugins = [pluginName]; |
|||
var editor = obj.init(config); |
|||
editor.setComponents(htmlString); |
|||
editor.store(); |
|||
var data = editor.load(); |
|||
expect(data.html).toEqual(htmlString); |
|||
}); |
|||
|
|||
it('Execute plugins with custom options', () => { |
|||
var pluginName = storageId + '-plugin-opts'; |
|||
obj.plugins.add(pluginName, (edt, opts) => { |
|||
var opts = opts || {}; |
|||
edt.customValue = opts.cVal || ''; |
|||
}); |
|||
config.plugins = [pluginName]; |
|||
config.pluginsOpts = {}; |
|||
config.pluginsOpts[pluginName] = {cVal: 'TEST'}; |
|||
var editor = obj.init(config); |
|||
expect(editor.customValue).toEqual('TEST'); |
|||
}); |
|||
|
|||
// Problems with iframe loading
|
|||
it.skip('Execute custom command', () => { |
|||
var editor = obj.init(config); |
|||
editor.testVal = ''; |
|||
editor.setComponents(htmlString); |
|||
editor.Commands.add('test-command', { |
|||
run(ed, caller, opts) { |
|||
ed.testVal = ed.getHtml() + opts.val; |
|||
}, |
|||
}); |
|||
editor.runCommand('test-command', {val: 5}); |
|||
expect(editor.testVal).toEqual(htmlString + '5'); |
|||
}); |
|||
|
|||
it.skip('Stop custom command', () => { |
|||
var editor = obj.init(config); |
|||
editor.testVal = ''; |
|||
editor.setComponents(htmlString); |
|||
editor.Commands.add('test-command', { |
|||
stop(ed, caller, opts) { |
|||
ed.testVal = ed.getHtml() + opts.val; |
|||
}, |
|||
}); |
|||
editor.stopCommand('test-command', {val: 5}); |
|||
expect(editor.testVal).toEqual(htmlString + '5'); |
|||
}); |
|||
|
|||
it('Set default devices', () => { |
|||
config.deviceManager = {}; |
|||
config.deviceManager.devices = [ |
|||
{name:'1', width: '2'}, |
|||
{name:'3', width: '4'}, |
|||
]; |
|||
var editor = obj.init(config); |
|||
expect(editor.DeviceManager.getAll().length).toEqual(2); |
|||
}); |
|||
|
|||
it('There is no active device', () => { |
|||
var editor = obj.init(config); |
|||
expect(editor.getDevice()).toNotExist(); |
|||
}); |
|||
|
|||
it('Active another device', () => { |
|||
var editor = obj.init(config); |
|||
editor.setDevice('Tablet'); |
|||
expect(editor.getDevice()).toEqual('Tablet'); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
@ -1,217 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var GrapesJS = require('GrapesJS'); |
|||
var PluginManager = require('PluginManager'); |
|||
var chai = require('chai'); |
|||
|
|||
describe('GrapesJS', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
var fixtures; |
|||
var fixture; |
|||
var editorName; |
|||
var htmlString; |
|||
var config; |
|||
|
|||
var storage; |
|||
var storageId = 'testStorage'; |
|||
var storageMock = { |
|||
store: function(data){ |
|||
storage = data; |
|||
}, |
|||
load: function(keys){ |
|||
return storage; |
|||
}, |
|||
}; |
|||
|
|||
before(function () { |
|||
editorName = 'editor-fixture'; |
|||
fixtures = $("#fixtures"); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
htmlString = '<div class="test1"></div><div class="test2"></div>'; |
|||
cssString = '.test2{color:red}.test3{color:blue}'; |
|||
documentEl = '<style>' + cssString + '</style>' + htmlString; |
|||
config = { |
|||
container: '#' + editorName, |
|||
storageManager: { |
|||
autoload: 0, |
|||
type:'none' |
|||
}, |
|||
} |
|||
obj = GrapesJS; |
|||
fixture = $('<div id="' + editorName + '"></div>'); |
|||
fixture.empty().appendTo(fixtures); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
config = {}; |
|||
delete obj; |
|||
delete config; |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('main object should be loaded', function() { |
|||
obj.should.be.exist; |
|||
}); |
|||
|
|||
it('Init new editor', function() { |
|||
var editor = obj.init(config); |
|||
editor.should.not.be.empty; |
|||
}); |
|||
|
|||
it('New editor is empty', function() { |
|||
var editor = obj.init(config); |
|||
var html = editor.getHtml(); |
|||
var css = editor.getCss(); |
|||
var protCss = editor.getConfig().protectedCss; |
|||
(html ? html : '').should.be.empty; |
|||
(css ? css : '').should.equal(protCss); |
|||
editor.getComponents().length.should.equal(0); |
|||
editor.getStyle().length.should.equal(0); |
|||
}); |
|||
|
|||
it('Init editor with html', function() { |
|||
config.components = htmlString; |
|||
var editor = obj.init(config); |
|||
var comps = editor.DomComponents.getComponents(); |
|||
comps.length.should.equal(2); |
|||
comps.at(0).get('classes').at(0).get('name').should.equal('test1'); |
|||
}); |
|||
|
|||
it('Init editor with css', function() { |
|||
config.style = cssString; |
|||
var editor = obj.init(config); |
|||
var rules = editor.CssComposer.getAll(); |
|||
rules.length.should.equal(2); |
|||
rules.at(0).get('selectors').at(0).get('name').should.equal('test2'); |
|||
}); |
|||
|
|||
it('Init editor from element', function() { |
|||
config.fromElement = 1; |
|||
fixture.html(documentEl); |
|||
var editor = obj.init(config); |
|||
var html = editor.getHtml(); |
|||
var css = editor.getCss(); |
|||
var protCss = editor.getConfig().protectedCss; |
|||
(html ? html : '').should.equal(htmlString); |
|||
(css ? css : '').should.equal(protCss + '.test2{color:red;}');// .test3 is discarded in css
|
|||
editor.getComponents().length.should.equal(2); |
|||
editor.getStyle().length.should.equal(2);// .test3 is still here
|
|||
}); |
|||
|
|||
it('Set components as HTML', function() { |
|||
var editor = obj.init(config); |
|||
editor.setComponents(htmlString); |
|||
editor.getComponents().length.should.equal(2); |
|||
}); |
|||
|
|||
it('Set components as array of objects', function() { |
|||
var editor = obj.init(config); |
|||
editor.setComponents([{}, {}, {}]); |
|||
editor.getComponents().length.should.equal(3); |
|||
}); |
|||
|
|||
it('Set style as CSS', function() { |
|||
var editor = obj.init(config); |
|||
editor.setStyle(cssString); |
|||
editor.setStyle(cssString); |
|||
var styles = editor.getStyle(); |
|||
styles.length.should.equal(2); |
|||
styles.at(1).get('selectors').at(0).get('name').should.equal('test3'); |
|||
}); |
|||
|
|||
it('Set style as as array of objects', function() { |
|||
var editor = obj.init(config); |
|||
editor.setStyle([ |
|||
{selectors: ['test4']}, |
|||
{selectors: ['test5']} |
|||
]); |
|||
var styles = editor.getStyle(); |
|||
styles.length.should.equal(2); |
|||
styles.at(1).get('selectors').at(0).get('name').should.equal('test5'); |
|||
}); |
|||
|
|||
it('Adds new storage as plugin and store data there', function() { |
|||
var pluginName = storageId + '-plugin'; |
|||
obj.plugins.add(pluginName, function(edt){ |
|||
edt.StorageManager.add(storageId, storageMock); |
|||
}); |
|||
config.storageManager.type = storageId; |
|||
config.plugins = [pluginName]; |
|||
var editor = obj.init(config); |
|||
editor.setComponents(htmlString); |
|||
editor.store(); |
|||
var data = editor.load(); |
|||
data.html.should.equal(htmlString); |
|||
}); |
|||
|
|||
it('Execute plugins with custom options', function() { |
|||
var pluginName = storageId + '-plugin-opts'; |
|||
obj.plugins.add(pluginName, function(edt, opts){ |
|||
var opts = opts || {}; |
|||
edt.customValue = opts.cVal || ''; |
|||
}); |
|||
config.plugins = [pluginName]; |
|||
config.pluginsOpts = {}; |
|||
config.pluginsOpts[pluginName] = {cVal: 'TEST'}; |
|||
var editor = obj.init(config); |
|||
editor.customValue.should.equal('TEST'); |
|||
}); |
|||
|
|||
it('Execute custom command', function() { |
|||
var editor = obj.init(config); |
|||
editor.testVal = ''; |
|||
editor.setComponents(htmlString); |
|||
editor.Commands.add('test-command', { |
|||
run: function(ed, caller, opts){ |
|||
ed.testVal = ed.getHtml() + opts.val; |
|||
}, |
|||
}); |
|||
editor.runCommand('test-command', {val: 5}); |
|||
editor.testVal.should.equal(htmlString + '5'); |
|||
}); |
|||
|
|||
it('Stop custom command', function() { |
|||
var editor = obj.init(config); |
|||
editor.testVal = ''; |
|||
editor.setComponents(htmlString); |
|||
editor.Commands.add('test-command', { |
|||
stop: function(ed, caller, opts){ |
|||
ed.testVal = ed.getHtml() + opts.val; |
|||
}, |
|||
}); |
|||
editor.stopCommand('test-command', {val: 5}); |
|||
editor.testVal.should.equal(htmlString + '5'); |
|||
}); |
|||
|
|||
it('Set default devices', function() { |
|||
config.deviceManager = {}; |
|||
config.deviceManager.devices = [ |
|||
{name:'1', width: '2'}, |
|||
{name:'3', width: '4'}, |
|||
]; |
|||
var editor = obj.init(config); |
|||
editor.DeviceManager.getAll().length.should.equal(2); |
|||
}); |
|||
|
|||
it('There is no active device', function() { |
|||
var editor = obj.init(config); |
|||
editor.getDevice().should.be.empty; |
|||
}); |
|||
|
|||
it('Active another device', function() { |
|||
var editor = obj.init(config); |
|||
editor.setDevice('Tablet'); |
|||
editor.getDevice().should.equal('Tablet'); |
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,65 @@ |
|||
const Modal = require('modal_dialog'); |
|||
const ModalView = require('./view/ModalView'); |
|||
|
|||
describe('Modal dialog', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new Modal().init(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
it('Is close by default', () => { |
|||
expect(obj.isOpen()).toEqual(false); |
|||
}); |
|||
|
|||
it('Title is empty', () => { |
|||
expect(obj.getTitle()).toEqual(''); |
|||
}); |
|||
|
|||
it('Content is empty', () => { |
|||
expect(obj.getContent()).toEqual(''); |
|||
}); |
|||
|
|||
it('Set title', () => { |
|||
obj.setTitle('Test'); |
|||
expect(obj.getTitle()).toEqual('Test'); |
|||
|
|||
}); |
|||
|
|||
it('Set content', () => { |
|||
obj.setContent('Test'); |
|||
expect(obj.getContent()).toEqual('Test'); |
|||
}); |
|||
|
|||
it('Set HTML content', () => { |
|||
obj.setContent('<h1>Test</h1>'); |
|||
expect(obj.getContent()).toEqual('<h1>Test</h1>'); |
|||
}); |
|||
|
|||
it('Open modal', () => { |
|||
obj.open(); |
|||
expect(obj.isOpen()).toEqual(true); |
|||
}); |
|||
|
|||
it('Close modal', () => { |
|||
obj.open(); |
|||
obj.close(); |
|||
expect(obj.isOpen()).toEqual(false); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
ModalView.run(); |
|||
|
|||
}); |
|||
@ -1,67 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Modal = require('ModalDialog'); |
|||
var ModalView = require('undefined'); |
|||
|
|||
describe('Modal dialog', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Modal().init(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
obj.should.be.exist; |
|||
}); |
|||
|
|||
it('Is close by default', function() { |
|||
obj.isOpen().should.equal(false); |
|||
}); |
|||
|
|||
it('Title is empty', function() { |
|||
obj.getTitle().should.equal(''); |
|||
}); |
|||
|
|||
it('Content is empty', function() { |
|||
obj.getContent().should.equal(''); |
|||
}); |
|||
|
|||
it('Set title', function() { |
|||
obj.setTitle('Test'); |
|||
obj.getTitle().should.equal('Test'); |
|||
}); |
|||
|
|||
it('Set content', function() { |
|||
obj.setContent('Test'); |
|||
obj.getContent().should.equal('Test'); |
|||
}); |
|||
|
|||
it('Set HTML content', function() { |
|||
obj.setContent('<h1>Test</h1>'); |
|||
obj.getContent().should.equal('<h1>Test</h1>'); |
|||
}); |
|||
|
|||
it('Open modal', function() { |
|||
obj.open(); |
|||
obj.isOpen().should.equal(true); |
|||
}); |
|||
|
|||
it('Close modal', function() { |
|||
obj.open(); |
|||
obj.close(); |
|||
obj.isOpen().should.equal(false); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
ModalView.run(); |
|||
|
|||
}); |
|||
}); |
|||
@ -1,75 +1,71 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var ModalView = require('undefined'); |
|||
var Modal = require('ModalDialog/model/Modal'); |
|||
const ModalView = require('modal_dialog/view/ModalView'); |
|||
const Modal = require('modal_dialog/model/Modal'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('ModalView', function() { |
|||
module.exports = { |
|||
run() { |
|||
describe('ModalView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var editorModel; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture= $('<div class="modal-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Modal(); |
|||
view = new ModalView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture= $('<div class="modal-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
beforeEach(() => { |
|||
model = new Modal(); |
|||
view = new ModalView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
afterEach(() => { |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it("The content is not empty", function (){ |
|||
view.el.innerHTML.should.be.not.empty; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it("Get content", function (){ |
|||
view.getContent().should.be.ok; |
|||
}); |
|||
it("The content is not empty", () => { |
|||
expect(view.el.innerHTML).toExist(); |
|||
}); |
|||
|
|||
it("Update content", function (){ |
|||
model.set('content', 'test'); |
|||
view.getContent().get(0).innerHTML.should.equal('test'); |
|||
}); |
|||
it("Get content", () => { |
|||
expect(view.getContent()).toExist(); |
|||
}); |
|||
|
|||
it("Get title", function (){ |
|||
view.getTitle().should.be.ok; |
|||
}); |
|||
it("Update content", () => { |
|||
model.set('content', 'test'); |
|||
expect(view.getContent().get(0).innerHTML).toEqual('test'); |
|||
}); |
|||
|
|||
it("Update title", function (){ |
|||
model.set('title', 'test'); |
|||
view.getTitle().innerHTML.should.equal('test'); |
|||
}); |
|||
it("Get title", () => { |
|||
expect(view.getTitle()).toExist(); |
|||
}); |
|||
|
|||
it("Close by default", function (){ |
|||
view.updateOpen(); |
|||
view.el.style.display.should.equal('none'); |
|||
}); |
|||
it("Update title", () => { |
|||
model.set('title', 'test'); |
|||
expect(view.getTitle().innerHTML).toEqual('test'); |
|||
}); |
|||
|
|||
it("Open dialog", function (){ |
|||
model.set('open', 1); |
|||
view.el.style.display.should.equal(''); |
|||
}); |
|||
it("Close by default", () => { |
|||
view.updateOpen(); |
|||
expect(view.el.style.display).toEqual('none'); |
|||
}); |
|||
|
|||
it("Open dialog", () => { |
|||
model.set('open', 1); |
|||
expect(view.el.style.display).toEqual(''); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,74 +1,69 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var GrapesJS = require('GrapesJS'); |
|||
module.exports = { |
|||
run() { |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('E2E tests', () => { |
|||
|
|||
describe('E2E tests', function() { |
|||
var fixtures; |
|||
var fixture; |
|||
var obj; |
|||
var config; |
|||
var editorName = 'panel-fixture'; |
|||
|
|||
var fixtures; |
|||
var fixture; |
|||
var obj; |
|||
var editorName = 'panel-fixture'; |
|||
|
|||
before(function () { |
|||
fixtures = $("#fixtures"); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
obj = GrapesJS; |
|||
config = { |
|||
container: '#' + editorName, |
|||
storage: { autoload: 0, type:'none' }, |
|||
}; |
|||
fixture = $('<div id="' + editorName + '"></div>'); |
|||
fixture.empty().appendTo(fixtures); |
|||
}); |
|||
before(() => { |
|||
fixtures = $("#fixtures"); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
delete config; |
|||
fixture.remove(); |
|||
}); |
|||
beforeEach(() => { |
|||
obj = grapesjs; |
|||
config = { |
|||
container: '#' + editorName, |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
}; |
|||
fixture = $('<div id="' + editorName + '"></div>'); |
|||
fixture.empty().appendTo(fixtures); |
|||
}); |
|||
|
|||
after(function () { |
|||
fixture.remove(); |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
config = null; |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('Command is correctly executed on button click', function() { |
|||
var commandId = 'command-test'; |
|||
config.commands = { |
|||
defaults: [{ |
|||
id: commandId, |
|||
run: function(ed, caller){ |
|||
ed.testValue = 'testValue'; |
|||
caller.set('active', false); |
|||
} |
|||
}] |
|||
}; |
|||
config.panels = { |
|||
defaults : [{ |
|||
id : 'toolbar-test', |
|||
buttons : [{ |
|||
id : 'button-test', |
|||
className : 'fa fa-smile-o', |
|||
command : commandId, |
|||
}], |
|||
}], |
|||
}; |
|||
var editor = obj.init(config); |
|||
editor.testValue = ''; |
|||
var button = editor.Panels.getButton('toolbar-test', 'button-test'); |
|||
button.set('active', 1); |
|||
editor.testValue.should.equal('testValue'); |
|||
button.get('active').should.equal(false); |
|||
}); |
|||
after(() => { |
|||
//fixture.remove();
|
|||
}); |
|||
|
|||
it.skip('Command is correctly executed on button click', () => { |
|||
var commandId = 'command-test'; |
|||
config.commands = { |
|||
defaults: [{ |
|||
id: commandId, |
|||
run(ed, caller) { |
|||
ed.testValue = 'testValue'; |
|||
caller.set('active', false); |
|||
} |
|||
}] |
|||
}; |
|||
config.panels = { |
|||
defaults: [{ |
|||
id : 'toolbar-test', |
|||
buttons : [{ |
|||
id : 'button-test', |
|||
className : 'fa fa-smile-o', |
|||
command : commandId, |
|||
}], |
|||
}], |
|||
}; |
|||
var editor = obj.init(config); |
|||
editor.testValue = ''; |
|||
var button = editor.Panels.getButton('toolbar-test', 'button-test'); |
|||
button.set('active', 1); |
|||
expect(editor.testValue).toEqual('testValue'); |
|||
expect(button.get('active')).toEqual(false); |
|||
}); |
|||
|
|||
} |
|||
}); |
|||
|
|||
}; |
|||
} |
|||
|
|||
}); |
|||
}; |
|||
|
|||
@ -0,0 +1,104 @@ |
|||
const Panels = require('panels'); |
|||
const e2e = require('./e2e/PanelsE2e'); |
|||
const Models = require('./model/PanelModels'); |
|||
const PanelView = require('./view/PanelView'); |
|||
const PanelsView = require('./view/PanelsView'); |
|||
const ButtonView = require('./view/ButtonView'); |
|||
const ButtonsView = require('./view/ButtonsView'); |
|||
|
|||
describe('Panels', () => { |
|||
|
|||
describe('Main', () => { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new Panels().init(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(obj).toExist(); |
|||
}); |
|||
|
|||
it("No panels inside", () => { |
|||
expect(obj.getPanels().length).toEqual(3); |
|||
}); |
|||
|
|||
it("Adds new panel correctly via object", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
expect(panel.get('id')).toEqual('test'); |
|||
}); |
|||
|
|||
it("New panel has no buttons", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
expect(panel.get('buttons').length).toEqual(0); |
|||
}); |
|||
|
|||
it("Adds new panel correctly via Panel instance", () => { |
|||
var oPanel = new obj.Panel({id: 'test'}); |
|||
var panel = obj.addPanel(oPanel); |
|||
expect(panel).toEqual(oPanel); |
|||
expect(panel.get('id')).toEqual('test'); |
|||
}); |
|||
|
|||
it("getPanel returns null in case there is no requested panel", () => { |
|||
expect(obj.getPanel('test')).toEqual(null); |
|||
}); |
|||
|
|||
it("getPanel returns correctly the panel", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
expect(obj.getPanel('test')).toEqual(panel); |
|||
}); |
|||
|
|||
it("Can't add button to non existent panel", () => { |
|||
expect(obj.addButton('test', {id:'btn'})).toEqual(null); |
|||
}); |
|||
|
|||
it("Add button correctly", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn'}); |
|||
expect(panel.get('buttons').length).toEqual(1); |
|||
expect(panel.get('buttons').at(0).get('id')).toEqual('btn'); |
|||
}); |
|||
|
|||
it("getButton returns null in case there is no requested panel", () => { |
|||
expect(obj.addButton('test', 'btn')).toEqual(null); |
|||
}); |
|||
|
|||
it("getButton returns null in case there is no requested button", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
expect(obj.getButton('test', 'btn')).toEqual(null); |
|||
}); |
|||
|
|||
it("getButton returns correctly the button", () => { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn'}); |
|||
expect(obj.getButton('test', 'btn')).toEqual(btn); |
|||
}); |
|||
|
|||
it("Renders correctly", () => { |
|||
expect(obj.render()).toExist(); |
|||
}); |
|||
|
|||
it("Active correctly activable buttons", () => { |
|||
var spy = sinon.spy(); |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn', active: true}); |
|||
btn.on('updateActive', spy); |
|||
obj.active(); |
|||
expect(spy.called).toEqual(true); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
PanelView.run(); |
|||
PanelsView.run(); |
|||
ButtonView.run(); |
|||
ButtonsView.run(); |
|||
e2e.run(); |
|||
}); |
|||
@ -1,102 +0,0 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Panels = require('Panels'); |
|||
var e2e = require('undefined'); |
|||
|
|||
describe('Panels', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Panels().init(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
obj.should.be.exist; |
|||
}); |
|||
|
|||
it("No panels inside", function() { |
|||
obj.getPanels().length.should.equal(3); |
|||
}); |
|||
|
|||
it("Adds new panel correctly via object", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
panel.get('id').should.equal('test'); |
|||
}); |
|||
|
|||
it("New panel has no buttons", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
panel.get('buttons').length.should.equal(0); |
|||
}); |
|||
|
|||
it("Adds new panel correctly via Panel instance", function() { |
|||
var oPanel = new obj.Panel({id: 'test'}); |
|||
var panel = obj.addPanel(oPanel); |
|||
panel.should.deep.equal(oPanel); |
|||
panel.get('id').should.equal('test'); |
|||
}); |
|||
|
|||
it("getPanel returns null in case there is no requested panel", function() { |
|||
(obj.getPanel('test') == null).should.equal(true); |
|||
}); |
|||
|
|||
it("getPanel returns correctly the panel", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
obj.getPanel('test').should.deep.equal(panel); |
|||
}); |
|||
|
|||
it("Can't add button to non existent panel", function() { |
|||
(obj.addButton('test', {id:'btn'}) == null).should.equal(true); |
|||
}); |
|||
|
|||
it("Add button correctly", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn'}); |
|||
panel.get('buttons').length.should.equal(1); |
|||
panel.get('buttons').at(0).get('id').should.equal('btn'); |
|||
}); |
|||
|
|||
it("getButton returns null in case there is no requested panel", function() { |
|||
(obj.getButton('test', 'btn') == null).should.equal(true); |
|||
}); |
|||
|
|||
it("getButton returns null in case there is no requested button", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
(obj.getButton('test', 'btn') == null).should.equal(true); |
|||
}); |
|||
|
|||
it("getButton returns correctly the button", function() { |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn'}); |
|||
obj.getButton('test', 'btn').should.deep.equal(btn); |
|||
}); |
|||
|
|||
it("Renders correctly", function() { |
|||
obj.render().should.be.ok; |
|||
}); |
|||
|
|||
it("Active correctly activable buttons", function() { |
|||
var spy = sinon.spy(); |
|||
var panel = obj.addPanel({id: 'test'}); |
|||
var btn = obj.addButton('test', {id:'btn', active: true}); |
|||
btn.on('updateActive', spy); |
|||
obj.active(); |
|||
spy.called.should.equal(true); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
PanelView.run(); |
|||
PanelsView.run(); |
|||
ButtonView.run(); |
|||
ButtonsView.run(); |
|||
e2e.run(); |
|||
}); |
|||
}); |
|||
@ -1,120 +1,119 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Panels = require('undefined'); |
|||
const Panels = require('panels'); |
|||
const Button = require('panels/model/Button'); |
|||
const Buttons = require('panels/model/Buttons'); |
|||
const Panel = require('panels/model/Panel'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('Button', function() { |
|||
module.exports = { |
|||
run() { |
|||
describe('Button', () => { |
|||
|
|||
var obj; |
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Button(); |
|||
}); |
|||
beforeEach(() => { |
|||
obj = new Button(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has buttons instance', function() { |
|||
obj.has('buttons').should.equal(true); |
|||
}); |
|||
it('Has buttons instance', () => { |
|||
expect(obj.has('buttons')).toEqual(true); |
|||
}); |
|||
|
|||
it('Has no buttons', function() { |
|||
obj.get('buttons').length.should.equal(0); |
|||
}); |
|||
|
|||
it('Init with other buttons inside correctly', function() { |
|||
obj = new Button({ |
|||
buttons: [{}] |
|||
}); |
|||
obj.get('buttons').should.be.instanceOf(Buttons); |
|||
obj.get('buttons').length.should.equal(1); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Buttons', function() { |
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Buttons(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Deactivates buttons', function() { |
|||
obj.add({ active: true }); |
|||
obj.deactivateAll(); |
|||
obj.at(0).get('active').should.equal(false); |
|||
}); |
|||
|
|||
it('Deactivates buttons with context', function() { |
|||
obj.add({ active: true }); |
|||
obj.deactivateAll('someContext'); |
|||
obj.at(0).get('active').should.equal(true); |
|||
}); |
|||
|
|||
it('Deactivates except one', function() { |
|||
var btn = obj.add({ active: true }); |
|||
obj.deactivateAllExceptOne(); |
|||
obj.at(0).get('active').should.equal(false); |
|||
}); |
|||
|
|||
it('Deactivates except one with model', function() { |
|||
var btn = obj.add({ active: true }); |
|||
obj.deactivateAllExceptOne(btn); |
|||
obj.at(0).get('active').should.equal(true); |
|||
}); |
|||
it('Has no buttons', () => { |
|||
expect(obj.get('buttons').length).toEqual(0); |
|||
}); |
|||
|
|||
it('Init with other buttons inside correctly', () => { |
|||
obj = new Button({ |
|||
buttons: [{}] |
|||
}); |
|||
|
|||
describe('Panel', function() { |
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
obj = new Panel(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Has buttons instance', function() { |
|||
obj.has('buttons').should.equal(true); |
|||
obj.get('buttons').should.be.instanceOf(Buttons); |
|||
}); |
|||
|
|||
it('Has no buttons', function() { |
|||
obj.get('buttons').length.should.equal(0); |
|||
}); |
|||
|
|||
it('Init with buttons inside correctly', function() { |
|||
obj = new Panel({ |
|||
buttons: [{}] |
|||
}); |
|||
obj.get('buttons').should.be.instanceOf(Buttons); |
|||
obj.get('buttons').length.should.equal(1); |
|||
}); |
|||
|
|||
expect(obj.get('buttons') instanceof Buttons).toEqual(true); |
|||
expect(obj.get('buttons').length).toEqual(1); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Buttons', () => { |
|||
var obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new Buttons(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Deactivates buttons', () => { |
|||
obj.add({ active: true }); |
|||
obj.deactivateAll(); |
|||
expect(obj.at(0).get('active')).toEqual(false); |
|||
}); |
|||
|
|||
it('Deactivates buttons with context', () => { |
|||
obj.add({ active: true }); |
|||
obj.deactivateAll('someContext'); |
|||
expect(obj.at(0).get('active')).toEqual(true); |
|||
}); |
|||
|
|||
it('Deactivates except one', () => { |
|||
var btn = obj.add({ active: true }); |
|||
obj.deactivateAllExceptOne(); |
|||
expect(obj.at(0).get('active')).toEqual(false); |
|||
}); |
|||
|
|||
it('Deactivates except one with model', () => { |
|||
var btn = obj.add({ active: true }); |
|||
obj.deactivateAllExceptOne(btn); |
|||
expect(obj.at(0).get('active')).toEqual(true); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
describe('Panel', () => { |
|||
var obj; |
|||
|
|||
beforeEach(() => { |
|||
obj = new Panel(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has buttons instance', () => { |
|||
expect(obj.has('buttons')).toEqual(true); |
|||
expect(obj.get('buttons') instanceof Buttons).toEqual(true); |
|||
}); |
|||
|
|||
it('Has no buttons', () => { |
|||
expect(obj.get('buttons').length).toEqual(0); |
|||
}); |
|||
|
|||
it('Init with buttons inside correctly', () => { |
|||
obj = new Panel({ |
|||
buttons: [{}] |
|||
}); |
|||
expect(obj.get('buttons') instanceof Buttons).toEqual(true); |
|||
expect(obj.get('buttons').length).toEqual(1); |
|||
}); |
|||
|
|||
describe('Panels', function() { |
|||
var obj; |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
obj = new Panel(); |
|||
}); |
|||
describe('Panels', () => { |
|||
var obj; |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
beforeEach(() => { |
|||
obj = new Panel(); |
|||
}); |
|||
|
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
} |
|||
}; |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
@ -1,77 +1,73 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var ButtonView = require('undefined'); |
|||
var Button = require('Panels/model/Button'); |
|||
const ButtonView = require('panels/view/ButtonView'); |
|||
const Button = require('panels/model/Button'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('ButtonView', function() { |
|||
describe('ButtonView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var btnClass = 'btn'; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var btnClass = 'btn'; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="cssrule-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
model = new Button(); |
|||
view = new ButtonView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="cssrule-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
beforeEach(() => { |
|||
model = new Button(); |
|||
view = new ButtonView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
it('Button empty', function() { |
|||
$fixture.html().should.be.equal('<span class="' + btnClass+ '"></span>'); |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('Update class', function() { |
|||
model.set('className','test'); |
|||
view.el.getAttribute('class').should.be.equal(btnClass + ' test'); |
|||
}); |
|||
it('Button empty', () => { |
|||
expect($fixture.html()).toEqual('<span class="' + btnClass+ '"></span>'); |
|||
}); |
|||
|
|||
it('Update attributes', function() { |
|||
model.set('attributes',{ |
|||
'data-test': 'test-value' |
|||
}); |
|||
view.el.getAttribute('data-test').should.be.equal('test-value'); |
|||
}); |
|||
it('Update class', () => { |
|||
model.set('className','test'); |
|||
expect(view.el.getAttribute('class')).toEqual(btnClass + ' test'); |
|||
}); |
|||
|
|||
it('Check enable active', function() { |
|||
model.set('active', true, {silent: true}); |
|||
view.checkActive(); |
|||
view.el.getAttribute('class').should.be.equal(btnClass + ' active'); |
|||
}); |
|||
it('Update attributes', () => { |
|||
model.set('attributes',{ |
|||
'data-test': 'test-value' |
|||
}); |
|||
expect(view.el.getAttribute('data-test')).toEqual('test-value'); |
|||
}); |
|||
|
|||
it('Check disable active', function() { |
|||
model.set('active', true, {silent: true}); |
|||
view.checkActive(); |
|||
model.set('active', false, {silent: true}); |
|||
view.checkActive(); |
|||
view.el.getAttribute('class').should.be.equal(btnClass); |
|||
}); |
|||
it('Check enable active', () => { |
|||
model.set('active', true, {silent: true}); |
|||
view.checkActive(); |
|||
expect(view.el.getAttribute('class')).toEqual(btnClass + ' active'); |
|||
}); |
|||
|
|||
it('Renders correctly', function() { |
|||
view.render().should.be.ok; |
|||
}); |
|||
it('Check disable active', () => { |
|||
model.set('active', true, {silent: true}); |
|||
view.checkActive(); |
|||
model.set('active', false, {silent: true}); |
|||
view.checkActive(); |
|||
expect(view.el.getAttribute('class')).toEqual(btnClass); |
|||
}); |
|||
|
|||
it('Renders correctly', () => { |
|||
expect(view.render()).toExist(); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue