mirror of https://github.com/artf/grapesjs.git
thecodefish
9 years ago
89 changed files with 5870 additions and 4537 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
@ -0,0 +1,20 @@ |
|||||
|
var Component = require('./Component'); |
||||
|
|
||||
|
module.exports = Component.extend({ |
||||
|
|
||||
|
getName() { |
||||
|
let name = this.get('tagName'); |
||||
|
let customName = this.get('custom-name'); |
||||
|
name = name.charAt(0).toUpperCase() + name.slice(1); |
||||
|
return customName || name; |
||||
|
}, |
||||
|
|
||||
|
}, { |
||||
|
|
||||
|
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,60 @@ |
|||||
|
export default { |
||||
|
|
||||
|
/** |
||||
|
* To trigger the style change event on models I have to |
||||
|
* pass a new object instance |
||||
|
* @param {Object} prop |
||||
|
* @return {Object} |
||||
|
*/ |
||||
|
extendStyle(prop) { |
||||
|
return Object.assign({}, this.getStyle(), prop); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get style object |
||||
|
* @return {Object} |
||||
|
*/ |
||||
|
getStyle() { |
||||
|
return this.get('style'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Set new style object |
||||
|
* @param {Object} prop |
||||
|
* @param {Object} opts |
||||
|
*/ |
||||
|
setStyle(prop = {}, opts = {}) { |
||||
|
this.set('style', Object.assign({}, prop), opts); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Add style property |
||||
|
* @param {Object|string} prop |
||||
|
* @param {string} value |
||||
|
* @example |
||||
|
* this.addStyle({color: 'red'}); |
||||
|
* this.addStyle('color', 'blue'); |
||||
|
*/ |
||||
|
addStyle(prop, value = '', opts = {}) { |
||||
|
if (typeof prop == 'string') { |
||||
|
prop = { |
||||
|
prop: value |
||||
|
}; |
||||
|
} else { |
||||
|
opts = value || {}; |
||||
|
} |
||||
|
|
||||
|
prop = this.extendStyle(prop); |
||||
|
this.setStyle(prop, opts); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Remove style property |
||||
|
* @param {string} prop |
||||
|
*/ |
||||
|
removeStyle(prop) { |
||||
|
let style = Object.assign({}, this.getStyle()); |
||||
|
delete style[prop]; |
||||
|
this.setStyle(style); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,454 @@ |
|||||
|
|
||||
|
.#{$sm-prefix} { |
||||
|
&clear { |
||||
|
font-size: 1rem; |
||||
|
line-height: 0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}close-btn { |
||||
|
display: block; |
||||
|
font-size: 23px; |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
right: 5px; |
||||
|
top: 0; |
||||
|
|
||||
|
@include opacity(0.2); |
||||
|
|
||||
|
&:hover { |
||||
|
@include opacity(0.7); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}header { |
||||
|
font-size: 11px; |
||||
|
font-weight: lighter; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}sector { |
||||
|
clear: both; |
||||
|
font-weight: lighter; |
||||
|
text-align: left; |
||||
|
|
||||
|
##{$sm-prefix}caret { |
||||
|
padding-right: 5px; |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}open { |
||||
|
@extend .#{$app-prefix}category-open; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}title { |
||||
|
@extend .#{$app-prefix}category-title; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}label { |
||||
|
margin: 5px 5px 2px 0; |
||||
|
} |
||||
|
|
||||
|
/* ------------------Field-------------------- */ |
||||
|
|
||||
|
.#{$sm-prefix}field { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
input, |
||||
|
select { |
||||
|
background-color: transparent; |
||||
|
color: $mainLhlColor; |
||||
|
border: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
select { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
|
||||
|
@include appearance(none); |
||||
|
|
||||
|
&::-ms-expand { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
select:-moz-focusring { |
||||
|
color: transparent; |
||||
|
text-shadow: 0 0 0 $mainLhlColor; |
||||
|
} |
||||
|
|
||||
|
input:focus, |
||||
|
select:focus { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}unit { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 3px; |
||||
|
font-size: 10px; |
||||
|
color: $mainLhlColor; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.#{$clm-prefix}sel-arrow, |
||||
|
.#{$sm-prefix}int-arrows, |
||||
|
.#{$sm-prefix}sel-arrow { |
||||
|
height: 100%; |
||||
|
width: 9px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
cursor: ns-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}sel-arrow { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.#{$clm-prefix}d-s-arrow, |
||||
|
.#{$sm-prefix}d-arrow, |
||||
|
.#{$sm-prefix}d-s-arrow, |
||||
|
.#{$sm-prefix}u-arrow { |
||||
|
position: absolute; |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
border-left: 3px solid transparent; |
||||
|
border-right: 4px solid transparent; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}u-arrow { |
||||
|
border-bottom: 4px solid $mainLhlColor; |
||||
|
top: 4px; |
||||
|
} |
||||
|
|
||||
|
.#{$clm-prefix}d-s-arrow, |
||||
|
.#{$sm-prefix}d-arrow, |
||||
|
.#{$sm-prefix}d-s-arrow { |
||||
|
border-top: 4px solid $mainLhlColor; |
||||
|
bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.#{$clm-prefix}d-s-arrow, |
||||
|
.#{$sm-prefix}d-s-arrow { |
||||
|
bottom: 7px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}color, |
||||
|
&.#{$sm-prefix}input, |
||||
|
&.#{$sm-prefix}integer, |
||||
|
&.#{$sm-prefix}list, |
||||
|
&.#{$sm-prefix}select { |
||||
|
background-color: $mainDkColor; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 1px 1px 0 $mainLhColor; |
||||
|
color: $mainLhlColor; |
||||
|
border-radius: 2px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}composite { |
||||
|
@extend .#{$app-prefix}color-main; |
||||
|
|
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}select { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}select select { |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}select option { |
||||
|
padding: 3px 0; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}composite { |
||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.25); |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}list { |
||||
|
width: auto; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
float: left; |
||||
|
|
||||
|
input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
cursor: pointer; |
||||
|
padding: 5px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}radio:checked + label { |
||||
|
background-color: rgba(255, 255, 255, 0.2); |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}icon { |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
text-shadow: none; |
||||
|
line-height: normal; |
||||
|
//padding: 5px 19px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}integer select { |
||||
|
width: auto; |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ------------------END Field-------------------- */ |
||||
|
|
||||
|
.#{$sm-prefix}list .#{$sm-prefix}el { |
||||
|
float: left; |
||||
|
border-left: 1px solid $mainDkColor; |
||||
|
|
||||
|
&:first-child { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background: $mainDkColor; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}properties { |
||||
|
font-size: 11px; |
||||
|
padding: 10px 5px; |
||||
|
} |
||||
|
|
||||
|
/* ------------------Property-------------------- */ |
||||
|
|
||||
|
.#{$sm-prefix}property { |
||||
|
box-sizing: border-box; |
||||
|
float: left; |
||||
|
width: 50%; |
||||
|
margin-bottom: 5px; |
||||
|
padding: 0 5px; |
||||
|
|
||||
|
&.#{$sm-prefix}composite, |
||||
|
&.#{$sm-prefix}file, |
||||
|
&.#{$sm-prefix}list, |
||||
|
&.#{$sm-prefix}stack { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}btn { |
||||
|
background-color: lighten($mainDkColor, 13%); |
||||
|
border-radius: 2px; |
||||
|
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset; |
||||
|
padding: 5px; |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
height: auto; |
||||
|
width: 100%; |
||||
|
cursor: pointer; |
||||
|
color: $fontColor; |
||||
|
box-sizing: border-box; |
||||
|
text-shadow: -1px -1px 0 $mainDkColor; |
||||
|
border: none; |
||||
|
|
||||
|
@include opacity(0.85); |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}btn-c { |
||||
|
box-sizing: border-box; |
||||
|
float: left; |
||||
|
width: 100%; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}file ##{$sm-prefix}preview-box { |
||||
|
background-color: $lightBorder; |
||||
|
border-radius: 2px; |
||||
|
margin-top: 5px; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&.#{$sm-prefix}show { |
||||
|
border: 1px solid darken($lightBorder, 1%); |
||||
|
padding: 3px 5px; |
||||
|
} |
||||
|
|
||||
|
##{$sm-prefix}close { |
||||
|
@extend .#{$sm-prefix}close-btn; |
||||
|
|
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file { |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}file ##{$sm-prefix}preview-file { |
||||
|
background-size: auto 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center center; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}layers { |
||||
|
margin-top: 5px; |
||||
|
min-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}layer { |
||||
|
background-color: rgba(255, 255, 255, 0.055); |
||||
|
border-radius: 2px; |
||||
|
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset; |
||||
|
margin: 2px; |
||||
|
padding: 7px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
> ##{$sm-prefix}preview-box { |
||||
|
@extend .checker-bg; |
||||
|
|
||||
|
height: 15px; |
||||
|
position: absolute; |
||||
|
right: 27px; |
||||
|
top: 6px; |
||||
|
width: 15px; |
||||
|
} |
||||
|
|
||||
|
##{$sm-prefix}preview, |
||||
|
##{$sm-prefix}preview-box { |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
##{$sm-prefix}close-layer { |
||||
|
display: block; |
||||
|
font-size: 23px; |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
right: 5px; |
||||
|
top: 0; |
||||
|
|
||||
|
@include opacity(0.5); |
||||
|
|
||||
|
&:hover { |
||||
|
@include opacity(0.8); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview { |
||||
|
background-color: white; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
background-size: cover !important; |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}active { |
||||
|
background-color: rgba(255, 255, 255, 0.12); |
||||
|
} |
||||
|
|
||||
|
&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after { |
||||
|
color: #000; |
||||
|
content: "T"; |
||||
|
font-weight: 900; |
||||
|
line-height: 17px; |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
|
||||
|
/* ------------------END Property-------------------- */ |
||||
|
|
||||
|
.#{$sm-prefix}stack .#{$sm-prefix}properties { |
||||
|
padding-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}stack ##{$sm-prefix}add { |
||||
|
@extend .#{$app-prefix}color-main; |
||||
|
|
||||
|
background: none; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
font-size: 22px; |
||||
|
line-height: 10px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: -20px; |
||||
|
opacity: 0.75; |
||||
|
|
||||
|
&:hover { |
||||
|
@include opacity(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}colorp-c { |
||||
|
@extend .#{$app-prefix}bg-main; |
||||
|
|
||||
|
height: 100%; |
||||
|
width: 20px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 2px; |
||||
|
padding: 2px; |
||||
|
|
||||
|
.#{$app-prefix}checker-bg { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
border-radius: 1px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}color-picker { |
||||
|
background-color: $fontColor; |
||||
|
cursor: pointer; |
||||
|
height: 16px; |
||||
|
width: 100%; |
||||
|
margin-top: -16px; |
||||
|
box-shadow: 0 0 1px $mainDkColor; |
||||
|
border-radius: 1px; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload { |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
opacity: 0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { |
||||
|
padding: 2px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$sm-prefix}layer > ##{$sm-prefix}move { |
||||
|
@include opacity(0.7); |
||||
|
|
||||
|
cursor: move; |
||||
|
font-size: 12px; |
||||
|
float: left; |
||||
|
margin: 0 5px 0 0; |
||||
|
|
||||
|
&:hover { |
||||
|
@include opacity(0.9); |
||||
|
} |
||||
|
} |
||||
@ -1,129 +1,120 @@ |
|||||
define((require, exports, module) => { |
const Selectors = require('selector_manager/model/Selectors'); |
||||
'use strict'; |
const ClassTagsView = require('selector_manager/view/ClassTagsView'); |
||||
var GrapesJS = require('GrapesJS'); |
|
||||
var Selectors = require('SelectorManager/model/Selectors'); |
module.exports = { |
||||
var ClassTagsView = require('SelectorManager/view/ClassTagsView'); |
run() { |
||||
|
describe('E2E tests', () => { |
||||
module.exports = { |
|
||||
run() { |
var instClassTagViewer = ctx => { |
||||
describe('E2E tests', () => { |
var $clm; |
||||
|
var clm = ctx.gjs.editor.get('SelectorManager'); |
||||
/** |
if(clm){ |
||||
* Create tags viewer |
$clm = new ClassTagsView({ |
||||
* @param {Object} ctx |
collection: new Selectors([]), |
||||
*/ |
config: { |
||||
var instClassTagViewer = ctx => { |
em: ctx.gjs.editor |
||||
var $clm; |
}, |
||||
var clm = ctx.gjs.editor.get('SelectorManager'); |
}).render(); |
||||
if(clm){ |
ctx.$fixture.append($clm.el); |
||||
$clm = new ClassTagsView({ |
} |
||||
collection: new Selectors([]), |
return $clm; |
||||
config: { |
}; |
||||
em: ctx.gjs.editor |
|
||||
}, |
before(function () { |
||||
}).render(); |
this.$fixtures = $("#fixtures"); |
||||
ctx.$fixture.append($clm.el); |
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); |
||||
} |
}); |
||||
return $clm; |
|
||||
}; |
beforeEach(function () { |
||||
|
this.gjs = grapesjs.init({ |
||||
before(function () { |
stylePrefix: '', |
||||
this.$fixtures = $("#fixtures"); |
storageManager: { autoload: 0, type:'none' }, |
||||
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); |
assetManager: { |
||||
}); |
storageType: 'none', |
||||
|
}, |
||||
beforeEach(function () { |
container: '#SelectorManager-fixture', |
||||
this.gjs = GrapesJS.init({ |
}); |
||||
stylePrefix: '', |
this.$fixture.empty().appendTo(this.$fixtures); |
||||
storageManager: { autoload: 0, type:'none' }, |
this.gjs.render(); |
||||
assetManager: { |
}); |
||||
storageType: 'none', |
|
||||
}, |
afterEach(function () { |
||||
container: '#SelectorManager-fixture', |
delete this.gjs; |
||||
}); |
}); |
||||
this.$fixture.empty().appendTo(this.$fixtures); |
|
||||
this.gjs.render(); |
after(function () { |
||||
}); |
this.$fixture.remove(); |
||||
|
}); |
||||
afterEach(function () { |
|
||||
delete this.gjs; |
describe('Interaction with Components', () => { |
||||
}); |
|
||||
|
beforeEach(function () { |
||||
after(function () { |
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components'); |
||||
this.$fixture.remove(); |
this.$clm = instClassTagViewer(this); |
||||
}); |
}); |
||||
|
|
||||
describe('Interaction with Components', () => { |
afterEach(function () { |
||||
|
delete this.wrapper; |
||||
beforeEach(function () { |
delete this.$clm; |
||||
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components'); |
}); |
||||
this.$clm = instClassTagViewer(this); |
|
||||
}); |
it('Assign correctly new class to component', function() { |
||||
|
var model = this.wrapper.add({}); |
||||
afterEach(function () { |
expect(model.get('classes').length).toEqual(0); |
||||
delete this.wrapper; |
this.gjs.editor.set('selectedComponent', model); |
||||
delete this.$clm; |
this.$clm.addNewTag('test'); |
||||
}); |
expect(model.get('classes').length).toEqual(1); |
||||
|
expect(model.get('classes').at(0).get('name')).toEqual('test'); |
||||
it('Assign correctly new class to component', function() { |
}); |
||||
var model = this.wrapper.add({}); |
|
||||
model.get('classes').length.should.equal(0); |
it('Classes from components are correctly imported inside main container', function() { |
||||
this.gjs.editor.set('selectedComponent', model); |
var model = this.wrapper.add([ |
||||
this.$clm.addNewTag('test'); |
{ classes: ['test11', 'test12', 'test13'] }, |
||||
model.get('classes').length.should.equal(1); |
{ classes: ['test11', 'test22', 'test22'] }, |
||||
model.get('classes').at(0).get('name').should.equal('test'); |
]); |
||||
}); |
expect(this.gjs.editor.get('SelectorManager').getAll().length).toEqual(4); |
||||
|
}); |
||||
it('Classes from components are correctly imported inside main container', function() { |
|
||||
var model = this.wrapper.add([ |
it('Class imported into component is the same model from main container', function() { |
||||
{ classes: ['test11', 'test12', 'test13'] }, |
var model = this.wrapper.add({ classes: ['test1'] }); |
||||
{ classes: ['test11', 'test22', 'test22'] }, |
var clModel = model.get('classes').at(0); |
||||
]); |
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); |
||||
this.gjs.editor.get('SelectorManager').getAll().length.should.equal(4); |
expect(clModel).toEqual(clModel2); |
||||
}); |
}); |
||||
|
|
||||
it('Class imported into component is the same model from main container', function() { |
it('Can assign only one time the same class on selected component and the class viewer', function() { |
||||
var model = this.wrapper.add({ classes: ['test1'] }); |
var model = this.wrapper.add({}); |
||||
var clModel = model.get('classes').at(0); |
this.gjs.editor.set('selectedComponent', model); |
||||
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); |
this.$clm.addNewTag('test'); |
||||
clModel.should.deep.equal(clModel2); |
this.$clm.addNewTag('test'); |
||||
}); |
expect(model.get('classes').length).toEqual(1); |
||||
|
expect(model.get('classes').at(0).get('name')).toEqual('test'); |
||||
it('Can assign only one time the same class on selected component and the class viewer', function() { |
expect(this.$clm.collection.length).toEqual(1); |
||||
var model = this.wrapper.add({}); |
expect(this.$clm.collection.at(0).get('name')).toEqual('test'); |
||||
this.gjs.editor.set('selectedComponent', model); |
}); |
||||
this.$clm.addNewTag('test'); |
|
||||
this.$clm.addNewTag('test'); |
it('Removing from container removes also from selected component', function() { |
||||
model.get('classes').length.should.equal(1); |
var model = this.wrapper.add({}); |
||||
model.get('classes').at(0).get('name').should.equal('test'); |
this.gjs.editor.set('selectedComponent', model); |
||||
this.$clm.collection.length.should.equal(1); |
this.$clm.addNewTag('test'); |
||||
this.$clm.collection.at(0).get('name').should.equal('test'); |
this.$clm.getClasses().find('.tag #close').trigger('click') |
||||
}); |
expect(model.get('classes').length).toEqual(0); |
||||
|
}); |
||||
it('Removing from container removes also from selected component', function() { |
|
||||
var model = this.wrapper.add({}); |
it("Trigger correctly event on target with new class add", function() { |
||||
this.gjs.editor.set('selectedComponent', model); |
var spy = sinon.spy(); |
||||
this.$clm.addNewTag('test'); |
var model = this.wrapper.add({}); |
||||
this.$clm.getClasses().find('.tag #close').trigger('click') |
this.gjs.editor.set('selectedComponent', model); |
||||
model.get('classes').length.should.equal(0); |
this.$clm.addNewTag('test'); |
||||
}); |
this.gjs.editor.on("targetClassAdded", spy); |
||||
|
this.$clm.addNewTag('test'); |
||||
it("Trigger correctly event on target with new class add", function() { |
expect(spy.called).toEqual(false); |
||||
var spy = sinon.spy(); |
this.$clm.addNewTag('test2'); |
||||
var model = this.wrapper.add({}); |
expect(spy.called).toEqual(true); |
||||
this.gjs.editor.set('selectedComponent', model); |
}); |
||||
this.$clm.addNewTag('test'); |
|
||||
this.gjs.editor.on("targetClassAdded", spy); |
|
||||
this.$clm.addNewTag('test'); |
|
||||
spy.called.should.equal(false); |
|
||||
this.$clm.addNewTag('test2'); |
|
||||
spy.called.should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -0,0 +1,82 @@ |
|||||
|
var SelectorManager = require('selector_manager'); |
||||
|
var Models = require('./model/SelectorModels'); |
||||
|
var ClassTagView = require('./view/ClassTagView'); |
||||
|
var ClassTagsView = require('./view/ClassTagsView'); |
||||
|
var e2e = require('./e2e/ClassManager'); |
||||
|
|
||||
|
describe('SelectorManager', () => { |
||||
|
|
||||
|
describe('Main', () => { |
||||
|
|
||||
|
var obj; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
obj = new SelectorManager().init(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', () => { |
||||
|
expect(obj).toExist(); |
||||
|
}); |
||||
|
|
||||
|
it('No selectors inside', () => { |
||||
|
expect(obj.getAll().length).toEqual(0); |
||||
|
}); |
||||
|
|
||||
|
it('Able to add default selectors', () => { |
||||
|
var cm = new SelectorManager().init({ |
||||
|
selectors: ['test1', 'test2', 'test3'], |
||||
|
}); |
||||
|
expect(cm.getAll().length).toEqual(3); |
||||
|
}); |
||||
|
|
||||
|
it('Add new selector', () => { |
||||
|
obj.add('test'); |
||||
|
expect(obj.getAll().length).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Default new selector is a class type', () => { |
||||
|
obj.add('test'); |
||||
|
expect(obj.get('test').get('type')).toEqual('class'); |
||||
|
}); |
||||
|
|
||||
|
it('Check name property', () => { |
||||
|
var name = 'test'; |
||||
|
var sel = obj.add(name); |
||||
|
expect(sel.get('name')).toEqual(name); |
||||
|
expect(sel.get('label')).toEqual(name); |
||||
|
}); |
||||
|
|
||||
|
it('Add 2 selectors', () => { |
||||
|
obj.add('test'); |
||||
|
obj.add('test2'); |
||||
|
expect(obj.getAll().length).toEqual(2); |
||||
|
}); |
||||
|
|
||||
|
it('Adding 2 selectors with the same name is not possible', () => { |
||||
|
obj.add('test'); |
||||
|
obj.add('test'); |
||||
|
expect(obj.getAll().length).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Get selector', () => { |
||||
|
var name = 'test'; |
||||
|
var sel = obj.add(name); |
||||
|
expect(obj.get(name)).toEqual(sel); |
||||
|
}); |
||||
|
|
||||
|
it('Get empty class', () => { |
||||
|
expect(obj.get('test')).toEqual(undefined); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
Models.run(); |
||||
|
ClassTagView.run(); |
||||
|
ClassTagsView.run(); |
||||
|
e2e.run(); |
||||
|
|
||||
|
}); |
||||
@ -1,82 +0,0 @@ |
|||||
define(function(require, exports, module){ |
|
||||
'use strict'; |
|
||||
var SelectorManager = require('SelectorManager'); |
|
||||
var e2e = require('undefined'); |
|
||||
|
|
||||
describe('SelectorManager', function() { |
|
||||
|
|
||||
describe('Main', function() { |
|
||||
|
|
||||
var obj; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
obj = new SelectorManager().init(); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
it('Object exists', function() { |
|
||||
obj.should.be.exist; |
|
||||
}); |
|
||||
|
|
||||
it('No selectors inside', function() { |
|
||||
obj.getAll().length.should.equal(0); |
|
||||
}); |
|
||||
|
|
||||
it('Able to add default selectors', function() { |
|
||||
var cm = new SelectorManager().init({ |
|
||||
selectors: ['test1', 'test2', 'test3'], |
|
||||
}); |
|
||||
cm.getAll().length.should.equal(3); |
|
||||
}); |
|
||||
|
|
||||
it('Add new selector', function() { |
|
||||
obj.add('test'); |
|
||||
obj.getAll().length.should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Default new selector is a class type', function() { |
|
||||
obj.add('test'); |
|
||||
obj.get('test').get('type').should.equal('class'); |
|
||||
}); |
|
||||
|
|
||||
it('Check name property', function() { |
|
||||
var name = 'test'; |
|
||||
var sel = obj.add(name); |
|
||||
sel.get('name').should.equal(name); |
|
||||
sel.get('label').should.equal(name); |
|
||||
}); |
|
||||
|
|
||||
it('Add 2 selectors', function() { |
|
||||
obj.add('test'); |
|
||||
obj.add('test2'); |
|
||||
obj.getAll().length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
it('Adding 2 selectors with the same name is not possible', function() { |
|
||||
obj.add('test'); |
|
||||
obj.add('test'); |
|
||||
obj.getAll().length.should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Get selector', function() { |
|
||||
var name = 'test'; |
|
||||
var sel = obj.add(name); |
|
||||
obj.get(name).should.deep.equal(sel); |
|
||||
}); |
|
||||
|
|
||||
it('Get empty class', function() { |
|
||||
(obj.get('test') === undefined).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
Models.run(); |
|
||||
ClassTagView.run(); |
|
||||
ClassTagsView.run(); |
|
||||
e2e.run(); |
|
||||
|
|
||||
}); |
|
||||
}); |
|
||||
@ -1,52 +1,50 @@ |
|||||
define(function(require, exports, module){ |
const Selector = require('selector_manager/model/Selector'); |
||||
'use strict'; |
const Selectors = require('selector_manager/model/Selectors'); |
||||
var Selectors = require('undefined'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
describe('Selector', function() { |
describe('Selector', () => { |
||||
|
var obj; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
this.obj = new Selector(); |
obj = new Selector(); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
|
||||
delete this.obj; |
|
||||
}); |
|
||||
|
|
||||
it('Has name property', function() { |
|
||||
this.obj.has('name').should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Has label property', function() { |
afterEach(() => { |
||||
this.obj.has('label').should.equal(true); |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Has active property', function() { |
it('Has name property', () => { |
||||
this.obj.has('active').should.equal(true); |
expect(obj.has('name')).toEqual(true); |
||||
}); |
}); |
||||
|
|
||||
it('escapeName test', function() { |
it('Has label property', () => { |
||||
this.obj.escapeName('@Te sT*').should.equal('-Te-sT-'); |
expect(obj.has('label')).toEqual(true); |
||||
}); |
}); |
||||
|
|
||||
it('Name is corrected at instantiation', function() { |
it('Has active property', () => { |
||||
this.obj = new Selector({ name: '@Te sT*'}); |
expect(obj.has('active')).toEqual(true); |
||||
this.obj.get('name').should.equal('-Te-sT-'); |
}); |
||||
}); |
|
||||
|
|
||||
|
it('escapeName test', () => { |
||||
|
expect(obj.escapeName('@Te sT*')).toEqual('-Te-sT-'); |
||||
|
}); |
||||
|
|
||||
|
it('Name is corrected at instantiation', () => { |
||||
|
obj = new Selector({ name: '@Te sT*'}); |
||||
|
expect(obj.get('name')).toEqual('-Te-sT-'); |
||||
}); |
}); |
||||
describe('Selectors', function() { |
|
||||
|
|
||||
it('Creates collection item correctly', function() { |
|
||||
var c = new Selectors(); |
|
||||
var m = c.add({}); |
|
||||
m.should.be.an.instanceOf(Selector); |
|
||||
}); |
|
||||
|
|
||||
|
}); |
||||
|
describe('Selectors', () => { |
||||
|
|
||||
|
it('Creates collection item correctly', () => { |
||||
|
var c = new Selectors(); |
||||
|
var m = c.add({}); |
||||
|
expect(m instanceof Selector).toEqual(true); |
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,133 +1,129 @@ |
|||||
define(function(require, exports, module){ |
const ClassTagView = require('selector_manager/view/ClassTagView'); |
||||
'use strict'; |
const Selectors = require('selector_manager/model/Selectors'); |
||||
var ClassTagView = require('undefined'); |
|
||||
var Selectors = require('SelectorManager/model/Selectors'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
describe('ClassTagView', () => { |
||||
run : function(){ |
|
||||
describe('ClassTagView', function() { |
var obj; |
||||
|
var fixture; |
||||
var obj; |
var fixtures; |
||||
var fixture; |
var testLabel; |
||||
var fixtures; |
var coll; |
||||
var testLabel; |
|
||||
var coll; |
before(() => { |
||||
|
fixtures = $("#fixtures"); |
||||
before(function () { |
fixture = $('<div class="classtag-fixture"></div>'); |
||||
fixtures = $("#fixtures"); |
}); |
||||
fixture = $('<div class="classtag-fixture"></div>'); |
|
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
coll = new Selectors(); |
coll = new Selectors(); |
||||
testLabel = 'TestLabel'; |
testLabel = 'TestLabel'; |
||||
var model = coll.add({ |
var model = coll.add({ |
||||
name: 'test', |
name: 'test', |
||||
label: testLabel, |
label: testLabel, |
||||
}); |
}); |
||||
obj = new ClassTagView({ |
obj = new ClassTagView({ |
||||
config : {}, |
config : {}, |
||||
model: model, |
model, |
||||
coll: coll |
coll |
||||
}); |
}); |
||||
obj.target = { get:function(){} }; |
obj.target = { get() {} }; |
||||
_.extend(obj.target, Backbone.Events); |
_.extend(obj.target, Backbone.Events); |
||||
fixture.empty().appendTo(fixtures); |
fixture.empty().appendTo(fixtures); |
||||
fixture.html(obj.render().el); |
fixture.html(obj.render().el); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj.model; |
obj.model = null; |
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
fixture.remove(); |
fixture.remove(); |
||||
}); |
}); |
||||
|
|
||||
it('Object exists', function() { |
it('Object exists', () => { |
||||
ClassTagView.should.be.exist; |
expect(ClassTagView).toExist(); |
||||
}); |
}); |
||||
|
|
||||
|
it('Not empty', () => { |
||||
|
var $el = obj.$el; |
||||
|
expect($el.html()).toExist(); |
||||
|
}); |
||||
|
|
||||
|
it('Not empty', () => { |
||||
|
var $el = obj.$el; |
||||
|
expect($el.html()).toContain(testLabel); |
||||
|
}); |
||||
|
|
||||
|
describe('Should be rendered correctly', () => { |
||||
|
|
||||
it('Not empty', function() { |
it('Has close button', () => { |
||||
var $el = obj.$el; |
var $el = obj.$el; |
||||
$el.html().should.not.be.empty; |
expect($el.find('#close')[0]).toExist(); |
||||
}); |
}); |
||||
|
it('Has checkbox', () => { |
||||
it('Not empty', function() { |
|
||||
var $el = obj.$el; |
var $el = obj.$el; |
||||
$el.html().should.contain(testLabel); |
expect($el.find('#checkbox')[0]).toExist(); |
||||
}); |
}); |
||||
|
it('Has label', () => { |
||||
describe('Should be rendered correctly', function() { |
var $el = obj.$el; |
||||
|
expect($el.find('#tag-label')[0]).toExist(); |
||||
it('Has close button', function() { |
|
||||
var $el = obj.$el; |
|
||||
$el.find('#close').should.have.property(0); |
|
||||
}); |
|
||||
it('Has checkbox', function() { |
|
||||
var $el = obj.$el; |
|
||||
$el.find('#checkbox').should.have.property(0); |
|
||||
}); |
|
||||
it('Has label', function() { |
|
||||
var $el = obj.$el; |
|
||||
$el.find('#tag-label').should.have.property(0); |
|
||||
}); |
|
||||
|
|
||||
}); |
}); |
||||
|
|
||||
it('Could be removed', function() { |
}); |
||||
var spy = sinon.spy(); |
|
||||
obj.config.target = { get:function(){} }; |
|
||||
sinon.stub(obj.config.target, 'get').returns(0); |
|
||||
obj.$el.find('#close').trigger('click'); |
|
||||
fixture.html().should.be.empty; |
|
||||
}); |
|
||||
|
|
||||
it('On remove triggers event', function() { |
it('Could be removed', () => { |
||||
var spy = sinon.spy(); |
var spy = sinon.spy(); |
||||
sinon.stub(obj.target, 'get').returns(0); |
obj.config.target = { get() {} }; |
||||
obj.target.on("targetClassRemoved", spy); |
sinon.stub(obj.config.target, 'get').returns(0); |
||||
obj.$el.find('#close').trigger('click'); |
obj.$el.find('#close').trigger('click'); |
||||
spy.called.should.equal(true); |
expect(fixture.html()).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Checkbox toggles status', function() { |
it('On remove triggers event', () => { |
||||
var spy = sinon.spy(); |
var spy = sinon.spy(); |
||||
obj.model.on("change:active", spy); |
sinon.stub(obj.target, 'get').returns(0); |
||||
obj.model.set('active', true); |
obj.target.on("targetClassRemoved", spy); |
||||
obj.$el.find('#checkbox').trigger('click'); |
obj.$el.find('#close').trigger('click'); |
||||
obj.model.get('active').should.equal(false); |
expect(spy.called).toEqual(true); |
||||
spy.called.should.equal(true); |
}); |
||||
}); |
|
||||
|
|
||||
it('On toggle triggers event', function() { |
it('Checkbox toggles status', () => { |
||||
var spy = sinon.spy(); |
var spy = sinon.spy(); |
||||
sinon.stub(obj.target, 'get').returns(0); |
obj.model.on("change:active", spy); |
||||
obj.target.on("targetClassUpdated", spy); |
obj.model.set('active', true); |
||||
obj.$el.find('#checkbox').trigger('click'); |
obj.$el.find('#checkbox').trigger('click'); |
||||
spy.called.should.equal(true); |
expect(obj.model.get('active')).toEqual(false); |
||||
}); |
expect(spy.called).toEqual(true); |
||||
|
}); |
||||
|
|
||||
it('Label input is disabled', function() { |
it('On toggle triggers event', () => { |
||||
var inputProp = obj.inputProp; |
var spy = sinon.spy(); |
||||
obj.$labelInput.prop(inputProp).should.equal(true); |
sinon.stub(obj.target, 'get').returns(0); |
||||
}); |
obj.target.on("targetClassUpdated", spy); |
||||
|
obj.$el.find('#checkbox').trigger('click'); |
||||
|
expect(spy.called).toEqual(true); |
||||
|
}); |
||||
|
|
||||
it('On double click label input is enable', function() { |
it('Label input is disabled', () => { |
||||
var inputProp = obj.inputProp; |
var inputProp = obj.inputProp; |
||||
obj.$el.find('#tag-label').trigger('dblclick'); |
expect(obj.$labelInput.prop(inputProp)).toEqual(true); |
||||
obj.$labelInput.prop(inputProp).should.equal(false); |
}); |
||||
}); |
|
||||
|
|
||||
it('On blur label input turns back disabled', function() { |
it('On double click label input is enable', () => { |
||||
var inputProp = obj.inputProp; |
var inputProp = obj.inputProp; |
||||
obj.$el.find('#tag-label').trigger('dblclick'); |
obj.$el.find('#tag-label').trigger('dblclick'); |
||||
obj.endEditTag(); |
expect(obj.$labelInput.prop(inputProp)).toEqual(false); |
||||
obj.$labelInput.prop(inputProp).should.equal(true); |
}); |
||||
}); |
|
||||
|
|
||||
|
it('On blur label input turns back disabled', () => { |
||||
|
var inputProp = obj.inputProp; |
||||
|
obj.$el.find('#tag-label').trigger('dblclick'); |
||||
|
obj.endEditTag(); |
||||
|
expect(obj.$labelInput.prop(inputProp)).toEqual(true); |
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,196 +1,195 @@ |
|||||
define(function(require, exports, module){ |
const ClassTagsView = require('selector_manager/view/ClassTagsView'); |
||||
'use strict'; |
const Selectors = require('selector_manager/model/Selectors'); |
||||
var ClassTagsView = require('undefined'); |
|
||||
var Selectors = require('SelectorManager/model/Selectors'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
describe('ClassTagsView', () => { |
||||
run : function(){ |
|
||||
describe('ClassTagsView', function() { |
var view; |
||||
|
var fixture; |
||||
var view; |
var fixtures; |
||||
var fixture; |
var testLabel; |
||||
var fixtures; |
var coll; |
||||
var testLabel; |
var target; |
||||
var coll; |
|
||||
var target; |
before(() => { |
||||
|
fixtures = $("#fixtures"); |
||||
before(function () { |
fixture = $('<div class="classtag-fixture"></div>'); |
||||
fixtures = $("#fixtures"); |
}); |
||||
fixture = $('<div class="classtag-fixture"></div>'); |
|
||||
}); |
beforeEach(function () { |
||||
|
target = { get() {} }; |
||||
beforeEach(function () { |
coll = new Selectors(); |
||||
target = { get: function(){} }; |
_.extend(target, Backbone.Events); |
||||
coll = new Selectors(); |
|
||||
_.extend(target, Backbone.Events); |
view = new ClassTagsView({ |
||||
|
config : { em: target }, |
||||
view = new ClassTagsView({ |
collection: coll |
||||
config : { em: target }, |
}); |
||||
collection: coll |
|
||||
}); |
this.targetStub = { |
||||
|
add(v) { return {name: v}; } |
||||
this.targetStub = { |
}; |
||||
add: function(v){ return {name: v}; } |
|
||||
}; |
this.compTargetStub = { |
||||
|
get() { return { add() {} };} |
||||
this.compTargetStub = { |
}; |
||||
get: function(){ return { add: function(){} }} |
|
||||
}; |
fixture.empty().appendTo(fixtures); |
||||
|
fixture.html(view.render().el); |
||||
fixture.empty().appendTo(fixtures); |
this.btnAdd = view.$el.find('#' + view.addBtnId); |
||||
fixture.html(view.render().el); |
this.input = view.$el.find('input#' + view.newInputId); |
||||
this.btnAdd = view.$el.find('#' + view.addBtnId); |
this.$tags = fixture.find('#tags-c'); |
||||
this.input = view.$el.find('input#' + view.newInputId); |
this.$states = fixture.find('#states'); |
||||
this.$tags = fixture.find('#tags-c'); |
this.$statesC = fixture.find('#input-c'); |
||||
this.$states = fixture.find('#states'); |
}); |
||||
this.$statesC = fixture.find('#input-c'); |
|
||||
}); |
afterEach(() => { |
||||
|
delete view.collection; |
||||
afterEach(function () { |
}); |
||||
delete view.collection; |
|
||||
}); |
after(() => { |
||||
|
fixture.remove(); |
||||
after(function () { |
}); |
||||
fixture.remove(); |
|
||||
}); |
it('Object exists', () => { |
||||
|
expect(ClassTagsView).toExist(); |
||||
it('Object exists', function() { |
}); |
||||
ClassTagsView.should.be.exist; |
|
||||
}); |
it('Not tags inside', function() { |
||||
|
expect(this.$tags.html()).toEqual(''); |
||||
it('Not tags inside', function() { |
}); |
||||
this.$tags.html().should.equal(''); |
|
||||
}); |
it('Add new tag triggers correct method', () => { |
||||
|
sinon.stub(view, "addToClasses"); |
||||
it('Add new tag triggers correct method', function() { |
coll.add({ name: 'test' }); |
||||
sinon.stub(view, "addToClasses"); |
expect(view.addToClasses.calledOnce).toEqual(true); |
||||
coll.add({ name: 'test' }); |
}); |
||||
view.addToClasses.calledOnce.should.equal(true); |
|
||||
}); |
it('Start new tag creation', function() { |
||||
|
this.btnAdd.click(); |
||||
it('Start new tag creation', function() { |
expect(this.btnAdd.css('display')).toEqual('none'); |
||||
this.btnAdd.click(); |
expect(this.input.css('display')).toNotEqual('none'); |
||||
(this.btnAdd.css('display') == 'none').should.equal(true); |
}); |
||||
(this.input.css('display') !== 'none').should.equal(true); |
|
||||
}); |
it.skip('Stop tag creation', function() { |
||||
|
this.btnAdd.click(); |
||||
it('Stop tag creation', function() { |
this.input.val('test') |
||||
this.btnAdd.click(); |
this.input.blur(); |
||||
this.input.val('test') |
//(this.btnAdd.css('display') !== 'none').should.equal(true);
|
||||
this.input.blur(); |
//(this.input.css('display') == 'none').should.equal(true);
|
||||
(this.btnAdd.css('display') !== 'none').should.equal(true); |
//this.input.val().should.equal('');
|
||||
(this.input.css('display') == 'none').should.equal(true); |
expect(this.btnAdd.css('display')).toNotEqual('none'); |
||||
this.input.val().should.equal(''); |
expect(this.input.css('display')).toEqual('none'); |
||||
}); |
expect(this.input.val()).toEqual(''); |
||||
|
}); |
||||
it('Check keyup of ESC on input', function() { |
|
||||
this.btnAdd.click(); |
it('Check keyup of ESC on input', function() { |
||||
sinon.stub(view, "addNewTag"); |
this.btnAdd.click(); |
||||
this.input.trigger({ |
sinon.stub(view, "addNewTag"); |
||||
type: 'keyup', |
this.input.trigger({ |
||||
keyCode: 13 |
type: 'keyup', |
||||
}); |
keyCode: 13 |
||||
view.addNewTag.calledOnce.should.equal(true); |
}); |
||||
}); |
expect(view.addNewTag.calledOnce).toEqual(true); |
||||
|
}); |
||||
it('Check keyup on ENTER on input', function() { |
|
||||
this.btnAdd.click(); |
it('Check keyup on ENTER on input', function() { |
||||
sinon.stub(view, "endNewTag"); |
this.btnAdd.click(); |
||||
this.input.trigger({ |
sinon.stub(view, "endNewTag"); |
||||
type: 'keyup', |
this.input.trigger({ |
||||
keyCode: 27 |
type: 'keyup', |
||||
}); |
keyCode: 27 |
||||
view.endNewTag.calledOnce.should.equal(true); |
}); |
||||
}); |
expect(view.endNewTag.calledOnce).toEqual(true); |
||||
|
}); |
||||
it('Collection changes on update of target', function() { |
|
||||
coll.add({ name: 'test' }); |
it('Collection changes on update of target', () => { |
||||
target.trigger('change:selectedComponent'); |
coll.add({ name: 'test' }); |
||||
coll.length.should.equal(0); |
target.trigger('change:selectedComponent'); |
||||
}); |
expect(coll.length).toEqual(0); |
||||
|
}); |
||||
it('Collection reacts on reset', function() { |
|
||||
coll.add([{ name: 'test1' }, { name: 'test2' }]); |
it('Collection reacts on reset', () => { |
||||
sinon.stub(view, "addToClasses"); |
coll.add([{ name: 'test1' }, { name: 'test2' }]); |
||||
coll.trigger('reset'); |
sinon.stub(view, "addToClasses"); |
||||
view.addToClasses.calledTwice.should.equal(true); |
coll.trigger('reset'); |
||||
}); |
expect(view.addToClasses.calledTwice).toEqual(true); |
||||
|
}); |
||||
it("Don't accept empty tags", function() { |
|
||||
view.addNewTag(''); |
it("Don't accept empty tags", function() { |
||||
this.$tags.html().should.equal(''); |
view.addNewTag(''); |
||||
}); |
expect(this.$tags.html()).toEqual(''); |
||||
|
}); |
||||
it("Accept new tags", function() { |
|
||||
sinon.stub(target, "get").returns(this.targetStub); |
it("Accept new tags", function() { |
||||
view.compTarget = this.compTargetStub; |
sinon.stub(target, "get").returns(this.targetStub); |
||||
view.addNewTag('test'); |
view.compTarget = this.compTargetStub; |
||||
view.compTarget = this.compTargetStub; |
view.addNewTag('test'); |
||||
view.addNewTag('test2'); |
view.compTarget = this.compTargetStub; |
||||
this.$tags.children().length.should.equal(2); |
view.addNewTag('test2'); |
||||
}); |
expect(this.$tags.children().length).toEqual(2); |
||||
|
}); |
||||
it("New tag correctly added", function() { |
|
||||
coll.add({ label: 'test' }); |
it("New tag correctly added", function() { |
||||
this.$tags.children().first().find('#tag-label input').val().should.equal('test'); |
coll.add({ label: 'test' }); |
||||
}); |
expect(this.$tags.children().first().find('#tag-label input').val()).toEqual('test'); |
||||
|
}); |
||||
it("States are hidden in case no tags", function() { |
|
||||
view.updateStateVis(); |
it("States are hidden in case no tags", function() { |
||||
this.$statesC.css('display').should.equal('none'); |
view.updateStateVis(); |
||||
}); |
expect(this.$statesC.css('display')).toEqual('none'); |
||||
|
}); |
||||
it("States are visible in case of more tags inside", function() { |
|
||||
coll.add({ label: 'test' }); |
it("States are visible in case of more tags inside", function() { |
||||
view.updateStateVis(); |
coll.add({ label: 'test' }); |
||||
this.$statesC.css('display').should.equal('block'); |
view.updateStateVis(); |
||||
}); |
expect(this.$statesC.css('display')).toEqual('block'); |
||||
|
}); |
||||
it("Update state visibility on new tag", function() { |
|
||||
sinon.stub(view, "updateStateVis"); |
it("Update state visibility on new tag", function() { |
||||
sinon.stub(target, "get").returns(this.targetStub); |
sinon.stub(view, "updateStateVis"); |
||||
view.compTarget = this.compTargetStub; |
sinon.stub(target, "get").returns(this.targetStub); |
||||
view.addNewTag('test'); |
view.compTarget = this.compTargetStub; |
||||
view.updateStateVis.called.should.equal(true); |
view.addNewTag('test'); |
||||
}); |
expect(view.updateStateVis.called).toEqual(true); |
||||
|
}); |
||||
it("Update state visibility on removing of the tag", function() { |
|
||||
sinon.stub(target, "get").returns(this.targetStub); |
it("Update state visibility on removing of the tag", function() { |
||||
view.compTarget = this.compTargetStub; |
sinon.stub(target, "get").returns(this.targetStub); |
||||
view.addNewTag('test'); |
view.compTarget = this.compTargetStub; |
||||
sinon.stub(view, "updateStateVis"); |
view.addNewTag('test'); |
||||
coll.remove(coll.at(0)); |
sinon.stub(view, "updateStateVis"); |
||||
view.updateStateVis.calledOnce.should.equal(true); |
coll.remove(coll.at(0)); |
||||
}); |
expect(view.updateStateVis.calledOnce).toEqual(true); |
||||
|
}); |
||||
it("Output correctly state options", function() { |
|
||||
var view = new ClassTagsView({ |
it("Output correctly state options", () => { |
||||
config : { |
var view = new ClassTagsView({ |
||||
em: target, |
config : { |
||||
states: [ { name: 'testName', label: 'testLabel' } ], |
em: target, |
||||
}, |
states: [ { name: 'testName', label: 'testLabel' } ], |
||||
collection: coll |
}, |
||||
}); |
collection: coll |
||||
view.getStateOptions().should.equal('<option value="testName">testLabel</option>'); |
}); |
||||
}); |
expect(view.getStateOptions()).toEqual('<option value="testName">testLabel</option>'); |
||||
|
}); |
||||
describe('Should be rendered correctly', function() { |
|
||||
it('Has label', function() { |
describe('Should be rendered correctly', () => { |
||||
view.$el.find('#label').should.have.property(0); |
it('Has label', () => { |
||||
}); |
expect(view.$el.find('#label')[0]).toExist(); |
||||
it('Has tags container', function() { |
}); |
||||
view.$el.find('#tags-c').should.have.property(0); |
it('Has tags container', () => { |
||||
}); |
expect(view.$el.find('#tags-c')[0]).toExist(); |
||||
it('Has add button', function() { |
}); |
||||
view.$el.find('#add-tag').should.have.property(0); |
it('Has add button', () => { |
||||
}); |
expect(view.$el.find('#add-tag')[0]).toExist(); |
||||
it('Has states input', function() { |
}); |
||||
view.$el.find('#states').should.have.property(0); |
it('Has states input', () => { |
||||
}); |
expect(view.$el.find('#states')[0]).toExist(); |
||||
}); |
}); |
||||
|
}); |
||||
}); |
|
||||
} |
}); |
||||
}; |
} |
||||
|
}; |
||||
}); |
|
||||
|
|||||
@ -0,0 +1,120 @@ |
|||||
|
const StorageManager = require('storage_manager'); |
||||
|
const Models = require('./model/Models'); |
||||
|
|
||||
|
describe('Storage Manager', () => { |
||||
|
|
||||
|
describe('Main', () => { |
||||
|
|
||||
|
var obj; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
obj = new StorageManager().init(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', () => { |
||||
|
expect(StorageManager).toExist(); |
||||
|
}); |
||||
|
|
||||
|
it('Autosave is active by default', () => { |
||||
|
expect(obj.isAutosave()).toEqual(true); |
||||
|
}); |
||||
|
|
||||
|
it('Change autosave', () => { |
||||
|
obj.setAutosave(0); |
||||
|
expect(obj.isAutosave()).toEqual(false); |
||||
|
}); |
||||
|
|
||||
|
it('Steps before save are set as default', () => { |
||||
|
expect(obj.getStepsBeforeSave()).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Change steps before save', () => { |
||||
|
obj.setStepsBeforeSave(5); |
||||
|
expect(obj.getStepsBeforeSave()).toEqual(5); |
||||
|
}); |
||||
|
|
||||
|
it('No storages inside', () => { |
||||
|
expect(obj.getStorages()).toEqual({}); |
||||
|
}); |
||||
|
|
||||
|
it('Add and get new storage', () => { |
||||
|
obj.add('test', 'gen'); |
||||
|
expect(obj.get('test')).toEqual('gen'); |
||||
|
}); |
||||
|
|
||||
|
it('LocalStorage is set as default', () => { |
||||
|
expect(obj.getCurrent()).toEqual('local'); |
||||
|
}); |
||||
|
|
||||
|
it('Change storage type', () => { |
||||
|
obj.setCurrent('remote'); |
||||
|
expect(obj.getCurrent()).toEqual('remote'); |
||||
|
}); |
||||
|
|
||||
|
it('Store do not execute if empty', () => { |
||||
|
expect(obj.store({item:'test'})).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Load do not execute if empty', () => { |
||||
|
expect(obj.load(['item'])).toEqual({}); |
||||
|
}); |
||||
|
|
||||
|
it('Load default storages ', () => { |
||||
|
obj.loadDefaultProviders(); |
||||
|
expect(obj.get('local')).toExist(); |
||||
|
expect(obj.get('remote')).toExist(); |
||||
|
expect(obj.get('test')).toNotExist(); |
||||
|
}); |
||||
|
|
||||
|
describe('With custom storage', () => { |
||||
|
|
||||
|
var storeValue; |
||||
|
var storageId = 'testStorage'; |
||||
|
var storage = { |
||||
|
store(data) { |
||||
|
storeValue = data; |
||||
|
}, |
||||
|
load(keys) { |
||||
|
return storeValue; |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
storeValue = []; |
||||
|
obj = new StorageManager().init({ |
||||
|
type: storageId, |
||||
|
}); |
||||
|
obj.add(storageId, storage); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
it('Store and load data', () => { |
||||
|
var data = { |
||||
|
item: 'testData', |
||||
|
item2: 'testData2', |
||||
|
}; |
||||
|
var data2 = {}; |
||||
|
var id = obj.getConfig().id; |
||||
|
data2[id + 'item'] = 'testData'; |
||||
|
data2[id + 'item2'] = 'testData2'; |
||||
|
|
||||
|
obj.store(data); |
||||
|
var load = obj.load(['item', 'item2']); |
||||
|
expect(storeValue).toEqual(data2); |
||||
|
expect(load).toEqual(data); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
Models.run(); |
||||
|
|
||||
|
}); |
||||
@ -1,123 +0,0 @@ |
|||||
define(function(require, exports, module){ |
|
||||
'use strict'; |
|
||||
var StorageManager = require('StorageManager'); |
|
||||
var Models = require('undefined'); |
|
||||
|
|
||||
describe('Storage Manager', function() { |
|
||||
|
|
||||
describe('Main', function() { |
|
||||
|
|
||||
var obj; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
obj = new StorageManager().init(); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
it('Object exists', function() { |
|
||||
StorageManager.should.be.exist; |
|
||||
}); |
|
||||
|
|
||||
it('Autosave is active by default', function() { |
|
||||
obj.isAutosave().should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Change autosave', function() { |
|
||||
obj.setAutosave(0); |
|
||||
obj.isAutosave().should.equal(false); |
|
||||
}); |
|
||||
|
|
||||
it('Steps before save are set as default', function() { |
|
||||
obj.getStepsBeforeSave().should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Change steps before save', function() { |
|
||||
obj.setStepsBeforeSave(5); |
|
||||
obj.getStepsBeforeSave().should.equal(5); |
|
||||
}); |
|
||||
|
|
||||
it('No storages inside', function() { |
|
||||
obj.getStorages().should.be.empty; |
|
||||
}); |
|
||||
|
|
||||
it('Add and get new storage', function() { |
|
||||
obj.add('test', 'gen'); |
|
||||
obj.get('test').should.equal('gen'); |
|
||||
}); |
|
||||
|
|
||||
it('LocalStorage is set as default', function() { |
|
||||
obj.getCurrent().should.equal('local'); |
|
||||
}); |
|
||||
|
|
||||
it('Change storage type', function() { |
|
||||
obj.setCurrent('remote'); |
|
||||
obj.getCurrent().should.equal('remote'); |
|
||||
}); |
|
||||
|
|
||||
it('Store do not execute if empty', function() { |
|
||||
(obj.store({item:'test'}) === null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Load do not execute if empty', function() { |
|
||||
obj.load(['item']).should.be.empty; |
|
||||
}); |
|
||||
|
|
||||
it('Load default storages ', function() { |
|
||||
obj.loadDefaultProviders(); |
|
||||
obj.get('local').should.not.be.empty; |
|
||||
obj.get('remote').should.not.be.empty; |
|
||||
(obj.get('test') === null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
describe('With custom storage', function() { |
|
||||
|
|
||||
var storeValue; |
|
||||
var storageId = 'testStorage'; |
|
||||
var storage = { |
|
||||
store: function(data){ |
|
||||
storeValue = data; |
|
||||
}, |
|
||||
load: function(keys){ |
|
||||
return storeValue; |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
storeValue = []; |
|
||||
obj = new StorageManager().init({ |
|
||||
type: storageId, |
|
||||
}); |
|
||||
obj.add(storageId, storage); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
it('Store and load data', function() { |
|
||||
var data = { |
|
||||
item: 'testData', |
|
||||
item2: 'testData2', |
|
||||
}; |
|
||||
var data2 = {}; |
|
||||
var id = obj.getConfig().id; |
|
||||
data2[id + 'item'] = 'testData'; |
|
||||
data2[id + 'item2'] = 'testData2'; |
|
||||
|
|
||||
obj.store(data); |
|
||||
var load = obj.load(['item', 'item2']); |
|
||||
storeValue.should.deep.equal(data2); |
|
||||
load.should.deep.equal(data); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
Models.run(); |
|
||||
|
|
||||
}); |
|
||||
}); |
|
||||
@ -1,119 +1,116 @@ |
|||||
define(function(require, exports, module){ |
const LocalStorage = require('storage_manager/model/LocalStorage'); |
||||
'use strict'; |
const RemoteStorage = require('storage_manager/model/RemoteStorage'); |
||||
var RemoteStorage = require('undefined'); |
|
||||
|
module.exports = { |
||||
module.exports = { |
run() { |
||||
run : function(){ |
|
||||
|
describe('LocalStorage', () => { |
||||
describe('LocalStorage', function() { |
|
||||
|
var obj; |
||||
var obj; |
var itemName = 'testItem'; |
||||
var itemName = 'testItem'; |
var data = { |
||||
var data = { |
'item1': 'value1', |
||||
'item1': 'value1', |
'item2': 'value2', |
||||
'item2': 'value2', |
}; |
||||
}; |
|
||||
|
beforeEach(() => { |
||||
beforeEach(function () { |
obj = new LocalStorage(); |
||||
obj = new LocalStorage(); |
}); |
||||
}); |
|
||||
|
afterEach(() => { |
||||
afterEach(function () { |
obj = null; |
||||
delete obj; |
}); |
||||
}); |
|
||||
|
it('Store and load items', () => { |
||||
it('Store and load items', function() { |
obj.store(data); |
||||
obj.store(data); |
var result = obj.load(['item1', 'item2']); |
||||
var result = obj.load(['item1', 'item2']); |
expect(result).toEqual(data); |
||||
result.should.deep.equal(data); |
}); |
||||
}); |
|
||||
|
it('Store, update and load items', () => { |
||||
it('Store, update and load items', function() { |
obj.store(data); |
||||
obj.store(data); |
obj.store({item3: 'value3'}); |
||||
obj.store({item3: 'value3'}); |
obj.store({item2: 'value22'}); |
||||
obj.store({item2: 'value22'}); |
var result = obj.load(['item1', 'item2', 'item3']); |
||||
var result = obj.load(['item1', 'item2', 'item3']); |
expect(result).toEqual({ |
||||
result.should.deep.equal({ |
'item1': 'value1', |
||||
'item1': 'value1', |
'item2': 'value22', |
||||
'item2': 'value22', |
'item3': 'value3', |
||||
'item3': 'value3', |
}); |
||||
}); |
}); |
||||
}); |
|
||||
|
it('Remove items', () => { |
||||
it('Remove items', function() { |
var items = ['item1', 'item2', 'item3']; |
||||
var items = ['item1', 'item2', 'item3']; |
obj.store(data); |
||||
obj.store(data); |
obj.remove(items); |
||||
obj.remove(items); |
expect(obj.load(items)).toEqual({}); |
||||
obj.load(items).should.be.empty; |
}); |
||||
}); |
|
||||
|
}); |
||||
|
|
||||
|
describe('RemoteStorage', () => { |
||||
|
|
||||
|
var obj; |
||||
|
var itemName = 'testItem'; |
||||
|
var endpointStore = 'testStoreEndpoint'; |
||||
|
var endpointLoad = 'testLoadEndpoint'; |
||||
|
var params = { test: 'testValue' }; |
||||
|
var storageOptions; |
||||
|
var data; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
data = { |
||||
|
'item1': 'value1', |
||||
|
'item2': 'value2', |
||||
|
}; |
||||
|
storageOptions = { |
||||
|
urlStore: endpointStore, |
||||
|
urlLoad: endpointLoad, |
||||
|
params, |
||||
|
}; |
||||
|
obj = new RemoteStorage(storageOptions); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
$.ajax.restore(); |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
// Stubbing will not return the original object so
|
||||
|
// .always will not work
|
||||
|
it.skip('Store data', () => { |
||||
|
sinon.stub($, "ajax"); |
||||
|
|
||||
|
for(var k in params) |
||||
|
data[k] = params[k]; |
||||
|
|
||||
|
obj.store(data); |
||||
|
$.ajax.calledWithMatch({ |
||||
|
url: endpointStore, |
||||
|
data, |
||||
|
}).should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Load data', () => { |
||||
|
sinon.stub($, "ajax").returns({ |
||||
|
done() {} |
||||
}); |
}); |
||||
|
var dt = {}; |
||||
|
var keys = ['item1', 'item2']; |
||||
|
obj.load(keys); |
||||
|
dt.keys = keys; |
||||
|
|
||||
describe('RemoteStorage', function() { |
for(var k in params) |
||||
|
dt[k] = params[k]; |
||||
var obj; |
|
||||
var itemName = 'testItem'; |
|
||||
var endpointStore = 'testStoreEndpoint'; |
|
||||
var endpointLoad = 'testLoadEndpoint'; |
|
||||
var params = { test: 'testValue' }; |
|
||||
var storageOptions; |
|
||||
var data; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
data = { |
|
||||
'item1': 'value1', |
|
||||
'item2': 'value2', |
|
||||
}; |
|
||||
storageOptions = { |
|
||||
urlStore: endpointStore, |
|
||||
urlLoad: endpointLoad, |
|
||||
params: params, |
|
||||
}; |
|
||||
obj = new RemoteStorage(storageOptions); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
$.ajax.restore(); |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
// Stubbing will not return the original object so
|
|
||||
// .always will not work
|
|
||||
it.skip('Store data', function() { |
|
||||
sinon.stub($, "ajax"); |
|
||||
|
|
||||
for(var k in params) |
|
||||
data[k] = params[k]; |
|
||||
|
|
||||
obj.store(data); |
|
||||
$.ajax.calledWithMatch({ |
|
||||
url: endpointStore, |
|
||||
data: data, |
|
||||
}).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Load data', function() { |
|
||||
sinon.stub($, "ajax").returns({ |
|
||||
done: function(){} |
|
||||
}); |
|
||||
var dt = {}; |
|
||||
var keys = ['item1', 'item2']; |
|
||||
obj.load(keys); |
|
||||
dt.keys = keys; |
|
||||
|
|
||||
for(var k in params) |
|
||||
dt[k] = params[k]; |
|
||||
|
|
||||
$.ajax.calledWithMatch({ |
|
||||
url: endpointLoad, |
|
||||
data: dt |
|
||||
}).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
}); |
expect($.ajax.calledWithMatch({ |
||||
|
url: endpointLoad, |
||||
|
data: dt |
||||
|
})).toEqual(true); |
||||
|
}); |
||||
|
|
||||
} |
}); |
||||
|
|
||||
}; |
} |
||||
|
|
||||
}); |
}; |
||||
|
|||||
@ -0,0 +1,191 @@ |
|||||
|
const StyleManager = require('style_manager'); |
||||
|
const Models = require('./model/Models'); |
||||
|
const SectorView = require('./view/SectorView'); |
||||
|
const SectorsView = require('./view/SectorsView'); |
||||
|
const PropertyView = require('./view/PropertyView'); |
||||
|
const PropertySelectView = require('./view/PropertySelectView'); |
||||
|
const PropertyRadioView = require('./view/PropertyRadioView'); |
||||
|
const PropertyIntegerView = require('./view/PropertyIntegerView'); |
||||
|
const PropertyColorView = require('./view/PropertyColorView'); |
||||
|
const PropertyCompositeView = require('./view/PropertyCompositeView'); |
||||
|
const PropertyStackView = require('./view/PropertyStackView'); |
||||
|
const LayerView = require('./view/LayerView'); |
||||
|
|
||||
|
describe('StyleManager', () => { |
||||
|
|
||||
|
describe('Main', () => { |
||||
|
var obj; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
obj = new StyleManager().init({ |
||||
|
sectors: [] |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', () => { |
||||
|
expect(obj).toExist(); |
||||
|
}); |
||||
|
|
||||
|
it('No sectors', () => { |
||||
|
expect(obj.getSectors().length).toEqual(0); |
||||
|
}); |
||||
|
|
||||
|
it('Add sector', () => { |
||||
|
obj.addSector('test', { |
||||
|
name: 'Test name' |
||||
|
}); |
||||
|
var sector = obj.getSectors().at(0); |
||||
|
expect(obj.getSectors().length).toEqual(1); |
||||
|
expect(sector.get('id')).toEqual('test'); |
||||
|
expect(sector.get('name')).toEqual('Test name'); |
||||
|
}); |
||||
|
|
||||
|
it('Add sectors', () => { |
||||
|
obj.addSector('test', {}); |
||||
|
obj.addSector('test2', {}); |
||||
|
expect(obj.getSectors().length).toEqual(2); |
||||
|
}); |
||||
|
|
||||
|
it("Can't create more than one sector with the same id", () => { |
||||
|
var sect1 = obj.addSector('test', {}); |
||||
|
var sect2 = obj.addSector('test', {}); |
||||
|
expect(obj.getSectors().length).toEqual(1); |
||||
|
expect(sect1).toEqual(sect2); |
||||
|
}); |
||||
|
|
||||
|
it('Get inexistent sector', () => { |
||||
|
expect(obj.getSector('test')).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Get sector', () => { |
||||
|
var sect1 = obj.addSector('test', { name: 'Test' }); |
||||
|
var sect2 = obj.getSector('test'); |
||||
|
expect(sect1).toEqual(sect2); |
||||
|
}); |
||||
|
|
||||
|
it('Add property to inexistent sector', () => { |
||||
|
expect(obj.addProperty('test', {})).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Add property', () => { |
||||
|
obj.addSector('test', {}); |
||||
|
expect(obj.addProperty('test', {})).toExist(); |
||||
|
expect(obj.getProperties('test').length).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Check added property', () => { |
||||
|
obj.addSector('test', {}); |
||||
|
var prop = obj.addProperty('test', { |
||||
|
'name': 'test', |
||||
|
}); |
||||
|
expect(prop.get('name')).toEqual('test'); |
||||
|
}); |
||||
|
|
||||
|
it('Add properties', () => { |
||||
|
obj.addSector('test', {}); |
||||
|
obj.addProperty('test', [{}, {}]); |
||||
|
expect(obj.getProperties('test').length).toEqual(2); |
||||
|
}); |
||||
|
|
||||
|
it('Get property from inexistent sector', () => { |
||||
|
expect(obj.getProperty('test', 'test-prop')).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it("Can't get properties without proper name", () => { |
||||
|
obj.addSector('test', {}); |
||||
|
obj.addProperty('test', [{}, {}]); |
||||
|
expect(obj.getProperty('test', 'test-prop')).toEqual([]); |
||||
|
}); |
||||
|
|
||||
|
it("Get property with proper name", () => { |
||||
|
obj.addSector('test', {}); |
||||
|
var prop1 = obj.addProperty('test', {property: 'test-prop'}); |
||||
|
var prop2 = obj.getProperty('test', 'test-prop'); |
||||
|
expect(prop1).toEqual(prop2); |
||||
|
}); |
||||
|
|
||||
|
it("Get properties with proper name", () => { |
||||
|
obj.addSector('test', {}); |
||||
|
var prop1 = obj.addProperty('test',[ |
||||
|
{property: 'test-prop'}, |
||||
|
{property: 'test-prop'} |
||||
|
]); |
||||
|
expect(obj.getProperty('test', 'test-prop').length).toEqual(2); |
||||
|
}); |
||||
|
|
||||
|
it('Get inexistent properties', () => { |
||||
|
expect(obj.getProperties('test')).toEqual(null); |
||||
|
expect(obj.getProperties()).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Renders correctly', () => { |
||||
|
expect(obj.render()).toExist(); |
||||
|
}); |
||||
|
|
||||
|
describe('Init with configuration', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
obj = new StyleManager().init({ |
||||
|
sectors: [{ |
||||
|
id: 'dim', |
||||
|
name: 'Dimension', |
||||
|
properties: [{ |
||||
|
name: 'Width', |
||||
|
property: 'width', |
||||
|
},{ |
||||
|
name: 'Height', |
||||
|
property: 'height', |
||||
|
}], |
||||
|
},{ |
||||
|
id: 'pos', |
||||
|
name: 'position', |
||||
|
properties: [{ |
||||
|
name: 'Width', |
||||
|
property: 'width', |
||||
|
}], |
||||
|
}], |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
it('Sectors added', () => { |
||||
|
expect(obj.getSectors().length).toEqual(2); |
||||
|
var sect1 = obj.getSector('dim'); |
||||
|
expect(sect1.get('name')).toEqual('Dimension'); |
||||
|
}); |
||||
|
|
||||
|
it('Properties added', () => { |
||||
|
var sect1 = obj.getSector('dim'); |
||||
|
var sect2 = obj.getSector('pos'); |
||||
|
expect(sect1.get('properties').length).toEqual(2); |
||||
|
expect(sect2.get('properties').length).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Property is correct', () => { |
||||
|
var prop1 = obj.getProperty('dim', 'width'); |
||||
|
expect(prop1.get('name')).toEqual('Width'); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
Models.run(); |
||||
|
SectorView.run(); |
||||
|
SectorsView.run(); |
||||
|
PropertyView.run(); |
||||
|
PropertySelectView.run(); |
||||
|
PropertyRadioView.run(); |
||||
|
PropertyIntegerView.run(); |
||||
|
PropertyColorView.run(); |
||||
|
PropertyCompositeView.run(); |
||||
|
PropertyStackView.run(); |
||||
|
LayerView.run(); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
@ -1,185 +0,0 @@ |
|||||
define(function(require, exports, module){ |
|
||||
'use strict'; |
|
||||
var StyleManager = require('StyleManager'); |
|
||||
var LayerView = require('undefined'); |
|
||||
|
|
||||
describe('StyleManager', function() { |
|
||||
|
|
||||
describe('Main', function() { |
|
||||
|
|
||||
var obj; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
obj = new StyleManager().init({ |
|
||||
sectors: [] |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
it('Object exists', function() { |
|
||||
obj.should.be.ok; |
|
||||
}); |
|
||||
|
|
||||
it('No sectors', function() { |
|
||||
obj.getSectors().length.should.equal(0); |
|
||||
}); |
|
||||
|
|
||||
it('Add sector', function() { |
|
||||
obj.addSector('test', { |
|
||||
name: 'Test name' |
|
||||
}); |
|
||||
obj.getSectors().length.should.equal(1); |
|
||||
var sector = obj.getSectors().at(0); |
|
||||
sector.get('id').should.equal('test'); |
|
||||
sector.get('name').should.equal('Test name'); |
|
||||
}); |
|
||||
|
|
||||
it('Add sectors', function() { |
|
||||
obj.addSector('test', {}); |
|
||||
obj.addSector('test2', {}); |
|
||||
obj.getSectors().length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
it("Can't create more than one sector with the same id", function() { |
|
||||
var sect1 = obj.addSector('test', {}); |
|
||||
var sect2 = obj.addSector('test', {}); |
|
||||
obj.getSectors().length.should.equal(1); |
|
||||
sect1.should.deep.equal(sect2); |
|
||||
}); |
|
||||
|
|
||||
it('Get inexistent sector', function() { |
|
||||
(obj.getSector('test') == null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Get sector', function() { |
|
||||
var sect1 = obj.addSector('test', { name: 'Test' }); |
|
||||
var sect2 = obj.getSector('test'); |
|
||||
sect1.should.deep.equal(sect2); |
|
||||
}); |
|
||||
|
|
||||
it('Add property to inexistent sector', function() { |
|
||||
(obj.addProperty('test', {}) == null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Add property', function() { |
|
||||
obj.addSector('test', {}); |
|
||||
(obj.addProperty('test', {}) == null).should.equal(false); |
|
||||
obj.getProperties('test').length.should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Check added property', function() { |
|
||||
obj.addSector('test', {}); |
|
||||
var prop = obj.addProperty('test', { |
|
||||
'name': 'test', |
|
||||
}); |
|
||||
prop.get('name').should.equal('test'); |
|
||||
}); |
|
||||
|
|
||||
it('Add properties', function() { |
|
||||
obj.addSector('test', {}); |
|
||||
obj.addProperty('test', [{}, {}]); |
|
||||
obj.getProperties('test').length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
it('Get property from inexistent sector', function() { |
|
||||
(obj.getProperty('test', 'test-prop') == null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it("Can't get properties without proper name", function() { |
|
||||
obj.addSector('test', {}); |
|
||||
obj.addProperty('test', [{}, {}]); |
|
||||
obj.getProperty('test', 'test-prop').should.be.empty; |
|
||||
}); |
|
||||
|
|
||||
it("Get property with proper name", function() { |
|
||||
obj.addSector('test', {}); |
|
||||
var prop1 = obj.addProperty('test', {property: 'test-prop'}); |
|
||||
var prop2 = obj.getProperty('test', 'test-prop'); |
|
||||
prop1.should.deep.equal(prop2); |
|
||||
}); |
|
||||
|
|
||||
it("Get properties with proper name", function() { |
|
||||
obj.addSector('test', {}); |
|
||||
var prop1 = obj.addProperty('test',[ |
|
||||
{property: 'test-prop'}, |
|
||||
{property: 'test-prop'} |
|
||||
]); |
|
||||
obj.getProperty('test', 'test-prop').length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
it('Get inexistent properties', function() { |
|
||||
(obj.getProperties('test') == null).should.equal(true); |
|
||||
(obj.getProperties() == null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Renders correctly', function() { |
|
||||
obj.render().should.be.ok; |
|
||||
}); |
|
||||
|
|
||||
describe('Init with configuration', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
obj = new StyleManager().init({ |
|
||||
sectors: [{ |
|
||||
id: 'dim', |
|
||||
name: 'Dimension', |
|
||||
properties: [{ |
|
||||
name: 'Width', |
|
||||
property: 'width', |
|
||||
},{ |
|
||||
name: 'Height', |
|
||||
property: 'height', |
|
||||
}], |
|
||||
},{ |
|
||||
id: 'pos', |
|
||||
name: 'position', |
|
||||
properties: [{ |
|
||||
name: 'Width', |
|
||||
property: 'width', |
|
||||
}], |
|
||||
}], |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
it('Sectors added', function() { |
|
||||
obj.getSectors().length.should.equal(2); |
|
||||
var sect1 = obj.getSector('dim'); |
|
||||
sect1.get('name').should.equal('Dimension'); |
|
||||
}); |
|
||||
|
|
||||
it('Properties added', function() { |
|
||||
var sect1 = obj.getSector('dim'); |
|
||||
var sect2 = obj.getSector('pos'); |
|
||||
sect1.get('properties').length.should.equal(2); |
|
||||
sect2.get('properties').length.should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Property is correct', function() { |
|
||||
var prop1 = obj.getProperty('dim', 'width'); |
|
||||
prop1.get('name').should.equal('Width'); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
Models.run(); |
|
||||
SectorView.run(); |
|
||||
SectorsView.run(); |
|
||||
PropertyView.run(); |
|
||||
PropertySelectView.run(); |
|
||||
PropertyRadioView.run(); |
|
||||
PropertyIntegerView.run(); |
|
||||
PropertyColorView.run(); |
|
||||
PropertyCompositeView.run(); |
|
||||
PropertyStackView.run(); |
|
||||
LayerView.run(); |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
}); |
|
||||
File diff suppressed because it is too large
@ -1,81 +1,77 @@ |
|||||
define(function(require, exports, module){ |
const LayerView = require('style_manager/view/LayerView'); |
||||
'use strict'; |
const Layers = require('style_manager/model/Layers'); |
||||
var LayerView = require('undefined'); |
|
||||
var Layers = require('StyleManager/model/Layers'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
|
|
||||
describe('LayerView', function() { |
describe('LayerView', () => { |
||||
|
|
||||
var component; |
var component; |
||||
var $fixtures; |
var $fixtures; |
||||
var $fixture; |
var $fixture; |
||||
var target; |
var target; |
||||
var model; |
var model; |
||||
var view; |
var view; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture = $('<div class="layer-fixture"></div>'); |
$fixture = $('<div class="layer-fixture"></div>'); |
||||
}); |
}); |
||||
|
|
||||
beforeEach(function () { |
|
||||
var coll = new Layers(); |
|
||||
model = coll.add({}); |
|
||||
view = new LayerView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
view.remove(); |
var coll = new Layers(); |
||||
}); |
model = coll.add({}); |
||||
|
view = new LayerView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
view.remove(); |
||||
delete component; |
}); |
||||
delete view; |
|
||||
delete model; |
|
||||
}); |
|
||||
|
|
||||
it('Rendered correctly', function() { |
after(() => { |
||||
var layer = view.el; |
$fixture.remove(); |
||||
$fixture.get(0).querySelector('.layer').should.be.ok; |
component = null; |
||||
layer.querySelector('#label').should.be.ok; |
view = null; |
||||
layer.querySelector('#close-layer').should.be.ok; |
model = null; |
||||
layer.querySelector('#inputs').should.be.ok; |
}); |
||||
layer.querySelector('#inputs').innerHTML.should.be.empty; |
|
||||
layer.querySelector('#preview').should.be.ok; |
|
||||
}); |
|
||||
|
|
||||
it('getIndex returns default value', function() { |
it('Rendered correctly', () => { |
||||
view.getIndex().should.equal(0); |
var layer = view.el; |
||||
}); |
expect($fixture.get(0).querySelector('.layer')).toExist(); |
||||
|
expect(layer.querySelector('#label')).toExist(); |
||||
|
expect(layer.querySelector('#close-layer')).toExist(); |
||||
|
expect(layer.querySelector('#inputs')).toExist(); |
||||
|
expect(layer.querySelector('#inputs').innerHTML).toNotExist(); |
||||
|
expect(layer.querySelector('#preview')).toExist(); |
||||
|
}); |
||||
|
|
||||
it('No preview', function() { |
it('getIndex returns default value', () => { |
||||
var style = view.el.querySelector('#preview').style; |
expect(view.getIndex()).toEqual(0); |
||||
style.cssText.should.be.empty; |
}); |
||||
}); |
|
||||
|
|
||||
it('Changes on value trigger onPreview', function() { |
it('No preview', () => { |
||||
var called = 0; |
var style = view.el.querySelector('#preview').style; |
||||
view.onPreview = function(){called = 1}; |
expect(style.cssText).toNotExist(); |
||||
view.model.set('preview', true); |
}); |
||||
view.model.set('value', 'test'); |
|
||||
called.should.equal(1); |
|
||||
}); |
|
||||
|
|
||||
it('Update props', function() { |
it('Changes on value trigger onPreview', () => { |
||||
view.model.set('props', $('<div>')); |
var called = 0; |
||||
view.el.querySelector('#inputs').innerHTML.should.not.be.empty; |
view.onPreview = () => {called = 1}; |
||||
(view.model.get('props') === null).should.equal(true); |
view.model.set('preview', true); |
||||
}); |
view.model.set('value', 'test'); |
||||
|
expect(called).toEqual(1); |
||||
|
}); |
||||
|
|
||||
|
it('Update props', () => { |
||||
|
view.model.set('props', $('<div>')); |
||||
|
expect(view.el.querySelector('#inputs').innerHTML).toExist(); |
||||
|
expect(view.model.get('props')).toEqual(null); |
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,166 +1,166 @@ |
|||||
define(function(require, exports, module){ |
const PropertyColorView = require('style_manager/view/PropertyColorView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyColorView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyColorView', () => { |
||||
|
|
||||
describe('PropertyColorView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propTarget; |
||||
var view; |
var propName = 'testprop'; |
||||
var propName = 'testprop'; |
var propValue = '#fff'; |
||||
var propValue = '#fff'; |
var defValue = 'test2value'; |
||||
var defValue = 'test2value'; |
|
||||
|
before(() => { |
||||
before(function () { |
$.fn.spectrum = () => {}; |
||||
$.fn.spectrum = function(){}; |
$fixtures = $("#fixtures"); |
||||
$fixtures = $("#fixtures"); |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
}); |
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
target = new Component(); |
||||
component = new Component(); |
component = new Component(); |
||||
model = new Property({ |
model = new Property({ |
||||
type: 'color', |
type: 'color', |
||||
property: propName |
property: propName |
||||
}); |
}); |
||||
view = new PropertyColorView({ |
propTarget = Object.assign({}, Backbone.Events); |
||||
model: model |
propTarget.model = component; |
||||
}); |
view = new PropertyColorView({ |
||||
$fixture.empty().appendTo($fixtures); |
model, |
||||
$fixture.html(view.render().el); |
propTarget |
||||
}); |
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
//view.remove(); // strange errors ???
|
//view.remove(); // strange errors ???
|
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
$fixture.remove(); |
$fixture.remove(); |
||||
delete component; |
component = null; |
||||
delete view; |
view = null; |
||||
delete model; |
model = null; |
||||
}); |
}); |
||||
|
|
||||
it('Rendered correctly', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
prop.querySelector('.label').should.be.ok; |
expect(prop.querySelector('.label')).toExist(); |
||||
prop.querySelector('.field').should.be.ok; |
expect(prop.querySelector('.field')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Inputs rendered', function() { |
it('Inputs rendered', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
prop.querySelector('input[type=text]').should.be.ok; |
expect(prop.querySelector('input[type=text]')).toExist(); |
||||
prop.querySelector('.field-color-picker').should.be.ok; |
expect(prop.querySelector('.field-color-picker')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Inputs should exist', function() { |
it('Inputs should exist', () => { |
||||
view.$input.should.be.ok; |
expect(view.$input).toExist(); |
||||
view.$color.should.be.ok; |
expect(view.$color).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Input value is empty', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.model.get('value')).toNotExist(); |
||||
view.$input.val().should.be.empty; |
expect(view.$input.val()).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Update model on setValue', function() { |
it('Update model on setValue', () => { |
||||
view.setValue(propValue); |
view.setValue(propValue); |
||||
view.model.get('value').should.equal(propValue); |
expect(view.model.get('value')).toEqual(propValue); |
||||
view.$input.val().should.equal(propValue); |
expect(view.$input.val()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update model on input change', function() { |
it('Update model on input change', () => { |
||||
view.$input.val(propValue).trigger('change'); |
view.$input.val(propValue).trigger('change'); |
||||
view.model.get('value').should.equal(propValue); |
expect(view.model.get('value')).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update input on value change', function() { |
it('Update input on value change', () => { |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
view.getInputValue().should.equal(propValue); |
expect(view.getInputValue()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update target on value change', function() { |
it('Update target on value change', () => { |
||||
view.selectedComponent = component; |
view.selectedComponent = component; |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
var compStyle = view.selectedComponent.get('style'); |
var compStyle = view.selectedComponent.get('style'); |
||||
var assertStyle = {}; |
var assertStyle = {}; |
||||
assertStyle[propName] = propValue; |
assertStyle[propName] = propValue; |
||||
compStyle.should.deep.equal(assertStyle); |
expect(compStyle).toEqual(assertStyle); |
||||
}); |
}); |
||||
|
|
||||
describe('With target setted', function() { |
describe('With target setted', () => { |
||||
|
|
||||
beforeEach(function () { |
|
||||
target.model = component; |
|
||||
view = new PropertyColorView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(propValue); |
|
||||
view.getInputValue().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = '#123123'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal('#123123'); |
|
||||
view.$input.val().should.equal('#123123'); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'color', |
|
||||
property: propName, |
|
||||
defaults: propValue, |
|
||||
}); |
|
||||
view = new PropertyColorView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Input value is as default', function() { |
|
||||
view.$input.val().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
|
beforeEach(() => { |
||||
|
target.model = component; |
||||
|
view = new PropertyColorView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(propValue); |
||||
|
expect(view.getInputValue()).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = '#123123'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual('#123123'); |
||||
|
expect(view.getInputValue()).toEqual('#123123'); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'color', |
||||
|
property: propName, |
||||
|
defaults: propValue, |
||||
}); |
}); |
||||
|
view = new PropertyColorView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
|
it('Input value is as default', () => { |
||||
|
expect(view.$input.val()).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,242 +1,238 @@ |
|||||
define(function(require, exports, module){ |
const PropertyCompositeView = require('style_manager/view/PropertyCompositeView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyCompositeView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyCompositeView', () => { |
||||
|
|
||||
describe('PropertyCompositeView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propName = 'testprop'; |
||||
var view; |
var propValue = 'test1value'; |
||||
var propName = 'testprop'; |
var defValue = 'test2value'; |
||||
var propValue = 'test1value'; |
var properties = [ |
||||
var defValue = 'test2value'; |
{property: 'subprop1'}, |
||||
var properties = [ |
{ |
||||
{property: 'subprop1'}, |
type: 'integer', |
||||
{ |
property: 'subprop2', |
||||
type: 'integer', |
defaults: 0, |
||||
property: 'subprop2', |
units: ['%', 'px'] |
||||
defaults: 0, |
}, |
||||
units: ['%', 'px'] |
{ |
||||
}, |
type: 'select', |
||||
{ |
property: 'subprop3', |
||||
type: 'select', |
defaults: 'val2', |
||||
property: 'subprop3', |
list: [ |
||||
defaults: 'val2', |
{value:'val1'}, |
||||
list: [ |
{value:'val2'}, |
||||
{value:'val1'}, |
{value:'val3'}, |
||||
{value:'val2'}, |
] |
||||
{value:'val3'}, |
}, |
||||
] |
]; |
||||
}, |
|
||||
]; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
before(function () { |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
$fixtures = $("#fixtures"); |
}); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
|
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
target = new Component(); |
|
||||
component = new Component(); |
|
||||
target.model = component; |
|
||||
model = new Property({ |
|
||||
type: 'composite', |
|
||||
property: propName, |
|
||||
properties: properties |
|
||||
}); |
|
||||
view = new PropertyCompositeView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
//view.remove(); // strange errors ???
|
target = new Component(); |
||||
}); |
component = new Component(); |
||||
|
target.model = component; |
||||
|
model = new Property({ |
||||
|
type: 'composite', |
||||
|
property: propName, |
||||
|
properties |
||||
|
}); |
||||
|
view = new PropertyCompositeView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
//view.remove(); // strange errors ???
|
||||
delete component; |
}); |
||||
delete view; |
|
||||
delete model; |
|
||||
}); |
|
||||
|
|
||||
it('Rendered correctly', function() { |
after(() => { |
||||
var prop = view.el; |
$fixture.remove(); |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
component = null; |
||||
prop.querySelector('.label').should.be.ok; |
view = null; |
||||
prop.querySelector('.field').should.be.ok; |
model = null; |
||||
}); |
}); |
||||
|
|
||||
it('Properties rendered', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
prop.querySelector('.properties').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
}); |
expect(prop.querySelector('.label')).toExist(); |
||||
|
expect(prop.querySelector('.field')).toExist(); |
||||
|
}); |
||||
|
|
||||
it('Properties rendered correctly', function() { |
it('Properties rendered', () => { |
||||
var children = view.el.querySelector('.properties').children; |
var prop = view.el; |
||||
children.length.should.equal(properties.length + 1); |
expect(prop.querySelector('.properties')).toExist(); |
||||
children[0].id.should.equal(properties[0].property); |
}); |
||||
children[1].id.should.equal(properties[1].property); |
|
||||
children[2].id.should.equal(properties[2].property); |
|
||||
}); |
|
||||
|
|
||||
it('Props should exist', function() { |
it('Properties rendered correctly', () => { |
||||
view.$props.should.be.ok; |
var children = view.el.querySelector('.properties').children; |
||||
}); |
expect(children.length).toEqual(properties.length + 1); |
||||
|
expect(children[0].id).toEqual(properties[0].property); |
||||
|
expect(children[1].id).toEqual(properties[1].property); |
||||
|
expect(children[2].id).toEqual(properties[2].property); |
||||
|
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Props should exist', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.$props).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Update input on value change', function() { |
it('Input value is empty', () => { |
||||
view.model.set('value', propValue); |
expect(view.model.get('value')).toNotExist(); |
||||
view.$input.val().should.equal(propValue); |
}); |
||||
}); |
|
||||
|
|
||||
describe('With target setted', function() { |
it('Update input on value change', () => { |
||||
|
view.model.set('value', propValue); |
||||
var prop2Val; |
expect(view.$input.val()).toEqual(propValue); |
||||
var prop3Val; |
}); |
||||
var prop2Unit; |
|
||||
var finalResult; |
|
||||
var $prop1; |
|
||||
var $prop2; |
|
||||
var $prop3; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Property({ |
|
||||
type: 'composite', |
|
||||
property: propName, |
|
||||
properties: properties |
|
||||
}); |
|
||||
view = new PropertyCompositeView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
prop3Val = properties[2].list[2].value; |
|
||||
prop2Val = properties[1].defaults; |
|
||||
prop2Unit = properties[1].units[0]; |
|
||||
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
|
||||
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
|
||||
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
|
||||
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
|
||||
}); |
|
||||
|
|
||||
it('Update model on input change', function() { |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
$prop3.val(prop3Val).trigger('change'); |
|
||||
view.model.get('value').should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
it('Update value on models change', function() { |
|
||||
view.model.get('properties').at(0).set('value', propValue); |
|
||||
view.model.get('properties').at(2).set('value', prop3Val); |
|
||||
view.model.get('value').should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
it('Update target on value change', function() { |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
var compStyle = view.getTarget().get('style'); |
|
||||
var assertStyle = {}; |
|
||||
assertStyle[propName] = propValue + ' 0% val2'; |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Update target on detached value change', function() { |
|
||||
model = new Property({ |
|
||||
type: 'composite', |
|
||||
property: propName, |
|
||||
properties: properties, |
|
||||
detached: true, |
|
||||
}); |
|
||||
view = new PropertyCompositeView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.html(view.render().el); |
|
||||
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
var compStyle = view.getTarget().get('style'); |
|
||||
var assertStyle = {}; |
|
||||
assertStyle[properties[0].property] = $prop1.val(); |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = finalResult; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
$prop1.val().should.equal(propValue); |
|
||||
$prop3.val().should.equal(prop3Val); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = finalResult; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
$prop1.val().should.equal(propValue + '2'); |
|
||||
$prop2.val().should.equal('2'); |
|
||||
$prop3.val().should.equal('val1'); |
|
||||
}); |
|
||||
|
|
||||
it('The value is correctly extracted from the composite string', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = 'value1 value2 value3 value4'; |
|
||||
component.set('style', style); |
|
||||
view.valueOnIndex(2).should.equal('value3'); |
|
||||
view.valueOnIndex(0).should.equal('value1'); |
|
||||
(view.valueOnIndex(4) === null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Build value from properties', function() { |
|
||||
view.model.get('properties').at(0).set('value', propValue); |
|
||||
view.model.get('properties').at(2).set('value', prop3Val); |
|
||||
view.build().should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Property({ |
|
||||
type: 'composite', |
|
||||
property: propName, |
|
||||
properties: properties, |
|
||||
defaults: defValue, |
|
||||
}); |
|
||||
view = new PropertyCompositeView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
|
describe('With target setted', () => { |
||||
|
|
||||
|
var prop2Val; |
||||
|
var prop3Val; |
||||
|
var prop2Unit; |
||||
|
var finalResult; |
||||
|
var $prop1; |
||||
|
var $prop2; |
||||
|
var $prop3; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Property({ |
||||
|
type: 'composite', |
||||
|
property: propName, |
||||
|
properties |
||||
}); |
}); |
||||
|
view = new PropertyCompositeView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
prop3Val = properties[2].list[2].value; |
||||
|
prop2Val = properties[1].defaults; |
||||
|
prop2Unit = properties[1].units[0]; |
||||
|
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
||||
|
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
||||
|
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
||||
|
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
||||
|
}); |
||||
|
|
||||
|
it('Update model on input change', () => { |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
$prop3.val(prop3Val).trigger('change'); |
||||
|
expect(view.model.get('value')).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
|
it('Update value on models change', () => { |
||||
|
view.model.get('properties').at(0).set('value', propValue); |
||||
|
view.model.get('properties').at(2).set('value', prop3Val); |
||||
|
expect(view.model.get('value')).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
|
it('Update target on value change', () => { |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
var compStyle = view.getTarget().get('style'); |
||||
|
var assertStyle = {}; |
||||
|
assertStyle[propName] = propValue + ' 0% val2'; |
||||
|
expect(compStyle).toEqual(assertStyle); |
||||
|
}); |
||||
|
|
||||
|
it('Update target on detached value change', () => { |
||||
|
model = new Property({ |
||||
|
type: 'composite', |
||||
|
property: propName, |
||||
|
properties, |
||||
|
detached: true, |
||||
|
}); |
||||
|
view = new PropertyCompositeView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.html(view.render().el); |
||||
|
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
var compStyle = view.getTarget().get('style'); |
||||
|
var assertStyle = {}; |
||||
|
assertStyle[properties[0].property] = $prop1.val(); |
||||
|
expect(compStyle).toEqual(assertStyle); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = finalResult; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect($prop1.val()).toEqual(propValue); |
||||
|
expect($prop3.val()).toEqual(prop3Val); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = finalResult; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect($prop1.val()).toEqual(propValue + '2'); |
||||
|
expect($prop2.val()).toEqual('2'); |
||||
|
expect($prop3.val()).toEqual('val1'); |
||||
|
}); |
||||
|
|
||||
|
it('The value is correctly extracted from the composite string', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = 'value1 value2 value3 value4'; |
||||
|
component.set('style', style); |
||||
|
expect(view.valueOnIndex(2)).toEqual('value3'); |
||||
|
expect(view.valueOnIndex(0)).toEqual('value1'); |
||||
|
expect(view.valueOnIndex(4)).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Build value from properties', () => { |
||||
|
view.model.get('properties').at(0).set('value', propValue); |
||||
|
view.model.get('properties').at(2).set('value', prop3Val); |
||||
|
expect(view.build()).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Property({ |
||||
|
type: 'composite', |
||||
|
property: propName, |
||||
|
properties, |
||||
|
defaults: defValue, |
||||
|
}); |
||||
|
view = new PropertyCompositeView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,211 +1,211 @@ |
|||||
define(function(require, exports, module){ |
const PropertyIntegerView = require('style_manager/view/PropertyIntegerView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyIntegerView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyIntegerView', () => { |
||||
|
|
||||
describe('PropertyIntegerView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propTarget; |
||||
var view; |
var propName = 'testprop'; |
||||
var propName = 'testprop'; |
var intValue = '55'; |
||||
var intValue = '55'; |
var unitValue = 'px'; |
||||
var unitValue = 'px'; |
var propValue = intValue + unitValue; |
||||
var propValue = intValue + unitValue; |
var defValue = 'test2value'; |
||||
var defValue = 'test2value'; |
var units = ['px', '%', 'em']; |
||||
var units = ['px', '%', 'em']; |
var minValue = -15; |
||||
var minValue = -15; |
var maxValue = 75; |
||||
var maxValue = 75; |
var unitsElSel = '.field-units select'; |
||||
var unitsElSel = '.field-units select'; |
|
||||
|
before(() => { |
||||
before(function () { |
$fixtures = $("#fixtures"); |
||||
$fixtures = $("#fixtures"); |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
}); |
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
target = new Component(); |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'integer', |
|
||||
units: units, |
|
||||
property: propName |
|
||||
}); |
|
||||
view = new PropertyIntegerView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
//view.remove(); // strange errors ???
|
target = new Component(); |
||||
}); |
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'integer', |
||||
|
units, |
||||
|
property: propName |
||||
|
}); |
||||
|
propTarget = Object.assign({}, Backbone.Events); |
||||
|
propTarget.model = component; |
||||
|
view = new PropertyIntegerView({ |
||||
|
model, |
||||
|
propTarget |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
//view.remove(); // strange errors ???
|
||||
delete component; |
}); |
||||
delete view; |
|
||||
delete model; |
|
||||
}); |
|
||||
|
|
||||
it('Rendered correctly', function() { |
after(() => { |
||||
var prop = view.el; |
$fixture.remove(); |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
component = null; |
||||
prop.querySelector('.label').should.be.ok; |
view = null; |
||||
prop.querySelector('.field').should.be.ok; |
model = null; |
||||
}); |
}); |
||||
|
|
||||
it('Inputs rendered', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
prop.querySelector('input[type=text]').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
prop.querySelector(unitsElSel).should.be.ok; |
expect(prop.querySelector('.label')).toExist(); |
||||
}); |
expect(prop.querySelector('.field')).toExist(); |
||||
|
}); |
||||
|
|
||||
it('Units rendered', function() { |
it('Inputs rendered', () => { |
||||
var select = view.el.querySelector(unitsElSel); |
var prop = view.el; |
||||
select.children.length.should.equal(units.length); |
expect(prop.querySelector('input[type=text]')).toExist(); |
||||
}); |
expect(prop.querySelector(unitsElSel)).toExist(); |
||||
|
}); |
||||
|
|
||||
it('Units rendered correctly', function() { |
it('Units rendered', () => { |
||||
var children = view.el.querySelector(unitsElSel).children; |
var select = view.el.querySelector(unitsElSel); |
||||
children[0].textContent.should.equal(units[0]); |
expect(select.children.length).toEqual(units.length); |
||||
children[1].textContent.should.equal(units[1]); |
}); |
||||
children[2].textContent.should.equal(units[2]); |
|
||||
}); |
|
||||
|
|
||||
it('Inputs should exist', function() { |
it('Units rendered correctly', () => { |
||||
view.$input.should.be.ok; |
var children = view.el.querySelector(unitsElSel).children; |
||||
view.$unit.should.be.ok; |
expect(children[0].textContent).toEqual(units[0]); |
||||
}); |
expect(children[1].textContent).toEqual(units[1]); |
||||
|
expect(children[2].textContent).toEqual(units[2]); |
||||
|
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Inputs should exist', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.$input).toExist(); |
||||
view.model.get('unit').should.equal('px'); |
expect(view.$unit).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Update model on setValue', function() { |
it('Input value is empty', () => { |
||||
view.setValue(intValue + unitValue); |
expect(view.model.get('value')).toNotExist(); |
||||
view.model.get('value').should.equal(parseFloat(intValue)); |
expect(view.model.get('unit')).toEqual('px'); |
||||
view.model.get('unit').should.equal(unitValue); |
}); |
||||
view.$input.val().should.equal(intValue); |
|
||||
view.$unit.val().should.equal(unitValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update model on input change', function() { |
it('Update model on setValue', () => { |
||||
view.$input.val(123).trigger('change'); |
view.setValue(intValue + unitValue); |
||||
view.model.get('value').should.equal(123); |
expect(view.model.get('value')).toEqual(parseFloat(intValue)); |
||||
}); |
expect(view.model.get('unit')).toEqual(unitValue); |
||||
|
expect(view.$input.val()).toEqual(intValue); |
||||
|
expect(view.$unit.val()).toEqual(unitValue); |
||||
|
}); |
||||
|
|
||||
it('Update model on unit change', function() { |
it('Update model on input change', () => { |
||||
view.$unit.val(units[1]).trigger('change'); |
view.$input.val(123).trigger('change'); |
||||
view.model.get('unit').should.equal(units[1]); |
expect(view.model.get('value')).toEqual(123); |
||||
}); |
}); |
||||
|
|
||||
it('Update input on value change', function() { |
it('Update model on unit change', () => { |
||||
view.model.set('value', intValue); |
view.$unit.val(units[1]).trigger('change'); |
||||
view.getInputValue().should.equal(intValue); |
expect(view.model.get('unit')).toEqual(units[1]); |
||||
}); |
}); |
||||
|
|
||||
it('Update target on value change', function() { |
it('Update input on value change', () => { |
||||
view.selectedComponent = component; |
view.model.set('value', intValue); |
||||
view.model.set('value', intValue); |
expect(view.getInputValue()).toEqual(intValue); |
||||
var compStyle = view.selectedComponent.get('style'); |
}); |
||||
var assertStyle = {}; |
|
||||
assertStyle[propName] = propValue; |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
describe('With target setted', function() { |
it('Update target on value change', () => { |
||||
|
view.selectedComponent = component; |
||||
beforeEach(function () { |
view.model.set('value', intValue); |
||||
target.model = component; |
var compStyle = view.selectedComponent.get('style'); |
||||
view = new PropertyIntegerView({ |
var assertStyle = {}; |
||||
model: model, |
assertStyle[propName] = propValue; |
||||
propTarget: target |
expect(compStyle).toEqual(assertStyle); |
||||
}); |
}); |
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(parseFloat(intValue)); |
|
||||
view.getInputValue().should.equal(intValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = '20em'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(20); |
|
||||
view.model.get('unit').should.equal('em'); |
|
||||
view.$input.val().should.equal('20'); |
|
||||
view.$unit.val().should.equal('em'); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'integer', |
|
||||
units: units, |
|
||||
property: propName, |
|
||||
defaults: intValue, |
|
||||
min: minValue, |
|
||||
max: maxValue, |
|
||||
unit: units[1], |
|
||||
}); |
|
||||
view = new PropertyIntegerView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(parseInt(intValue)); |
|
||||
view.model.get('unit').should.equal(units[1]); |
|
||||
}); |
|
||||
|
|
||||
it('Input value is as default', function() { |
|
||||
view.$input.val().should.equal(intValue); |
|
||||
view.$unit.val().should.equal(units[1]); |
|
||||
}); |
|
||||
|
|
||||
it('Input follows min', function() { |
|
||||
view.$input.val(minValue - 50).trigger('change'); |
|
||||
view.model.get('value').should.equal(minValue); |
|
||||
view.$input.val().should.equal(minValue + ""); |
|
||||
}); |
|
||||
|
|
||||
it('Input follows max', function() { |
|
||||
view.$input.val(maxValue + 50).trigger('change'); |
|
||||
view.model.get('value').should.equal(maxValue); |
|
||||
view.$input.val().should.equal(maxValue + ""); |
|
||||
}); |
|
||||
|
|
||||
}); |
describe('With target setted', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
target.model = component; |
||||
|
view = new PropertyIntegerView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(parseFloat(intValue)); |
||||
|
expect(view.getInputValue()).toEqual(intValue); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = '20em'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(20); |
||||
|
expect(view.model.get('unit')).toEqual('em'); |
||||
|
expect(view.$input.val()).toEqual('20'); |
||||
|
expect(view.$unit.val()).toEqual('em'); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'integer', |
||||
|
units, |
||||
|
property: propName, |
||||
|
defaults: intValue, |
||||
|
min: minValue, |
||||
|
max: maxValue, |
||||
|
unit: units[1], |
||||
|
}); |
||||
|
view = new PropertyIntegerView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(parseInt(intValue)); |
||||
|
expect(view.model.get('unit')).toEqual(units[1]); |
||||
|
}); |
||||
|
|
||||
|
it('Input value is as default', () => { |
||||
|
expect(view.$input.val()).toEqual(intValue); |
||||
|
expect(view.$unit.val()).toEqual(units[1]); |
||||
|
}); |
||||
|
|
||||
|
it('Input follows min', () => { |
||||
|
view.$input.val(minValue - 50).trigger('change'); |
||||
|
expect(view.model.get('value')).toEqual(minValue); |
||||
|
expect(view.$input.val()).toEqual(minValue + ""); |
||||
|
}); |
||||
|
|
||||
|
it('Input follows max', () => { |
||||
|
view.$input.val(maxValue + 50).trigger('change'); |
||||
|
expect(view.model.get('value')).toEqual(maxValue); |
||||
|
expect(view.$input.val()).toEqual(maxValue + ""); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,177 +1,176 @@ |
|||||
define(function(require, exports, module){ |
const PropertyRadioView = require('style_manager/view/PropertyRadioView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyRadioView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyRadioView', () => { |
||||
|
|
||||
describe('PropertyRadioView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propTarget; |
||||
var view; |
var propName = 'testprop'; |
||||
var propName = 'testprop'; |
var propValue = 'test1value'; |
||||
var propValue = 'test1value'; |
var defValue = 'test2value'; |
||||
var defValue = 'test2value'; |
var options = [ |
||||
var options = [ |
{ value: 'test1value', 'title': 'testtitle'}, |
||||
{ value: 'test1value', 'title': 'testtitle'}, |
{ name: 'test2', value: 'test2value'} |
||||
{ name: 'test2', value: 'test2value'} |
]; |
||||
]; |
|
||||
|
before(() => { |
||||
before(function () { |
$fixtures = $("#fixtures"); |
||||
$fixtures = $("#fixtures"); |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
}); |
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
target = new Component(); |
||||
component = new Component(); |
component = new Component(); |
||||
model = new Property({ |
model = new Property({ |
||||
type: 'radio', |
type: 'radio', |
||||
list: options, |
list: options, |
||||
property: propName |
property: propName |
||||
}); |
}); |
||||
view = new PropertyRadioView({ |
propTarget = Object.assign({}, Backbone.Events); |
||||
model: model |
propTarget.model = component; |
||||
}); |
view = new PropertyRadioView({ |
||||
$fixture.empty().appendTo($fixtures); |
model, |
||||
$fixture.html(view.render().el); |
propTarget |
||||
}); |
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
//view.remove(); // strange errors ???
|
//view.remove(); // strange errors ???
|
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
$fixture.remove(); |
$fixture.remove(); |
||||
delete component; |
component = null; |
||||
}); |
}); |
||||
|
|
||||
it('Rendered correctly', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
prop.querySelector('.label').should.be.ok; |
expect(prop.querySelector('.label')).toExist(); |
||||
prop.querySelector('.field').should.be.ok; |
expect(prop.querySelector('.field')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Radio rendered', function() { |
it('Radio rendered', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
prop.querySelector('input[type=radio]').should.be.ok; |
expect(prop.querySelector('input[type=radio]')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Options rendered', function() { |
it('Options rendered', () => { |
||||
var input = view.el.querySelector('#input-holder'); |
var input = view.el.querySelector('#input-holder'); |
||||
input.children.length.should.equal(options.length); |
expect(input.children.length).toEqual(options.length); |
||||
}); |
}); |
||||
|
|
||||
it('Options rendered correctly', function() { |
it('Options rendered correctly', () => { |
||||
var children = view.el.querySelector('#input-holder').children; |
var children = view.el.querySelector('#input-holder').children; |
||||
children[0].querySelector('label').textContent.should.equal('test1value'); |
expect(children[0].querySelector('label').textContent).toEqual('test1value'); |
||||
children[1].querySelector('label').textContent.should.equal('test2'); |
expect(children[1].querySelector('label').textContent).toEqual('test2'); |
||||
children[0].querySelector('input').value.should.equal(options[0].value); |
expect(children[0].querySelector('input').value).toEqual(options[0].value); |
||||
children[1].querySelector('input').value.should.equal(options[1].value); |
expect(children[1].querySelector('input').value).toEqual(options[1].value); |
||||
children[0].querySelector('label').getAttribute('title').should.equal(options[0].title); |
expect(children[0].querySelector('label').getAttribute('title')).toEqual(options[0].title); |
||||
(children[1].querySelector('label').getAttribute('title') == null) |
expect(children[1].querySelector('label').getAttribute('title')).toEqual(null); |
||||
.should.equal(true); |
}); |
||||
}); |
|
||||
|
|
||||
it('Input should exist', function() { |
it('Input should exist', () => { |
||||
view.$input.should.be.ok; |
expect(view.$input).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Input value is empty', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.model.get('value')).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Update model on input change', function() { |
it('Update model on input change', () => { |
||||
view.setValue(propValue); |
view.setValue(propValue); |
||||
view.model.get('value').should.equal(propValue); |
expect(view.model.get('value')).toEqual(propValue); |
||||
view.getInputValue().should.equal(propValue); |
expect(view.getInputValue()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update input on value change', function() { |
it('Update input on value change', () => { |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
view.getInputValue().should.equal(propValue); |
expect(view.getInputValue()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update target on value change', function() { |
it('Update target on value change', () => { |
||||
view.selectedComponent = component; |
view.selectedComponent = component; |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
var compStyle = view.selectedComponent.get('style'); |
var compStyle = view.selectedComponent.get('style'); |
||||
var assertStyle = {}; |
var assertStyle = {}; |
||||
assertStyle[propName] = propValue; |
assertStyle[propName] = propValue; |
||||
compStyle.should.deep.equal(assertStyle); |
expect(compStyle).toEqual(assertStyle); |
||||
}); |
}); |
||||
|
|
||||
describe('With target setted', function() { |
describe('With target setted', () => { |
||||
|
|
||||
beforeEach(function () { |
|
||||
target.model = component; |
|
||||
view = new PropertyRadioView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(propValue); |
|
||||
view.getInputValue().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = 'test2value'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal('test2value'); |
|
||||
view.getInputValue().should.equal('test2value'); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'select', |
|
||||
list: options, |
|
||||
defaults: defValue, |
|
||||
property: propName |
|
||||
}); |
|
||||
view = new PropertyRadioView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
it('Input value is as default', function() { |
|
||||
view.getInputValue().should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
|
beforeEach(() => { |
||||
|
target.model = component; |
||||
|
view = new PropertyRadioView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(propValue); |
||||
|
expect(view.getInputValue()).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = 'test2value'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual('test2value'); |
||||
|
expect(view.getInputValue()).toEqual('test2value'); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'select', |
||||
|
list: options, |
||||
|
defaults: defValue, |
||||
|
property: propName |
||||
}); |
}); |
||||
|
view = new PropertyRadioView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
|
it('Input value is as default', () => { |
||||
|
expect(view.getInputValue()).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,196 +1,197 @@ |
|||||
define(function(require, exports, module){ |
const PropertySelectView = require('style_manager/view/PropertySelectView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertySelectView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertySelectView', () => { |
||||
|
|
||||
describe('PropertySelectView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propTarget; |
||||
var view; |
var options; |
||||
var propName = 'testprop'; |
var propName = 'testprop'; |
||||
var propValue = 'test1value'; |
var propValue = 'test1value'; |
||||
var defValue = 'test2value'; |
var defValue = 'test2value'; |
||||
var options = [ |
var options = [ |
||||
{value: 'test1value', style: 'test:style'}, |
{value: 'test1value', style: 'test:style'}, |
||||
{name: 'test2', value: 'test2value'} |
{name: 'test2', value: 'test2value'} |
||||
]; |
]; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
}); |
}); |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
propTarget = Object.assign({}, Backbone.Events); |
||||
component = new Component(); |
target = new Component(); |
||||
model = new Property({ |
component = new Component(); |
||||
type: 'select', |
model = new Property({ |
||||
list: options, |
type: 'select', |
||||
property: propName |
list: options, |
||||
}); |
property: propName |
||||
view = new PropertySelectView({ |
}); |
||||
model: model |
propTarget.model = component; |
||||
}); |
view = new PropertySelectView({ |
||||
$fixture.empty().appendTo($fixtures); |
model, |
||||
$fixture.html(view.render().el); |
propTarget |
||||
}); |
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
//view.remove(); // strange errors ???
|
//view.remove(); // strange errors ???
|
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
$fixture.remove(); |
$fixture.remove(); |
||||
delete component; |
component = null; |
||||
}); |
}); |
||||
|
|
||||
it('Rendered correctly', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
prop.querySelector('.label').should.be.ok; |
expect(prop.querySelector('.label')).toExist(); |
||||
prop.querySelector('.field').should.be.ok; |
expect(prop.querySelector('.field')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Select rendered', function() { |
it('Select rendered', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
prop.querySelector('select').should.be.ok; |
expect(prop.querySelector('select')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Options rendered', function() { |
it('Options rendered', () => { |
||||
var select = view.el.querySelector('select'); |
var select = view.el.querySelector('select'); |
||||
select.children.length.should.equal(options.length); |
expect(select.children.length).toEqual(options.length); |
||||
}); |
}); |
||||
|
|
||||
it('Options rendered correctly', function() { |
it('Options rendered correctly', () => { |
||||
var select = view.el.querySelector('select'); |
var select = view.el.querySelector('select'); |
||||
var children = select.children; |
var children = select.children; |
||||
children[0].value.should.equal(options[0].value); |
expect(children[0].value).toEqual(options[0].value); |
||||
children[1].value.should.equal(options[1].value); |
expect(children[1].value).toEqual(options[1].value); |
||||
children[0].textContent.should.equal(options[0].value); |
expect(children[0].textContent).toEqual(options[0].value); |
||||
children[1].textContent.should.equal(options[1].name); |
expect(children[1].textContent).toEqual(options[1].name); |
||||
children[0].getAttribute('style').should.equal(options[0].style); |
expect(children[0].getAttribute('style')).toEqual(options[0].style); |
||||
(children[1].getAttribute('style') == null).should.equal(true); |
expect(children[1].getAttribute('style')).toEqual(null); |
||||
}); |
}); |
||||
|
|
||||
it('Input should exist', function() { |
it('Input should exist', () => { |
||||
view.$input.should.be.ok; |
expect(view.$input).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Input value is empty', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.model.get('value')).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Update model on input change', function() { |
it('Update model on input change', () => { |
||||
view.$input.val(propValue).trigger('change'); |
view.$input.val(propValue).trigger('change'); |
||||
view.model.get('value').should.equal(propValue); |
expect(view.model.get('value')).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update input on value change', function() { |
it('Update input on value change', () => { |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
view.$input.val().should.equal(propValue); |
expect(view.$input.val()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update target on value change', function() { |
it('Update target on value change', () => { |
||||
view.selectedComponent = component; |
view.selectedComponent = component; |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
var compStyle = view.selectedComponent.get('style'); |
var compStyle = view.selectedComponent.get('style'); |
||||
var assertStyle = {}; |
var assertStyle = {}; |
||||
assertStyle[propName] = propValue; |
assertStyle[propName] = propValue; |
||||
compStyle.should.deep.equal(assertStyle); |
expect(compStyle).toEqual(assertStyle); |
||||
}); |
}); |
||||
|
|
||||
describe('With target setted', function() { |
describe('With target setted', () => { |
||||
|
|
||||
beforeEach(function () { |
|
||||
target.model = component; |
|
||||
view = new PropertySelectView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(propValue); |
|
||||
view.$input.val().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = 'test2value'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal('test2value'); |
|
||||
view.$input.val().should.equal('test2value'); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'select', |
|
||||
list: options, |
|
||||
defaults: defValue, |
|
||||
property: propName |
|
||||
}); |
|
||||
view = new PropertySelectView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
it('Empty value as default', function() { |
|
||||
options = [ |
|
||||
{value: 'test1value', name: 'test1'}, |
|
||||
{value: 'test2value', name: 'test2'}, |
|
||||
{value: '', name: 'TestDef'} |
|
||||
]; |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
type: 'select', |
|
||||
list: options, |
|
||||
defaults: '', |
|
||||
property: 'emptyDefault' |
|
||||
}); |
|
||||
view = new PropertySelectView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.html(view.render().el); |
|
||||
view.$input.val().should.equal(''); |
|
||||
}); |
|
||||
|
|
||||
it('Input value is as default', function() { |
|
||||
view.$input.val().should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
|
beforeEach(() => { |
||||
|
target.model = component; |
||||
|
view = new PropertySelectView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(propValue); |
||||
|
expect(view.$input.val()).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = 'test2value'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual('test2value'); |
||||
|
expect(view.$input.val()).toEqual('test2value'); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'select', |
||||
|
list: options, |
||||
|
defaults: defValue, |
||||
|
property: propName |
||||
|
}); |
||||
|
view = new PropertySelectView({ |
||||
|
model |
||||
}); |
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
|
it('Empty value as default', () => { |
||||
|
options = [ |
||||
|
{value: 'test1value', name: 'test1'}, |
||||
|
{value: 'test2value', name: 'test2'}, |
||||
|
{value: '', name: 'TestDef'} |
||||
|
]; |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
type: 'select', |
||||
|
list: options, |
||||
|
defaults: '', |
||||
|
property: 'emptyDefault' |
||||
|
}); |
||||
|
view = new PropertySelectView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.html(view.render().el); |
||||
|
expect(view.$input.val()).toEqual(''); |
||||
|
}); |
||||
|
|
||||
|
it('Input value is as default', () => { |
||||
|
expect(view.$input.val()).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,350 +1,347 @@ |
|||||
define(function(require, exports, module){ |
const PropertyStackView = require('style_manager/view/PropertyStackView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyStackView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyStackView', () => { |
||||
|
|
||||
describe('PropertyStackView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propName = 'testprop'; |
||||
var view; |
var propValue = 'test1value'; |
||||
var propName = 'testprop'; |
var defValue = 'test2value'; |
||||
var propValue = 'test1value'; |
var layers = [ |
||||
var defValue = 'test2value'; |
{value: 'lval1'}, |
||||
var layers = [ |
{value: 'lval2 lval22'}, |
||||
{value: 'lval1'}, |
{value: 'lval3 lval32 lval33'} |
||||
{value: 'lval2 lval22'}, |
]; |
||||
{value: 'lval3 lval32 lval33'} |
var properties = [ |
||||
]; |
{property: 'subprop1'}, |
||||
var properties = [ |
{ |
||||
{property: 'subprop1'}, |
type: 'integer', |
||||
{ |
property: 'subprop2', |
||||
type: 'integer', |
defaults: 0, |
||||
property: 'subprop2', |
units: ['%', 'px'] |
||||
defaults: 0, |
}, |
||||
units: ['%', 'px'] |
{ |
||||
}, |
type: 'select', |
||||
{ |
property: 'subprop3', |
||||
type: 'select', |
defaults: 'val2', |
||||
property: 'subprop3', |
list: [ |
||||
defaults: 'val2', |
{value:'val1'}, |
||||
list: [ |
{value:'val2'}, |
||||
{value:'val1'}, |
{value:'val3'}, |
||||
{value:'val2'}, |
] |
||||
{value:'val3'}, |
}, |
||||
] |
]; |
||||
}, |
|
||||
]; |
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
before(function () { |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
$fixtures = $("#fixtures"); |
}); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
|
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
target = new Component(); |
||||
component = new Component(); |
component = new Component(); |
||||
target.model = component; |
target.model = component; |
||||
model = new Property({ |
model = new Property({ |
||||
type: 'stack', |
type: 'stack', |
||||
property: propName, |
property: propName, |
||||
properties: properties |
properties |
||||
}); |
}); |
||||
view = new PropertyStackView({ |
view = new PropertyStackView({ |
||||
model: model |
model |
||||
}); |
}); |
||||
$fixture.empty().appendTo($fixtures); |
$fixture.empty().appendTo($fixtures); |
||||
$fixture.html(view.render().el); |
$fixture.html(view.render().el); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
//view.remove(); // strange errors ???
|
//view.remove(); // strange errors ???
|
||||
}); |
}); |
||||
|
|
||||
after(function () { |
after(() => { |
||||
$fixture.remove(); |
$fixture.remove(); |
||||
delete component; |
component = null; |
||||
delete view; |
view = null; |
||||
delete model; |
model = null; |
||||
}); |
}); |
||||
|
|
||||
it('Rendered correctly', function() { |
it('Rendered correctly', () => { |
||||
var prop = view.el; |
var prop = view.el; |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
prop.querySelector('.label').should.be.ok; |
expect(prop.querySelector('.label')).toExist(); |
||||
prop.querySelector('.field').should.be.ok; |
expect(prop.querySelector('.field')).toExist(); |
||||
prop.querySelector('#add').should.be.ok; |
expect(prop.querySelector('#add')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Layers rendered', function() { |
it('Layers rendered', () => { |
||||
view.el.querySelector('.layers').should.be.ok; |
expect(view.el.querySelector('.layers')).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Layers should exist', function() { |
it('Layers should exist', () => { |
||||
view.$props.should.be.ok; |
expect(view.$props).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Layers rendered correctly', function() { |
it('Layers rendered correctly', () => { |
||||
var children = view.$props.get(0).children; |
var children = view.$props.get(0).children; |
||||
children.length.should.equal(properties.length + 1); |
expect(children.length).toEqual(properties.length + 1); |
||||
children[0].id.should.equal(properties[0].property); |
expect(children[0].id).toEqual(properties[0].property); |
||||
children[1].id.should.equal(properties[1].property); |
expect(children[1].id).toEqual(properties[1].property); |
||||
children[2].id.should.equal(properties[2].property); |
expect(children[2].id).toEqual(properties[2].property); |
||||
}); |
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Input value is empty', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.model.get('value')).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Layers container is empty', function() { |
it('Layers container is empty', () => { |
||||
var layers = view.el.querySelector('.layers'); |
var layers = view.el.querySelector('.layers'); |
||||
layers.innerHTML.should.be.empty; |
expect(layers.innerHTML).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
describe('With layers', function() { |
describe('With layers', () => { |
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Property({ |
|
||||
type: 'stack', |
|
||||
property: propName, |
|
||||
properties: properties, |
|
||||
}); |
|
||||
view = new PropertyStackView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
model.get('layers').add(layers); |
|
||||
}); |
|
||||
|
|
||||
it('Layers inserted', function() { |
|
||||
view.getLayers().length.should.equal(layers.length); |
|
||||
}); |
|
||||
|
|
||||
it('Get value on index', function() { |
|
||||
view.model.set('stackIndex', 1); |
|
||||
view.valueOnIndex(1).should.equal('lval22'); |
|
||||
}); |
|
||||
|
|
||||
it('createValue merges layers', function() { |
|
||||
view.createValue().should.equal('lval1, lval2 lval22, lval3 lval32 lval33'); |
|
||||
}); |
|
||||
|
|
||||
it('Add layer', function() { |
|
||||
view.addLayer(); |
|
||||
view.getLayers().length.should.equal(layers.length+1); |
|
||||
}); |
|
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Property({ |
||||
|
type: 'stack', |
||||
|
property: propName, |
||||
|
properties, |
||||
}); |
}); |
||||
|
view = new PropertyStackView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
model.get('layers').add(layers); |
||||
|
}); |
||||
|
|
||||
|
it('Layers inserted', () => { |
||||
|
expect(view.getLayers().length).toEqual(layers.length); |
||||
|
}); |
||||
|
|
||||
|
it('Get value on index', () => { |
||||
|
view.model.set('stackIndex', 1); |
||||
|
expect(view.valueOnIndex(1)).toEqual('lval22'); |
||||
|
}); |
||||
|
|
||||
|
it('createValue merges layers', () => { |
||||
|
expect(view.createValue()).toEqual('lval1, lval2 lval22, lval3 lval32 lval33'); |
||||
|
}); |
||||
|
|
||||
describe('With target setted', function() { |
it('Add layer', () => { |
||||
|
view.addLayer(); |
||||
var prop2Val; |
expect(view.getLayers().length).toEqual(layers.length + 1); |
||||
var prop3Val; |
}); |
||||
var prop2Unit; |
|
||||
var finalResult; |
|
||||
var $prop1; |
|
||||
var $prop2; |
|
||||
var $prop3; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Property({ |
|
||||
type: 'stack', |
|
||||
property: propName, |
|
||||
properties: properties |
|
||||
}); |
|
||||
view = new PropertyStackView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
prop3Val = properties[2].list[2].value; |
|
||||
prop2Val = properties[1].defaults; |
|
||||
prop2Unit = properties[1].units[0]; |
|
||||
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
|
||||
view.addLayer(); |
|
||||
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
|
||||
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
|
||||
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
|
||||
}); |
|
||||
|
|
||||
it('Update model on input change', function() { |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
$prop3.val(prop3Val).trigger('change'); |
|
||||
view.model.get('value').should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
it('Update value on models change', function() { |
|
||||
view.model.get('properties').at(0).set('value', propValue); |
|
||||
view.model.get('properties').at(2).set('value', prop3Val); |
|
||||
view.model.get('value').should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
it('Update target on value change', function() { |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
var compStyle = view.getTarget().get('style'); |
|
||||
var assertStyle = {}; |
|
||||
assertStyle[propName] = propValue + ' 0% val2'; |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
var finalResult2 = 'A B C'; |
|
||||
style[propName] = finalResult + ', ' + finalResult2; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
var layers = view.getLayers(); |
|
||||
layers.at(0).get('value').should.equal(finalResult); |
|
||||
layers.at(1).get('value').should.equal(finalResult2); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
var finalResult2 = 'A2 B2 C2'; |
|
||||
style[propName] = finalResult; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = finalResult + ', ' + finalResult2; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
var layers = view.getLayers(); |
|
||||
layers.at(0).get('value').should.equal(finalResult); |
|
||||
layers.at(1).get('value').should.equal(finalResult2); |
|
||||
}); |
|
||||
|
|
||||
it('The value is correctly extracted from the composite string', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = 'value1 value2, value3 value4'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.set('stackIndex', 1); |
|
||||
view.valueOnIndex(0).should.equal('value3'); |
|
||||
view.valueOnIndex(1).should.equal('value4'); |
|
||||
(view.valueOnIndex(2) === null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('The value is correctly extracted from the string with functions', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.set('stackIndex', 1); |
|
||||
view.valueOnIndex(0).should.equal('func(4ddb,aAS5b,sS.6b)'); |
|
||||
view.valueOnIndex(1).should.equal('value3'); |
|
||||
(view.valueOnIndex(2) === null).should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('Build value from properties', function() { |
|
||||
view.model.get('properties').at(0).set('value', propValue); |
|
||||
view.model.get('properties').at(2).set('value', prop3Val); |
|
||||
view.build().should.equal(finalResult); |
|
||||
}); |
|
||||
|
|
||||
|
}); |
||||
|
|
||||
|
describe('With target setted', () => { |
||||
|
|
||||
|
var prop2Val; |
||||
|
var prop3Val; |
||||
|
var prop2Unit; |
||||
|
var finalResult; |
||||
|
var $prop1; |
||||
|
var $prop2; |
||||
|
var $prop3; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Property({ |
||||
|
type: 'stack', |
||||
|
property: propName, |
||||
|
properties |
||||
}); |
}); |
||||
|
view = new PropertyStackView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
prop3Val = properties[2].list[2].value; |
||||
|
prop2Val = properties[1].defaults; |
||||
|
prop2Unit = properties[1].units[0]; |
||||
|
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
||||
|
view.addLayer(); |
||||
|
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
||||
|
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
||||
|
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
||||
|
}); |
||||
|
|
||||
|
it('Update model on input change', () => { |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
$prop3.val(prop3Val).trigger('change'); |
||||
|
expect(view.model.get('value')).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
|
it('Update value on models change', () => { |
||||
|
view.model.get('properties').at(0).set('value', propValue); |
||||
|
view.model.get('properties').at(2).set('value', prop3Val); |
||||
|
expect(view.model.get('value')).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
|
it('Update target on value change', () => { |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
var compStyle = view.getTarget().get('style'); |
||||
|
var assertStyle = {}; |
||||
|
assertStyle[propName] = propValue + ' 0% val2'; |
||||
|
expect(compStyle).toEqual(assertStyle); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
var finalResult2 = 'A B C'; |
||||
|
style[propName] = finalResult + ', ' + finalResult2; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
var layers = view.getLayers(); |
||||
|
expect(layers.at(0).get('value')).toEqual(finalResult); |
||||
|
expect(layers.at(1).get('value')).toEqual(finalResult2); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
var finalResult2 = 'A2 B2 C2'; |
||||
|
style[propName] = finalResult; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = finalResult + ', ' + finalResult2; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
var layers = view.getLayers(); |
||||
|
expect(layers.at(0).get('value')).toEqual(finalResult); |
||||
|
expect(layers.at(1).get('value')).toEqual(finalResult2); |
||||
|
}); |
||||
|
|
||||
|
it('The value is correctly extracted from the composite string', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = 'value1 value2, value3 value4'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
view.model.set('stackIndex', 1); |
||||
|
expect(view.valueOnIndex(0)).toEqual('value3'); |
||||
|
expect(view.valueOnIndex(1)).toEqual('value4'); |
||||
|
expect(view.valueOnIndex(2)).toEqual(null); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
it('The value is correctly extracted from the string with functions', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
view.model.set('stackIndex', 1); |
||||
|
expect(view.valueOnIndex(0)).toEqual('func(4ddb,aAS5b,sS.6b)'); |
||||
|
expect(view.valueOnIndex(1)).toEqual('value3'); |
||||
|
expect(view.valueOnIndex(2)).toEqual(null); |
||||
|
}); |
||||
|
|
||||
|
it('Build value from properties', () => { |
||||
|
view.model.get('properties').at(0).set('value', propValue); |
||||
|
view.model.get('properties').at(2).set('value', prop3Val); |
||||
|
expect(view.build()).toEqual(finalResult); |
||||
|
}); |
||||
|
|
||||
describe('Detached with target setted', function() { |
}); |
||||
|
|
||||
var prop2Val; |
|
||||
var prop3Val; |
|
||||
var prop2Unit; |
|
||||
var finalResult; |
|
||||
var $prop1; |
|
||||
var $prop2; |
|
||||
var $prop3; |
|
||||
var compStyle = { |
|
||||
subprop1: '1px, 20px, 30px', |
|
||||
subprop2: 'A, B, C', |
|
||||
subprop3: 'W, X, Y', |
|
||||
subprop555: 'T, T, T', |
|
||||
}; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Property({ |
|
||||
type: 'stack', |
|
||||
property: propName, |
|
||||
properties: properties, |
|
||||
detached: true, |
|
||||
}); |
|
||||
view = new PropertyStackView({ |
|
||||
model: model, |
|
||||
propTarget: target |
|
||||
}); |
|
||||
$fixture.html(view.render().el); |
|
||||
prop3Val = properties[2].list[2].value; |
|
||||
prop2Val = properties[1].defaults; |
|
||||
prop2Unit = properties[1].units[0]; |
|
||||
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
|
||||
view.addLayer(); |
|
||||
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
|
||||
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
|
||||
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
|
||||
}); |
|
||||
|
|
||||
it('Returns correctly layers array from target', function() { |
|
||||
component.set('style', compStyle); |
|
||||
var result = [{ |
|
||||
subprop1: '1px', |
|
||||
subprop2: 'A', |
|
||||
subprop3: 'W', |
|
||||
},{ |
|
||||
subprop1: '20px', |
|
||||
subprop2: 'B', |
|
||||
subprop3: 'X', |
|
||||
},{ |
|
||||
subprop1: '30px', |
|
||||
subprop2: 'C', |
|
||||
subprop3: 'Y', |
|
||||
}]; |
|
||||
view.getLayersFromTarget().should.deep.equal(result); |
|
||||
}); |
|
||||
|
|
||||
it('Update target on detached value change', function() { |
|
||||
$prop1.val(propValue).trigger('change'); |
|
||||
var compStyle = view.getTarget().get('style'); |
|
||||
var assertStyle = {}; |
|
||||
assertStyle[properties[0].property] = $prop1.val(); |
|
||||
assertStyle[properties[1].property] = '0%'; |
|
||||
assertStyle[properties[2].property] = properties[2].defaults; |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
component.set('style', compStyle); |
|
||||
view.propTarget.trigger('update'); |
|
||||
var layers = view.getLayers(); |
|
||||
layers.length.should.equal(3); |
|
||||
layers.at(0).get('values').should.deep.equal({ |
|
||||
subprop1: '1px', |
|
||||
subprop2: 'A', |
|
||||
subprop3: 'W', |
|
||||
}); |
|
||||
layers.at(1).get('values').should.deep.equal({ |
|
||||
subprop1: '20px', |
|
||||
subprop2: 'B', |
|
||||
subprop3: 'X', |
|
||||
}); |
|
||||
layers.at(2).get('values').should.deep.equal({ |
|
||||
subprop1: '30px', |
|
||||
subprop2: 'C', |
|
||||
subprop3: 'Y', |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
|
describe('Detached with target setted', () => { |
||||
|
|
||||
|
var prop2Val; |
||||
|
var prop3Val; |
||||
|
var prop2Unit; |
||||
|
var finalResult; |
||||
|
var $prop1; |
||||
|
var $prop2; |
||||
|
var $prop3; |
||||
|
var compStyle = { |
||||
|
subprop1: '1px, 20px, 30px', |
||||
|
subprop2: 'A, B, C', |
||||
|
subprop3: 'W, X, Y', |
||||
|
subprop555: 'T, T, T', |
||||
|
}; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Property({ |
||||
|
type: 'stack', |
||||
|
property: propName, |
||||
|
properties, |
||||
|
detached: true, |
||||
|
}); |
||||
|
view = new PropertyStackView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.html(view.render().el); |
||||
|
prop3Val = properties[2].list[2].value; |
||||
|
prop2Val = properties[1].defaults; |
||||
|
prop2Unit = properties[1].units[0]; |
||||
|
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val; |
||||
|
view.addLayer(); |
||||
|
$prop1 = view.$props.find('#' + properties[0].property + ' input'); |
||||
|
$prop2 = view.$props.find('#' + properties[1].property + ' input'); |
||||
|
$prop3 = view.$props.find('#' + properties[2].property + ' select'); |
||||
|
}); |
||||
|
|
||||
|
it('Returns correctly layers array from target', () => { |
||||
|
component.set('style', compStyle); |
||||
|
var result = [{ |
||||
|
subprop1: '1px', |
||||
|
subprop2: 'A', |
||||
|
subprop3: 'W', |
||||
|
},{ |
||||
|
subprop1: '20px', |
||||
|
subprop2: 'B', |
||||
|
subprop3: 'X', |
||||
|
},{ |
||||
|
subprop1: '30px', |
||||
|
subprop2: 'C', |
||||
|
subprop3: 'Y', |
||||
|
}]; |
||||
|
expect(view.getLayersFromTarget()).toEqual(result); |
||||
|
}); |
||||
|
|
||||
|
it('Update target on detached value change', () => { |
||||
|
$prop1.val(propValue).trigger('change'); |
||||
|
var compStyle = view.getTarget().get('style'); |
||||
|
var assertStyle = {}; |
||||
|
assertStyle[properties[0].property] = $prop1.val(); |
||||
|
assertStyle[properties[1].property] = '0%'; |
||||
|
assertStyle[properties[2].property] = properties[2].defaults; |
||||
|
expect(compStyle).toEqual(assertStyle); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
component.set('style', compStyle); |
||||
|
view.propTarget.trigger('update'); |
||||
|
var layers = view.getLayers(); |
||||
|
expect(layers.length).toEqual(3); |
||||
|
expect(layers.at(0).get('values')).toEqual({ |
||||
|
subprop1: '1px', |
||||
|
subprop2: 'A', |
||||
|
subprop3: 'W', |
||||
|
}); |
||||
|
expect(layers.at(1).get('values')).toEqual({ |
||||
|
subprop1: '20px', |
||||
|
subprop2: 'B', |
||||
|
subprop3: 'X', |
||||
|
}); |
||||
|
expect(layers.at(2).get('values')).toEqual({ |
||||
|
subprop1: '30px', |
||||
|
subprop2: 'C', |
||||
|
subprop3: 'Y', |
||||
}); |
}); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,238 +1,233 @@ |
|||||
define(function(require, exports, module){ |
const PropertyView = require('style_manager/view/PropertyView'); |
||||
'use strict'; |
const Property = require('style_manager/model/Property'); |
||||
var PropertyView = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Property = require('StyleManager/model/Property'); |
|
||||
var Component = require('DomComponents/model/Component'); |
module.exports = { |
||||
|
run() { |
||||
module.exports = { |
|
||||
run : function(){ |
describe('PropertyView', () => { |
||||
|
|
||||
describe('PropertyView', function() { |
var component; |
||||
|
var $fixtures; |
||||
var component; |
var $fixture; |
||||
var $fixtures; |
var target; |
||||
var $fixture; |
var model; |
||||
var target; |
var view; |
||||
var model; |
var propTarget; |
||||
var view; |
var options; |
||||
var propName = 'testprop'; |
var propName = 'testprop'; |
||||
var propValue = 'testvalue'; |
var propValue = 'testvalue'; |
||||
var defValue = 'testDefault'; |
var defValue = 'testDefault'; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture = $('<div class="sm-fixture"></div>'); |
$fixture = $('<div class="sm-fixture"></div>'); |
||||
}); |
}); |
||||
|
|
||||
beforeEach(function () { |
|
||||
target = new Component(); |
|
||||
component = new Component(); |
|
||||
model = new Property({property: propName}); |
|
||||
view = new PropertyView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
//view.remove(); // strange errors ???
|
propTarget = Object.assign({}, Backbone.Events); |
||||
}); |
target = new Component(); |
||||
|
component = new Component(); |
||||
|
model = new Property({property: propName}); |
||||
|
propTarget.model = component; |
||||
|
options = { |
||||
|
model, |
||||
|
propTarget |
||||
|
}; |
||||
|
view = new PropertyView(options); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
//view.remove(); // strange errors ???
|
||||
delete component; |
}); |
||||
}); |
|
||||
|
|
||||
it('Rendered correctly', function() { |
after(() => { |
||||
var prop = view.el; |
$fixture.remove(); |
||||
$fixture.get(0).querySelector('.property').should.be.ok; |
component = null; |
||||
prop.querySelector('.label').should.be.ok; |
}); |
||||
prop.querySelector('.field').should.be.ok; |
|
||||
}); |
|
||||
|
|
||||
it('Input should exist', function() { |
it('Rendered correctly', () => { |
||||
view.$input.should.be.ok; |
var prop = view.el; |
||||
}); |
expect($fixture.get(0).querySelector('.property')).toExist(); |
||||
|
expect(prop.querySelector('.label')).toExist(); |
||||
|
expect(prop.querySelector('.field')).toExist(); |
||||
|
}); |
||||
|
|
||||
it('Input value is empty', function() { |
it('Input should exist', () => { |
||||
view.model.get('value').should.be.empty; |
expect(view.$input).toExist(); |
||||
view.$input.val().should.be.empty; |
}); |
||||
}); |
|
||||
|
|
||||
it('Model not change without update trigger', function() { |
it('Input value is empty', () => { |
||||
view.$input.val(propValue); |
expect(view.model.get('value')).toNotExist(); |
||||
view.model.get('value').should.be.empty; |
expect(view.$input.val()).toNotExist(); |
||||
}); |
}); |
||||
|
|
||||
// Tests valueUpdated()
|
it('Model not change without update trigger', () => { |
||||
it('Update model on input change', function() { |
view.$input.val(propValue); |
||||
view.$input.val(propValue).trigger('change'); |
expect(view.model.get('value')).toNotExist(); |
||||
view.model.get('value').should.equal(propValue); |
}); |
||||
}); |
|
||||
|
|
||||
// Tests getValueForTarget()
|
// Tests valueUpdated()
|
||||
it('Get value for target', function() { |
it('Update model on input change', () => { |
||||
view.model.set('value', propValue); |
view.$input.val(propValue).trigger('change'); |
||||
view.getValueForTarget().should.equal(propValue); |
expect(view.model.get('value')).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
// Tests valueChanged() -> ...
|
// Tests getValueForTarget()
|
||||
it('Update input on value change', function() { |
it('Get value for target', () => { |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
view.$input.val().should.equal(propValue); |
expect(view.getValueForTarget()).toEqual(propValue); |
||||
}); |
}); |
||||
|
|
||||
it('Update target on value change', function() { |
// Tests valueChanged() -> ...
|
||||
view.selectedComponent = component; |
it('Update input on value change', () => { |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
var compStyle = view.selectedComponent.get('style'); |
expect(view.$input.val()).toEqual(propValue); |
||||
var assertStyle = {}; |
}); |
||||
assertStyle[propName] = propValue; |
|
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Update target on value change with functionName', function() { |
it('Update target on value change', () => { |
||||
view.selectedComponent = component; |
view.model.set('value', propValue); |
||||
view.model.set('functionName', 'testfunc'); |
var compStyle = view.getTargetModel().get('style'); |
||||
view.model.set('value', propValue); |
var assertStyle = {}; |
||||
var compStyle = view.selectedComponent.get('style'); |
assertStyle[propName] = propValue; |
||||
var assertStyle = {}; |
expect(compStyle).toEqual(assertStyle); |
||||
assertStyle[propName] = 'testfunc(' + propValue + ')'; |
}); |
||||
compStyle.should.deep.equal(assertStyle); |
|
||||
}); |
|
||||
|
|
||||
it('Clean target from the property if its value is empty', function() { |
it('Update target on value change with functionName', () => { |
||||
view.selectedComponent = component; |
view.model.set('functionName', 'testfunc'); |
||||
view.model.set('value', propValue); |
view.model.set('value', propValue); |
||||
view.model.set('value', ''); |
var compStyle = view.getTargetModel().get('style'); |
||||
var compStyle = view.selectedComponent.get('style'); |
var assertStyle = {}; |
||||
compStyle.should.deep.equal({}); |
assertStyle[propName] = 'testfunc(' + propValue + ')'; |
||||
}); |
expect(compStyle).toEqual(assertStyle); |
||||
|
}); |
||||
|
|
||||
it('Check stylable element', function() { |
it('Clean target from the property if its value is empty', () => { |
||||
view.selectedComponent = component; |
view.model.set('value', propValue); |
||||
view.isTargetStylable().should.equal(true); |
view.model.set('value', ''); |
||||
component.set('stylable', false); |
var compStyle = view.getTargetModel().get('style'); |
||||
view.isTargetStylable().should.equal(false); |
expect(compStyle).toEqual({}); |
||||
component.set('stylable', [propName]); |
}); |
||||
view.isTargetStylable().should.equal(true); |
|
||||
component.set('stylable', ['test1', propName]); |
|
||||
view.isTargetStylable().should.equal(true); |
|
||||
component.set('stylable', ['test1', 'test2']); |
|
||||
view.isTargetStylable().should.equal(false); |
|
||||
}); |
|
||||
|
|
||||
it('Target style is empty without values', function() { |
it('Check stylable element', () => { |
||||
view.selectedComponent = component; |
expect(view.isTargetStylable()).toEqual(true); |
||||
view.getComponentValue().should.be.empty; |
component.set('stylable', false); |
||||
}); |
expect(view.isTargetStylable()).toEqual(false); |
||||
|
component.set('stylable', [propName]); |
||||
|
expect(view.isTargetStylable()).toEqual(true); |
||||
|
component.set('stylable', ['test1', propName]); |
||||
|
expect(view.isTargetStylable()).toEqual(true); |
||||
|
component.set('stylable', ['test1', 'test2']); |
||||
|
expect(view.isTargetStylable()).toEqual(false); |
||||
|
}); |
||||
|
|
||||
it('Target style is correct', function() { |
it('Target style is empty without values', () => { |
||||
view.selectedComponent = component; |
expect(view.getComponentValue()).toNotExist(); |
||||
var style = {}; |
}); |
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.getComponentValue().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Target style is empty with an other style', function() { |
it('Target style is correct', () => { |
||||
view.selectedComponent = component; |
var style = {}; |
||||
var style = {}; |
style[propName] = propValue; |
||||
style[propName + '2'] = propValue; |
component.set('style', style); |
||||
component.set('style', style); |
expect(view.getComponentValue()).toEqual(propValue); |
||||
view.getComponentValue().should.be.empty; |
}); |
||||
}); |
|
||||
|
|
||||
it('Fetch value from function', function() { |
it('Target style is empty with an other style', () => { |
||||
view.selectedComponent = component; |
var style = {}; |
||||
var style = {}; |
style[propName + '2'] = propValue; |
||||
style[propName] = 'testfun(' + propValue + ')'; |
component.set('style', style); |
||||
component.set('style', style); |
expect(view.getComponentValue()).toNotExist(); |
||||
view.model.set('functionName', 'testfun'); |
}); |
||||
view.getComponentValue().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
describe('With target setted', function() { |
it('Fetch value from function', () => { |
||||
|
view.selectedComponent = component; |
||||
beforeEach(function () { |
var style = {}; |
||||
target.model = component; |
style[propName] = 'testfun(' + propValue + ')'; |
||||
view = new PropertyView({ |
component.set('style', style); |
||||
model: model, |
view.model.set('functionName', 'testfun'); |
||||
propTarget: target |
expect(view.getComponentValue()).toEqual(propValue); |
||||
}); |
}); |
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('updateTargetStyle', function() { |
|
||||
view.updateTargetStyle(propValue); |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.get('style').should.deep.equal(style); |
|
||||
}); |
|
||||
|
|
||||
it('updateTargetStyle with custom property', function() { |
|
||||
view.updateTargetStyle(propValue, propName + '2'); |
|
||||
var style = {}; |
|
||||
style[propName + '2'] = propValue; |
|
||||
component.get('style').should.deep.equal(style); |
|
||||
}); |
|
||||
|
|
||||
it('Update value and input on target swap', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(propValue); |
|
||||
view.$input.val().should.equal(propValue); |
|
||||
}); |
|
||||
|
|
||||
it('Update value after multiple swaps', function() { |
|
||||
var style = {}; |
|
||||
style[propName] = propValue; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
style[propName] = propValue + '2'; |
|
||||
component.set('style', style); |
|
||||
view.propTarget.trigger('update'); |
|
||||
view.model.get('value').should.equal(propValue + '2'); |
|
||||
view.$input.val().should.equal(propValue + '2'); |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
describe('Init property', function() { |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
component = new Component(); |
|
||||
model = new Property({ |
|
||||
property: propName, |
|
||||
defaults: defValue |
|
||||
}); |
|
||||
view = new PropertyView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
it('Value as default', function() { |
|
||||
view.model.get('value').should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
it('Placeholder as default', function() { |
|
||||
view.$input.attr('placeholder').should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
it('Input value is empty', function() { |
|
||||
view.$input.val().should.equal(defValue); |
|
||||
}); |
|
||||
|
|
||||
}); |
describe('With target setted', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
target.model = component; |
||||
|
view = new PropertyView({ |
||||
|
model, |
||||
|
propTarget: target |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('updateTargetStyle', () => { |
||||
|
view.updateTargetStyle(propValue); |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
expect(component.get('style')).toEqual(style); |
||||
|
}); |
||||
|
|
||||
|
it('updateTargetStyle with custom property', () => { |
||||
|
view.updateTargetStyle(propValue, propName + '2'); |
||||
|
var style = {}; |
||||
|
style[propName + '2'] = propValue; |
||||
|
expect(component.get('style')).toEqual(style); |
||||
|
}); |
||||
|
|
||||
|
it('Update value and input on target swap', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(propValue); |
||||
|
expect(view.$input.val()).toEqual(propValue); |
||||
|
}); |
||||
|
|
||||
|
it('Update value after multiple swaps', () => { |
||||
|
var style = {}; |
||||
|
style[propName] = propValue; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
style[propName] = propValue + '2'; |
||||
|
component.set('style', style); |
||||
|
view.propTarget.trigger('update'); |
||||
|
expect(view.model.get('value')).toEqual(propValue + '2'); |
||||
|
expect(view.$input.val()).toEqual(propValue + '2'); |
||||
|
}); |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
describe('Init property', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
component = new Component(); |
||||
|
model = new Property({ |
||||
|
property: propName, |
||||
|
defaults: defValue |
||||
|
}); |
||||
|
view = new PropertyView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
it('Value as default', () => { |
||||
|
expect(view.model.get('value')).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
|
it('Placeholder as default', () => { |
||||
|
expect(view.$input.attr('placeholder')).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
|
it('Input value is empty', () => { |
||||
|
expect(view.$input.val()).toEqual(defValue); |
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,109 +1,104 @@ |
|||||
define(function(require, exports, module){ |
const SectorView = require('style_manager/view/SectorView'); |
||||
'use strict'; |
const Sector = require('style_manager/model/Sector'); |
||||
var SectorView = require('undefined'); |
|
||||
var Sector = require('StyleManager/model/Sector'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run : function(){ |
run() { |
||||
|
|
||||
describe('SectorView', function() { |
describe('SectorView', () => { |
||||
|
|
||||
var $fixtures; |
var $fixtures; |
||||
var $fixture; |
var $fixture; |
||||
var model; |
var model; |
||||
var view; |
var view; |
||||
|
|
||||
before(function () { |
before(() => { |
||||
$fixtures = $("#fixtures"); |
$fixtures = $("#fixtures"); |
||||
$fixture = $('<div class="sector-fixture"></div>'); |
$fixture = $('<div class="sector-fixture"></div>'); |
||||
}); |
}); |
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Sector(); |
|
||||
view = new SectorView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
beforeEach(() => { |
||||
view.remove(); |
model = new Sector(); |
||||
}); |
view = new SectorView({ |
||||
|
model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
after(function () { |
afterEach(() => { |
||||
$fixture.remove(); |
view.remove(); |
||||
}); |
}); |
||||
|
|
||||
it('Rendered correctly', function() { |
after(() => { |
||||
var sector = view.el; |
$fixture.remove(); |
||||
sector.should.be.ok; |
}); |
||||
sector.querySelector('.title').should.be.ok; |
|
||||
var props = sector.querySelector('.properties'); |
|
||||
props.should.be.ok; |
|
||||
sector.classList.contains('open').should.equal(true); |
|
||||
}); |
|
||||
|
|
||||
it('No properties', function() { |
it('Rendered correctly', () => { |
||||
var props = view.el.querySelector('.properties'); |
var sector = view.el; |
||||
props.innerHTML.should.equal('<div class="clear"></div>'); |
expect(sector.querySelector('.title')).toExist(); |
||||
}); |
var props = sector.querySelector('.properties'); |
||||
|
expect(props).toExist(); |
||||
|
expect(sector.classList.contains('open')).toEqual(true); |
||||
|
}); |
||||
|
|
||||
it('Update on open', function() { |
it('No properties', () => { |
||||
var sector = view.el; |
var props = view.el.querySelector('.properties'); |
||||
var props = sector.querySelector('.properties'); |
expect(props.innerHTML).toEqual('<div class="clear"></div>'); |
||||
model.set('open', false); |
}); |
||||
sector.classList.contains('open').should.equal(false); |
|
||||
props.style.display.should.equal('none'); |
|
||||
}); |
|
||||
|
|
||||
it('Toggle on click', function() { |
it('Update on open', () => { |
||||
var sector = view.el; |
var sector = view.el; |
||||
view.$el.find('.title').click(); |
var props = sector.querySelector('.properties'); |
||||
sector.classList.contains('open').should.equal(false); |
model.set('open', false); |
||||
}); |
expect(sector.classList.contains('open')).toEqual(false); |
||||
|
expect(props.style.display).toEqual('none'); |
||||
|
}); |
||||
|
|
||||
describe('Init with options', function() { |
it('Toggle on click', () => { |
||||
|
var sector = view.el; |
||||
beforeEach(function () { |
view.$el.find('.title').click(); |
||||
model = new Sector({ |
expect(sector.classList.contains('open')).toEqual(false); |
||||
open: false, |
}); |
||||
name: 'TestName', |
|
||||
properties: [ |
|
||||
{type:'integer'}, |
|
||||
{type:'integer'}, |
|
||||
{type:'integer'}, |
|
||||
] |
|
||||
}); |
|
||||
view = new SectorView({ |
|
||||
model: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
view.remove(); |
|
||||
}); |
|
||||
|
|
||||
it('Rendered correctly2', function() { |
|
||||
var sector = view.el; |
|
||||
var props = sector.querySelector('.properties'); |
|
||||
sector.querySelector('.title').innerHTML.should.contain('TestName'); |
|
||||
props.should.be.ok; |
|
||||
sector.classList.contains('open').should.equal(false); |
|
||||
props.style.display.should.equal('none'); |
|
||||
}); |
|
||||
|
|
||||
it('Has properties', function() { |
|
||||
var props = view.el.querySelector('.properties'); |
|
||||
props.children.length.should.equal(4); // Last one is 'clear' element
|
|
||||
}); |
|
||||
|
|
||||
|
describe('Init with options', () => { |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Sector({ |
||||
|
open: false, |
||||
|
name: 'TestName', |
||||
|
properties: [ |
||||
|
{type:'integer'}, |
||||
|
{type:'integer'}, |
||||
|
{type:'integer'}, |
||||
|
] |
||||
|
}); |
||||
|
view = new SectorView({ |
||||
|
model |
||||
}); |
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
view.remove(); |
||||
|
}); |
||||
|
|
||||
|
it('Rendered correctly2', () => { |
||||
|
var sector = view.el; |
||||
|
var props = sector.querySelector('.properties'); |
||||
|
expect(sector.querySelector('.title').innerHTML).toContain('TestName'); |
||||
|
expect(props).toExist(); |
||||
|
expect(sector.classList.contains('open')).toEqual(false); |
||||
|
expect(props.style.display).toEqual('none'); |
||||
|
}); |
||||
|
|
||||
|
it('Has properties', () => { |
||||
|
var props = view.el.querySelector('.properties'); |
||||
|
expect(props.children.length).toEqual(4); // Last one is 'clear' element
|
||||
|
}); |
||||
|
|
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -1,51 +1,47 @@ |
|||||
define(function(require, exports, module){ |
const SectorsView = require('style_manager/view/SectorsView'); |
||||
'use strict'; |
const Sectors = require('style_manager/model/Sectors'); |
||||
var SectorsView = require('undefined'); |
|
||||
var Sectors = require('StyleManager/model/Sectors'); |
|
||||
|
|
||||
module.exports = { |
|
||||
run : function(){ |
|
||||
|
|
||||
describe('SectorsView', function() { |
|
||||
|
|
||||
var $fixtures; |
|
||||
var $fixture; |
|
||||
var model; |
|
||||
var view; |
|
||||
|
|
||||
before(function () { |
|
||||
$fixtures = $("#fixtures"); |
|
||||
$fixture = $('<div class="sectors-fixture"></div>'); |
|
||||
}); |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
model = new Sectors([]); |
|
||||
view = new SectorsView({ |
|
||||
collection: model |
|
||||
}); |
|
||||
$fixture.empty().appendTo($fixtures); |
|
||||
$fixture.html(view.render().el); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
view.collection.reset(); |
|
||||
}); |
|
||||
|
|
||||
after(function () { |
|
||||
$fixture.remove(); |
|
||||
}); |
|
||||
|
|
||||
it("Collection is empty", function (){ |
|
||||
view.el.innerHTML.should.be.empty; |
|
||||
}); |
|
||||
|
|
||||
it("Add new sectors", function (){ |
|
||||
view.collection.add([{}, {}]); |
|
||||
view.el.children.length.should.equal(2); |
|
||||
}); |
|
||||
|
|
||||
|
module.exports = { |
||||
|
run() { |
||||
|
|
||||
|
describe('SectorsView', () => { |
||||
|
|
||||
|
var $fixtures; |
||||
|
var $fixture; |
||||
|
var model; |
||||
|
var view; |
||||
|
|
||||
|
before(() => { |
||||
|
$fixtures = $("#fixtures"); |
||||
|
$fixture = $('<div class="sectors-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
model = new Sectors([]); |
||||
|
view = new SectorsView({ |
||||
|
collection: model |
||||
|
}); |
||||
|
$fixture.empty().appendTo($fixtures); |
||||
|
$fixture.html(view.render().el); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
view.collection.reset(); |
||||
|
}); |
||||
|
|
||||
|
after(() => { |
||||
|
$fixture.remove(); |
||||
|
}); |
||||
|
|
||||
|
it("Collection is empty", () => { |
||||
|
expect(view.el.innerHTML).toEqual(''); |
||||
|
}); |
||||
|
|
||||
|
it("Add new sectors", () => { |
||||
|
view.collection.add([{}, {}]); |
||||
|
expect(view.el.children.length).toEqual(2); |
||||
}); |
}); |
||||
} |
|
||||
}; |
|
||||
|
|
||||
}); |
}); |
||||
|
} |
||||
|
}; |
||||
|
|||||
@ -0,0 +1,23 @@ |
|||||
|
const TraitManager = require('trait_manager'); |
||||
|
const TraitsModel = require('./model/TraitsModel'); |
||||
|
const TraitsView = require('./view/TraitsView'); |
||||
|
|
||||
|
describe('TraitManager', () => { |
||||
|
|
||||
|
describe('Main', () => { |
||||
|
|
||||
|
var obj; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
obj = new TraitManager().init(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
obj = null; |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
TraitsModel.run(); |
||||
|
TraitsView.run(); |
||||
|
}); |
||||
@ -1,25 +0,0 @@ |
|||||
define(function(require, exports, module){ |
|
||||
'use strict'; |
|
||||
var TraitManager = require('TraitManager'); |
|
||||
var TraitsView = require('undefined'); |
|
||||
|
|
||||
describe('TraitManager', function() { |
|
||||
|
|
||||
describe('Main', function() { |
|
||||
|
|
||||
var obj; |
|
||||
|
|
||||
beforeEach(function () { |
|
||||
obj = new TraitManager().init(); |
|
||||
}); |
|
||||
|
|
||||
afterEach(function () { |
|
||||
delete obj; |
|
||||
}); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
TraitsModel.run(); |
|
||||
TraitsView.run(); |
|
||||
}); |
|
||||
}); |
|
||||
@ -1,34 +1,31 @@ |
|||||
define(function(require, exports, module){ |
const Trait = require('trait_manager/model/Trait'); |
||||
'use strict'; |
const Component = require('dom_components/model/Component'); |
||||
var Trait = require('TraitManager/model/Trait'); |
|
||||
var Component = require('DomComponents/model/Component'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run: function(){ |
run() { |
||||
|
|
||||
describe('TraitModels', function() { |
describe('TraitModels', () => { |
||||
|
|
||||
var obj; |
var obj; |
||||
var target; |
var target; |
||||
var modelName = 'title'; |
var modelName = 'title'; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
target = new Component(); |
||||
obj = new Trait({ |
obj = new Trait({ |
||||
name: modelName, |
name: modelName, |
||||
target: target, |
target, |
||||
}); |
}); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj; |
obj = null; |
||||
}); |
}); |
||||
|
|
||||
it('Object exists', function() { |
it('Object exists', () => { |
||||
Trait.should.be.exist; |
expect(Trait).toExist(); |
||||
}); |
}); |
||||
|
|
||||
}); |
}); |
||||
} |
} |
||||
} |
} |
||||
}); |
|
||||
|
|||||
@ -1,75 +1,73 @@ |
|||||
define(function(require, exports, module){ |
const Trait = require('trait_manager/model/Trait'); |
||||
'use strict'; |
const TraitView = require('trait_manager/view/TraitView'); |
||||
var Trait = require('undefined'); |
const Component = require('dom_components/model/Component'); |
||||
var Component = require('DomComponents/model/Component'); |
|
||||
|
|
||||
module.exports = { |
module.exports = { |
||||
run: function(){ |
run() { |
||||
|
|
||||
describe('TraitView', function() { |
describe('TraitView', () => { |
||||
|
|
||||
var obj; |
var obj; |
||||
var model; |
var model; |
||||
var modelName = 'title'; |
var modelName = 'title'; |
||||
var target; |
var target; |
||||
|
|
||||
beforeEach(function () { |
beforeEach(() => { |
||||
target = new Component(); |
target = new Component(); |
||||
model = new Trait({ |
model = new Trait({ |
||||
name: modelName, |
name: modelName, |
||||
target: target, |
target, |
||||
}); |
}); |
||||
obj = new TraitView({ |
obj = new TraitView({ |
||||
model: model, |
model, |
||||
}); |
}); |
||||
}); |
}); |
||||
|
|
||||
afterEach(function () { |
afterEach(() => { |
||||
delete obj; |
obj = null; |
||||
delete model; |
model = null; |
||||
delete target; |
target = null; |
||||
}); |
}); |
||||
|
|
||||
it('Object exists', function() { |
it('Object exists', () => { |
||||
Trait.should.be.exist; |
expect(Trait).toExist(); |
||||
}); |
}); |
||||
|
|
||||
it('Target has no attributes on init', function() { |
it('Target has no attributes on init', () => { |
||||
target.get('attributes').should.deep.equal({}); |
expect(target.get('attributes')).toEqual({}); |
||||
}); |
}); |
||||
|
|
||||
it('On update of the value updates the target attributes', function() { |
it('On update of the value updates the target attributes', () => { |
||||
model.set('value', 'test'); |
model.set('value', 'test'); |
||||
var eq = {}; |
var eq = {}; |
||||
eq[modelName] = 'test'; |
eq[modelName] = 'test'; |
||||
target.get('attributes').should.deep.equal(eq); |
expect(target.get('attributes')).toEqual(eq); |
||||
}); |
}); |
||||
|
|
||||
it('Updates on different models do not alter other targets', function() { |
it('Updates on different models do not alter other targets', () => { |
||||
var target1 = new Component(); |
var target1 = new Component(); |
||||
var target2 = new Component(); |
var target2 = new Component(); |
||||
var model1 = new Trait({ |
var model1 = new Trait({ |
||||
name: modelName, |
name: modelName, |
||||
target: target1, |
target: target1, |
||||
}); |
}); |
||||
var model2 = new Trait({ |
var model2 = new Trait({ |
||||
name: modelName, |
name: modelName, |
||||
target: target2, |
target: target2, |
||||
}); |
}); |
||||
var obj1 = new TraitView({model: model1}); |
var obj1 = new TraitView({model: model1}); |
||||
var obj2 = new TraitView({model: model2}); |
var obj2 = new TraitView({model: model2}); |
||||
|
|
||||
model1.set('value', 'test1'); |
model1.set('value', 'test1'); |
||||
model2.set('value', 'test2'); |
model2.set('value', 'test2'); |
||||
var eq1 = {}; |
var eq1 = {}; |
||||
eq1[modelName] = 'test1'; |
eq1[modelName] = 'test1'; |
||||
var eq2 = {}; |
var eq2 = {}; |
||||
eq2[modelName] = 'test2'; |
eq2[modelName] = 'test2'; |
||||
target1.get('attributes').should.deep.equal(eq1); |
expect(target1.get('attributes')).toEqual(eq1); |
||||
target2.get('attributes').should.deep.equal(eq2); |
expect(target2.get('attributes')).toEqual(eq2); |
||||
}); |
}); |
||||
|
|
||||
}); |
}); |
||||
} |
} |
||||
} |
} |
||||
}); |
|
||||
|
|||||
Loading…
Reference in new issue