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

Update device manager tests

pull/202/head
Artur Arseniev 9 years ago
parent
9c57c0cd1c
commit
3297266b9c
12 changed files with 267 additions and 274 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/helper.js
  2. 1
      test/main.js
  3. 2
      test/specs/css_composer/e2e/CssComposer.js
  4. 67
      test/specs/device_manager/index.js
  5. 70
      test/specs/device_manager/main.js
  6. 136
      test/specs/device_manager/view/DevicesView.js
  7. 52
      test/specs/dom_components/index.js
  8. 104
      test/specs/dom_components/model/Component.js
  9. 22
      test/specs/dom_components/view/ComponentImageView.js
  10. 22
      test/specs/dom_components/view/ComponentTextView.js
  11. 46
      test/specs/dom_components/view/ComponentV.js
  12. 18
      test/specs/dom_components/view/ComponentsView.js

1
test/helper.js
View File

@ -30,6 +30,7 @@ global._ = _;
global.expect = expect; global.expect = expect;
global.sinon = sinon; global.sinon = sinon;
global.grapesjs = grapesjs; global.grapesjs = grapesjs;
global.Backbone = Backbone;
window.$ = $; window.$ = $;
Backbone.$ = $; Backbone.$ = $;

1
test/main.js
View File

@ -14,5 +14,6 @@ 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}device_manager`);
require(`${path}dom_components`); require(`${path}dom_components`);
}); });

2
test/specs/css_composer/e2e/CssComposer.js
View File

@ -15,7 +15,7 @@ module.exports = {
fixture = $('<div class="csscomposer-fixture"></div>'); fixture = $('<div class="csscomposer-fixture"></div>');
}); });
beforeEach(function(done) { beforeEach(done => {
//this.timeout(5000); //this.timeout(5000);
gjs = grapesjs.init({ gjs = grapesjs.init({
stylePrefix: '', stylePrefix: '',

67
test/specs/device_manager/index.js
View File

@ -0,0 +1,67 @@
const DeviceManager = require('device_manager');
const DevicesView = require('./view/DevicesView');
describe('DeviceManager', () => {
describe('Main', () => {
var obj;
var testNameDevice;
var testWidthDevice;
beforeEach(() => {
testNameDevice = 'Tablet';
testWidthDevice = '100px';
obj = new DeviceManager().init();
});
afterEach(() => {
obj = null;
});
it('Object exists', () => {
expect(obj).toExist();
});
it('No device inside', () => {
var coll = obj.getAll();
expect(coll.length).toEqual(0);
});
it('Add new device', () => {
var model = obj.add(testNameDevice, testWidthDevice);
expect(obj.getAll().length).toEqual(1);
});
it('Added device has correct data', () => {
var model = obj.add(testNameDevice, testWidthDevice);
expect(model.get('name')).toEqual(testNameDevice);
expect(model.get('width')).toEqual(testWidthDevice);
});
it('Add device width options', () => {
var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'});
expect(model.get('opt')).toEqual('value');
});
it('The name of the device is unique', () => {
var model = obj.add(testNameDevice, testWidthDevice);
var model2 = obj.add(testNameDevice, '2px');
expect(model).toEqual(model2);
});
it('Get device by name', () => {
var model = obj.add(testNameDevice, testWidthDevice);
var model2 = obj.get(testNameDevice);
expect(model).toEqual(model2);
});
it('Render devices', () => {
expect(obj.render()).toExist();
});
});
DevicesView.run();
});

70
test/specs/device_manager/main.js
View File

@ -1,70 +0,0 @@
define(function(require, exports, module){
'use strict';
var DeviceManager = require('DeviceManager');
var DevicesView = require('undefined');
describe('DeviceManager', function() {
describe('Main', function() {
var obj;
var testNameDevice;
var testWidthDevice;
beforeEach(function () {
testNameDevice = 'Tablet';
testWidthDevice = '100px';
obj = new DeviceManager().init();
});
afterEach(function () {
delete obj;
});
it('Object exists', function() {
obj.should.be.exist;
});
it('No device inside', function() {
var coll = obj.getAll();
coll.length.should.equal(0);
});
it('Add new device', function() {
var model = obj.add(testNameDevice, testWidthDevice);
obj.getAll().length.should.equal(1);
});
it('Added device has correct data', function() {
var model = obj.add(testNameDevice, testWidthDevice);
model.get('name').should.equal(testNameDevice);
model.get('width').should.equal(testWidthDevice);
});
it('Add device width options', function() {
var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'});
model.get('opt').should.equal('value');
});
it('The name of the device is unique', function() {
var model = obj.add(testNameDevice, testWidthDevice);
var model2 = obj.add(testNameDevice, '2px');
model.should.deep.equal(model2);
});
it('Get device by name', function() {
var model = obj.add(testNameDevice, testWidthDevice);
var model2 = obj.get(testNameDevice);
model.should.deep.equal(model2);
});
it('Render devices', function() {
obj.render().should.be.ok;
});
});
DevicesView.run();
});
});

136
test/specs/device_manager/view/DevicesView.js
View File

@ -1,83 +1,79 @@
define(function(require, exports, module){ const DevicesView = require('device_manager/view/DevicesView');
'use strict'; const Devices = require('device_manager/model/Devices');
var DevicesView = require('undefined');
var Devices = require('DeviceManager/model/Devices'); module.exports = {
run() {
module.exports = { describe('DevicesView', () => {
run : function(){
describe('DevicesView', function() { var $fixtures;
var $fixture;
var $fixtures; var model;
var $fixture; var view;
var model; var editorModel;
var view;
var editorModel; before(() => {
$fixtures = $("#fixtures");
$fixture = $('<div class="devices-fixture"></div>');
});
before(function () { beforeEach(() => {
$fixtures = $("#fixtures"); model = new Devices([]);
$fixture = $('<div class="devices-fixture"></div>'); view = new DevicesView({
}); collection: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
beforeEach(function () { afterEach(() => {
model = new Devices([]); view.collection.reset();
view = new DevicesView({ });
collection: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () { after(() => {
view.collection.reset(); $fixture.remove();
}); });
after(function () { it("The content is not empty", () => {
$fixture.remove(); expect(view.el.innerHTML).toExist();
}); });
it("The content is not empty", function (){ it("No options without devices", () => {
view.el.innerHTML.should.be.not.empty; expect(view.getOptions()).toEqual('');
}); });
it("No options without devices", function (){ it("Render new button", () => {
view.getOptions().should.equal(''); view.collection.add({});
}); expect(view.$el.html()).toExist();
});
it("Render new button", function (){ describe('With configs', () => {
view.collection.add({});
view.$el.html().should.not.be.empty; beforeEach(() => {
editorModel = new Backbone.Model();
model = new Devices([
{name:'test1'},
{name:'test2'}
]);
view = new DevicesView({
collection: model,
config: { em: editorModel }
}); });
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
describe('With configs', function() { it("Update device on select change", () => {
view.$el.find('select').val('test2');
view.updateDevice();
expect(view.config.em.get('device')).toEqual('test2');
});
beforeEach(function () { it("Render options", () => {
editorModel = new Backbone.Model(); expect(view.getOptions()).toEqual('<option value="test1">test1</option><option value="test2">test2</option>');
model = new Devices([ });
{name:'test1'},
{name:'test2'}
]);
view = new DevicesView({
collection: model,
config: { em: editorModel }
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it("Update device on select change", function (){
view.$el.find('select').val('test2');
view.updateDevice();
view.config.em.get('device').should.equal('test2');
});
it("Render options", function (){
view.getOptions().should.equal('<option value="test1">test1</option><option value="test2">test2</option>');
});
});
}); });
}
};
}); });
}
};

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

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

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

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

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

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

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

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

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

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

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

@ -3,8 +3,8 @@ const ComponentsView = require('dom_components/view/ComponentsView');
const Components = require('dom_components/model/Components'); const Components = require('dom_components/model/Components');
module.exports = { module.exports = {
run : function() { run() {
describe('ComponentsView', function() { describe('ComponentsView', () => {
var $fixtures; var $fixtures;
var $fixture; var $fixture;
@ -13,12 +13,12 @@ module.exports = {
var dcomp; var dcomp;
var compOpts; var compOpts;
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="components-fixture"></div>'); $fixture = $('<div class="components-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
dcomp = new DomComponents(); dcomp = new DomComponents();
compOpts = { compOpts = {
defaultTypes: dcomp.componentTypes, defaultTypes: dcomp.componentTypes,
@ -32,25 +32,25 @@ module.exports = {
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
afterEach(function () { afterEach(() => {
view.collection.reset(); view.collection.reset();
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
}); });
it("Collection is empty", function (){ it("Collection is empty", () => {
expect(view.$el.html()).toNotExist(); expect(view.$el.html()).toNotExist();
}); });
it("Add new component", function (){ it("Add new component", () => {
sinon.stub(view, "addToCollection"); sinon.stub(view, "addToCollection");
view.collection.add({}); view.collection.add({});
expect(view.addToCollection.calledOnce).toEqual(true); expect(view.addToCollection.calledOnce).toEqual(true);
}); });
it("Render new component", function (){ it("Render new component", () => {
view.collection.add({}); view.collection.add({});
expect(view.$el.html()).toExist(); expect(view.$el.html()).toExist();
}); });

Write Preview
Loading…
Cancel
Save