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 = { |
module.exports = { |
||||
|
|
||||
'blocks': [], |
blocks: [], |
||||
|
|
||||
|
appendTo: '', |
||||
|
|
||||
}; |
}; |
||||
|
|||||
@ -1,11 +1,26 @@ |
|||||
var Backbone = require('backbone'); |
var Backbone = require('backbone'); |
||||
|
var Category = require('./Category'); |
||||
|
|
||||
module.exports = Backbone.Model.extend({ |
module.exports = Backbone.Model.extend({ |
||||
|
|
||||
defaults :{ |
defaults: { |
||||
label: '', |
label: '', |
||||
content: '', |
content: '', |
||||
|
category: '', |
||||
attributes: {}, |
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 grapesjs from './../src';
|
||||
//import AssetManager from './specs/asset_manager';
|
|
||||
|
|
||||
describe('Main', () => { |
describe('Main', () => { |
||||
|
|
||||
describe('Startup', () => { |
describe('Startup', () => { |
||||
it('Main object should be loaded', () => { |
it('Main object should be loaded', () => { |
||||
//Grapes = require('editor/main');
|
|
||||
expect(grapesjs).toExist(); |
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){ |
var Backbone = require('backbone'); |
||||
'use strict'; |
var BlocksView = require('block_manager/view/BlocksView'); |
||||
var BlocksView = require('undefined'); |
var Blocks = require('block_manager/model/Blocks'); |
||||
var Blocks = require('BlockManager/model/Blocks'); |
|
||||
|
module.exports = { |
||||
module.exports = { |
run() { |
||||
run : function(){ |
describe('BlocksView', () => { |
||||
describe('BlocksView', function() { |
|
||||
|
var $fixtures; |
||||
var $fixtures; |
var $fixture; |
||||
var $fixture; |
var model; |
||||
var model; |
var view; |
||||
var view; |
var editorModel; |
||||
var editorModel; |
var ppfx; |
||||
var ppfx; |
|
||||
|
before(() => { |
||||
before(function () { |
$fixtures = $('#fixtures'); |
||||
$fixtures = $("#fixtures"); |
$fixture = $('<div class="devices-fixture"></div>'); |
||||
$fixture = $('<div class="devices-fixture"></div>'); |
}); |
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
model = new Blocks([]); |
model = new Blocks([]); |
||||
view = new BlocksView({ collection: model }); |
view = new BlocksView({ collection: model }); |
||||
$fixture.empty().appendTo($fixtures); |
$fixture.empty().appendTo($fixtures); |
||||
$fixture.html(view.render().el); |
$fixture.html(view.render().el); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
view.collection.reset(); |
view.collection.reset(); |
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
$fixture.remove(); |
$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it("The container is not empty", function (){ |
it("The container is not empty", () => { |
||||
view.el.outerHTML.should.be.not.empty; |
expect(view.el.outerHTML).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it("No children inside", function (){ |
it("No children inside", () => { |
||||
view.el.children.length.should.equal(0); |
expect(view.getBlocksEl().children.length).toEqual(0); |
||||
}); |
}); |
||||
|
|
||||
it("Render children on add", function (){ |
it("Render children on add", () => { |
||||
model.add({}); |
model.add({}); |
||||
view.el.children.length.should.equal(1); |
expect(view.getBlocksEl().children.length).toEqual(1); |
||||
model.add([{},{}]); |
model.add([{},{}]); |
||||
view.el.children.length.should.equal(3); |
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 (){ |
describe('With configs', () => { |
||||
model.add([{},{}]); |
|
||||
view.el.children.length.should.equal(2); |
beforeEach(() => { |
||||
model.at(0).destroy(); |
ppfx = 'pfx-t-'; |
||||
view.el.children.length.should.equal(1); |
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() { |
it("Render children", () => { |
||||
|
expect(view.getBlocksEl().children.length).toEqual(2); |
||||
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 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){ |
const CssGenerator = require('code_manager/model/CssGenerator'); |
||||
'use strict'; |
const HtmlGenerator = require('code_manager/model/HtmlGenerator'); |
||||
var CssGenerator = require('undefined'); |
const DomComponents = require('dom_components'); |
||||
var DomComponents = require('DomComponents'); |
const Component = require('dom_components/model/Component'); |
||||
var Component = require('DomComponents/model/Component'); |
const CssComposer = require('css_composer'); |
||||
var CssComposer = require('CssComposer'); |
|
||||
|
module.exports = { |
||||
module.exports = { |
run() { |
||||
run : function(){ |
let comp; |
||||
var comp; |
let obj; |
||||
|
|
||||
describe('HtmlGenerator', function() { |
describe('HtmlGenerator', () => { |
||||
beforeEach(function () { |
beforeEach(() => { |
||||
this.obj = new HtmlGenerator(); |
obj = new HtmlGenerator(); |
||||
var dcomp = new DomComponents(); |
var dcomp = new DomComponents(); |
||||
comp = new Component({}, { |
comp = new Component({}, { |
||||
defaultTypes: dcomp.componentTypes, |
defaultTypes: dcomp.componentTypes, |
||||
}); |
}); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete this.obj; |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Build correctly one component', function() { |
it('Build correctly one component', () => { |
||||
this.obj.build(comp).should.equal(''); |
expect(obj.build(comp)).toEqual(''); |
||||
}); |
|
||||
|
}); |
||||
it('Build correctly empty component inside', function() { |
|
||||
var m1 = comp.get('components').add({}); |
it('Build correctly empty component inside', () => { |
||||
this.obj.build(comp).should.equal('<div></div>'); |
var m1 = comp.get('components').add({}); |
||||
}); |
expect(obj.build(comp)).toEqual('<div></div>'); |
||||
|
}); |
||||
it('Build correctly not empty component inside', function() { |
|
||||
var m1 = comp.get('components').add({ |
it('Build correctly not empty component inside', () => { |
||||
tagName: 'article', |
var m1 = comp.get('components').add({ |
||||
attributes: { |
tagName: 'article', |
||||
'data-test1': 'value1', |
attributes: { |
||||
'data-test2': 'value2' |
'data-test1': 'value1', |
||||
} |
'data-test2': 'value2' |
||||
}); |
} |
||||
this.obj.build(comp).should.equal('<article data-test1="value1" data-test2="value2"></article>'); |
}); |
||||
}); |
expect(obj.build(comp)).toEqual('<article data-test1="value1" data-test2="value2"></article>'); |
||||
|
}); |
||||
it('Build correctly component with classes', function() { |
|
||||
var m1 = comp.get('components').add({ |
it('Build correctly component with classes', () => { |
||||
tagName: 'article', |
var m1 = comp.get('components').add({ |
||||
attributes: { |
tagName: 'article', |
||||
'data-test1': 'value1', |
attributes: { |
||||
'data-test2': 'value2' |
'data-test1': 'value1', |
||||
} |
'data-test2': 'value2' |
||||
}); |
} |
||||
['class1', 'class2'].forEach(function(item){ |
}); |
||||
m1.get('classes').add({name: item}); |
['class1', 'class2'].forEach(item => { |
||||
}); |
m1.get('classes').add({name: item}); |
||||
this.obj.build(comp).should.equal('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); |
}); |
||||
}); |
expect(obj.build(comp)).toEqual('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); |
||||
}); |
}); |
||||
|
}); |
||||
describe('CssGenerator', function() { |
|
||||
var newCssComp = function(){ |
describe('CssGenerator', () => { |
||||
return new CssComposer().init(); |
var newCssComp = () => new CssComposer().init(); |
||||
}; |
beforeEach(() => { |
||||
beforeEach(function () { |
obj = new CssGenerator(); |
||||
this.obj = new CssGenerator(); |
var dcomp = new DomComponents(); |
||||
var dcomp = new DomComponents(); |
comp = new Component({}, { |
||||
comp = new Component({}, { |
defaultTypes: dcomp.componentTypes, |
||||
defaultTypes: dcomp.componentTypes, |
}); |
||||
}); |
}); |
||||
}); |
|
||||
|
afterEach(() => { |
||||
afterEach(function () { |
obj = null; |
||||
delete this.obj; |
}); |
||||
}); |
|
||||
|
it('Build correctly one component', () => { |
||||
it('Build correctly one component', function() { |
expect(obj.build(comp)).toEqual(''); |
||||
this.obj.build(comp).should.equal(''); |
}); |
||||
}); |
|
||||
|
it('Build correctly empty component inside', () => { |
||||
it('Build correctly empty component inside', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
expect(obj.build(comp)).toEqual(''); |
||||
this.obj.build(comp).should.equal(''); |
}); |
||||
}); |
|
||||
|
it('Build correctly component with style inside', () => { |
||||
it('Build correctly component with style inside', function() { |
var m1 = comp.get('components').add({ |
||||
var m1 = comp.get('components').add({ |
tagName: 'article', |
||||
tagName: 'article', |
style: { |
||||
style: { |
'prop1': 'value1', |
||||
'prop1': 'value1', |
'prop2': 'value2' |
||||
'prop2': 'value2' |
} |
||||
} |
}); |
||||
}); |
expect(obj.build(comp)).toEqual('#' + m1.cid +'{prop1:value1;prop2:value2;}'); |
||||
this.obj.build(comp).should.equal('#' + m1.cid +'{prop1:value1;prop2:value2;}'); |
}); |
||||
}); |
|
||||
|
it('Build correctly component with class styled', () => { |
||||
it('Build correctly component with class styled', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add(cls1); |
||||
var rule = cssc.add(cls1); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1{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', () => { |
||||
it('Build correctly component styled with class and state', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add(cls1); |
||||
var rule = cssc.add(cls1); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
rule.set('state', 'hover'); |
||||
rule.set('state', 'hover'); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1:hover{prop1:value1;prop2:value2;}'); |
||||
this.obj.build(comp, cssc).should.equal('.class1:hover{prop1:value1;prop2:value2;}'); |
}); |
||||
}); |
|
||||
|
|
||||
|
it('Build correctly with more classes', () => { |
||||
it('Build correctly with more classes', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
var cls2 = m1.get('classes').add({name: 'class2'}); |
||||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add([cls1, cls2]); |
||||
var rule = cssc.add([cls1, cls2]); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;prop2:value2;}'); |
||||
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}'); |
}); |
||||
}); |
|
||||
|
it('Build rules with mixed classes', () => { |
||||
it('Build rules with mixed classes', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
var cls2 = m1.get('classes').add({name: 'class2'}); |
||||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add([cls1, cls2]); |
||||
var rule = cssc.add([cls1, cls2]); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
||||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
||||
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', () => { |
||||
it('Build rules with only not class based selectors', function() { |
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add([]); |
||||
var rule = cssc.add([]); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
||||
rule.set('selectorsAdd', '.class1 .class2, div > .class4'); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
||||
this.obj.build(comp, cssc).should.equal('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); |
}); |
||||
}); |
|
||||
|
it('Build correctly with class styled out', () => { |
||||
it('Build correctly with class styled out', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
var cls2 = m1.get('classes').add({name: 'class2'}); |
||||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add([cls1, cls2]); |
||||
var rule = cssc.add([cls1, cls2]); |
rule.set('style',{'prop1':'value1'}); |
||||
rule.set('style',{'prop1':'value1'}); |
var rule2 = cssc.add(cls2); |
||||
var rule2 = cssc.add(cls2); |
rule2.set('style',{'prop2':'value2'}); |
||||
rule2.set('style',{'prop2':'value2'}); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); |
||||
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); |
}); |
||||
}); |
|
||||
|
it('Rule with media query', () => { |
||||
it('Rule with media query', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
var cls2 = m1.get('classes').add({name: 'class2'}); |
||||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add([cls1, cls2]); |
||||
var rule = cssc.add([cls1, cls2]); |
rule.set('style',{'prop1':'value1'}); |
||||
rule.set('style',{'prop1':'value1'}); |
rule.set('mediaText', '(max-width: 999px)'); |
||||
rule.set('mediaText', '(max-width: 999px)'); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('@media (max-width: 999px){.class1.class2{prop1:value1;}}'); |
||||
this.obj.build(comp, cssc).should.equal('@media (max-width: 999px){.class1.class2{prop1:value1;}}'); |
}); |
||||
}); |
|
||||
|
it('Rules mixed with media queries', () => { |
||||
it('Rules mixed with media queries', function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
var cls2 = m1.get('classes').add({name: 'class2'}); |
||||
var cls2 = m1.get('classes').add({name: 'class2'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
|
||||
|
var rule = cssc.add([cls1, cls2]); |
||||
var rule = cssc.add([cls1, cls2]); |
rule.set('style',{'prop1':'value1'}); |
||||
rule.set('style',{'prop1':'value1'}); |
var rule2 = cssc.add(cls2); |
||||
var rule2 = cssc.add(cls2); |
rule2.set('style',{'prop2':'value2'}); |
||||
rule2.set('style',{'prop2':'value2'}); |
|
||||
|
var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); |
||||
var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); |
rule3.set('style',{'prop3':'value3'}); |
||||
rule3.set('style',{'prop3':'value3'}); |
var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); |
||||
var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); |
rule4.set('style',{'prop4':'value4'}); |
||||
rule4.set('style',{'prop4':'value4'}); |
|
||||
|
var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); |
||||
var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); |
rule5.set('style',{'prop5':'value5'}); |
||||
rule5.set('style',{'prop5':'value5'}); |
|
||||
|
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}'+ |
||||
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: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}'+ |
'@media (max-width: 100px){.class1{prop5:value5;}}'); |
||||
'@media (max-width: 100px){.class1{prop5:value5;}}'); |
}); |
||||
}); |
|
||||
|
it('Avoid useless code', () => { |
||||
it("Avoid useless code", function() { |
var m1 = comp.get('components').add({tagName: 'article'}); |
||||
var m1 = comp.get('components').add({tagName: 'article'}); |
var cls1 = m1.get('classes').add({name: 'class1'}); |
||||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|
||||
|
var cssc = newCssComp(); |
||||
var cssc = newCssComp(); |
var rule = cssc.add(cls1); |
||||
var rule = cssc.add(cls1); |
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
||||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|
||||
|
comp.get('components').remove(m1); |
||||
comp.get('components').remove(m1); |
expect(obj.build(comp, cssc)).toEqual(''); |
||||
this.obj.build(comp, cssc).should.equal(''); |
}); |
||||
}); |
}) |
||||
}) |
} |
||||
} |
}; |
||||
}; |
|
||||
|
|
||||
}); |
|
||||
|
|||||
@ -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){ |
const Command = require('commands/model/Command'); |
||||
'use strict'; |
const Commands = require('commands'); |
||||
var Commands = require('undefined'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
describe('Command', function() { |
describe('Command', () => { |
||||
var obj; |
let obj; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
obj = new Command(); |
obj = new Command(); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj; |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Has id property', function() { |
it('Has id property', () => { |
||||
obj.has('id').should.equal(true); |
expect(obj.has('id')).toEqual(true); |
||||
}); |
}); |
||||
|
|
||||
}); |
}); |
||||
|
|
||||
describe('Commands', function() { |
describe('Commands', () => { |
||||
var obj; |
var obj; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
obj = new Commands(); |
obj = new Commands(); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj; |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Object is ok', function() { |
it('Object is ok', () => { |
||||
obj.should.be.ok; |
expect(obj).toExist(); |
||||
}); |
}); |
||||
|
|
||||
}); |
}); |
||||
|
|
||||
} |
} |
||||
}; |
}; |
||||
|
|
||||
}); |
|
||||
|
|||||
@ -1,208 +1,201 @@ |
|||||
define(function(require, exports, module){ |
module.exports = { |
||||
'use strict'; |
run() { |
||||
var GrapesJS = require('GrapesJS'); |
describe('E2E tests', () => { |
||||
|
var fixtures; |
||||
module.exports = { |
var fixture; |
||||
run : function(){ |
var gjs; |
||||
describe('E2E tests', function() { |
var cssc; |
||||
|
var clsm; |
||||
var fixtures; |
var domc; |
||||
var fixture; |
var rulesSet; |
||||
var grapesjs; |
var rulesSet2; |
||||
var gjs; |
|
||||
var cssc, clsm, domc; |
before(() => { |
||||
var rulesSet; |
fixtures = $("#fixtures"); |
||||
var rulesSet2; |
fixture = $('<div class="csscomposer-fixture"></div>'); |
||||
|
}); |
||||
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; |
|
||||
}); |
|
||||
|
|
||||
after(function () { |
beforeEach(done => { |
||||
fixture.remove(); |
//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() { |
afterEach(() => { |
||||
var gj = new grapesjs.init({ |
gjs = null; |
||||
stylePrefix: '', |
cssc = null; |
||||
storageManager: { autoload: 0, type:'none' }, |
clsm = null; |
||||
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); |
|
||||
}); |
|
||||
|
|
||||
|
after(() => { |
||||
|
fixture.remove(); |
||||
|
}); |
||||
|
|
||||
it('New rule adds correctly the class inside selector manager', function() { |
it('Rules are correctly imported from default property', () => { |
||||
var rules = cssc.getAll(); |
var gj = grapesjs.init({ |
||||
rules.add({ selectors: [{name: 'test1'}] }); |
stylePrefix: '', |
||||
clsm.getAll().at(0).get('name').should.equal('test1'); |
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() { |
it('New rule adds correctly the class inside selector manager', () => { |
||||
var comps = domc.getComponents(); |
var rules = cssc.getAll(); |
||||
var rules = cssc.getAll(); |
rules.add({ selectors: [{name: 'test1'}] }); |
||||
comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>"); |
expect(clsm.getAll().at(0).get('name')).toEqual('test1'); |
||||
comps.length.should.equal(1); |
}); |
||||
rules.length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
it('Add raw rule objects with addCollection', function() { |
it('New rules are correctly imported inside selector manager', () => { |
||||
cssc.addCollection(rulesSet); |
var rules = cssc.getAll(); |
||||
cssc.getAll().length.should.equal(3); |
rulesSet.forEach(item => { |
||||
clsm.getAll().length.should.equal(3); |
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() { |
it('Add rules from the new component added as a string with style tag', () => { |
||||
var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); |
var comps = domc.getComponents(); |
||||
var coll1 = cssc.addCollection(rulesSet2); |
var rules = cssc.getAll(); |
||||
var coll2 = cssc.addCollection(rulesSet2Copy); |
comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>"); |
||||
cssc.getAll().length.should.equal(3); |
expect(comps.length).toEqual(1); |
||||
clsm.getAll().length.should.equal(3); |
expect(rules.length).toEqual(2); |
||||
coll1.should.deep.equal(coll2); |
}); |
||||
}); |
|
||||
|
|
||||
it("Extend css rule style, if requested", function() { |
it('Add raw rule objects with addCollection', () => { |
||||
var style1 = {color: 'red', width: '10px'}; |
cssc.addCollection(rulesSet); |
||||
var style2 = {height: '20px', width: '20px'}; |
expect(cssc.getAll().length).toEqual(3); |
||||
var rule1 = { |
expect(clsm.getAll().length).toEqual(3); |
||||
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 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() { |
it("Extend css rule style, if requested", () => { |
||||
var style1 = {color: 'red', width: '10px'}; |
var style1 = {color: 'red', width: '10px'}; |
||||
var style2 = {height: '20px', width: '20px'}; |
var style2 = {height: '20px', width: '20px'}; |
||||
var rule1 = { |
var rule1 = { |
||||
selectors: [], |
selectors: ['test1'], |
||||
selectorsAdd: '*', |
style: style1, |
||||
style: style1, |
}; |
||||
}; |
var rule2 = { |
||||
var rule2 = { |
selectors: ['test1'], |
||||
selectors: [], |
style: style2, |
||||
selectorsAdd: 'p', |
}; |
||||
style: style2, |
var ruleOut = cssc.addCollection(rule1)[0]; |
||||
}; |
// ruleOut is a Model
|
||||
var rule1Out = cssc.addCollection(rule1, {extend: 1})[0]; |
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
||||
var rule2Out = cssc.addCollection(rule2, {extend: 1})[0]; |
var ruleResult = { |
||||
rule1Out = JSON.parse(JSON.stringify(rule1Out)); |
mediaText: '', |
||||
rule2Out = JSON.parse(JSON.stringify(rule2Out)); |
selectors: [{ |
||||
var rule1Result = { |
active: true, |
||||
mediaText: '', |
label: 'test1', |
||||
selectors: [], |
name: 'test1', |
||||
selectorsAdd: '*', |
type: 'class', |
||||
state: '', |
}], |
||||
stylable: true, |
selectorsAdd: '', |
||||
style: { |
state: '', |
||||
color: 'red', |
stylable: true, |
||||
width: '10px' |
style: { |
||||
} |
color: 'red', |
||||
}; |
width: '10px' |
||||
var rule2Result = { |
} |
||||
mediaText: '', |
}; |
||||
selectors: [], |
expect(ruleOut).toEqual(ruleResult); |
||||
selectorsAdd: 'p', |
var ruleOut = cssc.addCollection(rule2, {extend: 1})[0]; |
||||
state: '', |
ruleOut = JSON.parse(JSON.stringify(ruleOut)); |
||||
stylable: true, |
ruleResult.style = { |
||||
style: { |
color: 'red', |
||||
height: '20px', |
height: '20px', |
||||
width: '20px', |
width: '20px', |
||||
} |
} |
||||
}; |
expect(ruleOut).toEqual(ruleResult); |
||||
rule1Out.should.deep.equal(rule1Result); |
|
||||
rule2Out.should.deep.equal(rule2Result); |
|
||||
}); |
|
||||
|
|
||||
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){ |
var CssRule = require('css_composer/model/CssRule'); |
||||
'use strict'; |
var CssRules = require('css_composer/model/CssRules'); |
||||
var Selectors = require('undefined'); |
var Selectors = require('selector_manager/model/Selectors'); |
||||
var Selector = require('SelectorManager/model/Selector'); |
var Selector = require('selector_manager/model/Selector'); |
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
describe('CssRule', function() { |
describe('CssRule', () => { |
||||
|
let obj; |
||||
beforeEach(function () { |
|
||||
this.obj = new CssRule(); |
beforeEach(() => { |
||||
}); |
obj = new CssRule(); |
||||
|
}); |
||||
afterEach(function () { |
|
||||
delete this.obj; |
afterEach(() => { |
||||
}); |
obj = null; |
||||
|
}); |
||||
it('Has selectors property', function() { |
|
||||
this.obj.has('selectors').should.equal(true); |
it('Has selectors property', () => { |
||||
}); |
expect(obj.has('selectors')).toEqual(true); |
||||
|
}); |
||||
it('Has style property', function() { |
|
||||
this.obj.has('style').should.equal(true); |
it('Has style property', () => { |
||||
}); |
expect(obj.has('style')).toEqual(true); |
||||
|
}); |
||||
it('Has state property', function() { |
|
||||
this.obj.has('state').should.equal(true); |
it('Has state property', () => { |
||||
}); |
expect(obj.has('state')).toEqual(true); |
||||
|
}); |
||||
it('No default selectors', function() { |
|
||||
this.obj.get('selectors').length.should.equal(0); |
it('No default selectors', () => { |
||||
}); |
expect(obj.get('selectors').length).toEqual(0); |
||||
|
}); |
||||
it('Compare returns true with the same selectors', function() { |
|
||||
var s1 = this.obj.get('selectors').add({ name: 'test1' }); |
it('Compare returns true with the same selectors', () => { |
||||
var s2 = this.obj.get('selectors').add({ name: 'test2' }); |
var s1 = obj.get('selectors').add({ name: 'test1' }); |
||||
this.obj.compare([s1, s2]).should.equal(true); |
var s2 = obj.get('selectors').add({ name: 'test2' }); |
||||
}); |
expect(obj.compare([s1, s2])).toEqual(true); |
||||
|
}); |
||||
it('Compare with different state', function() { |
|
||||
var s1 = this.obj.get('selectors').add({ name: 'test1' }); |
it('Compare with different state', () => { |
||||
var s2 = this.obj.get('selectors').add({ name: 'test2' }); |
var s1 = obj.get('selectors').add({ name: 'test1' }); |
||||
this.obj.set('state','hover'); |
var s2 = obj.get('selectors').add({ name: 'test2' }); |
||||
this.obj.compare([s1, s2]).should.equal(false); |
obj.set('state','hover'); |
||||
this.obj.compare([s1, s2], 'hover').should.equal(true); |
expect(obj.compare([s1, s2])).toEqual(false); |
||||
}); |
expect(obj.compare([s1, s2], 'hover')).toEqual(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); |
|
||||
}); |
|
||||
|
|
||||
|
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() { |
describe('CssRules', () => { |
||||
var c = new CssRules(); |
|
||||
var m = c.add({}); |
|
||||
m.should.be.an.instanceOf(CssRule); |
|
||||
}); |
|
||||
|
|
||||
|
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() { |
describe('Selectors', () => { |
||||
var c = new Selectors(); |
|
||||
var m = c.add({}); |
|
||||
m.should.be.an.instanceOf(Selector); |
|
||||
}); |
|
||||
|
|
||||
|
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){ |
var CssRuleView = require('css_composer/view/CssRuleView'); |
||||
'use strict'; |
var CssRule = require('css_composer/model/CssRule'); |
||||
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>'); |
|
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
module.exports = { |
||||
var m = new CssRule(); |
run() { |
||||
this.view = new CssRuleView({ |
describe('CssRuleView', () => { |
||||
model: m |
|
||||
}); |
|
||||
this.$fixture.empty().appendTo(this.$fixtures); |
|
||||
this.$fixture.html(this.view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
let obj; |
||||
this.view.model.destroy(); |
|
||||
}); |
|
||||
|
|
||||
after(function () { |
before(function () { |
||||
this.$fixture.remove(); |
this.$fixtures = $("#fixtures"); |
||||
}); |
this.$fixture = $('<div class="cssrule-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
it('Object exists', function() { |
beforeEach(function () { |
||||
CssRuleView.should.be.exist; |
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() { |
afterEach(() => { |
||||
this.view.model.get('selectors').add({name: 'test'}); |
obj.model.destroy(); |
||||
this.view.renderSelectors().should.equal('.test'); |
}); |
||||
}); |
|
||||
|
|
||||
it('Correct behaviour of renderSelectors with multiple selectors', function() { |
after(function () { |
||||
this.view.model.get('selectors').add([{name: 'test2'}, {name: 'test1'}]); |
this.$fixture.remove(); |
||||
this.view.renderSelectors().should.equal('.test2.test1'); |
}); |
||||
}); |
|
||||
|
|
||||
it('Correct behaviour of renderProperties with single property', function() { |
it('Object exists', () => { |
||||
this.view.model.set('style', {'prop': 'value'}); |
expect(CssRuleView).toExist(); |
||||
this.view.renderProperties().should.equal('prop:value;'); |
}); |
||||
}); |
|
||||
|
|
||||
it('Correct behaviour of renderProperties with multiple properties', function() { |
it('Correct behaviour of renderSelectors with single selector', () => { |
||||
this.view.model.set('style', {'prop2': 'value2', 'prop3': 'value3'}); |
obj.model.get('selectors').add({name: 'test'}); |
||||
this.view.renderProperties().should.equal('prop2:value2;prop3:value3;'); |
expect(obj.renderSelectors()).toEqual('.test'); |
||||
}); |
}); |
||||
|
|
||||
it('Empty style inside', function() { |
it('Correct behaviour of renderSelectors with multiple selectors', () => { |
||||
this.$fixture.html().should.equal('<style></style>'); |
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() { |
it('Correct behaviour of renderProperties with single property', () => { |
||||
this.view.model.set('style', {'prop':'value'}); |
obj.model.set('style', {'prop': 'value'}); |
||||
this.$fixture.html().should.equal('<style></style>'); |
expect(obj.renderProperties()).toEqual('prop:value;'); |
||||
}); |
}); |
||||
|
|
||||
describe('CssRuleView with selectors', function() { |
it('Correct behaviour of renderProperties with multiple properties', () => { |
||||
|
obj.model.set('style', {'prop2': 'value2', 'prop3': 'value3'}); |
||||
beforeEach(function () { |
expect(obj.renderProperties()).toEqual('prop2:value2;prop3:value3;'); |
||||
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('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){ |
var CssRulesView = require('css_composer/view/CssRulesView'); |
||||
'use strict'; |
var CssRules = require('css_composer/model/CssRules'); |
||||
var CssRulesView = require('undefined'); |
|
||||
var CssRules = require('CssComposer/model/CssRules'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
describe('CssRulesView', () => { |
||||
run : function(){ |
|
||||
describe('CssRulesView', function() { |
let obj; |
||||
|
|
||||
before(function () { |
before(function () { |
||||
this.$fixtures = $("#fixtures"); |
this.$fixtures = $("#fixtures"); |
||||
this.$fixture = $('<div class="cssrules-fixture"></div>'); |
this.$fixture = $('<div class="cssrules-fixture"></div>'); |
||||
}); |
}); |
||||
|
|
||||
beforeEach(function () { |
beforeEach(function () { |
||||
var col = new CssRules([]); |
var col = new CssRules([]); |
||||
this.view = new CssRulesView({ |
obj = new CssRulesView({ |
||||
collection: col |
collection: col |
||||
}); |
}); |
||||
this.$fixture.empty().appendTo(this.$fixtures); |
this.$fixture.empty().appendTo(this.$fixtures); |
||||
this.$fixture.html(this.view.render().el); |
this.$fixture.html(obj.render().el); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
this.view.collection.reset(); |
obj.collection.reset(); |
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(function () { |
||||
this.$fixture.remove(); |
this.$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it('Object exists', function() { |
it('Object exists', () => { |
||||
CssRulesView.should.be.exist; |
expect(CssRulesView).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it("Collection is empty", function (){ |
it("Collection is empty", () => { |
||||
this.view.$el.html().should.be.empty; |
expect(obj.$el.html()).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it("Add new rule", function (){ |
it("Add new rule", () => { |
||||
sinon.stub(this.view, "addToCollection"); |
sinon.stub(obj, "addToCollection"); |
||||
this.view.collection.add({}); |
obj.collection.add({}); |
||||
this.view.addToCollection.calledOnce.should.equal(true); |
expect(obj.addToCollection.calledOnce).toExist(true); |
||||
}); |
}); |
||||
|
|
||||
it("Render new rule", function (){ |
it("Render new rule", () => { |
||||
this.view.collection.add({}); |
obj.collection.add({}); |
||||
this.view.$el.html().should.not.be.empty; |
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){ |
const DevicesView = require('device_manager/view/DevicesView'); |
||||
'use strict'; |
const Devices = require('device_manager/model/Devices'); |
||||
var DevicesView = require('undefined'); |
|
||||
var Devices = require('DeviceManager/model/Devices'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
describe('DevicesView', () => { |
||||
run : function(){ |
|
||||
describe('DevicesView', function() { |
var $fixtures; |
||||
|
var $fixture; |
||||
var $fixtures; |
var model; |
||||
var $fixture; |
var view; |
||||
var model; |
var editorModel; |
||||
var view; |
|
||||
var editorModel; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
|
$fixture = $('<div class="devices-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
before(function () { |
beforeEach(() => { |
||||
$fixtures = $("#fixtures"); |
model = new Devices([]); |
||||
$fixture = $('<div class="devices-fixture"></div>'); |
view = new DevicesView({ |
||||
}); |
collection: model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
beforeEach(function () { |
afterEach(() => { |
||||
model = new Devices([]); |
view.collection.reset(); |
||||
view = new DevicesView({ |
}); |
||||
collection: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
after(() => { |
||||
view.collection.reset(); |
$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
after(function () { |
it("The content is not empty", () => { |
||||
$fixture.remove(); |
expect(view.el.innerHTML).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it("The content is not empty", function (){ |
it("No options without devices", () => { |
||||
view.el.innerHTML.should.be.not.empty; |
expect(view.getOptions()).toEqual(''); |
||||
}); |
}); |
||||
|
|
||||
it("No options without devices", function (){ |
it("Render new button", () => { |
||||
view.getOptions().should.equal(''); |
view.collection.add({}); |
||||
}); |
expect(view.$el.html()).toExist(); |
||||
|
}); |
||||
|
|
||||
it("Render new button", function (){ |
describe('With configs', () => { |
||||
view.collection.add({}); |
|
||||
view.$el.html().should.not.be.empty; |
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 () { |
it("Render options", () => { |
||||
editorModel = new Backbone.Model(); |
expect(view.getOptions()).toEqual('<option value="test1">test1</option><option value="test2">test2</option>'); |
||||
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>'); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -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){ |
const DomComponents = require('dom_components'); |
||||
'use strict'; |
const Component = require('dom_components/model/Component'); |
||||
var DomComponents = require('DomComponents'); |
const ComponentImage = require('dom_components/model/ComponentImage'); |
||||
var Component = require('DomComponents/model/Component'); |
const ComponentText = require('dom_components/model/ComponentText'); |
||||
var ComponentImage = require('DomComponents/model/ComponentImage'); |
const ComponentLink = require('dom_components/model/ComponentLink'); |
||||
var ComponentText = require('DomComponents/model/ComponentText'); |
const ComponentMap = require('dom_components/model/ComponentMap'); |
||||
var ComponentLink = require('DomComponents/model/ComponentLink'); |
const ComponentVideo = require('dom_components/model/ComponentVideo'); |
||||
var ComponentMap = require('DomComponents/model/ComponentMap'); |
const Components = require('dom_components/model/Components'); |
||||
var ComponentVideo = require('DomComponents/model/ComponentVideo'); |
|
||||
var Components = require('DomComponents/model/Components'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
var obj; |
||||
run : function(){ |
var dcomp; |
||||
var obj; |
var compOpts; |
||||
var dcomp; |
|
||||
var compOpts; |
describe('Component', () => { |
||||
|
|
||||
describe('Component', function() { |
beforeEach(() => { |
||||
|
obj = new Component(); |
||||
beforeEach(function () { |
dcomp = new DomComponents(); |
||||
obj = new Component(); |
compOpts = { |
||||
dcomp = new DomComponents(); |
defaultTypes: dcomp.componentTypes, |
||||
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>'); |
|
||||
}); |
|
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
}); |
}); |
||||
|
|
||||
describe('Link Component', function() { |
it('Has no children', () => { |
||||
|
expect(obj.get('components').length).toEqual(0); |
||||
|
}); |
||||
|
|
||||
it('Component parse a element', function() { |
it('Clones correctly', () => { |
||||
var el = document.createElement('a'); |
var sAttr = obj.attributes; |
||||
obj = ComponentLink.isComponent(el); |
var cloned = obj.clone(); |
||||
obj.should.deep.equal({type: 'link'}); |
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() { |
it('Component toHTML with attributes', () => { |
||||
var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed'; |
obj = new Component({ |
||||
var el = $('<iframe src="' + src + '"></iframe>'); |
tagName: 'article', |
||||
obj = ComponentMap.isComponent(el.get(0)); |
attributes: { |
||||
obj.should.deep.equal({type: 'map', src: src}); |
'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() { |
it('Component toHTML with classes', () => { |
||||
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>'); |
obj = new Component({ |
||||
obj = ComponentMap.isComponent(el.get(0)); |
tagName: 'article' |
||||
obj.should.equal(''); |
|
||||
}); |
}); |
||||
|
['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() { |
it('Component toHTML with no closing tag', () => { |
||||
var src = 'http://localhost/'; |
obj = new Component({void: 1}); |
||||
var el = $('<video src="' + src + '"></video>'); |
expect(obj.toHTML()).toEqual('<div/>'); |
||||
obj = ComponentVideo.isComponent(el.get(0)); |
}); |
||||
obj.should.deep.equal({type: 'video'}); //src: src
|
|
||||
}); |
|
||||
|
|
||||
it('Component parse youtube video iframe', function() { |
it('Component parse empty div', () => { |
||||
var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; |
var el = document.createElement('div'); |
||||
var el = $('<iframe src="' + src + '"></video>'); |
obj = Component.isComponent(el); |
||||
obj = ComponentVideo.isComponent(el.get(0)); |
expect(obj).toEqual({tagName: 'div'}); |
||||
obj.should.deep.equal({type: 'video', provider: 'yt', src: src}); |
}); |
||||
}); |
|
||||
|
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() { |
it('Component toHTML with attributes', () => { |
||||
var src = 'http://player.vimeo.com/video/2?'; |
obj = new ComponentImage({ |
||||
var el = $('<iframe src="' + src + '"></video>'); |
attributes: {'alt': 'AltTest'}, |
||||
obj = ComponentVideo.isComponent(el.get(0)); |
src: 'testPath' |
||||
obj.should.deep.equal({type: 'video', provider: 'vi', src: src}); |
|
||||
}); |
}); |
||||
|
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() { |
describe('Link Component', () => { |
||||
var c = new Components({}, compOpts); |
|
||||
var m = c.add({}); |
|
||||
m.should.be.an.instanceOf(Component); |
|
||||
}); |
|
||||
|
|
||||
it('Creates image component correctly', function() { |
it('Component parse a element', () => { |
||||
var c = new Components({}, compOpts); |
var el = document.createElement('a'); |
||||
var m = c.add({ type: 'image' }); |
obj = ComponentLink.isComponent(el); |
||||
m.should.be.an.instanceOf(ComponentImage); |
expect(obj).toEqual({type: 'link'}); |
||||
}); |
}); |
||||
|
|
||||
it('Creates text component correctly', function() { |
}); |
||||
var c = new Components({}, compOpts); |
|
||||
var m = c.add({ type: 'text' }); |
describe('Map Component', () => { |
||||
m.should.be.an.instanceOf(ComponentText); |
|
||||
}); |
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){ |
const ComponentImageView = require('dom_components/view/ComponentImageView'); |
||||
'use strict'; |
const Component = require('dom_components/model/Component'); |
||||
var ComponentImageView = require('undefined'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('ComponentImageView', () => { |
||||
|
|
||||
describe('ComponentImageView', function() { |
var $fixtures; |
||||
|
var $fixture; |
||||
var $fixtures; |
var model; |
||||
var $fixture; |
var view; |
||||
var model; |
|
||||
var view; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
before(function () { |
$fixture = $('<div class="components-fixture"></div>'); |
||||
$fixtures = $("#fixtures"); |
}); |
||||
$fixture = $('<div class="components-fixture"></div>'); |
|
||||
}); |
beforeEach(() => { |
||||
|
model = new Component(); |
||||
beforeEach(function () { |
view = new ComponentImageView({ |
||||
model = new Component(); |
model |
||||
view = new ComponentImageView({ |
}); |
||||
model: model |
$fixture.empty().appendTo($fixtures); |
||||
}); |
$fixture.html(view.render().el); |
||||
$fixture.empty().appendTo($fixtures); |
}); |
||||
$fixture.html(view.render().el); |
|
||||
}); |
afterEach(() => { |
||||
|
view.remove(); |
||||
afterEach(function () { |
}); |
||||
view.remove(); |
|
||||
}); |
after(() => { |
||||
|
$fixture.remove(); |
||||
after(function () { |
}); |
||||
$fixture.remove(); |
|
||||
}); |
it('Component empty', () => { |
||||
|
expect(view.el.getAttribute('onmousedown')).toEqual('return false'); |
||||
it('Component empty', function() { |
expect(view.el.getAttribute('class')).toEqual(view.classEmpty); |
||||
view.el.getAttribute('onmousedown').should.equal('return false'); |
}); |
||||
view.el.getAttribute('class').should.equal(view.classEmpty); |
|
||||
}); |
it('TagName is <img>', () => { |
||||
|
expect(view.el.tagName).toEqual('IMG'); |
||||
it('TagName is <img>', function() { |
}); |
||||
view.el.tagName.should.equal('IMG'); |
|
||||
}); |
it('Update src attribute', () => { |
||||
|
model.set('src', './'); |
||||
it('Update src attribute', function() { |
expect(view.el.getAttribute('src')).toEqual('./'); |
||||
model.set('src','./'); |
}); |
||||
view.el.getAttribute('src').should.equal('./'); |
|
||||
}); |
it('Renders correctly', () => { |
||||
|
expect(view.render()).toExist(); |
||||
it('Renders correctly', function() { |
}); |
||||
view.render().should.be.ok; |
}); |
||||
}); |
} |
||||
}); |
}; |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
|
||||
|
|||||
@ -1,59 +1,55 @@ |
|||||
define(function(require, exports, module){ |
const ComponentTextView = require('dom_components/view/ComponentTextView'); |
||||
'use strict'; |
const Component = require('dom_components/model/Component'); |
||||
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'); |
|
||||
}); |
|
||||
|
|
||||
|
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){ |
const ComponentView = require('dom_components/view/ComponentView'); |
||||
'use strict'; |
const Component = require('dom_components/model/Component'); |
||||
var ComponentView = require('undefined'); |
const DomComponents = require('dom_components'); |
||||
var Component = require('DomComponents/model/Component'); |
|
||||
var DomComponents = require('DomComponents'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('ComponentView', () => { |
||||
|
|
||||
describe('ComponentView', function() { |
var $fixtures; |
||||
|
var $fixture; |
||||
var $fixtures; |
var model; |
||||
var $fixture; |
var view; |
||||
var model; |
var hClass = 'hc-state'; |
||||
var view; |
var dcomp; |
||||
var hClass = 'hc-state'; |
var compOpts; |
||||
var dcomp; |
|
||||
var compOpts; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
before(function () { |
$fixture = $('<div class="components-fixture"></div>'); |
||||
$fixtures = $("#fixtures"); |
}); |
||||
$fixture = $('<div class="components-fixture"></div>'); |
|
||||
}); |
beforeEach(() => { |
||||
|
dcomp = new DomComponents(); |
||||
beforeEach(function () { |
compOpts = { |
||||
dcomp = new DomComponents(); |
defaultTypes: dcomp.componentTypes, |
||||
compOpts = { |
}; |
||||
defaultTypes: dcomp.componentTypes, |
model = new Component(); |
||||
}; |
view = new ComponentView({ |
||||
model = new Component(); |
model |
||||
view = new ComponentView({ |
}); |
||||
model: model |
$fixture.empty().appendTo($fixtures); |
||||
}); |
$fixture.html(view.render().el); |
||||
$fixture.empty().appendTo($fixtures); |
}); |
||||
$fixture.html(view.render().el); |
|
||||
}); |
afterEach(() => { |
||||
|
view.remove(); |
||||
afterEach(function () { |
}); |
||||
view.remove(); |
|
||||
}); |
after(() => { |
||||
|
$fixture.remove(); |
||||
after(function () { |
}); |
||||
$fixture.remove(); |
|
||||
}); |
it('Component empty', () => { |
||||
|
expect($fixture.html()).toEqual('<div data-highlightable="1"></div>'); |
||||
it('Component empty', function() { |
}); |
||||
$fixture.html().should.equal('<div data-highlightable="1"></div>'); |
|
||||
}); |
it('Add helper class on update of state', () => { |
||||
|
model.set('state', 'test'); |
||||
it('Add helper class on update of state', function() { |
expect($fixture.html()).toEqual('<div data-highlightable="1" class="' + hClass + '"></div>'); |
||||
model.set('state', 'test'); |
}); |
||||
$fixture.html().should.equal('<div data-highlightable="1" class="' + hClass + '"></div>'); |
|
||||
}); |
it('Clean form helper state', () => { |
||||
|
model.set('state', 'test'); |
||||
it('Clean form helper state', function() { |
model.set('state', ''); |
||||
model.set('state', 'test'); |
expect($fixture.html()).toEqual('<div data-highlightable="1" class=""></div>'); |
||||
model.set('state', ''); |
}); |
||||
$fixture.html().should.equal('<div data-highlightable="1" class=""></div>'); |
|
||||
}); |
it('Add helper class on status update', () => { |
||||
|
model.set('status', 'selected'); |
||||
it('Add helper class on status update', function() { |
expect($fixture.html()).toEqual('<div data-highlightable="1" class="selected"></div>'); |
||||
model.set('status', 'selected'); |
}); |
||||
$fixture.html().should.equal('<div data-highlightable="1" class="selected"></div>'); |
|
||||
}); |
it('Get string of classes', () => { |
||||
|
model.set('attributes', { class: ['test', 'test2']}); |
||||
it('Get string of classes', function() { |
expect(view.getClasses()).toEqual('test test2'); |
||||
model.set('attributes', { class: ['test', 'test2']}); |
}); |
||||
view.getClasses().should.equal('test test2'); |
|
||||
}); |
it('Update attributes', () => { |
||||
|
model.set('attributes', { |
||||
it('Update attributes', function() { |
title: 'value', |
||||
model.set('attributes', { |
'data-test': 'value2', |
||||
title: 'value', |
}); |
||||
'data-test': 'value2', |
expect(view.el.getAttribute('title')).toEqual('value'); |
||||
}); |
expect(view.el.getAttribute('data-test')).toEqual('value2'); |
||||
view.el.getAttribute('title').should.equal('value'); |
}); |
||||
view.el.getAttribute('data-test').should.equal('value2'); |
|
||||
}); |
it('Update style', () => { |
||||
|
model.set('style', { |
||||
it('Update style', function() { |
color: 'red', |
||||
model.set('style', { |
float: 'left' |
||||
color: 'red', |
}); |
||||
float: 'left' |
expect(view.el.getAttribute('style')).toEqual('color:red;float:left;'); |
||||
}); |
}); |
||||
view.el.getAttribute('style').should.equal('color:red;float:left;'); |
|
||||
}); |
it('Clean style', () => { |
||||
|
model.set('style', { color: 'red'}); |
||||
it('Clean style', function() { |
model.set('style', {}); |
||||
model.set('style', { color: 'red'}); |
expect(view.el.getAttribute('style')).toEqual(''); |
||||
model.set('style', {}); |
}); |
||||
view.el.getAttribute('style').should.equal(''); |
|
||||
}); |
it('Get style string', () => { |
||||
|
model.set('style', { |
||||
it('Get style string', function() { |
color: 'red', |
||||
model.set('style', { |
float: 'left' |
||||
color: 'red', |
}); |
||||
float: 'left' |
expect(view.getStyleString()).toEqual('color:red;float:left;'); |
||||
}); |
}); |
||||
view.getStyleString().should.equal('color:red;float:left;'); |
|
||||
}); |
it('Add class', () => { |
||||
|
model.get('classes').add({name: 'test'}); |
||||
it('Add class', function() { |
expect(view.el.getAttribute('class')).toEqual('test'); |
||||
model.get('classes').add({name: 'test'}); |
}); |
||||
view.el.getAttribute('class').should.equal('test'); |
|
||||
}); |
it('Add classes', () => { |
||||
|
model.get('classes').add([{name: 'test'}, {name: 'test2'}]); |
||||
it('Add classes', function() { |
expect(view.el.getAttribute('class')).toEqual('test test2'); |
||||
model.get('classes').add([{name: 'test'}, {name: 'test2'}]); |
}); |
||||
view.el.getAttribute('class').should.equal('test test2'); |
|
||||
}); |
it('Update on remove of some class', () => { |
||||
|
var cls1 = model.get('classes').add({name: 'test'}); |
||||
it('Update on remove of some class', function() { |
var cls12 = model.get('classes').add({name: 'test2'}); |
||||
var cls1 = model.get('classes').add({name: 'test'}); |
model.get('classes').remove(cls1); |
||||
var cls12 = model.get('classes').add({name: 'test2'}); |
expect(view.el.getAttribute('class')).toEqual('test2'); |
||||
model.get('classes').remove(cls1); |
}); |
||||
view.el.getAttribute('class').should.equal('test2'); |
|
||||
}); |
it('Init with different tag', () => { |
||||
|
model = new Component({ tagName: 'span' }); |
||||
it('Init with different tag', function() { |
view = new ComponentView({ model }); |
||||
model = new Component({ tagName: 'span' }); |
expect(view.render().el.tagName).toEqual('SPAN'); |
||||
view = new ComponentView({ model: model }); |
}); |
||||
view.render().el.tagName.should.equal('SPAN'); |
|
||||
}); |
it('Init with nested components', () => { |
||||
|
model = new Component({ |
||||
it('Init with nested components', function() { |
components: [ |
||||
model = new Component({ |
{ tagName: 'span'}, |
||||
components: [ |
{ attributes: { title: 'test'}} |
||||
{ tagName: 'span'}, |
] |
||||
{ attributes: { title: 'test'}} |
}, compOpts); |
||||
] |
view = new ComponentView({ |
||||
}, compOpts); |
model, |
||||
view = new ComponentView({ |
defaultTypes: dcomp.componentTypes, |
||||
model: model, |
}); |
||||
defaultTypes: dcomp.componentTypes, |
expect(view.render().$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>'); |
||||
}); |
}); |
||||
view.render().$el.html().should.equal('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>'); |
|
||||
}); |
}); |
||||
|
} |
||||
}); |
}; |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
|
||||
|
|||||
@ -1,64 +1,60 @@ |
|||||
define(function(require, exports, module){ |
const DomComponents = require('dom_components'); |
||||
'use strict'; |
const ComponentsView = require('dom_components/view/ComponentsView'); |
||||
var DomComponents = require('DomComponents'); |
const Components = require('dom_components/model/Components'); |
||||
var ComponentsView = require('undefined'); |
|
||||
var Components = require('DomComponents/model/Components'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
describe('ComponentsView', () => { |
||||
run : function(){ |
|
||||
describe('ComponentsView', function() { |
var $fixtures; |
||||
|
var $fixture; |
||||
var $fixtures; |
var model; |
||||
var $fixture; |
var view; |
||||
var model; |
var dcomp; |
||||
var view; |
var compOpts; |
||||
var dcomp; |
|
||||
var compOpts; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
before(function () { |
$fixture = $('<div class="components-fixture"></div>'); |
||||
$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); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
view.collection.reset(); |
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 () { |
afterEach(() => { |
||||
$fixture.remove(); |
view.collection.reset(); |
||||
}); |
}); |
||||
|
|
||||
it("Collection is empty", function (){ |
after(() => { |
||||
view.$el.html().should.be.empty; |
$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it("Add new component", function (){ |
it("Collection is empty", () => { |
||||
sinon.stub(view, "addToCollection"); |
expect(view.$el.html()).toNotExist(); |
||||
view.collection.add({}); |
}); |
||||
view.addToCollection.calledOnce.should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it("Render new component", function (){ |
it("Add new component", () => { |
||||
view.collection.add({}); |
sinon.stub(view, "addToCollection"); |
||||
view.$el.html().should.not.be.empty; |
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){ |
const ModalView = require('modal_dialog/view/ModalView'); |
||||
'use strict'; |
const Modal = require('modal_dialog/model/Modal'); |
||||
var ModalView = require('undefined'); |
|
||||
var Modal = require('ModalDialog/model/Modal'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
describe('ModalView', function() { |
describe('ModalView', () => { |
||||
|
|
||||
var $fixtures; |
var $fixtures; |
||||
var $fixture; |
var $fixture; |
||||
var model; |
var model; |
||||
var view; |
var view; |
||||
var editorModel; |
var editorModel; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture= $('<div class="modal-fixture"></div>'); |
$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); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
delete view; |
model = new Modal(); |
||||
delete model; |
view = new ModalView({ |
||||
}); |
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
view = null; |
||||
}); |
model = null; |
||||
|
}); |
||||
|
|
||||
it("The content is not empty", function (){ |
after(() => { |
||||
view.el.innerHTML.should.be.not.empty; |
$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it("Get content", function (){ |
it("The content is not empty", () => { |
||||
view.getContent().should.be.ok; |
expect(view.el.innerHTML).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it("Update content", function (){ |
it("Get content", () => { |
||||
model.set('content', 'test'); |
expect(view.getContent()).toExist(); |
||||
view.getContent().get(0).innerHTML.should.equal('test'); |
}); |
||||
}); |
|
||||
|
|
||||
it("Get title", function (){ |
it("Update content", () => { |
||||
view.getTitle().should.be.ok; |
model.set('content', 'test'); |
||||
}); |
expect(view.getContent().get(0).innerHTML).toEqual('test'); |
||||
|
}); |
||||
|
|
||||
it("Update title", function (){ |
it("Get title", () => { |
||||
model.set('title', 'test'); |
expect(view.getTitle()).toExist(); |
||||
view.getTitle().innerHTML.should.equal('test'); |
}); |
||||
}); |
|
||||
|
|
||||
it("Close by default", function (){ |
it("Update title", () => { |
||||
view.updateOpen(); |
model.set('title', 'test'); |
||||
view.el.style.display.should.equal('none'); |
expect(view.getTitle().innerHTML).toEqual('test'); |
||||
}); |
}); |
||||
|
|
||||
it("Open dialog", function (){ |
it("Close by default", () => { |
||||
model.set('open', 1); |
view.updateOpen(); |
||||
view.el.style.display.should.equal(''); |
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){ |
module.exports = { |
||||
'use strict'; |
run() { |
||||
var GrapesJS = require('GrapesJS'); |
|
||||
|
|
||||
module.exports = { |
describe('E2E tests', () => { |
||||
run : function(){ |
|
||||
|
|
||||
describe('E2E tests', function() { |
var fixtures; |
||||
|
var fixture; |
||||
|
var obj; |
||||
|
var config; |
||||
|
var editorName = 'panel-fixture'; |
||||
|
|
||||
var fixtures; |
before(() => { |
||||
var fixture; |
fixtures = $("#fixtures"); |
||||
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); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
delete obj; |
obj = grapesjs; |
||||
delete config; |
config = { |
||||
fixture.remove(); |
container: '#' + editorName, |
||||
}); |
storageManager: { autoload: 0, type:'none' }, |
||||
|
}; |
||||
|
fixture = $('<div id="' + editorName + '"></div>'); |
||||
|
fixture.empty().appendTo(fixtures); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
fixture.remove(); |
obj = null; |
||||
}); |
config = null; |
||||
|
fixture.remove(); |
||||
|
}); |
||||
|
|
||||
it('Command is correctly executed on button click', function() { |
after(() => { |
||||
var commandId = 'command-test'; |
//fixture.remove();
|
||||
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); |
|
||||
}); |
|
||||
|
|
||||
|
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){ |
const Panels = require('panels'); |
||||
'use strict'; |
const Button = require('panels/model/Button'); |
||||
var Panels = require('undefined'); |
const Buttons = require('panels/model/Buttons'); |
||||
|
const Panel = require('panels/model/Panel'); |
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
describe('Button', function() { |
describe('Button', () => { |
||||
|
|
||||
var obj; |
var obj; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
obj = new Button(); |
obj = new Button(); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj; |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Has buttons instance', function() { |
it('Has buttons instance', () => { |
||||
obj.has('buttons').should.equal(true); |
expect(obj.has('buttons')).toEqual(true); |
||||
}); |
}); |
||||
|
|
||||
it('Has no buttons', function() { |
it('Has no buttons', () => { |
||||
obj.get('buttons').length.should.equal(0); |
expect(obj.get('buttons').length).toEqual(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('Init with other buttons inside correctly', () => { |
||||
|
obj = new Button({ |
||||
|
buttons: [{}] |
||||
}); |
}); |
||||
|
expect(obj.get('buttons') instanceof Buttons).toEqual(true); |
||||
describe('Panel', function() { |
expect(obj.get('buttons').length).toEqual(1); |
||||
var obj; |
}); |
||||
|
|
||||
beforeEach(function () { |
}); |
||||
obj = new Panel(); |
|
||||
}); |
describe('Buttons', () => { |
||||
|
var obj; |
||||
afterEach(function () { |
|
||||
delete obj; |
beforeEach(() => { |
||||
}); |
obj = new Buttons(); |
||||
|
}); |
||||
it('Has buttons instance', function() { |
|
||||
obj.has('buttons').should.equal(true); |
afterEach(() => { |
||||
obj.get('buttons').should.be.instanceOf(Buttons); |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Has no buttons', function() { |
it('Deactivates buttons', () => { |
||||
obj.get('buttons').length.should.equal(0); |
obj.add({ active: true }); |
||||
}); |
obj.deactivateAll(); |
||||
|
expect(obj.at(0).get('active')).toEqual(false); |
||||
it('Init with buttons inside correctly', function() { |
}); |
||||
obj = new Panel({ |
|
||||
buttons: [{}] |
it('Deactivates buttons with context', () => { |
||||
}); |
obj.add({ active: true }); |
||||
obj.get('buttons').should.be.instanceOf(Buttons); |
obj.deactivateAll('someContext'); |
||||
obj.get('buttons').length.should.equal(1); |
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 () { |
describe('Panels', () => { |
||||
obj = new Panel(); |
var obj; |
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
delete obj; |
obj = new Panel(); |
||||
}); |
}); |
||||
|
|
||||
}); |
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
} |
}); |
||||
}; |
|
||||
|
|
||||
}); |
} |
||||
|
}; |
||||
|
|||||
@ -1,77 +1,73 @@ |
|||||
define(function(require, exports, module){ |
const ButtonView = require('panels/view/ButtonView'); |
||||
'use strict'; |
const Button = require('panels/model/Button'); |
||||
var ButtonView = require('undefined'); |
|
||||
var Button = require('Panels/model/Button'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
|
|
||||
describe('ButtonView', function() { |
describe('ButtonView', () => { |
||||
|
|
||||
var $fixtures; |
var $fixtures; |
||||
var $fixture; |
var $fixture; |
||||
var model; |
var model; |
||||
var view; |
var view; |
||||
var btnClass = 'btn'; |
var btnClass = 'btn'; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture = $('<div class="cssrule-fixture"></div>'); |
$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); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
view.remove(); |
model = new Button(); |
||||
}); |
view = new ButtonView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
view.remove(); |
||||
}); |
}); |
||||
|
|
||||
it('Button empty', function() { |
after(() => { |
||||
$fixture.html().should.be.equal('<span class="' + btnClass+ '"></span>'); |
$fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it('Update class', function() { |
it('Button empty', () => { |
||||
model.set('className','test'); |
expect($fixture.html()).toEqual('<span class="' + btnClass+ '"></span>'); |
||||
view.el.getAttribute('class').should.be.equal(btnClass + ' test'); |
}); |
||||
}); |
|
||||
|
|
||||
it('Update attributes', function() { |
it('Update class', () => { |
||||
model.set('attributes',{ |
model.set('className','test'); |
||||
'data-test': 'test-value' |
expect(view.el.getAttribute('class')).toEqual(btnClass + ' test'); |
||||
}); |
}); |
||||
view.el.getAttribute('data-test').should.be.equal('test-value'); |
|
||||
}); |
|
||||
|
|
||||
it('Check enable active', function() { |
it('Update attributes', () => { |
||||
model.set('active', true, {silent: true}); |
model.set('attributes',{ |
||||
view.checkActive(); |
'data-test': 'test-value' |
||||
view.el.getAttribute('class').should.be.equal(btnClass + ' active'); |
}); |
||||
}); |
expect(view.el.getAttribute('data-test')).toEqual('test-value'); |
||||
|
}); |
||||
|
|
||||
it('Check disable active', function() { |
it('Check enable active', () => { |
||||
model.set('active', true, {silent: true}); |
model.set('active', true, {silent: true}); |
||||
view.checkActive(); |
view.checkActive(); |
||||
model.set('active', false, {silent: true}); |
expect(view.el.getAttribute('class')).toEqual(btnClass + ' active'); |
||||
view.checkActive(); |
}); |
||||
view.el.getAttribute('class').should.be.equal(btnClass); |
|
||||
}); |
|
||||
|
|
||||
it('Renders correctly', function() { |
it('Check disable active', () => { |
||||
view.render().should.be.ok; |
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