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
Split 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}commands`);
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){
'use strict';
var DomComponents = require('DomComponents');
var Component = require('DomComponents/model/Component');
var ComponentImage = require('DomComponents/model/ComponentImage');
var ComponentText = require('DomComponents/model/ComponentText');
var ComponentLink = require('DomComponents/model/ComponentLink');
var ComponentMap = require('DomComponents/model/ComponentMap');
var ComponentVideo = require('DomComponents/model/ComponentVideo');
var Components = require('DomComponents/model/Components');
module.exports = {
run : function(){
var obj;
var dcomp;
var compOpts;
describe('Component', function() {
beforeEach(function () {
obj = new Component();
dcomp = new DomComponents();
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>');
});
const DomComponents = require('dom_components');
const Component = require('dom_components/model/Component');
const ComponentImage = require('dom_components/model/ComponentImage');
const ComponentText = require('dom_components/model/ComponentText');
const ComponentLink = require('dom_components/model/ComponentLink');
const ComponentMap = require('dom_components/model/ComponentMap');
const ComponentVideo = require('dom_components/model/ComponentVideo');
const Components = require('dom_components/model/Components');
module.exports = {
run : function(){
var obj;
var dcomp;
var compOpts;
describe('Component', function() {
beforeEach(function () {
obj = new Component();
dcomp = new DomComponents();
compOpts = {
defaultTypes: dcomp.componentTypes,
};
});
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() {
var el = document.createElement('a');
obj = ComponentLink.isComponent(el);
obj.should.deep.equal({type: 'link'});
});
it('Clones correctly', function() {
var sAttr = obj.attributes;
var cloned = obj.clone();
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() {
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));
obj.should.deep.equal({type: 'map', src: src});
it('Component toHTML with attributes', function() {
obj = new Component({
tagName: 'article',
attributes: {
'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() {
var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>');
obj = ComponentMap.isComponent(el.get(0));
obj.should.equal('');
it('Component toHTML with classes', function() {
obj = new Component({
tagName: 'article'
});
['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() {
var src = 'http://localhost/';
var el = $('<video src="' + src + '"></video>');
obj = ComponentVideo.isComponent(el.get(0));
obj.should.deep.equal({type: 'video'}); //src: src
});
it('Component toHTML with no closing tag', function() {
obj = new Component({void: 1});
expect(obj.toHTML()).toEqual('<div/>');
});
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));
obj.should.deep.equal({type: 'video', provider: 'yt', src: src});
});
it('Component parse empty div', function() {
var el = document.createElement('div');
obj = Component.isComponent(el);
expect(obj).toEqual({tagName: 'div'});
});
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() {
var src = 'http://player.vimeo.com/video/2?';
var el = $('<iframe src="' + src + '"></video>');
obj = ComponentVideo.isComponent(el.get(0));
obj.should.deep.equal({type: 'video', provider: 'vi', src: src});
it('Component toHTML with attributes', function() {
obj = new ComponentImage({
attributes: {'alt': 'AltTest'},
src: 'testPath'
});
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() {
var c = new Components({}, compOpts);
var m = c.add({});
m.should.be.an.instanceOf(Component);
});
describe('Link Component', function() {
it('Creates image component correctly', function() {
var c = new Components({}, compOpts);
var m = c.add({ type: 'image' });
m.should.be.an.instanceOf(ComponentImage);
});
it('Component parse a element', function() {
var el = document.createElement('a');
obj = ComponentLink.isComponent(el);
expect(obj).toEqual({type: 'link'});
});
it('Creates text component correctly', function() {
var c = new Components({}, compOpts);
var m = c.add({ type: 'text' });
m.should.be.an.instanceOf(ComponentText);
});
});
describe('Map Component', function() {
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){
'use strict';
var ComponentImageView = require('undefined');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('ComponentImageView', 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 ComponentImageView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
});
it('Component empty', function() {
view.el.getAttribute('onmousedown').should.equal('return false');
view.el.getAttribute('class').should.equal(view.classEmpty);
});
it('TagName is <img>', function() {
view.el.tagName.should.equal('IMG');
});
it('Update src attribute', function() {
model.set('src','./');
view.el.getAttribute('src').should.equal('./');
});
it('Renders correctly', function() {
view.render().should.be.ok;
});
});
}
};
});
const ComponentImageView = require('dom_components/view/ComponentImageView');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('ComponentImageView', 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 ComponentImageView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
});
it('Component empty', function() {
expect(view.el.getAttribute('onmousedown')).toEqual('return false');
expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
});
it('TagName is <img>', function() {
expect(view.el.tagName).toEqual('IMG');
});
it('Update src attribute', function() {
model.set('src', './');
expect(view.el.getAttribute('src')).toEqual('./');
});
it('Renders correctly', function() {
expect(view.render()).toExist();
});
});
}
};

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

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