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

Add dom components tests

pull/202/head
Artur Arseniev 9 years ago
parent
1ae9192215
commit
9c57c0cd1c
8 changed files with 669 additions and 696 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. 117
      test/specs/dom_components/index.js
  3. 125
      test/specs/dom_components/main.js
  4. 510
      test/specs/dom_components/model/Component.js
  5. 114
      test/specs/dom_components/view/ComponentImageView.js
  6. 108
      test/specs/dom_components/view/ComponentTextView.js
  7. 282
      test/specs/dom_components/view/ComponentV.js
  8. 108
      test/specs/dom_components/view/ComponentsView.js

1
test/main.js
View File

@ -14,4 +14,5 @@ describe('Main', () => {
require(`${path}code_manager`); require(`${path}code_manager`);
require(`${path}commands`); require(`${path}commands`);
require(`${path}css_composer`); require(`${path}css_composer`);
require(`${path}dom_components`);
}); });

117
test/specs/dom_components/index.js
View File

@ -0,0 +1,117 @@
const DomComponents = require('dom_components');
const ComponentModels = require('./model/Component');
const ComponentView = require('./view/ComponentV');
const ComponentsView = require('./view/ComponentsView');
const ComponentTextView = require('./view/ComponentTextView');
const ComponentImageView = require('./view/ComponentImageView');
const utils = require('./../test_utils.js');
describe('DOM Components', function() {
describe('Main', function() {
var obj;
var config;
var storagMock = utils.storageMock();
var editorModel = {
config: {
loadCompsOnRender: 0,
},
get: function(){return;},
getHtml: function(){return 'testHtml';},
getComponents: function(){return {test: 1};},
getCacheLoad: function(){
return storagMock.load();
}
};
// Methods
var setSmConfig = function(){
config.stm = storagMock;
config.stm.getConfig = function(){
return {
storeHtml: 1,
storeComponents: 1,
}
};
};
var setEm = function(){
config.em = editorModel;
}
beforeEach(function () {
config = {};
obj = new DomComponents().init(config);
});
afterEach(function () {
obj = null;
});
it('Object exists', function() {
expect(DomComponents).toExist();
});
it('storageKey returns array', function() {
expect(obj.storageKey() instanceof Array).toEqual(true);
});
it('storageKey returns correct composition', function() {
config.stm = {
getConfig: function(){
return {
storeHtml: 1,
storeComponents: 1,
}
}
};
expect(obj.storageKey()).toEqual(['html', 'components']);
});
it('Store data', function() {
setSmConfig();
setEm();
var expected = {
html: 'testHtml',
components: '{"test":1}',
};
expect(obj.store(1)).toEqual(expected);
});
it('Store and load data', function() {
setSmConfig();
setEm();
obj.store();
expect(obj.load()).toEqual({test: 1});
});
it('Wrapper exists', function() {
expect(obj.getWrapper()).toExist();
});
it('No components inside', function() {
expect(obj.getComponents().length).toEqual(0);
});
it('Add new component', function() {
var comp = obj.addComponent({});
expect(obj.getComponents().length).toEqual(1);
});
it('Add more components at once', function() {
var comp = obj.addComponent([{},{}]);
expect(obj.getComponents().length).toEqual(2);
});
it('Render wrapper', function() {
expect(obj.render()).toExist();
});
});
ComponentModels.run();
ComponentView.run();
ComponentsView.run();
ComponentTextView.run();
ComponentImageView.run();
});

125
test/specs/dom_components/main.js
View File

