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) => { |
|||
'use strict'; |
|||
var GrapesJS = require('GrapesJS'); |
|||
var Selectors = require('SelectorManager/model/Selectors'); |
|||
var ClassTagsView = require('SelectorManager/view/ClassTagsView'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('E2E tests', () => { |
|||
|
|||
/** |
|||
* Create tags viewer |
|||
* @param {Object} ctx |
|||
*/ |
|||
var instClassTagViewer = ctx => { |
|||
var $clm; |
|||
var clm = ctx.gjs.editor.get('SelectorManager'); |
|||
if(clm){ |
|||
$clm = new ClassTagsView({ |
|||
collection: new Selectors([]), |
|||
config: { |
|||
em: ctx.gjs.editor |
|||
}, |
|||
}).render(); |
|||
ctx.$fixture.append($clm.el); |
|||
} |
|||
return $clm; |
|||
}; |
|||
|
|||
before(function () { |
|||
this.$fixtures = $("#fixtures"); |
|||
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
this.gjs = GrapesJS.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { |
|||
storageType: 'none', |
|||
}, |
|||
container: '#SelectorManager-fixture', |
|||
}); |
|||
this.$fixture.empty().appendTo(this.$fixtures); |
|||
this.gjs.render(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.gjs; |
|||
}); |
|||
|
|||
after(function () { |
|||
this.$fixture.remove(); |
|||
}); |
|||
|
|||
describe('Interaction with Components', () => { |
|||
|
|||
beforeEach(function () { |
|||
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components'); |
|||
this.$clm = instClassTagViewer(this); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.wrapper; |
|||
delete this.$clm; |
|||
}); |
|||
|
|||
it('Assign correctly new class to component', function() { |
|||
var model = this.wrapper.add({}); |
|||
model.get('classes').length.should.equal(0); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
model.get('classes').length.should.equal(1); |
|||
model.get('classes').at(0).get('name').should.equal('test'); |
|||
}); |
|||
|
|||
it('Classes from components are correctly imported inside main container', function() { |
|||
var model = this.wrapper.add([ |
|||
{ classes: ['test11', 'test12', 'test13'] }, |
|||
{ classes: ['test11', 'test22', 'test22'] }, |
|||
]); |
|||
this.gjs.editor.get('SelectorManager').getAll().length.should.equal(4); |
|||
}); |
|||
|
|||
it('Class imported into component is the same model from main container', function() { |
|||
var model = this.wrapper.add({ classes: ['test1'] }); |
|||
var clModel = model.get('classes').at(0); |
|||
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); |
|||
clModel.should.deep.equal(clModel2); |
|||
}); |
|||
|
|||
it('Can assign only one time the same class on selected component and the class viewer', function() { |
|||
var model = this.wrapper.add({}); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
this.$clm.addNewTag('test'); |
|||
model.get('classes').length.should.equal(1); |
|||
model.get('classes').at(0).get('name').should.equal('test'); |
|||
this.$clm.collection.length.should.equal(1); |
|||
this.$clm.collection.at(0).get('name').should.equal('test'); |
|||
}); |
|||
|
|||
it('Removing from container removes also from selected component', function() { |
|||
var model = this.wrapper.add({}); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
this.$clm.getClasses().find('.tag #close').trigger('click') |
|||
model.get('classes').length.should.equal(0); |
|||
}); |
|||
|
|||
it("Trigger correctly event on target with new class add", function() { |
|||
var spy = sinon.spy(); |
|||
var model = this.wrapper.add({}); |
|||
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); |
|||
}); |
|||
|
|||
}); |
|||
const Selectors = require('selector_manager/model/Selectors'); |
|||
const ClassTagsView = require('selector_manager/view/ClassTagsView'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('E2E tests', () => { |
|||
|
|||
var instClassTagViewer = ctx => { |
|||
var $clm; |
|||
var clm = ctx.gjs.editor.get('SelectorManager'); |
|||
if(clm){ |
|||
$clm = new ClassTagsView({ |
|||
collection: new Selectors([]), |
|||
config: { |
|||
em: ctx.gjs.editor |
|||
}, |
|||
}).render(); |
|||
ctx.$fixture.append($clm.el); |
|||
} |
|||
return $clm; |
|||
}; |
|||
|
|||
before(function () { |
|||
this.$fixtures = $("#fixtures"); |
|||
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
this.gjs = grapesjs.init({ |
|||
stylePrefix: '', |
|||
storageManager: { autoload: 0, type:'none' }, |
|||
assetManager: { |
|||
storageType: 'none', |
|||
}, |
|||
container: '#SelectorManager-fixture', |
|||
}); |
|||
this.$fixture.empty().appendTo(this.$fixtures); |
|||
this.gjs.render(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.gjs; |
|||
}); |
|||
|
|||
after(function () { |
|||
this.$fixture.remove(); |
|||
}); |
|||
|
|||
describe('Interaction with Components', () => { |
|||
|
|||
beforeEach(function () { |
|||
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components'); |
|||
this.$clm = instClassTagViewer(this); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.wrapper; |
|||
delete this.$clm; |
|||
}); |
|||
|
|||
it('Assign correctly new class to component', function() { |
|||
var model = this.wrapper.add({}); |
|||
expect(model.get('classes').length).toEqual(0); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
expect(model.get('classes').length).toEqual(1); |
|||
expect(model.get('classes').at(0).get('name')).toEqual('test'); |
|||
}); |
|||
|
|||
it('Classes from components are correctly imported inside main container', function() { |
|||
var model = this.wrapper.add([ |
|||
{ classes: ['test11', 'test12', 'test13'] }, |
|||
{ classes: ['test11', 'test22', 'test22'] }, |
|||
]); |
|||
expect(this.gjs.editor.get('SelectorManager').getAll().length).toEqual(4); |
|||
}); |
|||
|
|||
it('Class imported into component is the same model from main container', function() { |
|||
var model = this.wrapper.add({ classes: ['test1'] }); |
|||
var clModel = model.get('classes').at(0); |
|||
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); |
|||
expect(clModel).toEqual(clModel2); |
|||
}); |
|||
|
|||
it('Can assign only one time the same class on selected component and the class viewer', function() { |
|||
var model = this.wrapper.add({}); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
this.$clm.addNewTag('test'); |
|||
expect(model.get('classes').length).toEqual(1); |
|||
expect(model.get('classes').at(0).get('name')).toEqual('test'); |
|||
expect(this.$clm.collection.length).toEqual(1); |
|||
expect(this.$clm.collection.at(0).get('name')).toEqual('test'); |
|||
}); |
|||
|
|||
it('Removing from container removes also from selected component', function() { |
|||
var model = this.wrapper.add({}); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
this.$clm.getClasses().find('.tag #close').trigger('click') |
|||
expect(model.get('classes').length).toEqual(0); |
|||
}); |
|||
|
|||
it("Trigger correctly event on target with new class add", function() { |
|||
var spy = sinon.spy(); |
|||
var model = this.wrapper.add({}); |
|||
this.gjs.editor.set('selectedComponent', model); |
|||
this.$clm.addNewTag('test'); |
|||
this.gjs.editor.on("targetClassAdded", spy); |
|||
this.$clm.addNewTag('test'); |
|||
expect(spy.called).toEqual(false); |
|||
this.$clm.addNewTag('test2'); |
|||
expect(spy.called).toEqual(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){ |
|||
'use strict'; |
|||
var Selectors = require('undefined'); |
|||
const Selector = require('selector_manager/model/Selector'); |
|||
const Selectors = require('selector_manager/model/Selectors'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('Selector', function() { |
|||
module.exports = { |
|||
run() { |
|||
describe('Selector', () => { |
|||
var obj; |
|||
|
|||
beforeEach(function () { |
|||
this.obj = new Selector(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Has name property', function() { |
|||
this.obj.has('name').should.equal(true); |
|||
}); |
|||
beforeEach(() => { |
|||
obj = new Selector(); |
|||
}); |
|||
|
|||
it('Has label property', function() { |
|||
this.obj.has('label').should.equal(true); |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Has active property', function() { |
|||
this.obj.has('active').should.equal(true); |
|||
}); |
|||
it('Has name property', () => { |
|||
expect(obj.has('name')).toEqual(true); |
|||
}); |
|||
|
|||
it('escapeName test', function() { |
|||
this.obj.escapeName('@Te sT*').should.equal('-Te-sT-'); |
|||
}); |
|||
it('Has label property', () => { |
|||
expect(obj.has('label')).toEqual(true); |
|||
}); |
|||
|
|||
it('Name is corrected at instantiation', function() { |
|||
this.obj = new Selector({ name: '@Te sT*'}); |
|||
this.obj.get('name').should.equal('-Te-sT-'); |
|||
}); |
|||
it('Has active property', () => { |
|||
expect(obj.has('active')).toEqual(true); |
|||
}); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var ClassTagView = require('undefined'); |
|||
var Selectors = require('SelectorManager/model/Selectors'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('ClassTagView', function() { |
|||
|
|||
var obj; |
|||
var fixture; |
|||
var fixtures; |
|||
var testLabel; |
|||
var coll; |
|||
|
|||
before(function () { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="classtag-fixture"></div>'); |
|||
}); |
|||
const ClassTagView = require('selector_manager/view/ClassTagView'); |
|||
const Selectors = require('selector_manager/model/Selectors'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('ClassTagView', () => { |
|||
|
|||
var obj; |
|||
var fixture; |
|||
var fixtures; |
|||
var testLabel; |
|||
var coll; |
|||
|
|||
before(() => { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="classtag-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
coll = new Selectors(); |
|||
testLabel = 'TestLabel'; |
|||
var model = coll.add({ |
|||
name: 'test', |
|||
label: testLabel, |
|||
}); |
|||
obj = new ClassTagView({ |
|||
config : {}, |
|||
model: model, |
|||
coll: coll |
|||
}); |
|||
obj.target = { get:function(){} }; |
|||
_.extend(obj.target, Backbone.Events); |
|||
fixture.empty().appendTo(fixtures); |
|||
fixture.html(obj.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
coll = new Selectors(); |
|||
testLabel = 'TestLabel'; |
|||
var model = coll.add({ |
|||
name: 'test', |
|||
label: testLabel, |
|||
}); |
|||
obj = new ClassTagView({ |
|||
config : {}, |
|||
model, |
|||
coll |
|||
}); |
|||
obj.target = { get() {} }; |
|||
_.extend(obj.target, Backbone.Events); |
|||
fixture.empty().appendTo(fixtures); |
|||
fixture.html(obj.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj.model; |
|||
}); |
|||
afterEach(() => { |
|||
obj.model = null; |
|||
}); |
|||
|
|||
after(function () { |
|||
fixture.remove(); |
|||
}); |
|||
after(() => { |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
ClassTagView.should.be.exist; |
|||
}); |
|||
it('Object exists', () => { |
|||
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; |
|||
$el.html().should.not.be.empty; |
|||
expect($el.find('#close')[0]).toExist(); |
|||
}); |
|||
|
|||
it('Not empty', function() { |
|||
it('Has checkbox', () => { |
|||
var $el = obj.$el; |
|||
$el.html().should.contain(testLabel); |
|||
expect($el.find('#checkbox')[0]).toExist(); |
|||
}); |
|||
|
|||
describe('Should be rendered correctly', function() { |
|||
|
|||
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('Has label', () => { |
|||
var $el = obj.$el; |
|||
expect($el.find('#tag-label')[0]).toExist(); |
|||
}); |
|||
|
|||
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() { |
|||
var spy = sinon.spy(); |
|||
sinon.stub(obj.target, 'get').returns(0); |
|||
obj.target.on("targetClassRemoved", spy); |
|||
obj.$el.find('#close').trigger('click'); |
|||
spy.called.should.equal(true); |
|||
}); |
|||
it('Could be removed', () => { |
|||
var spy = sinon.spy(); |
|||
obj.config.target = { get() {} }; |
|||
sinon.stub(obj.config.target, 'get').returns(0); |
|||
obj.$el.find('#close').trigger('click'); |
|||
expect(fixture.html()).toNotExist(); |
|||
}); |
|||
|
|||
it('Checkbox toggles status', function() { |
|||
var spy = sinon.spy(); |
|||
obj.model.on("change:active", spy); |
|||
obj.model.set('active', true); |
|||
obj.$el.find('#checkbox').trigger('click'); |
|||
obj.model.get('active').should.equal(false); |
|||
spy.called.should.equal(true); |
|||
}); |
|||
it('On remove triggers event', () => { |
|||
var spy = sinon.spy(); |
|||
sinon.stub(obj.target, 'get').returns(0); |
|||
obj.target.on("targetClassRemoved", spy); |
|||
obj.$el.find('#close').trigger('click'); |
|||
expect(spy.called).toEqual(true); |
|||
}); |
|||
|
|||
it('On toggle triggers event', function() { |
|||
var spy = sinon.spy(); |
|||
sinon.stub(obj.target, 'get').returns(0); |
|||
obj.target.on("targetClassUpdated", spy); |
|||
obj.$el.find('#checkbox').trigger('click'); |
|||
spy.called.should.equal(true); |
|||
}); |
|||
it('Checkbox toggles status', () => { |
|||
var spy = sinon.spy(); |
|||
obj.model.on("change:active", spy); |
|||
obj.model.set('active', true); |
|||
obj.$el.find('#checkbox').trigger('click'); |
|||
expect(obj.model.get('active')).toEqual(false); |
|||
expect(spy.called).toEqual(true); |
|||
}); |
|||
|
|||
it('Label input is disabled', function() { |
|||
var inputProp = obj.inputProp; |
|||
obj.$labelInput.prop(inputProp).should.equal(true); |
|||
}); |
|||
it('On toggle triggers event', () => { |
|||
var spy = sinon.spy(); |
|||
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() { |
|||
var inputProp = obj.inputProp; |
|||
obj.$el.find('#tag-label').trigger('dblclick'); |
|||
obj.$labelInput.prop(inputProp).should.equal(false); |
|||
}); |
|||
it('Label input is disabled', () => { |
|||
var inputProp = obj.inputProp; |
|||
expect(obj.$labelInput.prop(inputProp)).toEqual(true); |
|||
}); |
|||
|
|||
it('On blur label input turns back disabled', function() { |
|||
var inputProp = obj.inputProp; |
|||
obj.$el.find('#tag-label').trigger('dblclick'); |
|||
obj.endEditTag(); |
|||
obj.$labelInput.prop(inputProp).should.equal(true); |
|||
}); |
|||
it('On double click label input is enable', () => { |
|||
var inputProp = obj.inputProp; |
|||
obj.$el.find('#tag-label').trigger('dblclick'); |
|||
expect(obj.$labelInput.prop(inputProp)).toEqual(false); |
|||
}); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var ClassTagsView = require('undefined'); |
|||
var Selectors = require('SelectorManager/model/Selectors'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
describe('ClassTagsView', function() { |
|||
|
|||
var view; |
|||
var fixture; |
|||
var fixtures; |
|||
var testLabel; |
|||
var coll; |
|||
var target; |
|||
|
|||
before(function () { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="classtag-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = { get: function(){} }; |
|||
coll = new Selectors(); |
|||
_.extend(target, Backbone.Events); |
|||
|
|||
view = new ClassTagsView({ |
|||
config : { em: target }, |
|||
collection: coll |
|||
}); |
|||
|
|||
this.targetStub = { |
|||
add: function(v){ return {name: v}; } |
|||
}; |
|||
|
|||
this.compTargetStub = { |
|||
get: function(){ return { add: function(){} }} |
|||
}; |
|||
|
|||
fixture.empty().appendTo(fixtures); |
|||
fixture.html(view.render().el); |
|||
this.btnAdd = view.$el.find('#' + view.addBtnId); |
|||
this.input = view.$el.find('input#' + view.newInputId); |
|||
this.$tags = fixture.find('#tags-c'); |
|||
this.$states = fixture.find('#states'); |
|||
this.$statesC = fixture.find('#input-c'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete view.collection; |
|||
}); |
|||
|
|||
after(function () { |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
ClassTagsView.should.be.exist; |
|||
}); |
|||
|
|||
it('Not tags inside', function() { |
|||
this.$tags.html().should.equal(''); |
|||
}); |
|||
|
|||
it('Add new tag triggers correct method', function() { |
|||
sinon.stub(view, "addToClasses"); |
|||
coll.add({ name: 'test' }); |
|||
view.addToClasses.calledOnce.should.equal(true); |
|||
}); |
|||
|
|||
it('Start new tag creation', function() { |
|||
this.btnAdd.click(); |
|||
(this.btnAdd.css('display') == 'none').should.equal(true); |
|||
(this.input.css('display') !== 'none').should.equal(true); |
|||
}); |
|||
|
|||
it('Stop tag creation', function() { |
|||
this.btnAdd.click(); |
|||
this.input.val('test') |
|||
this.input.blur(); |
|||
(this.btnAdd.css('display') !== 'none').should.equal(true); |
|||
(this.input.css('display') == 'none').should.equal(true); |
|||
this.input.val().should.equal(''); |
|||
}); |
|||
|
|||
it('Check keyup of ESC on input', function() { |
|||
this.btnAdd.click(); |
|||
sinon.stub(view, "addNewTag"); |
|||
this.input.trigger({ |
|||
type: 'keyup', |
|||
keyCode: 13 |
|||
}); |
|||
view.addNewTag.calledOnce.should.equal(true); |
|||
}); |
|||
|
|||
it('Check keyup on ENTER on input', function() { |
|||
this.btnAdd.click(); |
|||
sinon.stub(view, "endNewTag"); |
|||
this.input.trigger({ |
|||
type: 'keyup', |
|||
keyCode: 27 |
|||
}); |
|||
view.endNewTag.calledOnce.should.equal(true); |
|||
}); |
|||
|
|||
it('Collection changes on update of target', function() { |
|||
coll.add({ name: 'test' }); |
|||
target.trigger('change:selectedComponent'); |
|||
coll.length.should.equal(0); |
|||
}); |
|||
|
|||
it('Collection reacts on reset', function() { |
|||
coll.add([{ name: 'test1' }, { name: 'test2' }]); |
|||
sinon.stub(view, "addToClasses"); |
|||
coll.trigger('reset'); |
|||
view.addToClasses.calledTwice.should.equal(true); |
|||
}); |
|||
|
|||
it("Don't accept empty tags", function() { |
|||
view.addNewTag(''); |
|||
this.$tags.html().should.equal(''); |
|||
}); |
|||
|
|||
it("Accept new tags", function() { |
|||
sinon.stub(target, "get").returns(this.targetStub); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test'); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test2'); |
|||
this.$tags.children().length.should.equal(2); |
|||
}); |
|||
|
|||
it("New tag correctly added", function() { |
|||
coll.add({ label: 'test' }); |
|||
this.$tags.children().first().find('#tag-label input').val().should.equal('test'); |
|||
}); |
|||
|
|||
it("States are hidden in case no tags", function() { |
|||
view.updateStateVis(); |
|||
this.$statesC.css('display').should.equal('none'); |
|||
}); |
|||
|
|||
it("States are visible in case of more tags inside", function() { |
|||
coll.add({ label: 'test' }); |
|||
view.updateStateVis(); |
|||
this.$statesC.css('display').should.equal('block'); |
|||
}); |
|||
|
|||
it("Update state visibility on new tag", function() { |
|||
sinon.stub(view, "updateStateVis"); |
|||
sinon.stub(target, "get").returns(this.targetStub); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test'); |
|||
view.updateStateVis.called.should.equal(true); |
|||
}); |
|||
|
|||
it("Update state visibility on removing of the tag", function() { |
|||
sinon.stub(target, "get").returns(this.targetStub); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test'); |
|||
sinon.stub(view, "updateStateVis"); |
|||
coll.remove(coll.at(0)); |
|||
view.updateStateVis.calledOnce.should.equal(true); |
|||
}); |
|||
|
|||
it("Output correctly state options", function() { |
|||
var view = new ClassTagsView({ |
|||
config : { |
|||
em: target, |
|||
states: [ { name: 'testName', label: 'testLabel' } ], |
|||
}, |
|||
collection: coll |
|||
}); |
|||
view.getStateOptions().should.equal('<option value="testName">testLabel</option>'); |
|||
}); |
|||
|
|||
describe('Should be rendered correctly', function() { |
|||
it('Has label', function() { |
|||
view.$el.find('#label').should.have.property(0); |
|||
}); |
|||
it('Has tags container', function() { |
|||
view.$el.find('#tags-c').should.have.property(0); |
|||
}); |
|||
it('Has add button', function() { |
|||
view.$el.find('#add-tag').should.have.property(0); |
|||
}); |
|||
it('Has states input', function() { |
|||
view.$el.find('#states').should.have.property(0); |
|||
}); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
const ClassTagsView = require('selector_manager/view/ClassTagsView'); |
|||
const Selectors = require('selector_manager/model/Selectors'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
describe('ClassTagsView', () => { |
|||
|
|||
var view; |
|||
var fixture; |
|||
var fixtures; |
|||
var testLabel; |
|||
var coll; |
|||
var target; |
|||
|
|||
before(() => { |
|||
fixtures = $("#fixtures"); |
|||
fixture = $('<div class="classtag-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = { get() {} }; |
|||
coll = new Selectors(); |
|||
_.extend(target, Backbone.Events); |
|||
|
|||
view = new ClassTagsView({ |
|||
config : { em: target }, |
|||
collection: coll |
|||
}); |
|||
|
|||
this.targetStub = { |
|||
add(v) { return {name: v}; } |
|||
}; |
|||
|
|||
this.compTargetStub = { |
|||
get() { return { add() {} };} |
|||
}; |
|||
|
|||
fixture.empty().appendTo(fixtures); |
|||
fixture.html(view.render().el); |
|||
this.btnAdd = view.$el.find('#' + view.addBtnId); |
|||
this.input = view.$el.find('input#' + view.newInputId); |
|||
this.$tags = fixture.find('#tags-c'); |
|||
this.$states = fixture.find('#states'); |
|||
this.$statesC = fixture.find('#input-c'); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
delete view.collection; |
|||
}); |
|||
|
|||
after(() => { |
|||
fixture.remove(); |
|||
}); |
|||
|
|||
it('Object exists', () => { |
|||
expect(ClassTagsView).toExist(); |
|||
}); |
|||
|
|||
it('Not tags inside', function() { |
|||
expect(this.$tags.html()).toEqual(''); |
|||
}); |
|||
|
|||
it('Add new tag triggers correct method', () => { |
|||
sinon.stub(view, "addToClasses"); |
|||
coll.add({ name: 'test' }); |
|||
expect(view.addToClasses.calledOnce).toEqual(true); |
|||
}); |
|||
|
|||
it('Start new tag creation', function() { |
|||
this.btnAdd.click(); |
|||
expect(this.btnAdd.css('display')).toEqual('none'); |
|||
expect(this.input.css('display')).toNotEqual('none'); |
|||
}); |
|||
|
|||
it.skip('Stop tag creation', function() { |
|||
this.btnAdd.click(); |
|||
this.input.val('test') |
|||
this.input.blur(); |
|||
//(this.btnAdd.css('display') !== 'none').should.equal(true);
|
|||
//(this.input.css('display') == 'none').should.equal(true);
|
|||
//this.input.val().should.equal('');
|
|||
expect(this.btnAdd.css('display')).toNotEqual('none'); |
|||
expect(this.input.css('display')).toEqual('none'); |
|||
expect(this.input.val()).toEqual(''); |
|||
}); |
|||
|
|||
it('Check keyup of ESC on input', function() { |
|||
this.btnAdd.click(); |
|||
sinon.stub(view, "addNewTag"); |
|||
this.input.trigger({ |
|||
type: 'keyup', |
|||
keyCode: 13 |
|||
}); |
|||
expect(view.addNewTag.calledOnce).toEqual(true); |
|||
}); |
|||
|
|||
it('Check keyup on ENTER on input', function() { |
|||
this.btnAdd.click(); |
|||
sinon.stub(view, "endNewTag"); |
|||
this.input.trigger({ |
|||
type: 'keyup', |
|||
keyCode: 27 |
|||
}); |
|||
expect(view.endNewTag.calledOnce).toEqual(true); |
|||
}); |
|||
|
|||
it('Collection changes on update of target', () => { |
|||
coll.add({ name: 'test' }); |
|||
target.trigger('change:selectedComponent'); |
|||
expect(coll.length).toEqual(0); |
|||
}); |
|||
|
|||
it('Collection reacts on reset', () => { |
|||
coll.add([{ name: 'test1' }, { name: 'test2' }]); |
|||
sinon.stub(view, "addToClasses"); |
|||
coll.trigger('reset'); |
|||
expect(view.addToClasses.calledTwice).toEqual(true); |
|||
}); |
|||
|
|||
it("Don't accept empty tags", function() { |
|||
view.addNewTag(''); |
|||
expect(this.$tags.html()).toEqual(''); |
|||
}); |
|||
|
|||
it("Accept new tags", function() { |
|||
sinon.stub(target, "get").returns(this.targetStub); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test'); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test2'); |
|||
expect(this.$tags.children().length).toEqual(2); |
|||
}); |
|||
|
|||
it("New tag correctly added", function() { |
|||
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(); |
|||
expect(this.$statesC.css('display')).toEqual('none'); |
|||
}); |
|||
|
|||
it("States are visible in case of more tags inside", function() { |
|||
coll.add({ label: 'test' }); |
|||
view.updateStateVis(); |
|||
expect(this.$statesC.css('display')).toEqual('block'); |
|||
}); |
|||
|
|||
it("Update state visibility on new tag", function() { |
|||
sinon.stub(view, "updateStateVis"); |
|||
sinon.stub(target, "get").returns(this.targetStub); |
|||
view.compTarget = this.compTargetStub; |
|||
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); |
|||
view.compTarget = this.compTargetStub; |
|||
view.addNewTag('test'); |
|||
sinon.stub(view, "updateStateVis"); |
|||
coll.remove(coll.at(0)); |
|||
expect(view.updateStateVis.calledOnce).toEqual(true); |
|||
}); |
|||
|
|||
it("Output correctly state options", () => { |
|||
var view = new ClassTagsView({ |
|||
config : { |
|||
em: target, |
|||
states: [ { name: 'testName', label: 'testLabel' } ], |
|||
}, |
|||
collection: coll |
|||
}); |
|||
expect(view.getStateOptions()).toEqual('<option value="testName">testLabel</option>'); |
|||
}); |
|||
|
|||
describe('Should be rendered correctly', () => { |
|||
it('Has label', () => { |
|||
expect(view.$el.find('#label')[0]).toExist(); |
|||
}); |
|||
it('Has tags container', () => { |
|||
expect(view.$el.find('#tags-c')[0]).toExist(); |
|||
}); |
|||
it('Has add button', () => { |
|||
expect(view.$el.find('#add-tag')[0]).toExist(); |
|||
}); |
|||
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){ |
|||
'use strict'; |
|||
var RemoteStorage = require('undefined'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('LocalStorage', function() { |
|||
|
|||
var obj; |
|||
var itemName = 'testItem'; |
|||
var data = { |
|||
'item1': 'value1', |
|||
'item2': 'value2', |
|||
}; |
|||
|
|||
beforeEach(function () { |
|||
obj = new LocalStorage(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
|
|||
it('Store and load items', function() { |
|||
obj.store(data); |
|||
var result = obj.load(['item1', 'item2']); |
|||
result.should.deep.equal(data); |
|||
}); |
|||
|
|||
it('Store, update and load items', function() { |
|||
obj.store(data); |
|||
obj.store({item3: 'value3'}); |
|||
obj.store({item2: 'value22'}); |
|||
var result = obj.load(['item1', 'item2', 'item3']); |
|||
result.should.deep.equal({ |
|||
'item1': 'value1', |
|||
'item2': 'value22', |
|||
'item3': 'value3', |
|||
}); |
|||
}); |
|||
|
|||
it('Remove items', function() { |
|||
var items = ['item1', 'item2', 'item3']; |
|||
obj.store(data); |
|||
obj.remove(items); |
|||
obj.load(items).should.be.empty; |
|||
}); |
|||
|
|||
const LocalStorage = require('storage_manager/model/LocalStorage'); |
|||
const RemoteStorage = require('storage_manager/model/RemoteStorage'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('LocalStorage', () => { |
|||
|
|||
var obj; |
|||
var itemName = 'testItem'; |
|||
var data = { |
|||
'item1': 'value1', |
|||
'item2': 'value2', |
|||
}; |
|||
|
|||
beforeEach(() => { |
|||
obj = new LocalStorage(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Store and load items', () => { |
|||
obj.store(data); |
|||
var result = obj.load(['item1', 'item2']); |
|||
expect(result).toEqual(data); |
|||
}); |
|||
|
|||
it('Store, update and load items', () => { |
|||
obj.store(data); |
|||
obj.store({item3: 'value3'}); |
|||
obj.store({item2: 'value22'}); |
|||
var result = obj.load(['item1', 'item2', 'item3']); |
|||
expect(result).toEqual({ |
|||
'item1': 'value1', |
|||
'item2': 'value22', |
|||
'item3': 'value3', |
|||
}); |
|||
}); |
|||
|
|||
it('Remove items', () => { |
|||
var items = ['item1', 'item2', 'item3']; |
|||
obj.store(data); |
|||
obj.remove(items); |
|||
expect(obj.load(items)).toEqual({}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
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() { |
|||
|
|||
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); |
|||
}); |
|||
for(var k in params) |
|||
dt[k] = params[k]; |
|||
|
|||
}); |
|||
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){ |
|||
'use strict'; |
|||
var LayerView = require('undefined'); |
|||
var Layers = require('StyleManager/model/Layers'); |
|||
const LayerView = require('style_manager/view/LayerView'); |
|||
const Layers = require('style_manager/model/Layers'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('LayerView', function() { |
|||
describe('LayerView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$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); |
|||
}); |
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="layer-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
beforeEach(() => { |
|||
var coll = new Layers(); |
|||
model = coll.add({}); |
|||
view = new LayerView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var layer = view.el; |
|||
$fixture.get(0).querySelector('.layer').should.be.ok; |
|||
layer.querySelector('#label').should.be.ok; |
|||
layer.querySelector('#close-layer').should.be.ok; |
|||
layer.querySelector('#inputs').should.be.ok; |
|||
layer.querySelector('#inputs').innerHTML.should.be.empty; |
|||
layer.querySelector('#preview').should.be.ok; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it('getIndex returns default value', function() { |
|||
view.getIndex().should.equal(0); |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
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() { |
|||
var style = view.el.querySelector('#preview').style; |
|||
style.cssText.should.be.empty; |
|||
}); |
|||
it('getIndex returns default value', () => { |
|||
expect(view.getIndex()).toEqual(0); |
|||
}); |
|||
|
|||
it('Changes on value trigger onPreview', function() { |
|||
var called = 0; |
|||
view.onPreview = function(){called = 1}; |
|||
view.model.set('preview', true); |
|||
view.model.set('value', 'test'); |
|||
called.should.equal(1); |
|||
}); |
|||
it('No preview', () => { |
|||
var style = view.el.querySelector('#preview').style; |
|||
expect(style.cssText).toNotExist(); |
|||
}); |
|||
|
|||
it('Update props', function() { |
|||
view.model.set('props', $('<div>')); |
|||
view.el.querySelector('#inputs').innerHTML.should.not.be.empty; |
|||
(view.model.get('props') === null).should.equal(true); |
|||
}); |
|||
it('Changes on value trigger onPreview', () => { |
|||
var called = 0; |
|||
view.onPreview = () => {called = 1}; |
|||
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){ |
|||
'use strict'; |
|||
var PropertyColorView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyColorView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = '#fff'; |
|||
var defValue = 'test2value'; |
|||
|
|||
before(function () { |
|||
$.fn.spectrum = function(){}; |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
const PropertyColorView = require('style_manager/view/PropertyColorView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyColorView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propTarget; |
|||
var propName = 'testprop'; |
|||
var propValue = '#fff'; |
|||
var defValue = 'test2value'; |
|||
|
|||
before(() => { |
|||
$.fn.spectrum = () => {}; |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'color', |
|||
property: propName |
|||
}); |
|||
view = new PropertyColorView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'color', |
|||
property: propName |
|||
}); |
|||
propTarget = Object.assign({}, Backbone.Events); |
|||
propTarget.model = component; |
|||
view = new PropertyColorView({ |
|||
model, |
|||
propTarget |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
}); |
|||
|
|||
it('Inputs rendered', function() { |
|||
var prop = view.el; |
|||
prop.querySelector('input[type=text]').should.be.ok; |
|||
prop.querySelector('.field-color-picker').should.be.ok; |
|||
}); |
|||
it('Inputs rendered', () => { |
|||
var prop = view.el; |
|||
expect(prop.querySelector('input[type=text]')).toExist(); |
|||
expect(prop.querySelector('.field-color-picker')).toExist(); |
|||
}); |
|||
|
|||
it('Inputs should exist', function() { |
|||
view.$input.should.be.ok; |
|||
view.$color.should.be.ok; |
|||
}); |
|||
it('Inputs should exist', () => { |
|||
expect(view.$input).toExist(); |
|||
expect(view.$color).toExist(); |
|||
}); |
|||
|
|||
it('Input value is empty', function() { |
|||
view.model.get('value').should.be.empty; |
|||
view.$input.val().should.be.empty; |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
expect(view.$input.val()).toNotExist(); |
|||
}); |
|||
|
|||
it('Update model on setValue', function() { |
|||
view.setValue(propValue); |
|||
view.model.get('value').should.equal(propValue); |
|||
view.$input.val().should.equal(propValue); |
|||
}); |
|||
it('Update model on setValue', () => { |
|||
view.setValue(propValue); |
|||
expect(view.model.get('value')).toEqual(propValue); |
|||
expect(view.$input.val()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update model on input change', function() { |
|||
view.$input.val(propValue).trigger('change'); |
|||
view.model.get('value').should.equal(propValue); |
|||
}); |
|||
it('Update model on input change', () => { |
|||
view.$input.val(propValue).trigger('change'); |
|||
expect(view.model.get('value')).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', propValue); |
|||
view.getInputValue().should.equal(propValue); |
|||
}); |
|||
it('Update input on value change', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.getInputValue()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update target on value change', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
it('Update target on value change', () => { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
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); |
|||
}); |
|||
describe('With target setted', () => { |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var PropertyCompositeView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyCompositeView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var properties = [ |
|||
{property: 'subprop1'}, |
|||
{ |
|||
type: 'integer', |
|||
property: 'subprop2', |
|||
defaults: 0, |
|||
units: ['%', 'px'] |
|||
}, |
|||
{ |
|||
type: 'select', |
|||
property: 'subprop3', |
|||
defaults: 'val2', |
|||
list: [ |
|||
{value:'val1'}, |
|||
{value:'val2'}, |
|||
{value:'val3'}, |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
before(function () { |
|||
$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); |
|||
}); |
|||
const PropertyCompositeView = require('style_manager/view/PropertyCompositeView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyCompositeView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var properties = [ |
|||
{property: 'subprop1'}, |
|||
{ |
|||
type: 'integer', |
|||
property: 'subprop2', |
|||
defaults: 0, |
|||
units: ['%', 'px'] |
|||
}, |
|||
{ |
|||
type: 'select', |
|||
property: 'subprop3', |
|||
defaults: 'val2', |
|||
list: [ |
|||
{value:'val1'}, |
|||
{value:'val2'}, |
|||
{value:'val3'}, |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
beforeEach(() => { |
|||
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 () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it('Properties rendered', function() { |
|||
var prop = view.el; |
|||
prop.querySelector('.properties').should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
}); |
|||
|
|||
it('Properties rendered correctly', function() { |
|||
var children = view.el.querySelector('.properties').children; |
|||
children.length.should.equal(properties.length + 1); |
|||
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('Properties rendered', () => { |
|||
var prop = view.el; |
|||
expect(prop.querySelector('.properties')).toExist(); |
|||
}); |
|||
|
|||
it('Props should exist', function() { |
|||
view.$props.should.be.ok; |
|||
}); |
|||
it('Properties rendered correctly', () => { |
|||
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() { |
|||
view.model.get('value').should.be.empty; |
|||
}); |
|||
it('Props should exist', () => { |
|||
expect(view.$props).toExist(); |
|||
}); |
|||
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', propValue); |
|||
view.$input.val().should.equal(propValue); |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
var prop2Val; |
|||
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); |
|||
}); |
|||
it('Update input on value change', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.$input.val()).toEqual(propValue); |
|||
}); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var PropertyIntegerView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyIntegerView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var intValue = '55'; |
|||
var unitValue = 'px'; |
|||
var propValue = intValue + unitValue; |
|||
var defValue = 'test2value'; |
|||
var units = ['px', '%', 'em']; |
|||
var minValue = -15; |
|||
var maxValue = 75; |
|||
var unitsElSel = '.field-units select'; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$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); |
|||
}); |
|||
const PropertyIntegerView = require('style_manager/view/PropertyIntegerView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyIntegerView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propTarget; |
|||
var propName = 'testprop'; |
|||
var intValue = '55'; |
|||
var unitValue = 'px'; |
|||
var propValue = intValue + unitValue; |
|||
var defValue = 'test2value'; |
|||
var units = ['px', '%', 'em']; |
|||
var minValue = -15; |
|||
var maxValue = 75; |
|||
var unitsElSel = '.field-units select'; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
beforeEach(() => { |
|||
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 () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it('Inputs rendered', function() { |
|||
var prop = view.el; |
|||
prop.querySelector('input[type=text]').should.be.ok; |
|||
prop.querySelector(unitsElSel).should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
}); |
|||
|
|||
it('Units rendered', function() { |
|||
var select = view.el.querySelector(unitsElSel); |
|||
select.children.length.should.equal(units.length); |
|||
}); |
|||
it('Inputs rendered', () => { |
|||
var prop = view.el; |
|||
expect(prop.querySelector('input[type=text]')).toExist(); |
|||
expect(prop.querySelector(unitsElSel)).toExist(); |
|||
}); |
|||
|
|||
it('Units rendered correctly', function() { |
|||
var children = view.el.querySelector(unitsElSel).children; |
|||
children[0].textContent.should.equal(units[0]); |
|||
children[1].textContent.should.equal(units[1]); |
|||
children[2].textContent.should.equal(units[2]); |
|||
}); |
|||
it('Units rendered', () => { |
|||
var select = view.el.querySelector(unitsElSel); |
|||
expect(select.children.length).toEqual(units.length); |
|||
}); |
|||
|
|||
it('Inputs should exist', function() { |
|||
view.$input.should.be.ok; |
|||
view.$unit.should.be.ok; |
|||
}); |
|||
it('Units rendered correctly', () => { |
|||
var children = view.el.querySelector(unitsElSel).children; |
|||
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() { |
|||
view.model.get('value').should.be.empty; |
|||
view.model.get('unit').should.equal('px'); |
|||
}); |
|||
it('Inputs should exist', () => { |
|||
expect(view.$input).toExist(); |
|||
expect(view.$unit).toExist(); |
|||
}); |
|||
|
|||
it('Update model on setValue', function() { |
|||
view.setValue(intValue + unitValue); |
|||
view.model.get('value').should.equal(parseFloat(intValue)); |
|||
view.model.get('unit').should.equal(unitValue); |
|||
view.$input.val().should.equal(intValue); |
|||
view.$unit.val().should.equal(unitValue); |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
expect(view.model.get('unit')).toEqual('px'); |
|||
}); |
|||
|
|||
it('Update model on input change', function() { |
|||
view.$input.val(123).trigger('change'); |
|||
view.model.get('value').should.equal(123); |
|||
}); |
|||
it('Update model on setValue', () => { |
|||
view.setValue(intValue + unitValue); |
|||
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() { |
|||
view.$unit.val(units[1]).trigger('change'); |
|||
view.model.get('unit').should.equal(units[1]); |
|||
}); |
|||
it('Update model on input change', () => { |
|||
view.$input.val(123).trigger('change'); |
|||
expect(view.model.get('value')).toEqual(123); |
|||
}); |
|||
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', intValue); |
|||
view.getInputValue().should.equal(intValue); |
|||
}); |
|||
it('Update model on unit change', () => { |
|||
view.$unit.val(units[1]).trigger('change'); |
|||
expect(view.model.get('unit')).toEqual(units[1]); |
|||
}); |
|||
|
|||
it('Update target on value change', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', intValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
it('Update input on value change', () => { |
|||
view.model.set('value', intValue); |
|||
expect(view.getInputValue()).toEqual(intValue); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
beforeEach(function () { |
|||
target.model = component; |
|||
view = new PropertyIntegerView({ |
|||
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(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 + ""); |
|||
}); |
|||
it('Update target on value change', () => { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', intValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
}); |
|||
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){ |
|||
'use strict'; |
|||
var PropertyRadioView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyRadioView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var options = [ |
|||
{ value: 'test1value', 'title': 'testtitle'}, |
|||
{ name: 'test2', value: 'test2value'} |
|||
]; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
const PropertyRadioView = require('style_manager/view/PropertyRadioView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyRadioView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propTarget; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var options = [ |
|||
{ value: 'test1value', 'title': 'testtitle'}, |
|||
{ name: 'test2', value: 'test2value'} |
|||
]; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'radio', |
|||
list: options, |
|||
property: propName |
|||
}); |
|||
view = new PropertyRadioView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'radio', |
|||
list: options, |
|||
property: propName |
|||
}); |
|||
propTarget = Object.assign({}, Backbone.Events); |
|||
propTarget.model = component; |
|||
view = new PropertyRadioView({ |
|||
model, |
|||
propTarget |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
}); |
|||
|
|||
it('Radio rendered', function() { |
|||
var prop = view.el; |
|||
prop.querySelector('input[type=radio]').should.be.ok; |
|||
}); |
|||
it('Radio rendered', () => { |
|||
var prop = view.el; |
|||
expect(prop.querySelector('input[type=radio]')).toExist(); |
|||
}); |
|||
|
|||
it('Options rendered', function() { |
|||
var input = view.el.querySelector('#input-holder'); |
|||
input.children.length.should.equal(options.length); |
|||
}); |
|||
it('Options rendered', () => { |
|||
var input = view.el.querySelector('#input-holder'); |
|||
expect(input.children.length).toEqual(options.length); |
|||
}); |
|||
|
|||
it('Options rendered correctly', function() { |
|||
var children = view.el.querySelector('#input-holder').children; |
|||
children[0].querySelector('label').textContent.should.equal('test1value'); |
|||
children[1].querySelector('label').textContent.should.equal('test2'); |
|||
children[0].querySelector('input').value.should.equal(options[0].value); |
|||
children[1].querySelector('input').value.should.equal(options[1].value); |
|||
children[0].querySelector('label').getAttribute('title').should.equal(options[0].title); |
|||
(children[1].querySelector('label').getAttribute('title') == null) |
|||
.should.equal(true); |
|||
}); |
|||
it('Options rendered correctly', () => { |
|||
var children = view.el.querySelector('#input-holder').children; |
|||
expect(children[0].querySelector('label').textContent).toEqual('test1value'); |
|||
expect(children[1].querySelector('label').textContent).toEqual('test2'); |
|||
expect(children[0].querySelector('input').value).toEqual(options[0].value); |
|||
expect(children[1].querySelector('input').value).toEqual(options[1].value); |
|||
expect(children[0].querySelector('label').getAttribute('title')).toEqual(options[0].title); |
|||
expect(children[1].querySelector('label').getAttribute('title')).toEqual(null); |
|||
}); |
|||
|
|||
it('Input should exist', function() { |
|||
view.$input.should.be.ok; |
|||
}); |
|||
it('Input should exist', () => { |
|||
expect(view.$input).toExist(); |
|||
}); |
|||
|
|||
it('Input value is empty', function() { |
|||
view.model.get('value').should.be.empty; |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
}); |
|||
|
|||
it('Update model on input change', function() { |
|||
view.setValue(propValue); |
|||
view.model.get('value').should.equal(propValue); |
|||
view.getInputValue().should.equal(propValue); |
|||
}); |
|||
it('Update model on input change', () => { |
|||
view.setValue(propValue); |
|||
expect(view.model.get('value')).toEqual(propValue); |
|||
expect(view.getInputValue()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', propValue); |
|||
view.getInputValue().should.equal(propValue); |
|||
}); |
|||
it('Update input on value change', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.getInputValue()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update target on value change', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
it('Update target on value change', () => { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
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); |
|||
}); |
|||
describe('With target setted', () => { |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var PropertySelectView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertySelectView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var options = [ |
|||
{value: 'test1value', style: 'test:style'}, |
|||
{name: 'test2', value: 'test2value'} |
|||
]; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
const PropertySelectView = require('style_manager/view/PropertySelectView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertySelectView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propTarget; |
|||
var options; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var options = [ |
|||
{value: 'test1value', style: 'test:style'}, |
|||
{name: 'test2', value: 'test2value'} |
|||
]; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'select', |
|||
list: options, |
|||
property: propName |
|||
}); |
|||
view = new PropertySelectView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
propTarget = Object.assign({}, Backbone.Events); |
|||
target = new Component(); |
|||
component = new Component(); |
|||
model = new Property({ |
|||
type: 'select', |
|||
list: options, |
|||
property: propName |
|||
}); |
|||
propTarget.model = component; |
|||
view = new PropertySelectView({ |
|||
model, |
|||
propTarget |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
}); |
|||
|
|||
it('Select rendered', function() { |
|||
var prop = view.el; |
|||
prop.querySelector('select').should.be.ok; |
|||
}); |
|||
it('Select rendered', () => { |
|||
var prop = view.el; |
|||
expect(prop.querySelector('select')).toExist(); |
|||
}); |
|||
|
|||
it('Options rendered', function() { |
|||
var select = view.el.querySelector('select'); |
|||
select.children.length.should.equal(options.length); |
|||
}); |
|||
it('Options rendered', () => { |
|||
var select = view.el.querySelector('select'); |
|||
expect(select.children.length).toEqual(options.length); |
|||
}); |
|||
|
|||
it('Options rendered correctly', function() { |
|||
var select = view.el.querySelector('select'); |
|||
var children = select.children; |
|||
children[0].value.should.equal(options[0].value); |
|||
children[1].value.should.equal(options[1].value); |
|||
children[0].textContent.should.equal(options[0].value); |
|||
children[1].textContent.should.equal(options[1].name); |
|||
children[0].getAttribute('style').should.equal(options[0].style); |
|||
(children[1].getAttribute('style') == null).should.equal(true); |
|||
}); |
|||
it('Options rendered correctly', () => { |
|||
var select = view.el.querySelector('select'); |
|||
var children = select.children; |
|||
expect(children[0].value).toEqual(options[0].value); |
|||
expect(children[1].value).toEqual(options[1].value); |
|||
expect(children[0].textContent).toEqual(options[0].value); |
|||
expect(children[1].textContent).toEqual(options[1].name); |
|||
expect(children[0].getAttribute('style')).toEqual(options[0].style); |
|||
expect(children[1].getAttribute('style')).toEqual(null); |
|||
}); |
|||
|
|||
it('Input should exist', function() { |
|||
view.$input.should.be.ok; |
|||
}); |
|||
it('Input should exist', () => { |
|||
expect(view.$input).toExist(); |
|||
}); |
|||
|
|||
it('Input value is empty', function() { |
|||
view.model.get('value').should.be.empty; |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
}); |
|||
|
|||
it('Update model on input change', function() { |
|||
view.$input.val(propValue).trigger('change'); |
|||
view.model.get('value').should.equal(propValue); |
|||
}); |
|||
it('Update model on input change', () => { |
|||
view.$input.val(propValue).trigger('change'); |
|||
expect(view.model.get('value')).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', propValue); |
|||
view.$input.val().should.equal(propValue); |
|||
}); |
|||
it('Update input on value change', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.$input.val()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update target on value change', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
it('Update target on value change', () => { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
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); |
|||
}); |
|||
describe('With target setted', () => { |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var PropertyStackView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyStackView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var layers = [ |
|||
{value: 'lval1'}, |
|||
{value: 'lval2 lval22'}, |
|||
{value: 'lval3 lval32 lval33'} |
|||
]; |
|||
var properties = [ |
|||
{property: 'subprop1'}, |
|||
{ |
|||
type: 'integer', |
|||
property: 'subprop2', |
|||
defaults: 0, |
|||
units: ['%', 'px'] |
|||
}, |
|||
{ |
|||
type: 'select', |
|||
property: 'subprop3', |
|||
defaults: 'val2', |
|||
list: [ |
|||
{value:'val1'}, |
|||
{value:'val2'}, |
|||
{value:'val3'}, |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
const PropertyStackView = require('style_manager/view/PropertyStackView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyStackView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'test1value'; |
|||
var defValue = 'test2value'; |
|||
var layers = [ |
|||
{value: 'lval1'}, |
|||
{value: 'lval2 lval22'}, |
|||
{value: 'lval3 lval32 lval33'} |
|||
]; |
|||
var properties = [ |
|||
{property: 'subprop1'}, |
|||
{ |
|||
type: 'integer', |
|||
property: 'subprop2', |
|||
defaults: 0, |
|||
units: ['%', 'px'] |
|||
}, |
|||
{ |
|||
type: 'select', |
|||
property: 'subprop3', |
|||
defaults: 'val2', |
|||
list: [ |
|||
{value:'val1'}, |
|||
{value:'val2'}, |
|||
{value:'val3'}, |
|||
] |
|||
}, |
|||
]; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
target.model = component; |
|||
model = new Property({ |
|||
type: 'stack', |
|||
property: propName, |
|||
properties: properties |
|||
}); |
|||
view = new PropertyStackView({ |
|||
model: model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
beforeEach(() => { |
|||
target = new Component(); |
|||
component = new Component(); |
|||
target.model = component; |
|||
model = new Property({ |
|||
type: 'stack', |
|||
property: propName, |
|||
properties |
|||
}); |
|||
view = new PropertyStackView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
delete view; |
|||
delete model; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
view = null; |
|||
model = null; |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
prop.querySelector('#add').should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var prop = view.el; |
|||
expect($fixture.get(0).querySelector('.property')).toExist(); |
|||
expect(prop.querySelector('.label')).toExist(); |
|||
expect(prop.querySelector('.field')).toExist(); |
|||
expect(prop.querySelector('#add')).toExist(); |
|||
}); |
|||
|
|||
it('Layers rendered', function() { |
|||
view.el.querySelector('.layers').should.be.ok; |
|||
}); |
|||
it('Layers rendered', () => { |
|||
expect(view.el.querySelector('.layers')).toExist(); |
|||
}); |
|||
|
|||
it('Layers should exist', function() { |
|||
view.$props.should.be.ok; |
|||
}); |
|||
it('Layers should exist', () => { |
|||
expect(view.$props).toExist(); |
|||
}); |
|||
|
|||
it('Layers rendered correctly', function() { |
|||
var children = view.$props.get(0).children; |
|||
children.length.should.equal(properties.length + 1); |
|||
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('Layers rendered correctly', () => { |
|||
var children = view.$props.get(0).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() { |
|||
view.model.get('value').should.be.empty; |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
}); |
|||
|
|||
it('Layers container is empty', function() { |
|||
var layers = view.el.querySelector('.layers'); |
|||
layers.innerHTML.should.be.empty; |
|||
}); |
|||
it('Layers container is empty', () => { |
|||
var layers = view.el.querySelector('.layers'); |
|||
expect(layers.innerHTML).toNotExist(); |
|||
}); |
|||
|
|||
describe('With layers', function() { |
|||
|
|||
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); |
|||
}); |
|||
describe('With layers', () => { |
|||
|
|||
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() { |
|||
|
|||
var prop2Val; |
|||
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); |
|||
}); |
|||
it('Add layer', () => { |
|||
view.addLayer(); |
|||
expect(view.getLayers().length).toEqual(layers.length + 1); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var PropertyView = require('undefined'); |
|||
var Property = require('StyleManager/model/Property'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
|
|||
describe('PropertyView', function() { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propName = 'testprop'; |
|||
var propValue = 'testvalue'; |
|||
var defValue = 'testDefault'; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$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); |
|||
}); |
|||
const PropertyView = require('style_manager/view/PropertyView'); |
|||
const Property = require('style_manager/model/Property'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('PropertyView', () => { |
|||
|
|||
var component; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var target; |
|||
var model; |
|||
var view; |
|||
var propTarget; |
|||
var options; |
|||
var propName = 'testprop'; |
|||
var propValue = 'testvalue'; |
|||
var defValue = 'testDefault'; |
|||
|
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sm-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
beforeEach(() => { |
|||
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 () { |
|||
$fixture.remove(); |
|||
delete component; |
|||
}); |
|||
afterEach(() => { |
|||
//view.remove(); // strange errors ???
|
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var prop = view.el; |
|||
$fixture.get(0).querySelector('.property').should.be.ok; |
|||
prop.querySelector('.label').should.be.ok; |
|||
prop.querySelector('.field').should.be.ok; |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
component = null; |
|||
}); |
|||
|
|||
it('Input should exist', function() { |
|||
view.$input.should.be.ok; |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
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() { |
|||
view.model.get('value').should.be.empty; |
|||
view.$input.val().should.be.empty; |
|||
}); |
|||
it('Input should exist', () => { |
|||
expect(view.$input).toExist(); |
|||
}); |
|||
|
|||
it('Model not change without update trigger', function() { |
|||
view.$input.val(propValue); |
|||
view.model.get('value').should.be.empty; |
|||
}); |
|||
it('Input value is empty', () => { |
|||
expect(view.model.get('value')).toNotExist(); |
|||
expect(view.$input.val()).toNotExist(); |
|||
}); |
|||
|
|||
// Tests valueUpdated()
|
|||
it('Update model on input change', function() { |
|||
view.$input.val(propValue).trigger('change'); |
|||
view.model.get('value').should.equal(propValue); |
|||
}); |
|||
it('Model not change without update trigger', () => { |
|||
view.$input.val(propValue); |
|||
expect(view.model.get('value')).toNotExist(); |
|||
}); |
|||
|
|||
// Tests getValueForTarget()
|
|||
it('Get value for target', function() { |
|||
view.model.set('value', propValue); |
|||
view.getValueForTarget().should.equal(propValue); |
|||
}); |
|||
// Tests valueUpdated()
|
|||
it('Update model on input change', () => { |
|||
view.$input.val(propValue).trigger('change'); |
|||
expect(view.model.get('value')).toEqual(propValue); |
|||
}); |
|||
|
|||
// Tests valueChanged() -> ...
|
|||
it('Update input on value change', function() { |
|||
view.model.set('value', propValue); |
|||
view.$input.val().should.equal(propValue); |
|||
}); |
|||
// Tests getValueForTarget()
|
|||
it('Get value for target', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.getValueForTarget()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update target on value change', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
// Tests valueChanged() -> ...
|
|||
it('Update input on value change', () => { |
|||
view.model.set('value', propValue); |
|||
expect(view.$input.val()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Update target on value change with functionName', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('functionName', 'testfunc'); |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = 'testfunc(' + propValue + ')'; |
|||
compStyle.should.deep.equal(assertStyle); |
|||
}); |
|||
it('Update target on value change', () => { |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.getTargetModel().get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = propValue; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
it('Clean target from the property if its value is empty', function() { |
|||
view.selectedComponent = component; |
|||
view.model.set('value', propValue); |
|||
view.model.set('value', ''); |
|||
var compStyle = view.selectedComponent.get('style'); |
|||
compStyle.should.deep.equal({}); |
|||
}); |
|||
it('Update target on value change with functionName', () => { |
|||
view.model.set('functionName', 'testfunc'); |
|||
view.model.set('value', propValue); |
|||
var compStyle = view.getTargetModel().get('style'); |
|||
var assertStyle = {}; |
|||
assertStyle[propName] = 'testfunc(' + propValue + ')'; |
|||
expect(compStyle).toEqual(assertStyle); |
|||
}); |
|||
|
|||
it('Check stylable element', function() { |
|||
view.selectedComponent = component; |
|||
view.isTargetStylable().should.equal(true); |
|||
component.set('stylable', false); |
|||
view.isTargetStylable().should.equal(false); |
|||
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('Clean target from the property if its value is empty', () => { |
|||
view.model.set('value', propValue); |
|||
view.model.set('value', ''); |
|||
var compStyle = view.getTargetModel().get('style'); |
|||
expect(compStyle).toEqual({}); |
|||
}); |
|||
|
|||
it('Target style is empty without values', function() { |
|||
view.selectedComponent = component; |
|||
view.getComponentValue().should.be.empty; |
|||
}); |
|||
it('Check stylable element', () => { |
|||
expect(view.isTargetStylable()).toEqual(true); |
|||
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() { |
|||
view.selectedComponent = component; |
|||
var style = {}; |
|||
style[propName] = propValue; |
|||
component.set('style', style); |
|||
view.getComponentValue().should.equal(propValue); |
|||
}); |
|||
it('Target style is empty without values', () => { |
|||
expect(view.getComponentValue()).toNotExist(); |
|||
}); |
|||
|
|||
it('Target style is empty with an other style', function() { |
|||
view.selectedComponent = component; |
|||
var style = {}; |
|||
style[propName + '2'] = propValue; |
|||
component.set('style', style); |
|||
view.getComponentValue().should.be.empty; |
|||
}); |
|||
it('Target style is correct', () => { |
|||
var style = {}; |
|||
style[propName] = propValue; |
|||
component.set('style', style); |
|||
expect(view.getComponentValue()).toEqual(propValue); |
|||
}); |
|||
|
|||
it('Fetch value from function', function() { |
|||
view.selectedComponent = component; |
|||
var style = {}; |
|||
style[propName] = 'testfun(' + propValue + ')'; |
|||
component.set('style', style); |
|||
view.model.set('functionName', 'testfun'); |
|||
view.getComponentValue().should.equal(propValue); |
|||
}); |
|||
it('Target style is empty with an other style', () => { |
|||
var style = {}; |
|||
style[propName + '2'] = propValue; |
|||
component.set('style', style); |
|||
expect(view.getComponentValue()).toNotExist(); |
|||
}); |
|||
|
|||
describe('With target setted', function() { |
|||
|
|||
beforeEach(function () { |
|||
target.model = component; |
|||
view = new PropertyView({ |
|||
model: model, |
|||
propTarget: target |
|||
}); |
|||
$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); |
|||
}); |
|||
it('Fetch value from function', () => { |
|||
view.selectedComponent = component; |
|||
var style = {}; |
|||
style[propName] = 'testfun(' + propValue + ')'; |
|||
component.set('style', style); |
|||
view.model.set('functionName', 'testfun'); |
|||
expect(view.getComponentValue()).toEqual(propValue); |
|||
}); |
|||
|
|||
}); |
|||
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){ |
|||
'use strict'; |
|||
var SectorView = require('undefined'); |
|||
var Sector = require('StyleManager/model/Sector'); |
|||
const SectorView = require('style_manager/view/SectorView'); |
|||
const Sector = require('style_manager/model/Sector'); |
|||
|
|||
module.exports = { |
|||
run : function(){ |
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('SectorView', function() { |
|||
describe('SectorView', () => { |
|||
|
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
var $fixtures; |
|||
var $fixture; |
|||
var model; |
|||
var view; |
|||
|
|||
before(function () { |
|||
$fixtures = $("#fixtures"); |
|||
$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); |
|||
}); |
|||
before(() => { |
|||
$fixtures = $("#fixtures"); |
|||
$fixture = $('<div class="sector-fixture"></div>'); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
view.remove(); |
|||
}); |
|||
beforeEach(() => { |
|||
model = new Sector(); |
|||
view = new SectorView({ |
|||
model |
|||
}); |
|||
$fixture.empty().appendTo($fixtures); |
|||
$fixture.html(view.render().el); |
|||
}); |
|||
|
|||
after(function () { |
|||
$fixture.remove(); |
|||
}); |
|||
afterEach(() => { |
|||
view.remove(); |
|||
}); |
|||
|
|||
it('Rendered correctly', function() { |
|||
var sector = view.el; |
|||
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); |
|||
}); |
|||
after(() => { |
|||
$fixture.remove(); |
|||
}); |
|||
|
|||
it('No properties', function() { |
|||
var props = view.el.querySelector('.properties'); |
|||
props.innerHTML.should.equal('<div class="clear"></div>'); |
|||
}); |
|||
it('Rendered correctly', () => { |
|||
var sector = view.el; |
|||
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() { |
|||
var sector = view.el; |
|||
var props = sector.querySelector('.properties'); |
|||
model.set('open', false); |
|||
sector.classList.contains('open').should.equal(false); |
|||
props.style.display.should.equal('none'); |
|||
}); |
|||
it('No properties', () => { |
|||
var props = view.el.querySelector('.properties'); |
|||
expect(props.innerHTML).toEqual('<div class="clear"></div>'); |
|||
}); |
|||
|
|||
it('Toggle on click', function() { |
|||
var sector = view.el; |
|||
view.$el.find('.title').click(); |
|||
sector.classList.contains('open').should.equal(false); |
|||
}); |
|||
it('Update on open', () => { |
|||
var sector = view.el; |
|||
var props = sector.querySelector('.properties'); |
|||
model.set('open', false); |
|||
expect(sector.classList.contains('open')).toEqual(false); |
|||
expect(props.style.display).toEqual('none'); |
|||
}); |
|||
|
|||
describe('Init with options', function() { |
|||
|
|||
beforeEach(function () { |
|||
model = new Sector({ |
|||
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
|
|||
}); |
|||
it('Toggle on click', () => { |
|||
var sector = view.el; |
|||
view.$el.find('.title').click(); |
|||
expect(sector.classList.contains('open')).toEqual(false); |
|||
}); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
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); |
|||
}); |
|||
const SectorsView = require('style_manager/view/SectorsView'); |
|||
const Sectors = require('style_manager/model/Sectors'); |
|||
|
|||
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){ |
|||
'use strict'; |
|||
var Trait = require('TraitManager/model/Trait'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
const Trait = require('trait_manager/model/Trait'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run: function(){ |
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('TraitModels', function() { |
|||
describe('TraitModels', () => { |
|||
|
|||
var obj; |
|||
var target; |
|||
var modelName = 'title'; |
|||
var obj; |
|||
var target; |
|||
var modelName = 'title'; |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
obj = new Trait({ |
|||
name: modelName, |
|||
target: target, |
|||
}); |
|||
}); |
|||
beforeEach(() => { |
|||
target = new Component(); |
|||
obj = new Trait({ |
|||
name: modelName, |
|||
target, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
Trait.should.be.exist; |
|||
}); |
|||
it('Object exists', () => { |
|||
expect(Trait).toExist(); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
@ -1,75 +1,73 @@ |
|||
define(function(require, exports, module){ |
|||
'use strict'; |
|||
var Trait = require('undefined'); |
|||
var Component = require('DomComponents/model/Component'); |
|||
const Trait = require('trait_manager/model/Trait'); |
|||
const TraitView = require('trait_manager/view/TraitView'); |
|||
const Component = require('dom_components/model/Component'); |
|||
|
|||
module.exports = { |
|||
run: function(){ |
|||
module.exports = { |
|||
run() { |
|||
|
|||
describe('TraitView', function() { |
|||
describe('TraitView', () => { |
|||
|
|||
var obj; |
|||
var model; |
|||
var modelName = 'title'; |
|||
var target; |
|||
var obj; |
|||
var model; |
|||
var modelName = 'title'; |
|||
var target; |
|||
|
|||
beforeEach(function () { |
|||
target = new Component(); |
|||
model = new Trait({ |
|||
name: modelName, |
|||
target: target, |
|||
}); |
|||
obj = new TraitView({ |
|||
model: model, |
|||
}); |
|||
}); |
|||
beforeEach(() => { |
|||
target = new Component(); |
|||
model = new Trait({ |
|||
name: modelName, |
|||
target, |
|||
}); |
|||
obj = new TraitView({ |
|||
model, |
|||
}); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete obj; |
|||
delete model; |
|||
delete target; |
|||
}); |
|||
afterEach(() => { |
|||
obj = null; |
|||
model = null; |
|||
target = null; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
Trait.should.be.exist; |
|||
}); |
|||
it('Object exists', () => { |
|||
expect(Trait).toExist(); |
|||
}); |
|||
|
|||
it('Target has no attributes on init', function() { |
|||
target.get('attributes').should.deep.equal({}); |
|||
}); |
|||
it('Target has no attributes on init', () => { |
|||
expect(target.get('attributes')).toEqual({}); |
|||
}); |
|||
|
|||
it('On update of the value updates the target attributes', function() { |
|||
model.set('value', 'test'); |
|||
var eq = {}; |
|||
eq[modelName] = 'test'; |
|||
target.get('attributes').should.deep.equal(eq); |
|||
}); |
|||
it('On update of the value updates the target attributes', () => { |
|||
model.set('value', 'test'); |
|||
var eq = {}; |
|||
eq[modelName] = 'test'; |
|||
expect(target.get('attributes')).toEqual(eq); |
|||
}); |
|||
|
|||
it('Updates on different models do not alter other targets', function() { |
|||
var target1 = new Component(); |
|||
var target2 = new Component(); |
|||
var model1 = new Trait({ |
|||
name: modelName, |
|||
target: target1, |
|||
}); |
|||
var model2 = new Trait({ |
|||
name: modelName, |
|||
target: target2, |
|||
}); |
|||
var obj1 = new TraitView({model: model1}); |
|||
var obj2 = new TraitView({model: model2}); |
|||
it('Updates on different models do not alter other targets', () => { |
|||
var target1 = new Component(); |
|||
var target2 = new Component(); |
|||
var model1 = new Trait({ |
|||
name: modelName, |
|||
target: target1, |
|||
}); |
|||
var model2 = new Trait({ |
|||
name: modelName, |
|||
target: target2, |
|||
}); |
|||
var obj1 = new TraitView({model: model1}); |
|||
var obj2 = new TraitView({model: model2}); |
|||
|
|||
model1.set('value', 'test1'); |
|||
model2.set('value', 'test2'); |
|||
var eq1 = {}; |
|||
eq1[modelName] = 'test1'; |
|||
var eq2 = {}; |
|||
eq2[modelName] = 'test2'; |
|||
target1.get('attributes').should.deep.equal(eq1); |
|||
target2.get('attributes').should.deep.equal(eq2); |
|||
}); |
|||
model1.set('value', 'test1'); |
|||
model2.set('value', 'test2'); |
|||
var eq1 = {}; |
|||
eq1[modelName] = 'test1'; |
|||
var eq2 = {}; |
|||
eq2[modelName] = 'test2'; |
|||
expect(target1.get('attributes')).toEqual(eq1); |
|||
expect(target2.get('attributes')).toEqual(eq2); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue