tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update selector manager tests

pull/187/head
Artur Arseniev 9 years ago
parent
a2651eedb6
commit
dbca56ac99
7 changed files with 541 additions and 556 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      test/main.js
  2. 243
      test/specs/selector_manager/e2e/ClassManager.js
  3. 82
      test/specs/selector_manager/index.js
  4. 82
      test/specs/selector_manager/main.js
  5. 76
      test/specs/selector_manager/model/SelectorModels.js
  6. 222
      test/specs/selector_manager/view/ClassTagView.js
  7. 391
      test/specs/selector_manager/view/ClassTagsView.js

1
test/main.js
View File

@ -21,4 +21,5 @@ describe('Main', () => {
require(`${path}panels`); require(`${path}panels`);
require(`${path}parser`); require(`${path}parser`);
require(`${path}plugin_manager`); require(`${path}plugin_manager`);
require(`${path}selector_manager`);
}); });

243
test/specs/selector_manager/e2e/ClassManager.js
View File

@ -1,129 +1,120 @@
define((require, exports, module) => { const Selectors = require('selector_manager/model/Selectors');
'use strict'; const ClassTagsView = require('selector_manager/view/ClassTagsView');
var GrapesJS = require('GrapesJS');
var Selectors = require('SelectorManager/model/Selectors'); module.exports = {
var ClassTagsView = require('SelectorManager/view/ClassTagsView'); run() {
describe('E2E tests', () => {
module.exports = {
run() { var instClassTagViewer = ctx => {
describe('E2E tests', () => { var $clm;
var clm = ctx.gjs.editor.get('SelectorManager');
/** if(clm){
* Create tags viewer $clm = new ClassTagsView({
* @param {Object} ctx collection: new Selectors([]),
*/ config: {
var instClassTagViewer = ctx => { em: ctx.gjs.editor
var $clm; },
var clm = ctx.gjs.editor.get('SelectorManager'); }).render();
if(clm){ ctx.$fixture.append($clm.el);
$clm = new ClassTagsView({ }
collection: new Selectors([]), return $clm;
config: { };
em: ctx.gjs.editor
}, before(function () {
}).render(); this.$fixtures = $("#fixtures");
ctx.$fixture.append($clm.el); this.$fixture = $('<div id="SelectorManager-fixture"></div>');
} });
return $clm;
}; beforeEach(function () {
this.gjs = grapesjs.init({
before(function () { stylePrefix: '',
this.$fixtures = $("#fixtures"); storageManager: { autoload: 0, type:'none' },
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); assetManager: {
}); storageType: 'none',
},
beforeEach(function () { container: '#SelectorManager-fixture',
this.gjs = GrapesJS.init({ });
stylePrefix: '', this.$fixture.empty().appendTo(this.$fixtures);
storageManager: { autoload: 0, type:'none' }, this.gjs.render();
assetManager: { });
storageType: 'none',
}, afterEach(function () {
container: '#SelectorManager-fixture', delete this.gjs;
}); });
this.$fixture.empty().appendTo(this.$fixtures);
this.gjs.render(); after(function () {
}); this.$fixture.remove();
});
afterEach(function () {
delete this.gjs; describe('Interaction with Components', () => {
});
beforeEach(function () {
after(function () { this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components');
this.$fixture.remove(); this.$clm = instClassTagViewer(this);
}); });
describe('Interaction with Components', () => { afterEach(function () {
delete this.wrapper;
beforeEach(function () { delete this.$clm;
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components'); });
this.$clm = instClassTagViewer(this);
}); it('Assign correctly new class to component', function() {
var model = this.wrapper.add({});
afterEach(function () { expect(model.get('classes').length).toEqual(0);
delete this.wrapper; this.gjs.editor.set('selectedComponent', model);
delete this.$clm; this.$clm.addNewTag('test');
}); expect(model.get('classes').length).toEqual(1);
expect(model.get('classes').at(0).get('name')).toEqual('test');
it('Assign correctly new class to component', function() { });
var model = this.wrapper.add({});
model.get('classes').length.should.equal(0); it('Classes from components are correctly imported inside main container', function() {
this.gjs.editor.set('selectedComponent', model); var model = this.wrapper.add([
this.$clm.addNewTag('test'); { classes: ['test11', 'test12', 'test13'] },
model.get('classes').length.should.equal(1); { classes: ['test11', 'test22', 'test22'] },
model.get('classes').at(0).get('name').should.equal('test'); ]);
}); expect(this.gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
});
it('Classes from components are correctly imported inside main container', function() {
var model = this.wrapper.add([ it('Class imported into component is the same model from main container', function() {
{ classes: ['test11', 'test12', 'test13'] }, var model = this.wrapper.add({ classes: ['test1'] });
{ classes: ['test11', 'test22', 'test22'] }, var clModel = model.get('classes').at(0);
]); var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0);
this.gjs.editor.get('SelectorManager').getAll().length.should.equal(4); expect(clModel).toEqual(clModel2);
}); });
it('Class imported into component is the same model from main container', function() { it('Can assign only one time the same class on selected component and the class viewer', function() {
var model = this.wrapper.add({ classes: ['test1'] }); var model = this.wrapper.add({});
var clModel = model.get('classes').at(0); this.gjs.editor.set('selectedComponent', model);
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); this.$clm.addNewTag('test');
clModel.should.deep.equal(clModel2); this.$clm.addNewTag('test');
}); expect(model.get('classes').length).toEqual(1);
expect(model.get('classes').at(0).get('name')).toEqual('test');
it('Can assign only one time the same class on selected component and the class viewer', function() { expect(this.$clm.collection.length).toEqual(1);
var model = this.wrapper.add({}); expect(this.$clm.collection.at(0).get('name')).toEqual('test');
this.gjs.editor.set('selectedComponent', model); });
this.$clm.addNewTag('test');
this.$clm.addNewTag('test'); it('Removing from container removes also from selected component', function() {
model.get('classes').length.should.equal(1); var model = this.wrapper.add({});
model.get('classes').at(0).get('name').should.equal('test'); this.gjs.editor.set('selectedComponent', model);
this.$clm.collection.length.should.equal(1); this.$clm.addNewTag('test');
this.$clm.collection.at(0).get('name').should.equal('test'); this.$clm.getClasses().find('.tag #close').trigger('click')
}); expect(model.get('classes').length).toEqual(0);
});
it('Removing from container removes also from selected component', function() {
var model = this.wrapper.add({}); it("Trigger correctly event on target with new class add", function() {
this.gjs.editor.set('selectedComponent', model); var spy = sinon.spy();
this.$clm.addNewTag('test'); var model = this.wrapper.add({});
this.$clm.getClasses().find('.tag #close').trigger('click') this.gjs.editor.set('selectedComponent', model);
model.get('classes').length.should.equal(0); this.$clm.addNewTag('test');
}); this.gjs.editor.on("targetClassAdded", spy);
this.$clm.addNewTag('test');
it("Trigger correctly event on target with new class add", function() { expect(spy.called).toEqual(false);
var spy = sinon.spy(); this.$clm.addNewTag('test2');
var model = this.wrapper.add({}); expect(spy.called).toEqual(true);
this.gjs.editor.set('selectedComponent', model); });
this.$clm.addNewTag('test');
this.gjs.editor.on("targetClassAdded", spy);
this.$clm.addNewTag('test');
spy.called.should.equal(false);
this.$clm.addNewTag('test2');
spy.called.should.equal(true);
});
});
}); });
}
};
}); });
}
};