@ -1,125 +0,0 @@
define(function(require, exports, module){
'use strict';
var DomComponents = require('DomComponents');
var ComponentImageView = require('undefined');
var utils = require('./../test_utils.js');
describe('DOM Components', function() {
describe('Main', function() {
var obj;
var config;
var storagMock = utils.storageMock();
var editorModel = {
config: {
loadCompsOnRender: 0,
},
get: function(){return;},
getHtml: function(){return 'testHtml';},
getComponents: function(){return {test: 1};},
getCacheLoad: function(){
return storagMock.load();
}
};
// Methods
var setSmConfig = function(){
config.stm = storagMock;
config.stm.getConfig = function(){
return {
storeHtml: 1,
storeComponents: 1,
}
};
};
var setEm = function(){
config.em = editorModel;
}
beforeEach(function () {
config = {};
obj = new DomComponents().init(config);
});
afterEach(function () {
delete obj;
});
it('Object exists', function() {
DomComponents.should.be.exist;
});
it('storageKey returns array', function() {
obj.storageKey().should.be.instanceOf(Array);
});
it('storageKey returns correct composition', function() {
config.stm = {
getConfig: function(){
return {
storeHtml: 1,
storeComponents: 1,
}
}
};
obj.storageKey().should.eql(['html', 'components']);
});
it('Store data', function() {
setSmConfig();
setEm();
var expected = {
html: 'testHtml',
components: '{"test":1}',
};
obj.store(1).should.deep.equal(expected);
});
it('Store and load data', function() {
setSmConfig();
setEm();
obj.store();
// Load object between html and components
obj.load().should.deep.equal({test: 1});
});
it('Wrapper exists', function() {
obj.getWrapper().should.not.be.empty;
});
it('No components inside', function() {
obj.getComponents().length.should.equal(0);
});
it('Add new component', function() {
var comp = obj.addComponent({});
obj.getComponents().length.should.equal(1);
});
it('Add more components at once', function() {
var comp = obj.addComponent([{},{}]);
obj.getComponents().length.should.equal(2);
});
it('Render wrapper', function() {
obj.render().should.be.ok;
});
it.skip('Add components at init', function() {
obj = new DomComponents().init({
components : [{}, {}, {}]
});
obj.getComponents().length.should.equal(3);
});
});
ComponentModels.run();
ComponentView.run();
ComponentsView.run();
ComponentTextView.run();
ComponentImageView.run();
});
});

510
test/specs/dom_components/model/Component.js
View File

@ -1,285 +1,281 @@
define(function(require, exports, module){ const DomComponents = require('dom_components');
'use strict'; const Component = require('dom_components/model/Component');
var DomComponents = require('DomComponents'); const ComponentImage = require('dom_components/model/ComponentImage');
var Component = require('DomComponents/model/Component'); const ComponentText = require('dom_components/model/ComponentText');
var ComponentImage = require('DomComponents/model/ComponentImage'); const ComponentLink = require('dom_components/model/ComponentLink');
var ComponentText = require('DomComponents/model/ComponentText'); const ComponentMap = require('dom_components/model/ComponentMap');
var ComponentLink = require('DomComponents/model/ComponentLink'); const ComponentVideo = require('dom_components/model/ComponentVideo');
var ComponentMap = require('DomComponents/model/ComponentMap'); const Components = require('dom_components/model/Components');
var ComponentVideo = require('DomComponents/model/ComponentVideo');
var Components = require('DomComponents/model/Components'); module.exports = {
run : function(){
module.exports = { var obj;
run : function(){ var dcomp;
var obj; var compOpts;
var dcomp;
var compOpts; describe('Component', function() {
describe('Component', function() { beforeEach(function () {
obj = new Component();
beforeEach(function () { dcomp = new DomComponents();
obj = new Component(); compOpts = {
dcomp = new DomComponents(); defaultTypes: dcomp.componentTypes,
compOpts = { };
defaultTypes: dcomp.componentTypes, });
};
});
afterEach(function () {
delete obj;
});
it('Has no children', function() {
obj.get('components').length.should.equal(0);
});
it.skip('Clones correctly', function() {
var sAttr = obj.attributes;
var cloned = obj.clone();
var eAttr = cloned.attributes;
eAttr.components = {};
sAttr.components = {};
eAttr.traits = {};
sAttr.traits = {};
sAttr.should.deep.equal(eAttr);
});
it('Clones correctly with traits', function() {
obj.get('traits').at(0).set('value', 'testTitle');
var cloned = obj.clone();
cloned.set('stylable', 0);
cloned.get('traits').at(0).set('value', 'testTitle2');
obj.get('traits').at(0).get('value').should.equal('testTitle');
obj.get('stylable').should.equal(true);
});
it('Has expected name', function() {
obj.getName().should.equal('Box');
});
it('Has expected name 2', function() {
obj.cid = 'c999';
obj.set('type','testType');
obj.getName().should.equal('TestType');
});
it('Component toHTML', function() {
obj.toHTML().should.equal('<div></div>');
});
it('Component toHTML with attributes', function() {
obj = new Component({
tagName: 'article',
attributes: {
'data-test1': 'value1',
'data-test2': 'value2'
}
});
obj.toHTML().should.equal('<article data-test1="value1" data-test2="value2"></article>');
});
it('Component toHTML with classes', function() {
obj = new Component({
tagName: 'article'
});
['class1', 'class2'].forEach(function(item){
obj.get('classes').add({name: item});
});
obj.toHTML().should.equal('<article class="class1 class2"></article>');
});
it('Component toHTML with children', function() {
obj = new Component({tagName: 'article'}, compOpts);
obj.get('components').add({tagName: 'span'});
obj.toHTML().should.equal('<article><span></span></article>');
});
it('Component toHTML with more children', function() {
obj = new Component({tagName: 'article'}, compOpts);
obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]);
obj.toHTML().should.equal('<article><span></span><div></div></article>');
});
it('Component toHTML with no closing tag', function() {
obj = new Component({void: 1});
obj.toHTML().should.equal('<div/>');
});
it('Component parse empty div', function() {
var el = document.createElement('div');
obj = Component.isComponent(el);
obj.should.deep.equal({tagName: 'div'});
});
it('Component parse span', function() {
var el = document.createElement('span');
obj = Component.isComponent(el);
obj.should.deep.equal({tagName: 'span'});
});
});
describe('Image Component', function() {
beforeEach(function () {
obj = new ComponentImage();
});
afterEach(function () {
delete obj;
});
it('Has src property', function() {
obj.has('src').should.equal(true);
});
it('Not droppable', function() {
obj.get('droppable').should.equal(false);
});
it('ComponentImage toHTML', function() {
obj = new ComponentImage();
obj.toHTML().should.equal('<img/>');
});
it('Component toHTML with attributes', function() {
obj = new ComponentImage({
attributes: {'alt': 'AltTest'},
src: 'testPath'
});
obj.toHTML().should.equal('<img alt="AltTest" src="testPath"/>');
});
it('Refuse not img element', function() {
var el = document.createElement('div');
obj = ComponentImage.isComponent(el);
obj.should.equal('');
});
it('Component parse img element', function() {
var el = document.createElement('img');
obj = ComponentImage.isComponent(el);
obj.should.deep.equal({type: 'image'});
});
it('Component parse img element with src', function() {
var el = document.createElement('img');
el.src = 'http://localhost/';
obj = ComponentImage.isComponent(el);
obj.should.deep.equal({type: 'image'});
});
});
describe('Text Component', function() {
beforeEach(function () {
obj = new ComponentText();
});
afterEach(function () {
delete obj;
});
it('Has content property', function() {
obj.has('content').should.equal(true);
});
it('Not droppable', function() {
obj.get('droppable').should.equal(false);
});
it('Component toHTML with attributes', function() {
obj = new ComponentText({
attributes: {'data-test': 'value'},
content: 'test content'
});
obj.toHTML().should.equal('<div data-test="value">test content</div>');
});
afterEach(function () {
obj = null;
}); });
describe('Link Component', function() { it('Has no children', function() {
expect(obj.get('components').length).toEqual(0);
});
it('Component parse a element', function() { it('Clones correctly', function() {
var el = document.createElement('a'); var sAttr = obj.attributes;
obj = ComponentLink.isComponent(el); var cloned = obj.clone();
obj.should.deep.equal({type: 'link'}); var eAttr = cloned.attributes;
}); eAttr.components = {};
sAttr.components = {};
eAttr.traits = {};
sAttr.traits = {};
expect(sAttr.length).toEqual(eAttr.length);
});
it('Clones correctly with traits', function() {
obj.get('traits').at(0).set('value', 'testTitle');
var cloned = obj.clone();
cloned.set('stylable', 0);
cloned.get('traits').at(0).set('value', 'testTitle2');
expect(obj.get('traits').at(0).get('value')).toEqual('testTitle');
expect(obj.get('stylable')).toEqual(true);
});
it('Has expected name', function() {
expect(obj.getName()).toEqual('Box');
});
it('Has expected name 2', function() {
obj.cid = 'c999';
obj.set('type','testType');
expect(obj.getName()).toEqual('TestType');
}); });
describe('Map Component', function() { it('Component toHTML', function() {
expect(obj.toHTML()).toEqual('<div></div>');
});
it('Component parse map iframe', function() { it('Component toHTML with attributes', function() {
var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed'; obj = new Component({
var el = $('<iframe src="' + src + '"></iframe>'); tagName: 'article',
obj = ComponentMap.isComponent(el.get(0)); attributes: {
obj.should.deep.equal({type: 'map', src: src}); 'data-test1': 'value1',
'data-test2': 'value2'
}
}); });
expect(obj.toHTML()).toEqual('<article data-test1="value1" data-test2="value2"></article>');
});
it('Component parse not map iframe', function() { it('Component toHTML with classes', function() {
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>'); obj = new Component({
obj = ComponentMap.isComponent(el.get(0)); tagName: 'article'
obj.should.equal('');
}); });
['class1', 'class2'].forEach(function(item){
obj.get('classes').add({name: item});
});
expect(obj.toHTML()).toEqual('<article class="class1 class2"></article>');
});
it('Component toHTML with children', function() {
obj = new Component({tagName: 'article'}, compOpts);
obj.get('components').add({tagName: 'span'});
expect(obj.toHTML()).toEqual('<article><span></span></article>');
}); });
describe('Video Component', function() { it('Component toHTML with more children', function() {
obj = new Component({tagName: 'article'}, compOpts);
obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]);
expect(obj.toHTML()).toEqual('<article><span></span><div></div></article>');
});
it('Component parse video', function() { it('Component toHTML with no closing tag', function() {
var src = 'http://localhost/'; obj = new Component({void: 1});
var el = $('<video src="' + src + '"></video>'); expect(obj.toHTML()).toEqual('<div/>');
obj = ComponentVideo.isComponent(el.get(0)); });
obj.should.deep.equal({type: 'video'}); //src: src
});
it('Component parse youtube video iframe', function() { it('Component parse empty div', function() {
var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; var el = document.createElement('div');
var el = $('<iframe src="' + src + '"></video>'); obj = Component.isComponent(el);
obj = ComponentVideo.isComponent(el.get(0)); expect(obj).toEqual({tagName: 'div'});
obj.should.deep.equal({type: 'video', provider: 'yt', src: src}); });
});
it('Component parse span', function() {
var el = document.createElement('span');
obj = Component.isComponent(el);
expect(obj).toEqual({tagName: 'span'});
});
});
describe('Image Component', function() {
beforeEach(function () {
obj = new ComponentImage();
});
afterEach(function () {
obj = null;
});
it('Has src property', function() {
expect(obj.has('src')).toEqual(true);
});
it('Not droppable', function() {
expect(obj.get('droppable')).toEqual(false);
});
it('ComponentImage toHTML', function() {
obj = new ComponentImage();
expect(obj.toHTML()).toEqual('<img/>');
});
it('Component parse vimeo video iframe', function() { it('Component toHTML with attributes', function() {
var src = 'http://player.vimeo.com/video/2?'; obj = new ComponentImage({
var el = $('<iframe src="' + src + '"></video>'); attributes: {'alt': 'AltTest'},
obj = ComponentVideo.isComponent(el.get(0)); src: 'testPath'
obj.should.deep.equal({type: 'video', provider: 'vi', src: src});
}); });
expect(obj.toHTML()).toEqual('<img alt="AltTest" src="testPath"/>');
});
it('Refuse not img element', function() {
var el = document.createElement('div');
obj = ComponentImage.isComponent(el);
expect(obj).toEqual('');
}); });
describe('Components', function() { it('Component parse img element', function() {
var el = document.createElement('img');
obj = ComponentImage.isComponent(el);
expect(obj).toEqual({type: 'image'});
});
it('Component parse img element with src', function() {
var el = document.createElement('img');
el.src = 'http://localhost/';
obj = ComponentImage.isComponent(el);
expect(obj).toEqual({type: 'image'});
});
});
describe('Text Component', function() {
beforeEach(function () {
obj = new ComponentText();
});
afterEach(function () {
obj = null;
});
it('Has content property', function() {
expect(obj.has('content')).toEqual(true);
});
it('Not droppable', function() {
expect(obj.get('droppable')).toEqual(false);
});
it('Component toHTML with attributes', function() {
obj = new ComponentText({
attributes: {'data-test': 'value'},
content: 'test content'
});
expect(obj.toHTML()).toEqual('<div data-test="value">test content</div>');
});
beforeEach(function () { });
dcomp = new DomComponents();
compOpts = {
defaultTypes: dcomp.componentTypes,
}
});
it('Creates component correctly', function() { describe('Link Component', function() {
var c = new Components({}, compOpts);
var m = c.add({});
m.should.be.an.instanceOf(Component);
});
it('Creates image component correctly', function() { it('Component parse a element', function() {
var c = new Components({}, compOpts); var el = document.createElement('a');
var m = c.add({ type: 'image' }); obj = ComponentLink.isComponent(el);
m.should.be.an.instanceOf(ComponentImage); expect(obj).toEqual({type: 'link'});
}); });
it('Creates text component correctly', function() { });
var c = new Components({}, compOpts);
var m = c.add({ type: 'text' }); describe('Map Component', function() {
m.should.be.an.instanceOf(ComponentText);
}); it('Component parse map iframe', function() {
var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed';
var el = $('<iframe src="' + src + '"></iframe>');
obj = ComponentMap.isComponent(el.get(0));
expect(obj).toEqual({type: 'map', src: src});
});
it('Component parse not map iframe', function() {
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>');
obj = ComponentMap.isComponent(el.get(0));
expect(obj).toEqual('');
});
});
describe('Video Component', function() {
it('Component parse video', function() {
var src = 'http://localhost/';
var el = $('<video src="' + src + '"></video>');
obj = ComponentVideo.isComponent(el.get(0));
expect(obj).toEqual({type: 'video', src: src});
});
it('Component parse youtube video iframe', function() {
var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?';
var el = $('<iframe src="' + src + '"></video>');
obj = ComponentVideo.isComponent(el.get(0));
expect(obj).toEqual({type: 'video', provider: 'yt', src: src});
});
it('Component parse vimeo video iframe', function() {
var src = 'http://player.vimeo.com/video/2?';
var el = $('<iframe src="' + src + '"></video>');
obj = ComponentVideo.isComponent(el.get(0));
expect(obj).toEqual({type: 'video', provider: 'vi', src: src});
});
});
describe('Components', function() {
beforeEach(function () {
dcomp = new DomComponents();
compOpts = {
defaultTypes: dcomp.componentTypes,
}
});
it('Creates component correctly', function() {
var c = new Components({}, compOpts);
var m = c.add({});
expect(m instanceof Component).toEqual(true);
});
it('Creates image component correctly', function() {
var c = new Components({}, compOpts);
var m = c.add({ type: 'image' });
expect(m instanceof ComponentImage).toEqual(true);
});
it('Creates text component correctly', function() {
var c = new Components({}, compOpts);
var m = c.add({ type: 'text' });
expect(m instanceof ComponentText).toEqual(true);
}); });
}
};
}); });
}
};