82
test/specs/selector_manager/index.js
View File

@ -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();
});

82
test/specs/selector_manager/main.js
View File

@ -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();
});
});

76
test/specs/selector_manager/model/SelectorModels.js
View File

@ -1,52 +1,50 @@
define(function(require, exports, module){ const Selector = require('selector_manager/model/Selector');
'use strict'; const Selectors = require('selector_manager/model/Selectors');
var Selectors = require('undefined');
module.exports = { module.exports = {
run : function(){ run() {
describe('Selector', function() { describe('Selector', () => {
var obj;
beforeEach(function () { beforeEach(() => {
this.obj = new Selector(); obj = new Selector();
}); });
afterEach(function () {
delete this.obj;
});
it('Has name property', function() {
this.obj.has('name').should.equal(true);
});
it('Has label property', function() { afterEach(() => {
this.obj.has('label').should.equal(true); obj = null;
}); });
it('Has active property', function() { it('Has name property', () => {
this.obj.has('active').should.equal(true); expect(obj.has('name')).toEqual(true);
}); });
it('escapeName test', function() { it('Has label property', () => {
this.obj.escapeName('@Te sT*').should.equal('-Te-sT-'); expect(obj.has('label')).toEqual(true);
}); });
it('Name is corrected at instantiation', function() { it('Has active property', () => {
this.obj = new Selector({ name: '@Te sT*'}); expect(obj.has('active')).toEqual(true);
this.obj.get('name').should.equal('-Te-sT-'); });
});
it('escapeName test', () => {
expect(obj.escapeName('@Te sT*')).toEqual('-Te-sT-');
});
it('Name is corrected at instantiation', () => {
obj = new Selector({ name: '@Te sT*'});
expect(obj.get('name')).toEqual('-Te-sT-');
}); });
describe('Selectors', function() {
it('Creates collection item correctly', function() {
var c = new Selectors();
var m = c.add({});
m.should.be.an.instanceOf(Selector);
});
});
describe('Selectors', () => {
it('Creates collection item correctly', () => {
var c = new Selectors();
var m = c.add({});
expect(m instanceof Selector).toEqual(true);
}); });
}
};
}); });
}
};