114
test/specs/dom_components/view/ComponentImageView.js
View File

@ -1,59 +1,55 @@
define(function(require, exports, module){ const ComponentImageView = require('dom_components/view/ComponentImageView');
'use strict'; const Component = require('dom_components/model/Component');
var ComponentImageView = require('undefined');
var Component = require('DomComponents/model/Component'); module.exports = {
run : function(){
module.exports = {
run : function(){ describe('ComponentImageView', function() {
describe('ComponentImageView', function() { var $fixtures;
var $fixture;
var $fixtures; var model;
var $fixture; var view;
var model;
var view; before(function () {
$fixtures = $("#fixtures");
before(function () { $fixture = $('<div class="components-fixture"></div>');
$fixtures = $("#fixtures"); });
$fixture = $('<div class="components-fixture"></div>');
}); beforeEach(function () {
model = new Component();
beforeEach(function () { view = new ComponentImageView({
model = new Component(); model: model
view = new ComponentImageView({ });
model: model $fixture.empty().appendTo($fixtures);
}); $fixture.html(view.render().el);
$fixture.empty().appendTo($fixtures); });
$fixture.html(view.render().el);
}); afterEach(function () {
view.remove();
afterEach(function () { });
view.remove();
}); after(function () {
$fixture.remove();
after(function () { });
$fixture.remove();
}); it('Component empty', function() {
expect(view.el.getAttribute('onmousedown')).toEqual('return false');
it('Component empty', function() { expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
view.el.getAttribute('onmousedown').should.equal('return false'); });
view.el.getAttribute('class').should.equal(view.classEmpty);
}); it('TagName is <img>', function() {
expect(view.el.tagName).toEqual('IMG');
it('TagName is <img>', function() { });
view.el.tagName.should.equal('IMG');
}); it('Update src attribute', function() {
model.set('src', './');
it('Update src attribute', function() { expect(view.el.getAttribute('src')).toEqual('./');
model.set('src','./'); });
view.el.getAttribute('src').should.equal('./');
}); it('Renders correctly', function() {
expect(view.render()).toExist();
it('Renders correctly', function() { });
view.render().should.be.ok; });
}); }
}); };
}
};
});

108
test/specs/dom_components/view/ComponentTextView.js
View File

@ -1,59 +1,55 @@
define(function(require, exports, module){ const ComponentTextView = require('dom_components/view/ComponentTextView');
'use strict'; const Component = require('dom_components/model/Component');
var ComponentTextView = require('undefined');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('ComponentTextView', function() {
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="components-fixture"></div>');
});
beforeEach(function () {
model = new Component();
view = new ComponentTextView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
});
it('Component empty', function() {
$fixture.html().should.equal('<div data-highlightable="1"></div>');
});
it('Input content is stored in model', function() {
//view.enableEditing();
view.el.innerHTML = 'test';
//view.disableEditing();
//model.get('content').should.equal('test');
});
it('Init with content', function() {
model = new Component({ content: 'test' });
view = new ComponentTextView({ model: model });
view.render().el.innerHTML.should.equal('test');
});
module.exports = {
run : function(){
describe('ComponentTextView', function() {
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="components-fixture"></div>');
});
beforeEach(function () {
model = new Component();
view = new ComponentTextView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
});
it('Component empty', function() {
expect($fixture.html()).toEqual('<div data-highlightable="1"></div>');
});
it('Input content is stored in model', function() {
//view.enableEditing();
view.el.innerHTML = 'test';
//view.disableEditing();
//model.get('content').should.equal('test');
});
it('Init with content', function() {
model = new Component({ content: 'test' });
view = new ComponentTextView({ model: model });
expect(view.render().el.innerHTML).toEqual('test');
}); });
}
};
}); });
}
};