222
test/specs/selector_manager/view/ClassTagView.js
View File

@ -1,133 +1,129 @@
define(function(require, exports, module){ const ClassTagView = require('selector_manager/view/ClassTagView');
'use strict'; const Selectors = require('selector_manager/model/Selectors');
var ClassTagView = require('undefined');
var Selectors = require('SelectorManager/model/Selectors'); module.exports = {
run() {
module.exports = { describe('ClassTagView', () => {
run : function(){
describe('ClassTagView', function() { var obj;
var fixture;
var obj; var fixtures;
var fixture; var testLabel;
var fixtures; var coll;
var testLabel;
var coll; before(() => {
fixtures = $("#fixtures");
before(function () { fixture = $('<div class="classtag-fixture"></div>');
fixtures = $("#fixtures"); });
fixture = $('<div class="classtag-fixture"></div>');
});
beforeEach(function () { beforeEach(() => {
coll = new Selectors(); coll = new Selectors();
testLabel = 'TestLabel'; testLabel = 'TestLabel';
var model = coll.add({ var model = coll.add({
name: 'test', name: 'test',
label: testLabel, label: testLabel,
}); });
obj = new ClassTagView({ obj = new ClassTagView({
config : {}, config : {},
model: model, model,
coll: coll coll
}); });
obj.target = { get:function(){} }; obj.target = { get() {} };
_.extend(obj.target, Backbone.Events); _.extend(obj.target, Backbone.Events);
fixture.empty().appendTo(fixtures); fixture.empty().appendTo(fixtures);
fixture.html(obj.render().el); fixture.html(obj.render().el);
}); });
afterEach(function () { afterEach(() => {
delete obj.model; obj.model = null;
}); });
after(function () { after(() => {
fixture.remove(); fixture.remove();
}); });
it('Object exists', function() { it('Object exists', () => {
ClassTagView.should.be.exist; expect(ClassTagView).toExist();
}); });
it('Not empty', () => {
var $el = obj.$el;
expect($el.html()).toExist();
});
it('Not empty', () => {
var $el = obj.$el;
expect($el.html()).toContain(testLabel);
});
describe('Should be rendered correctly', () => {
it('Not empty', function() { it('Has close button', () => {
var $el = obj.$el; var $el = obj.$el;
$el.html().should.not.be.empty; expect($el.find('#close')[0]).toExist();
}); });
it('Has checkbox', () => {
it('Not empty', function() {
var $el = obj.$el; var $el = obj.$el;
$el.html().should.contain(testLabel); expect($el.find('#checkbox')[0]).toExist();
}); });
it('Has label', () => {
describe('Should be rendered correctly', function() { var $el = obj.$el;
expect($el.find('#tag-label')[0]).toExist();
it('Has close button', function() {
var $el = obj.$el;
$el.find('#close').should.have.property(0);
});
it('Has checkbox', function() {
var $el = obj.$el;
$el.find('#checkbox').should.have.property(0);
});
it('Has label', function() {
var $el = obj.$el;
$el.find('#tag-label').should.have.property(0);
});
}); });
it('Could be removed', function() { });
var spy = sinon.spy();
obj.config.target = { get:function(){} };
sinon.stub(obj.config.target, 'get').returns(0);
obj.$el.find('#close').trigger('click');
fixture.html().should.be.empty;
});
it('On remove triggers event', function() { it('Could be removed', () => {
var spy = sinon.spy(); var spy = sinon.spy();
sinon.stub(obj.target, 'get').returns(0); obj.config.target = { get() {} };
obj.target.on("targetClassRemoved", spy); sinon.stub(obj.config.target, 'get').returns(0);
obj.$el.find('#close').trigger('click'); obj.$el.find('#close').trigger('click');
spy.called.should.equal(true); expect(fixture.html()).toNotExist();
}); });
it('Checkbox toggles status', function() { it('On remove triggers event', () => {
var spy = sinon.spy(); var spy = sinon.spy();
obj.model.on("change:active", spy); sinon.stub(obj.target, 'get').returns(0);
obj.model.set('active', true); obj.target.on("targetClassRemoved", spy);
obj.$el.find('#checkbox').trigger('click'); obj.$el.find('#close').trigger('click');
obj.model.get('active').should.equal(false); expect(spy.called).toEqual(true);
spy.called.should.equal(true); });
});
it('On toggle triggers event', function() { it('Checkbox toggles status', () => {
var spy = sinon.spy(); var spy = sinon.spy();
sinon.stub(obj.target, 'get').returns(0); obj.model.on("change:active", spy);
obj.target.on("targetClassUpdated", spy); obj.model.set('active', true);
obj.$el.find('#checkbox').trigger('click'); obj.$el.find('#checkbox').trigger('click');
spy.called.should.equal(true); expect(obj.model.get('active')).toEqual(false);
}); expect(spy.called).toEqual(true);
});
it('Label input is disabled', function() { it('On toggle triggers event', () => {
var inputProp = obj.inputProp; var spy = sinon.spy();
obj.$labelInput.prop(inputProp).should.equal(true); sinon.stub(obj.target, 'get').returns(0);
}); obj.target.on("targetClassUpdated", spy);
obj.$el.find('#checkbox').trigger('click');
expect(spy.called).toEqual(true);
});
it('On double click label input is enable', function() { it('Label input is disabled', () => {
var inputProp = obj.inputProp; var inputProp = obj.inputProp;
obj.$el.find('#tag-label').trigger('dblclick'); expect(obj.$labelInput.prop(inputProp)).toEqual(true);
obj.$labelInput.prop(inputProp).should.equal(false); });
});
it('On blur label input turns back disabled', function() { it('On double click label input is enable', () => {
var inputProp = obj.inputProp; var inputProp = obj.inputProp;
obj.$el.find('#tag-label').trigger('dblclick'); obj.$el.find('#tag-label').trigger('dblclick');
obj.endEditTag(); expect(obj.$labelInput.prop(inputProp)).toEqual(false);
obj.$labelInput.prop(inputProp).should.equal(true); });
});
it('On blur label input turns back disabled', () => {
var inputProp = obj.inputProp;
obj.$el.find('#tag-label').trigger('dblclick');
obj.endEditTag();
expect(obj.$labelInput.prop(inputProp)).toEqual(true);
}); });
}
};
}); });
}
};