282
test/specs/dom_components/view/ComponentV.js
View File

@ -1,143 +1,139 @@
define(function(require, exports, module){ const ComponentView = require('dom_components/view/ComponentView');
'use strict'; const Component = require('dom_components/model/Component');
var ComponentView = require('undefined'); const DomComponents = require('dom_components');
var Component = require('DomComponents/model/Component');
var DomComponents = require('DomComponents'); module.exports = {
run : function(){
module.exports = {
run : function(){ describe('ComponentView', function() {
describe('ComponentView', function() { var $fixtures;
var $fixture;
var $fixtures; var model;
var $fixture; var view;
var model; var hClass = 'hc-state';
var view; var dcomp;
var hClass = 'hc-state'; var compOpts;
var dcomp;
var compOpts; before(function () {
$fixtures = $("#fixtures");
before(function () { $fixture = $('<div class="components-fixture"></div>');
$fixtures = $("#fixtures"); });
$fixture = $('<div class="components-fixture"></div>');
}); beforeEach(function () {
dcomp = new DomComponents();
beforeEach(function () { compOpts = {
dcomp = new DomComponents(); defaultTypes: dcomp.componentTypes,
compOpts = { };
defaultTypes: dcomp.componentTypes, model = new Component();
}; view = new ComponentView({
model = new Component(); model: model
view = new ComponentView({ });
model: model $fixture.empty().appendTo($fixtures);
}); $fixture.html(view.render().el);
$fixture.empty().appendTo($fixtures); });
$fixture.html(view.render().el);
}); afterEach(function () {
view.remove();
afterEach(function () { });
view.remove();
}); after(function () {
$fixture.remove();
after(function () { });
$fixture.remove();
}); it('Component empty', function() {
expect($fixture.html()).toEqual('<div data-highlightable="1"></div>');
it('Component empty', function() { });
$fixture.html().should.equal('<div data-highlightable="1"></div>');
}); it('Add helper class on update of state', function() {
model.set('state', 'test');
it('Add helper class on update of state', function() { expect($fixture.html()).toEqual('<div data-highlightable="1" class="' + hClass + '"></div>');
model.set('state', 'test'); });
$fixture.html().should.equal('<div data-highlightable="1" class="' + hClass + '"></div>');
}); it('Clean form helper state', function() {
model.set('state', 'test');
it('Clean form helper state', function() { model.set('state', '');
model.set('state', 'test'); expect($fixture.html()).toEqual('<div data-highlightable="1" class=""></div>');
model.set('state', ''); });
$fixture.html().should.equal('<div data-highlightable="1" class=""></div>');
}); it('Add helper class on status update', function() {
model.set('status', 'selected');
it('Add helper class on status update', function() { expect($fixture.html()).toEqual('<div data-highlightable="1" class="selected"></div>');
model.set('status', 'selected'); });
$fixture.html().should.equal('<div data-highlightable="1" class="selected"></div>');
}); it('Get string of classes', function() {
model.set('attributes', { class: ['test', 'test2']});
it('Get string of classes', function() { expect(view.getClasses()).toEqual('test test2');
model.set('attributes', { class: ['test', 'test2']}); });
view.getClasses().should.equal('test test2');
}); it('Update attributes', function() {
model.set('attributes', {
it('Update attributes', function() { title: 'value',
model.set('attributes', { 'data-test': 'value2',
title: 'value', });
'data-test': 'value2', expect(view.el.getAttribute('title')).toEqual('value');
}); expect(view.el.getAttribute('data-test')).toEqual('value2');
view.el.getAttribute('title').should.equal('value'); });
view.el.getAttribute('data-test').should.equal('value2');
}); it('Update style', function() {
model.set('style', {
it('Update style', function() { color: 'red',
model.set('style', { float: 'left'
color: 'red', });
float: 'left' expect(view.el.getAttribute('style')).toEqual('color:red;float:left;');
}); });
view.el.getAttribute('style').should.equal('color:red;float:left;');
}); it('Clean style', function() {
model.set('style', { color: 'red'});
it('Clean style', function() { model.set('style', {});
model.set('style', { color: 'red'}); expect(view.el.getAttribute('style')).toEqual('');
model.set('style', {}); });
view.el.getAttribute('style').should.equal('');
}); it('Get style string', function() {
model.set('style', {
it('Get style string', function() { color: 'red',
model.set('style', { float: 'left'
color: 'red', });
float: 'left' expect(view.getStyleString()).toEqual('color:red;float:left;');
}); });
view.getStyleString().should.equal('color:red;float:left;');
}); it('Add class', function() {
model.get('classes').add({name: 'test'});
it('Add class', function() { expect(view.el.getAttribute('class')).toEqual('test');
model.get('classes').add({name: 'test'}); });
view.el.getAttribute('class').should.equal('test');
}); it('Add classes', function() {
model.get('classes').add([{name: 'test'}, {name: 'test2'}]);
it('Add classes', function() { expect(view.el.getAttribute('class')).toEqual('test test2');
model.get('classes').add([{name: 'test'}, {name: 'test2'}]); });
view.el.getAttribute('class').should.equal('test test2');
}); it('Update on remove of some class', function() {
var cls1 = model.get('classes').add({name: 'test'});
it('Update on remove of some class', function() { var cls12 = model.get('classes').add({name: 'test2'});
var cls1 = model.get('classes').add({name: 'test'}); model.get('classes').remove(cls1);
var cls12 = model.get('classes').add({name: 'test2'}); expect(view.el.getAttribute('class')).toEqual('test2');
model.get('classes').remove(cls1); });
view.el.getAttribute('class').should.equal('test2');
}); it('Init with different tag', function() {
model = new Component({ tagName: 'span' });
it('Init with different tag', function() { view = new ComponentView({ model: model });
model = new Component({ tagName: 'span' }); expect(view.render().el.tagName).toEqual('SPAN');
view = new ComponentView({ model: model }); });
view.render().el.tagName.should.equal('SPAN');
}); it('Init with nested components', function() {
model = new Component({
it('Init with nested components', function() { components: [
model = new Component({ { tagName: 'span'},
components: [ { attributes: { title: 'test'}}
{ tagName: 'span'}, ]
{ attributes: { title: 'test'}} }, compOpts);
] view = new ComponentView({
}, compOpts); model: model,
view = new ComponentView({ defaultTypes: dcomp.componentTypes,
model: model, });
defaultTypes: dcomp.componentTypes, expect(view.render().$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>');
}); });
view.render().$el.html().should.equal('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>');
}); });
}
}); };
}
};
});

108
test/specs/dom_components/view/ComponentsView.js
View File

@ -1,64 +1,60 @@
define(function(require, exports, module){ const DomComponents = require('dom_components');
'use strict'; const ComponentsView = require('dom_components/view/ComponentsView');
var DomComponents = require('DomComponents'); const Components = require('dom_components/model/Components');
var ComponentsView = require('undefined');
var Components = require('DomComponents/model/Components'); module.exports = {
run : function() {
module.exports = { describe('ComponentsView', function() {
run : function(){
describe('ComponentsView', function() { var $fixtures;
var $fixture;
var $fixtures; var model;
var $fixture; var view;
var model; var dcomp;
var view; var compOpts;
var dcomp;
var compOpts; before(function () {
$fixtures = $("#fixtures");
before(function () { $fixture = $('<div class="components-fixture"></div>');
$fixtures = $("#fixtures"); });
$fixture = $('<div class="components-fixture"></div>');
});
beforeEach(function () {
dcomp = new DomComponents();
compOpts = {
defaultTypes: dcomp.componentTypes,
};
model = new Components([], compOpts);
view = new ComponentsView({
collection: model,
defaultTypes: dcomp.componentTypes,
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () { beforeEach(function () {
view.collection.reset(); dcomp = new DomComponents();
}); compOpts = {
defaultTypes: dcomp.componentTypes,
};
model = new Components([], compOpts);
view = new ComponentsView({
collection: model,
defaultTypes: dcomp.componentTypes,
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () { afterEach(function () {
$fixture.remove(); view.collection.reset();
}); });
it("Collection is empty", function (){ after(function () {
view.$el.html().should.be.empty; $fixture.remove();
}); });
it("Add new component", function (){ it("Collection is empty", function (){
sinon.stub(view, "addToCollection"); expect(view.$el.html()).toNotExist();
view.collection.add({}); });
view.addToCollection.calledOnce.should.equal(true);
});
it("Render new component", function (){ it("Add new component", function (){
view.collection.add({}); sinon.stub(view, "addToCollection");
view.$el.html().should.not.be.empty; view.collection.add({});
}); expect(view.addToCollection.calledOnce).toEqual(true);
});
it("Render new component", function (){
view.collection.add({});
expect(view.$el.html()).toExist();
}); });
}
};
}); });
}
};

Write Preview
Loading…
Cancel
Save