391
test/specs/selector_manager/view/ClassTagsView.js
View File

@ -1,196 +1,195 @@
define(function(require, exports, module){ const ClassTagsView = require('selector_manager/view/ClassTagsView');
'use strict'; const Selectors = require('selector_manager/model/Selectors');
var ClassTagsView = require('undefined');
var Selectors = require('SelectorManager/model/Selectors'); module.exports = {
run() {
module.exports = { describe('ClassTagsView', () => {
run : function(){
describe('ClassTagsView', function() { var view;
var fixture;
var view; var fixtures;
var fixture; var testLabel;
var fixtures; var coll;
var testLabel; var target;
var coll;
var target; before(() => {
fixtures = $("#fixtures");
before(function () { fixture = $('<div class="classtag-fixture"></div>');
fixtures = $("#fixtures"); });
fixture = $('<div class="classtag-fixture"></div>');
}); beforeEach(function () {
target = { get() {} };
beforeEach(function () { coll = new Selectors();
target = { get: function(){} }; _.extend(target, Backbone.Events);
coll = new Selectors();
_.extend(target, Backbone.Events); view = new ClassTagsView({
config : { em: target },
view = new ClassTagsView({ collection: coll
config : { em: target }, });
collection: coll
}); this.targetStub = {
add(v) { return {name: v}; }
this.targetStub = { };
add: function(v){ return {name: v}; }
}; this.compTargetStub = {
get() { return { add() {} };}
this.compTargetStub = { };
get: function(){ return { add: function(){} }}
}; fixture.empty().appendTo(fixtures);
fixture.html(view.render().el);
fixture.empty().appendTo(fixtures); this.btnAdd = view.$el.find('#' + view.addBtnId);
fixture.html(view.render().el); this.input = view.$el.find('input#' + view.newInputId);
this.btnAdd = view.$el.find('#' + view.addBtnId); this.$tags = fixture.find('#tags-c');
this.input = view.$el.find('input#' + view.newInputId); this.$states = fixture.find('#states');
this.$tags = fixture.find('#tags-c'); this.$statesC = fixture.find('#input-c');
this.$states = fixture.find('#states'); });
this.$statesC = fixture.find('#input-c');
}); afterEach(() => {
delete view.collection;
afterEach(function () { });
delete view.collection;
}); after(() => {
fixture.remove();
after(function () { });
fixture.remove();
}); it('Object exists', () => {
expect(ClassTagsView).toExist();
it('Object exists', function() { });
ClassTagsView.should.be.exist;
}); it('Not tags inside', function() {
expect(this.$tags.html()).toEqual('');
it('Not tags inside', function() { });
this.$tags.html().should.equal('');
}); it('Add new tag triggers correct method', () => {
sinon.stub(view, "addToClasses");
it('Add new tag triggers correct method', function() { coll.add({ name: 'test' });
sinon.stub(view, "addToClasses"); expect(view.addToClasses.calledOnce).toEqual(true);
coll.add({ name: 'test' }); });
view.addToClasses.calledOnce.should.equal(true);
}); it('Start new tag creation', function() {
this.btnAdd.click();
it('Start new tag creation', function() { expect(this.btnAdd.css('display')).toEqual('none');
this.btnAdd.click(); expect(this.input.css('display')).toNotEqual('none');
(this.btnAdd.css('display') == 'none').should.equal(true); });
(this.input.css('display') !== 'none').should.equal(true);
}); it.skip('Stop tag creation', function() {
this.btnAdd.click();
it('Stop tag creation', function() { this.input.val('test')
this.btnAdd.click(); this.input.blur();
this.input.val('test') //(this.btnAdd.css('display') !== 'none').should.equal(true);
this.input.blur(); //(this.input.css('display') == 'none').should.equal(true);
(this.btnAdd.css('display') !== 'none').should.equal(true); //this.input.val().should.equal('');
(this.input.css('display') == 'none').should.equal(true); expect(this.btnAdd.css('display')).toNotEqual('none');
this.input.val().should.equal(''); expect(this.input.css('display')).toEqual('none');
}); expect(this.input.val()).toEqual('');
});
it('Check keyup of ESC on input', function() {
this.btnAdd.click(); it('Check keyup of ESC on input', function() {
sinon.stub(view, "addNewTag"); this.btnAdd.click();
this.input.trigger({ sinon.stub(view, "addNewTag");
type: 'keyup', this.input.trigger({
keyCode: 13 type: 'keyup',
}); keyCode: 13
view.addNewTag.calledOnce.should.equal(true); });
}); expect(view.addNewTag.calledOnce).toEqual(true);
});
it('Check keyup on ENTER on input', function() {
this.btnAdd.click(); it('Check keyup on ENTER on input', function() {
sinon.stub(view, "endNewTag"); this.btnAdd.click();
this.input.trigger({ sinon.stub(view, "endNewTag");
type: 'keyup', this.input.trigger({
keyCode: 27 type: 'keyup',
}); keyCode: 27
view.endNewTag.calledOnce.should.equal(true); });
}); expect(view.endNewTag.calledOnce).toEqual(true);
});
it('Collection changes on update of target', function() {
coll.add({ name: 'test' }); it('Collection changes on update of target', () => {
target.trigger('change:selectedComponent'); coll.add({ name: 'test' });
coll.length.should.equal(0); target.trigger('change:selectedComponent');
}); expect(coll.length).toEqual(0);
});
it('Collection reacts on reset', function() {
coll.add([{ name: 'test1' }, { name: 'test2' }]); it('Collection reacts on reset', () => {
sinon.stub(view, "addToClasses"); coll.add([{ name: 'test1' }, { name: 'test2' }]);
coll.trigger('reset'); sinon.stub(view, "addToClasses");
view.addToClasses.calledTwice.should.equal(true); coll.trigger('reset');
}); expect(view.addToClasses.calledTwice).toEqual(true);
});
it("Don't accept empty tags", function() {
view.addNewTag(''); it("Don't accept empty tags", function() {
this.$tags.html().should.equal(''); view.addNewTag('');
}); expect(this.$tags.html()).toEqual('');
});
it("Accept new tags", function() {
sinon.stub(target, "get").returns(this.targetStub); it("Accept new tags", function() {
view.compTarget = this.compTargetStub; sinon.stub(target, "get").returns(this.targetStub);
view.addNewTag('test'); view.compTarget = this.compTargetStub;
view.compTarget = this.compTargetStub; view.addNewTag('test');
view.addNewTag('test2'); view.compTarget = this.compTargetStub;
this.$tags.children().length.should.equal(2); view.addNewTag('test2');
}); expect(this.$tags.children().length).toEqual(2);
});
it("New tag correctly added", function() {
coll.add({ label: 'test' }); it("New tag correctly added", function() {
this.$tags.children().first().find('#tag-label input').val().should.equal('test'); coll.add({ label: 'test' });
}); expect(this.$tags.children().first().find('#tag-label input').val()).toEqual('test');
});
it("States are hidden in case no tags", function() {
view.updateStateVis(); it("States are hidden in case no tags", function() {
this.$statesC.css('display').should.equal('none'); view.updateStateVis();
}); expect(this.$statesC.css('display')).toEqual('none');
});
it("States are visible in case of more tags inside", function() {
coll.add({ label: 'test' }); it("States are visible in case of more tags inside", function() {
view.updateStateVis(); coll.add({ label: 'test' });
this.$statesC.css('display').should.equal('block'); view.updateStateVis();
}); expect(this.$statesC.css('display')).toEqual('block');
});
it("Update state visibility on new tag", function() {
sinon.stub(view, "updateStateVis"); it("Update state visibility on new tag", function() {
sinon.stub(target, "get").returns(this.targetStub); sinon.stub(view, "updateStateVis");
view.compTarget = this.compTargetStub; sinon.stub(target, "get").returns(this.targetStub);
view.addNewTag('test'); view.compTarget = this.compTargetStub;
view.updateStateVis.called.should.equal(true); view.addNewTag('test');
}); expect(view.updateStateVis.called).toEqual(true);
});
it("Update state visibility on removing of the tag", function() {
sinon.stub(target, "get").returns(this.targetStub); it("Update state visibility on removing of the tag", function() {
view.compTarget = this.compTargetStub; sinon.stub(target, "get").returns(this.targetStub);
view.addNewTag('test'); view.compTarget = this.compTargetStub;
sinon.stub(view, "updateStateVis"); view.addNewTag('test');
coll.remove(coll.at(0)); sinon.stub(view, "updateStateVis");
view.updateStateVis.calledOnce.should.equal(true); coll.remove(coll.at(0));
}); expect(view.updateStateVis.calledOnce).toEqual(true);
});
it("Output correctly state options", function() {
var view = new ClassTagsView({ it("Output correctly state options", () => {
config : { var view = new ClassTagsView({
em: target, config : {
states: [ { name: 'testName', label: 'testLabel' } ], em: target,
}, states: [ { name: 'testName', label: 'testLabel' } ],
collection: coll },
}); collection: coll
view.getStateOptions().should.equal('<option value="testName">testLabel</option>'); });
}); expect(view.getStateOptions()).toEqual('<option value="testName">testLabel</option>');
});
describe('Should be rendered correctly', function() {
it('Has label', function() { describe('Should be rendered correctly', () => {
view.$el.find('#label').should.have.property(0); it('Has label', () => {
}); expect(view.$el.find('#label')[0]).toExist();
it('Has tags container', function() { });
view.$el.find('#tags-c').should.have.property(0); it('Has tags container', () => {
}); expect(view.$el.find('#tags-c')[0]).toExist();
it('Has add button', function() { });
view.$el.find('#add-tag').should.have.property(0); it('Has add button', () => {
}); expect(view.$el.find('#add-tag')[0]).toExist();
it('Has states input', function() { });
view.$el.find('#states').should.have.property(0); it('Has states input', () => {
}); expect(view.$el.find('#states')[0]).toExist();
}); });
});
});
} });
}; }
};
});

Write Preview
Loading…
Cancel
Save