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

Update style manager tests

pull/187/head
Artur Arseniev 9 years ago
parent
fe98d3880f
commit
cb39db8a97
13 changed files with 385 additions and 388 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. 111
      test/specs/style_manager/index.js
  2. 136
      test/specs/style_manager/model/Models.js
  3. 26
      test/specs/style_manager/view/LayerView.js
  4. 52
      test/specs/style_manager/view/PropertyColorView.js
  5. 66
      test/specs/style_manager/view/PropertyCompositeView.js
  6. 64
      test/specs/style_manager/view/PropertyIntegerView.js
  7. 52
      test/specs/style_manager/view/PropertyRadioView.js
  8. 56
      test/specs/style_manager/view/PropertySelectView.js
  9. 82
      test/specs/style_manager/view/PropertyStackView.js
  10. 70
      test/specs/style_manager/view/PropertyView.js
  11. 34
      test/specs/style_manager/view/SectorView.js
  12. 16
      test/specs/style_manager/view/SectorsView.js
  13. 8
      test/specs/test_utils.js

111
test/specs/style_manager/index.js
View File

@ -11,125 +11,124 @@ const PropertyCompositeView = require('./view/PropertyCompositeView');
const PropertyStackView = require('./view/PropertyStackView'); const PropertyStackView = require('./view/PropertyStackView');
const LayerView = require('./view/LayerView'); const LayerView = require('./view/LayerView');
describe.only('StyleManager', function() { describe('StyleManager', () => {
describe('Main', function() { describe('Main', () => {
/*
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new StyleManager().init({ obj = new StyleManager().init({
sectors: [] sectors: []
}); });
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Object exists', function() { it('Object exists', () => {
obj.should.be.ok; expect(obj).toExist();
}); });
it('No sectors', function() { it('No sectors', () => {
obj.getSectors().length.should.equal(0); expect(obj.getSectors().length).toEqual(0);
}); });
it('Add sector', function() { it('Add sector', () => {
obj.addSector('test', { obj.addSector('test', {
name: 'Test name' name: 'Test name'
}); });
obj.getSectors().length.should.equal(1);
var sector = obj.getSectors().at(0); var sector = obj.getSectors().at(0);
sector.get('id').should.equal('test'); expect(obj.getSectors().length).toEqual(1);
sector.get('name').should.equal('Test name'); expect(sector.get('id')).toEqual('test');
expect(sector.get('name')).toEqual('Test name');
}); });
it('Add sectors', function() { it('Add sectors', () => {
obj.addSector('test', {}); obj.addSector('test', {});
obj.addSector('test2', {}); obj.addSector('test2', {});
obj.getSectors().length.should.equal(2); expect(obj.getSectors().length).toEqual(2);
}); });
it("Can't create more than one sector with the same id", function() { it("Can't create more than one sector with the same id", () => {
var sect1 = obj.addSector('test', {}); var sect1 = obj.addSector('test', {});
var sect2 = obj.addSector('test', {}); var sect2 = obj.addSector('test', {});
obj.getSectors().length.should.equal(1); expect(obj.getSectors().length).toEqual(1);
sect1.should.deep.equal(sect2); expect(sect1).toEqual(sect2);
}); });
it('Get inexistent sector', function() { it('Get inexistent sector', () => {
(obj.getSector('test') == null).should.equal(true); expect(obj.getSector('test')).toEqual(null);
}); });
it('Get sector', function() { it('Get sector', () => {
var sect1 = obj.addSector('test', { name: 'Test' }); var sect1 = obj.addSector('test', { name: 'Test' });
var sect2 = obj.getSector('test'); var sect2 = obj.getSector('test');
sect1.should.deep.equal(sect2); expect(sect1).toEqual(sect2);
}); });
it('Add property to inexistent sector', function() { it('Add property to inexistent sector', () => {
(obj.addProperty('test', {}) == null).should.equal(true); expect(obj.addProperty('test', {})).toEqual(null);
}); });
it('Add property', function() { it('Add property', () => {
obj.addSector('test', {}); obj.addSector('test', {});
(obj.addProperty('test', {}) == null).should.equal(false); expect(obj.addProperty('test', {})).toExist();
obj.getProperties('test').length.should.equal(1); expect(obj.getProperties('test').length).toEqual(1);
}); });
it('Check added property', function() { it('Check added property', () => {
obj.addSector('test', {}); obj.addSector('test', {});
var prop = obj.addProperty('test', { var prop = obj.addProperty('test', {
'name': 'test', 'name': 'test',
}); });
prop.get('name').should.equal('test'); expect(prop.get('name')).toEqual('test');
}); });
it('Add properties', function() { it('Add properties', () => {
obj.addSector('test', {}); obj.addSector('test', {});
obj.addProperty('test', [{}, {}]); obj.addProperty('test', [{}, {}]);
obj.getProperties('test').length.should.equal(2); expect(obj.getProperties('test').length).toEqual(2);
}); });
it('Get property from inexistent sector', function() { it('Get property from inexistent sector', () => {
(obj.getProperty('test', 'test-prop') == null).should.equal(true); expect(obj.getProperty('test', 'test-prop')).toEqual(null);
}); });
it("Can't get properties without proper name", function() { it("Can't get properties without proper name", () => {
obj.addSector('test', {}); obj.addSector('test', {});
obj.addProperty('test', [{}, {}]); obj.addProperty('test', [{}, {}]);
obj.getProperty('test', 'test-prop').should.be.empty; expect(obj.getProperty('test', 'test-prop')).toEqual([]);
}); });
it("Get property with proper name", function() { it("Get property with proper name", () => {
obj.addSector('test', {}); obj.addSector('test', {});
var prop1 = obj.addProperty('test', {property: 'test-prop'}); var prop1 = obj.addProperty('test', {property: 'test-prop'});
var prop2 = obj.getProperty('test', 'test-prop'); var prop2 = obj.getProperty('test', 'test-prop');
prop1.should.deep.equal(prop2); expect(prop1).toEqual(prop2);
}); });
it("Get properties with proper name", function() { it("Get properties with proper name", () => {
obj.addSector('test', {}); obj.addSector('test', {});
var prop1 = obj.addProperty('test',[ var prop1 = obj.addProperty('test',[
{property: 'test-prop'}, {property: 'test-prop'},
{property: 'test-prop'} {property: 'test-prop'}
]); ]);
obj.getProperty('test', 'test-prop').length.should.equal(2); expect(obj.getProperty('test', 'test-prop').length).toEqual(2);
}); });
it('Get inexistent properties', function() { it('Get inexistent properties', () => {
(obj.getProperties('test') == null).should.equal(true); expect(obj.getProperties('test')).toEqual(null);
(obj.getProperties() == null).should.equal(true); expect(obj.getProperties()).toEqual(null);
}); });
it('Renders correctly', function() { it('Renders correctly', () => {
obj.render().should.be.ok; expect(obj.render()).toExist();
}); });
describe('Init with configuration', function() { describe('Init with configuration', () => {
beforeEach(function () { beforeEach(() => {
obj = new StyleManager().init({ obj = new StyleManager().init({
sectors: [{ sectors: [{
id: 'dim', id: 'dim',
@ -152,32 +151,30 @@ describe.only('StyleManager', function() {
}); });
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Sectors added', function() { it('Sectors added', () => {
obj.getSectors().length.should.equal(2); expect(obj.getSectors().length).toEqual(2);
var sect1 = obj.getSector('dim'); var sect1 = obj.getSector('dim');
sect1.get('name').should.equal('Dimension'); expect(sect1.get('name')).toEqual('Dimension');
}); });
it('Properties added', function() { it('Properties added', () => {
var sect1 = obj.getSector('dim'); var sect1 = obj.getSector('dim');
var sect2 = obj.getSector('pos'); var sect2 = obj.getSector('pos');
sect1.get('properties').length.should.equal(2); expect(sect1.get('properties').length).toEqual(2);
sect2.get('properties').length.should.equal(1); expect(sect2.get('properties').length).toEqual(1);
}); });
it('Property is correct', function() { it('Property is correct', () => {
var prop1 = obj.getProperty('dim', 'width'); var prop1 = obj.getProperty('dim', 'width');
prop1.get('name').should.equal('Width'); expect(prop1.get('name')).toEqual('Width');
}); });
}); });
*/
Models.run(); Models.run();
SectorView.run(); SectorView.run();
SectorsView.run(); SectorsView.run();

136
test/specs/style_manager/model/Models.js
View File

@ -7,14 +7,14 @@ const Layers = require('style_manager/model/Layers');
const PropertyFactory = require('style_manager/model/PropertyFactory'); const PropertyFactory = require('style_manager/model/PropertyFactory');
module.exports = { module.exports = {
run : function(){ run() {
describe('Sector', function() { describe('Sector', () => {
var obj; var obj;
var confToExt; var confToExt;
beforeEach(function () { beforeEach(() => {
confToExt = { confToExt = {
buildProps: ['display', 'float'], buildProps: ['display', 'float'],
properties: [{ properties: [{
@ -28,26 +28,26 @@ module.exports = {
obj = new Sector(); obj = new Sector();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Has id property', function() { it('Has id property', () => {
expect(obj.has('id')).toEqual(true); expect(obj.has('id')).toEqual(true);
}); });
it('Has no properties', function() { it('Has no properties', () => {
expect(obj.get('properties').length).toEqual(0); expect(obj.get('properties').length).toEqual(0);
}); });
it('Init with properties', function() { it('Init with properties', () => {
obj = new Sector({ obj = new Sector({
properties: [{}, {}] properties: [{}, {}]
}); });
expect(obj.get('properties').length).toEqual(2); expect(obj.get('properties').length).toEqual(2);
}); });
it('Build properties', function() { it('Build properties', () => {
var res = obj.buildProperties(['display', 'float']); var res = obj.buildProperties(['display', 'float']);
expect(res.length).toEqual(2); expect(res.length).toEqual(2);
expect(res[0]).toEqual({ expect(res[0]).toEqual({
@ -63,7 +63,7 @@ module.exports = {
}); });
}); });
it('Extend properties', function() { it('Extend properties', () => {
obj = new Sector(confToExt); obj = new Sector(confToExt);
expect(obj.get('properties').length).toEqual(3); expect(obj.get('properties').length).toEqual(3);
var prop0 = obj.get('properties').at(0); var prop0 = obj.get('properties').at(0);
@ -71,7 +71,7 @@ module.exports = {
expect(prop0.get('defaults')).toEqual('block'); expect(prop0.get('defaults')).toEqual('block');
}); });
it('Do not extend properties', function() { it('Do not extend properties', () => {
confToExt.extendBuilded = 0; confToExt.extendBuilded = 0;
obj = new Sector(confToExt); obj = new Sector(confToExt);
expect(obj.get('properties').length).toEqual(3); expect(obj.get('properties').length).toEqual(3);
@ -80,7 +80,7 @@ module.exports = {
expect(prop0.get('defaults')).toEqual(''); expect(prop0.get('defaults')).toEqual('');
}); });
it('Extend composed properties', function() { it('Extend composed properties', () => {
obj = new Sector({ obj = new Sector({
buildProps: ['margin', 'float'], buildProps: ['margin', 'float'],
properties: [{ properties: [{
@ -106,118 +106,118 @@ module.exports = {
}); });
describe('Sectors', function() { describe('Sectors', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new Sectors(); obj = new Sectors();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Object exists', function() { it('Object exists', () => {
expect(obj).toExist(); expect(obj).toExist();
}); });
}); });
describe('Property', function() { describe('Property', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new Property(); obj = new Property();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Has property field', function() { it('Has property field', () => {
expect(obj.has('property')).toEqual(true); expect(obj.has('property')).toEqual(true);
}); });
it('Has no properties', function() { it('Has no properties', () => {
expect(obj.get('properties').length).toEqual(0); expect(obj.get('properties').length).toEqual(0);
}); });
it('Has no layers', function() { it('Has no layers', () => {
expect(obj.get('layers').length).toEqual(0); expect(obj.get('layers').length).toEqual(0);
}); });
}); });
describe('Properties', function() { describe('Properties', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new Properties(); obj = new Properties();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Object exists', function() { it('Object exists', () => {
expect(obj).toExist(); expect(obj).toExist();
}); });
}); });
describe('Layer', function() { describe('Layer', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new Layer(); obj = new Layer();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Has index property', function() { it('Has index property', () => {
expect(obj.has('index')).toEqual(true); expect(obj.has('index')).toEqual(true);
}); });
it('Is active', function() { it('Is active', () => {
expect(obj.get('active')).toEqual(true); expect(obj.get('active')).toEqual(true);
}); });
}); });
describe('Layers', function() { describe('Layers', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new Layers(); obj = new Layers();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Object exists', function() { it('Object exists', () => {
expect(obj).toExist(); expect(obj).toExist();
}); });
it('Init index on add', function() { it('Init index on add', () => {
var model = obj.add({}); var model = obj.add({});
expect(model.get('index')).toEqual(1); expect(model.get('index')).toEqual(1);
}); });
it('Increment index', function() { it('Increment index', () => {
var model = obj.add({}); var model = obj.add({});
var model2 = obj.add({}); var model2 = obj.add({});
expect(model2.get('index')).toEqual(2); expect(model2.get('index')).toEqual(2);
}); });
it('Cache index', function() { it('Cache index', () => {
var model = obj.add({}); var model = obj.add({});
var model2 = obj.add({}); var model2 = obj.add({});
obj.remove(model2); obj.remove(model2);
@ -225,7 +225,7 @@ module.exports = {
expect(model3.get('index')).toEqual(3); expect(model3.get('index')).toEqual(3);
}); });
it('Reset index on reset', function() { it('Reset index on reset', () => {
var model = obj.add({}); var model = obj.add({});
var model2 = obj.add({}); var model2 = obj.add({});
obj.reset(); obj.reset();
@ -234,23 +234,23 @@ module.exports = {
}); });
describe('PropertyFactory', function() { describe('PropertyFactory', () => {
var obj; var obj;
beforeEach(function () { beforeEach(() => {
obj = new PropertyFactory(); obj = new PropertyFactory();
}); });
afterEach(function () { afterEach(() => {
obj = null; obj = null;
}); });
it('Object exists', function() { it('Object exists', () => {
expect(obj).toExist(); expect(obj).toExist();
}); });
it('Build single prop', function() { it('Build single prop', () => {
expect(obj.build('float')).toEqual([{ expect(obj.build('float')).toEqual([{
property: 'float', property: 'float',
type: 'radio', type: 'radio',
@ -263,7 +263,7 @@ module.exports = {
}]); }]);
}); });
it('Build display', function() { it('Build display', () => {
expect(obj.build('display')).toEqual([{ expect(obj.build('display')).toEqual([{
property: 'display', property: 'display',
type: 'select', type: 'select',
@ -277,7 +277,7 @@ module.exports = {
}]); }]);
}); });
it('Build position', function() { it('Build position', () => {
expect(obj.build('position')).toEqual([{ expect(obj.build('position')).toEqual([{
property: 'position', property: 'position',
type: 'radio', type: 'radio',
@ -291,7 +291,7 @@ module.exports = {
}]); }]);
}); });
it('Build top, left, right, bottom', function() { it('Build top, left, right, bottom', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px','%'], units: ['px','%'],
@ -307,7 +307,7 @@ module.exports = {
expect(obj.build('left')).toEqual([res]); expect(obj.build('left')).toEqual([res]);
}); });
it('Build width and height family', function() { it('Build width and height family', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px','%'], units: ['px','%'],
@ -329,7 +329,7 @@ module.exports = {
expect(obj.build('max-width')).toEqual([res]); expect(obj.build('max-width')).toEqual([res]);
}); });
it('Build margin', function() { it('Build margin', () => {
var res = { var res = {
property: 'margin', property: 'margin',
type: 'composite', type: 'composite',
@ -362,7 +362,7 @@ module.exports = {
expect(obj.build('margin')).toEqual([res]); expect(obj.build('margin')).toEqual([res]);
}); });
it('Build padding', function() { it('Build padding', () => {
var res = { var res = {
property: 'padding', property: 'padding',
type: 'composite', type: 'composite',
@ -395,7 +395,7 @@ module.exports = {
expect(obj.build('padding')).toEqual([res]); expect(obj.build('padding')).toEqual([res]);
}); });
it('Build font-family', function() { it('Build font-family', () => {
var ss = ', sans-serif'; var ss = ', sans-serif';
var ms = ', monospace'; var ms = ', monospace';
var ff = 'font-family: '; var ff = 'font-family: ';
@ -423,7 +423,7 @@ module.exports = {
expect(obj.build('font-family')).toEqual([res]); expect(obj.build('font-family')).toEqual([res]);
}); });
it('Build font-size', function() { it('Build font-size', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px','em', 'rem', '%'], units: ['px','em', 'rem', '%'],
@ -448,7 +448,7 @@ module.exports = {
expect(obj.build('font-size')).toEqual([res]); expect(obj.build('font-size')).toEqual([res]);
}); });
it('Build letter-spacing', function() { it('Build letter-spacing', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px','em', 'rem', '%'], units: ['px','em', 'rem', '%'],
@ -463,7 +463,7 @@ module.exports = {
expect(obj.build('letter-spacing')).toEqual([res]); expect(obj.build('letter-spacing')).toEqual([res]);
}); });
it('Build font-weight', function() { it('Build font-weight', () => {
var res = { var res = {
type: 'select', type: 'select',
defaults: '400', defaults: '400',
@ -481,7 +481,7 @@ module.exports = {
expect(obj.build('font-weight')).toEqual([res]); expect(obj.build('font-weight')).toEqual([res]);
}); });
it('Build color', function() { it('Build color', () => {
var res = { var res = {
property: 'color', property: 'color',
type: 'color', type: 'color',
@ -490,7 +490,7 @@ module.exports = {
expect(obj.build('color')).toEqual([res]); expect(obj.build('color')).toEqual([res]);
}); });
it('Build line-height', function() { it('Build line-height', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px','em', 'rem', '%'], units: ['px','em', 'rem', '%'],
@ -505,7 +505,7 @@ module.exports = {
expect(obj.build('line-height')).toEqual([res]); expect(obj.build('line-height')).toEqual([res]);
}); });
it('Build text-align', function() { it('Build text-align', () => {
var res = { var res = {
type: 'radio', type: 'radio',
defaults: 'left', defaults: 'left',
@ -518,7 +518,7 @@ module.exports = {
expect(obj.build('text-align')).toEqual([res]); expect(obj.build('text-align')).toEqual([res]);
}); });
it('Build text-shadow', function() { it('Build text-shadow', () => {
var res = { var res = {
type: 'stack', type: 'stack',
preview: true, preview: true,
@ -548,7 +548,7 @@ module.exports = {
expect(obj.build('text-shadow')).toEqual([res]); expect(obj.build('text-shadow')).toEqual([res]);
}); });
it('Build border-radius-c', function() { it('Build border-radius-c', () => {
var res = { var res = {
type: 'integer', type: 'integer',
units: ['px', '%'], units: ['px', '%'],
@ -559,7 +559,7 @@ module.exports = {
expect(obj.build('border-radius-c')).toEqual([res]); expect(obj.build('border-radius-c')).toEqual([res]);
}); });
it('Build border-radius', function() { it('Build border-radius', () => {
var res = { var res = {
property: 'border-radius', property: 'border-radius',
type: 'composite', type: 'composite',
@ -593,7 +593,7 @@ module.exports = {
expect(obj.build('border-radius')).toEqual([res]); expect(obj.build('border-radius')).toEqual([res]);
}); });
it('Build background-color', function() { it('Build background-color', () => {
var res = { var res = {
type : 'color', type : 'color',
defaults: 'none' defaults: 'none'
@ -602,7 +602,7 @@ module.exports = {
expect(obj.build('background-color')).toEqual([res]); expect(obj.build('background-color')).toEqual([res]);
}); });
it('Build border', function() { it('Build border', () => {
var res = { var res = {
property: 'border', property: 'border',
type: 'composite', type: 'composite',
@ -634,7 +634,7 @@ module.exports = {
expect(obj.build('border')).toEqual([res]); expect(obj.build('border')).toEqual([res]);
}); });
it('Build box-shadow', function() { it('Build box-shadow', () => {
var res = { var res = {
property: 'box-shadow', property: 'box-shadow',
type: 'stack', type: 'stack',
@ -675,7 +675,7 @@ module.exports = {
expect(obj.build('box-shadow')).toEqual([res]); expect(obj.build('box-shadow')).toEqual([res]);
}); });
it('Build background', function() { it('Build background', () => {
var res = { var res = {
property: 'background', property: 'background',
type: 'stack', type: 'stack',
@ -728,7 +728,7 @@ module.exports = {
expect(obj.build('background')).toEqual([res]); expect(obj.build('background')).toEqual([res]);
}); });
it('Build transition', function() { it('Build transition', () => {
var res = { var res = {
property: 'transition', property: 'transition',
type: 'stack', type: 'stack',
@ -763,7 +763,7 @@ module.exports = {
expect(obj.build('transition')).toEqual([res]); expect(obj.build('transition')).toEqual([res]);
}); });
it('Build perspective', function() { it('Build perspective', () => {
var res = { var res = {
property: 'perspective', property: 'perspective',
type: 'integer', type: 'integer',
@ -774,7 +774,7 @@ module.exports = {
expect(obj.build('perspective')).toEqual([res]); expect(obj.build('perspective')).toEqual([res]);
}); });
it('Build transform', function() { it('Build transform', () => {
var res = { var res = {
property: 'transform', property: 'transform',
type: 'composite', type: 'composite',
@ -816,7 +816,7 @@ module.exports = {
expect(obj.build('transform')).toEqual([res]); expect(obj.build('transform')).toEqual([res]);
}); });
it('Build cursor', function() { it('Build cursor', () => {
var res = { var res = {
type: 'select', type: 'select',
property: 'cursor', property: 'cursor',
@ -834,7 +834,7 @@ module.exports = {
expect(obj.build('cursor')).toEqual([res]); expect(obj.build('cursor')).toEqual([res]);
}); });
it('Build overflow', function() { it('Build overflow', () => {
var res = { var res = {
type: 'select', type: 'select',
property: 'overflow', property: 'overflow',

26
test/specs/style_manager/view/LayerView.js
View File

@ -2,9 +2,9 @@ const LayerView = require('style_manager/view/LayerView');
const Layers = require('style_manager/model/Layers'); const Layers = require('style_manager/model/Layers');
module.exports = { module.exports = {
run : function(){ run() {
describe('LayerView', function() { describe('LayerView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -13,33 +13,33 @@ module.exports = {
var model; var model;
var view; var view;
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="layer-fixture"></div>'); $fixture = $('<div class="layer-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
var coll = new Layers(); var coll = new Layers();
model = coll.add({}); model = coll.add({});
view = new LayerView({ view = new LayerView({
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();
component = null; component = null;
view = null; view = null;
model = null; model = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var layer = view.el; var layer = view.el;
expect($fixture.get(0).querySelector('.layer')).toExist(); expect($fixture.get(0).querySelector('.layer')).toExist();
expect(layer.querySelector('#label')).toExist(); expect(layer.querySelector('#label')).toExist();
@ -49,24 +49,24 @@ module.exports = {
expect(layer.querySelector('#preview')).toExist(); expect(layer.querySelector('#preview')).toExist();
}); });
it('getIndex returns default value', function() { it('getIndex returns default value', () => {
expect(view.getIndex()).toEqual(0); expect(view.getIndex()).toEqual(0);
}); });
it('No preview', function() { it('No preview', () => {
var style = view.el.querySelector('#preview').style; var style = view.el.querySelector('#preview').style;
expect(style.cssText).toNotExist(); expect(style.cssText).toNotExist();
}); });
it('Changes on value trigger onPreview', function() { it('Changes on value trigger onPreview', () => {
var called = 0; var called = 0;
view.onPreview = function(){called = 1}; view.onPreview = () => {called = 1};
view.model.set('preview', true); view.model.set('preview', true);
view.model.set('value', 'test'); view.model.set('value', 'test');
expect(called).toEqual(1); expect(called).toEqual(1);
}); });
it('Update props', function() { it('Update props', () => {
view.model.set('props', $('<div>')); view.model.set('props', $('<div>'));
expect(view.el.querySelector('#inputs').innerHTML).toExist(); expect(view.el.querySelector('#inputs').innerHTML).toExist();
expect(view.model.get('props')).toEqual(null); expect(view.model.get('props')).toEqual(null);

52
test/specs/style_manager/view/PropertyColorView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyColorView', function() { describe('PropertyColorView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -17,13 +17,13 @@ module.exports = {
var propValue = '#fff'; var propValue = '#fff';
var defValue = 'test2value'; var defValue = 'test2value';
before(function () { before(() => {
$.fn.spectrum = function(){}; $.fn.spectrum = () => {};
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
model = new Property({ model = new Property({
@ -31,63 +31,63 @@ module.exports = {
property: propName property: propName
}); });
view = new PropertyColorView({ view = new PropertyColorView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
view = null; view = null;
model = null; model = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Inputs rendered', function() { it('Inputs rendered', () => {
var prop = view.el; var prop = view.el;
expect(prop.querySelector('input[type=text]')).toExist(); expect(prop.querySelector('input[type=text]')).toExist();
expect(prop.querySelector('.field-color-picker')).toExist(); expect(prop.querySelector('.field-color-picker')).toExist();
}); });
it('Inputs should exist', function() { it('Inputs should exist', () => {
expect(view.$input).toExist(); expect(view.$input).toExist();
expect(view.$color).toExist(); expect(view.$color).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
expect(view.$input.val()).toNotExist(); expect(view.$input.val()).toNotExist();
}); });
it('Update model on setValue', function() { it('Update model on setValue', () => {
view.setValue(propValue); view.setValue(propValue);
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
view.$input.val(propValue).trigger('change'); view.$input.val(propValue).trigger('change');
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
}); });
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
@ -96,19 +96,19 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
describe('With target setted', function() { describe('With target setted', () => {
beforeEach(function () { beforeEach(() => {
target.model = component; target.model = component;
view = new PropertyColorView({ view = new PropertyColorView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -117,7 +117,7 @@ module.exports = {
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -131,9 +131,9 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'color', type: 'color',
@ -141,17 +141,17 @@ module.exports = {
defaults: propValue, defaults: propValue,
}); });
view = new PropertyColorView({ view = new PropertyColorView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
}); });
it('Input value is as default', function() { it('Input value is as default', () => {
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });

66
test/specs/style_manager/view/PropertyCompositeView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyCompositeView', function() { describe('PropertyCompositeView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -36,51 +36,51 @@ module.exports = {
}, },
]; ];
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
target.model = component; target.model = component;
model = new Property({ model = new Property({
type: 'composite', type: 'composite',
property: propName, property: propName,
properties: properties properties
}); });
view = new PropertyCompositeView({ view = new PropertyCompositeView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
view = null; view = null;
model = null; model = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Properties rendered', function() { it('Properties rendered', () => {
var prop = view.el; var prop = view.el;
expect(prop.querySelector('.properties')).toExist(); expect(prop.querySelector('.properties')).toExist();
}); });
it('Properties rendered correctly', function() { it('Properties rendered correctly', () => {
var children = view.el.querySelector('.properties').children; var children = view.el.querySelector('.properties').children;
expect(children.length).toEqual(properties.length + 1); expect(children.length).toEqual(properties.length + 1);
expect(children[0].id).toEqual(properties[0].property); expect(children[0].id).toEqual(properties[0].property);
@ -88,20 +88,20 @@ module.exports = {
expect(children[2].id).toEqual(properties[2].property); expect(children[2].id).toEqual(properties[2].property);
}); });
it('Props should exist', function() { it('Props should exist', () => {
expect(view.$props).toExist(); expect(view.$props).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
}); });
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
describe('With target setted', function() { describe('With target setted', () => {
var prop2Val; var prop2Val;
var prop3Val; var prop3Val;
@ -111,14 +111,14 @@ module.exports = {
var $prop2; var $prop2;
var $prop3; var $prop3;
beforeEach(function () { beforeEach(() => {
model = new Property({ model = new Property({
type: 'composite', type: 'composite',
property: propName, property: propName,
properties: properties properties
}); });
view = new PropertyCompositeView({ view = new PropertyCompositeView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
@ -132,19 +132,19 @@ module.exports = {
$prop3 = view.$props.find('#' + properties[2].property + ' select'); $prop3 = view.$props.find('#' + properties[2].property + ' select');
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
$prop1.val(propValue).trigger('change'); $prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change'); $prop3.val(prop3Val).trigger('change');
expect(view.model.get('value')).toEqual(finalResult); expect(view.model.get('value')).toEqual(finalResult);
}); });
it('Update value on models change', function() { it('Update value on models change', () => {
view.model.get('properties').at(0).set('value', propValue); view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val); view.model.get('properties').at(2).set('value', prop3Val);
expect(view.model.get('value')).toEqual(finalResult); expect(view.model.get('value')).toEqual(finalResult);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
$prop1.val(propValue).trigger('change'); $prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style'); var compStyle = view.getTarget().get('style');
var assertStyle = {}; var assertStyle = {};
@ -152,15 +152,15 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Update target on detached value change', function() { it('Update target on detached value change', () => {
model = new Property({ model = new Property({
type: 'composite', type: 'composite',
property: propName, property: propName,
properties: properties, properties,
detached: true, detached: true,
}); });
view = new PropertyCompositeView({ view = new PropertyCompositeView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.html(view.render().el); $fixture.html(view.render().el);
@ -172,7 +172,7 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = finalResult; style[propName] = finalResult;
component.set('style', style); component.set('style', style);
@ -181,7 +181,7 @@ module.exports = {
expect($prop3.val()).toEqual(prop3Val); expect($prop3.val()).toEqual(prop3Val);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = finalResult; style[propName] = finalResult;
component.set('style', style); component.set('style', style);
@ -194,7 +194,7 @@ module.exports = {
expect($prop3.val()).toEqual('val1'); expect($prop3.val()).toEqual('val1');
}); });
it('The value is correctly extracted from the composite string', function() { it('The value is correctly extracted from the composite string', () => {
var style = {}; var style = {};
style[propName] = 'value1 value2 value3 value4'; style[propName] = 'value1 value2 value3 value4';
component.set('style', style); component.set('style', style);
@ -203,7 +203,7 @@ module.exports = {
expect(view.valueOnIndex(4)).toEqual(null); expect(view.valueOnIndex(4)).toEqual(null);
}); });
it('Build value from properties', function() { it('Build value from properties', () => {
view.model.get('properties').at(0).set('value', propValue); view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val); view.model.get('properties').at(2).set('value', prop3Val);
expect(view.build()).toEqual(finalResult); expect(view.build()).toEqual(finalResult);
@ -211,23 +211,23 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
model = new Property({ model = new Property({
type: 'composite', type: 'composite',
property: propName, property: propName,
properties: properties, properties,
defaults: defValue, defaults: defValue,
}); });
view = new PropertyCompositeView({ view = new PropertyCompositeView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.get('value')).toEqual(defValue);
}); });

64
test/specs/style_manager/view/PropertyIntegerView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyIntegerView', function() { describe('PropertyIntegerView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -23,73 +23,73 @@ module.exports = {
var maxValue = 75; var maxValue = 75;
var unitsElSel = '.field-units select'; var unitsElSel = '.field-units select';
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'integer', type: 'integer',
units: units, units,
property: propName property: propName
}); });
view = new PropertyIntegerView({ view = new PropertyIntegerView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
view = null; view = null;
model = null; model = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Inputs rendered', function() { it('Inputs rendered', () => {
var prop = view.el; var prop = view.el;
expect(prop.querySelector('input[type=text]')).toExist(); expect(prop.querySelector('input[type=text]')).toExist();
expect(prop.querySelector(unitsElSel)).toExist(); expect(prop.querySelector(unitsElSel)).toExist();
}); });
it('Units rendered', function() { it('Units rendered', () => {
var select = view.el.querySelector(unitsElSel); var select = view.el.querySelector(unitsElSel);
expect(select.children.length).toEqual(units.length); expect(select.children.length).toEqual(units.length);
}); });
it('Units rendered correctly', function() { it('Units rendered correctly', () => {
var children = view.el.querySelector(unitsElSel).children; var children = view.el.querySelector(unitsElSel).children;
expect(children[0].textContent).toEqual(units[0]); expect(children[0].textContent).toEqual(units[0]);
expect(children[1].textContent).toEqual(units[1]); expect(children[1].textContent).toEqual(units[1]);
expect(children[2].textContent).toEqual(units[2]); expect(children[2].textContent).toEqual(units[2]);
}); });
it('Inputs should exist', function() { it('Inputs should exist', () => {
expect(view.$input).toExist(); expect(view.$input).toExist();
expect(view.$unit).toExist(); expect(view.$unit).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
expect(view.model.get('unit')).toEqual('px'); expect(view.model.get('unit')).toEqual('px');
}); });
it('Update model on setValue', function() { it('Update model on setValue', () => {
view.setValue(intValue + unitValue); view.setValue(intValue + unitValue);
expect(view.model.get('value')).toEqual(parseFloat(intValue)); expect(view.model.get('value')).toEqual(parseFloat(intValue));
expect(view.model.get('unit')).toEqual(unitValue); expect(view.model.get('unit')).toEqual(unitValue);
@ -97,22 +97,22 @@ module.exports = {
expect(view.$unit.val()).toEqual(unitValue); expect(view.$unit.val()).toEqual(unitValue);
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
view.$input.val(123).trigger('change'); view.$input.val(123).trigger('change');
expect(view.model.get('value')).toEqual(123); expect(view.model.get('value')).toEqual(123);
}); });
it('Update model on unit change', function() { it('Update model on unit change', () => {
view.$unit.val(units[1]).trigger('change'); view.$unit.val(units[1]).trigger('change');
expect(view.model.get('unit')).toEqual(units[1]); expect(view.model.get('unit')).toEqual(units[1]);
}); });
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', intValue); view.model.set('value', intValue);
expect(view.getInputValue()).toEqual(intValue); expect(view.getInputValue()).toEqual(intValue);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', intValue); view.model.set('value', intValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
@ -121,19 +121,19 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
describe('With target setted', function() { describe('With target setted', () => {
beforeEach(function () { beforeEach(() => {
target.model = component; target.model = component;
view = new PropertyIntegerView({ view = new PropertyIntegerView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -142,7 +142,7 @@ module.exports = {
expect(view.getInputValue()).toEqual(intValue); expect(view.getInputValue()).toEqual(intValue);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -158,13 +158,13 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'integer', type: 'integer',
units: units, units,
property: propName, property: propName,
defaults: intValue, defaults: intValue,
min: minValue, min: minValue,
@ -172,29 +172,29 @@ module.exports = {
unit: units[1], unit: units[1],
}); });
view = new PropertyIntegerView({ view = new PropertyIntegerView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(parseInt(intValue)); expect(view.model.get('value')).toEqual(parseInt(intValue));
expect(view.model.get('unit')).toEqual(units[1]); expect(view.model.get('unit')).toEqual(units[1]);
}); });
it('Input value is as default', function() { it('Input value is as default', () => {
expect(view.$input.val()).toEqual(intValue); expect(view.$input.val()).toEqual(intValue);
expect(view.$unit.val()).toEqual(units[1]); expect(view.$unit.val()).toEqual(units[1]);
}); });
it('Input follows min', function() { it('Input follows min', () => {
view.$input.val(minValue - 50).trigger('change'); view.$input.val(minValue - 50).trigger('change');
expect(view.model.get('value')).toEqual(minValue); expect(view.model.get('value')).toEqual(minValue);
expect(view.$input.val()).toEqual(minValue + ""); expect(view.$input.val()).toEqual(minValue + "");
}); });
it('Input follows max', function() { it('Input follows max', () => {
view.$input.val(maxValue + 50).trigger('change'); view.$input.val(maxValue + 50).trigger('change');
expect(view.model.get('value')).toEqual(maxValue); expect(view.model.get('value')).toEqual(maxValue);
expect(view.$input.val()).toEqual(maxValue + ""); expect(view.$input.val()).toEqual(maxValue + "");

52
test/specs/style_manager/view/PropertyRadioView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyRadioView', function() { describe('PropertyRadioView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -21,12 +21,12 @@ module.exports = {
{ name: 'test2', value: 'test2value'} { name: 'test2', value: 'test2value'}
]; ];
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
model = new Property({ model = new Property({
@ -35,39 +35,39 @@ module.exports = {
property: propName property: propName
}); });
view = new PropertyRadioView({ view = new PropertyRadioView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Radio rendered', function() { it('Radio rendered', () => {
var prop = view.el; var prop = view.el;
expect(prop.querySelector('input[type=radio]')).toExist(); expect(prop.querySelector('input[type=radio]')).toExist();
}); });
it('Options rendered', function() { it('Options rendered', () => {
var input = view.el.querySelector('#input-holder'); var input = view.el.querySelector('#input-holder');
expect(input.children.length).toEqual(options.length); expect(input.children.length).toEqual(options.length);
}); });
it('Options rendered correctly', function() { it('Options rendered correctly', () => {
var children = view.el.querySelector('#input-holder').children; var children = view.el.querySelector('#input-holder').children;
expect(children[0].querySelector('label').textContent).toEqual('test1value'); expect(children[0].querySelector('label').textContent).toEqual('test1value');
expect(children[1].querySelector('label').textContent).toEqual('test2'); expect(children[1].querySelector('label').textContent).toEqual('test2');
@ -77,26 +77,26 @@ module.exports = {
expect(children[1].querySelector('label').getAttribute('title')).toEqual(null); expect(children[1].querySelector('label').getAttribute('title')).toEqual(null);
}); });
it('Input should exist', function() { it('Input should exist', () => {
expect(view.$input).toExist(); expect(view.$input).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
view.setValue(propValue); view.setValue(propValue);
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue);
}); });
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
@ -105,19 +105,19 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
describe('With target setted', function() { describe('With target setted', () => {
beforeEach(function () { beforeEach(() => {
target.model = component; target.model = component;
view = new PropertyRadioView({ view = new PropertyRadioView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -126,7 +126,7 @@ module.exports = {
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -140,9 +140,9 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'select', type: 'select',
@ -151,17 +151,17 @@ module.exports = {
property: propName property: propName
}); });
view = new PropertyRadioView({ view = new PropertyRadioView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.get('value')).toEqual(defValue);
}); });
it('Input value is as default', function() { it('Input value is as default', () => {
expect(view.getInputValue()).toEqual(defValue); expect(view.getInputValue()).toEqual(defValue);
}); });

56
test/specs/style_manager/view/PropertySelectView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertySelectView', function() { describe('PropertySelectView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -21,12 +21,12 @@ module.exports = {
{name: 'test2', value: 'test2value'} {name: 'test2', value: 'test2value'}
]; ];
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
model = new Property({ model = new Property({
@ -35,39 +35,39 @@ module.exports = {
property: propName property: propName
}); });
view = new PropertySelectView({ view = new PropertySelectView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Select rendered', function() { it('Select rendered', () => {
var prop = view.el; var prop = view.el;
expect(prop.querySelector('select')).toExist(); expect(prop.querySelector('select')).toExist();
}); });
it('Options rendered', function() { it('Options rendered', () => {
var select = view.el.querySelector('select'); var select = view.el.querySelector('select');
expect(select.children.length).toEqual(options.length); expect(select.children.length).toEqual(options.length);
}); });
it('Options rendered correctly', function() { it('Options rendered correctly', () => {
var select = view.el.querySelector('select'); var select = view.el.querySelector('select');
var children = select.children; var children = select.children;
expect(children[0].value).toEqual(options[0].value); expect(children[0].value).toEqual(options[0].value);
@ -78,25 +78,25 @@ module.exports = {
expect(children[1].getAttribute('style')).toEqual(null); expect(children[1].getAttribute('style')).toEqual(null);
}); });
it('Input should exist', function() { it('Input should exist', () => {
expect(view.$input).toExist(); expect(view.$input).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
view.$input.val(propValue).trigger('change'); view.$input.val(propValue).trigger('change');
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
}); });
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
@ -105,19 +105,19 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
describe('With target setted', function() { describe('With target setted', () => {
beforeEach(function () { beforeEach(() => {
target.model = component; target.model = component;
view = new PropertySelectView({ view = new PropertySelectView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -126,7 +126,7 @@ module.exports = {
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -140,9 +140,9 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'select', type: 'select',
@ -151,17 +151,17 @@ module.exports = {
property: propName property: propName
}); });
view = new PropertySelectView({ view = new PropertySelectView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.get('value')).toEqual(defValue);
}); });
it('Empty value as default', function() { it('Empty value as default', () => {
options = [ options = [
{value: 'test1value', name: 'test1'}, {value: 'test1value', name: 'test1'},
{value: 'test2value', name: 'test2'}, {value: 'test2value', name: 'test2'},
@ -175,13 +175,13 @@ module.exports = {
property: 'emptyDefault' property: 'emptyDefault'
}); });
view = new PropertySelectView({ view = new PropertySelectView({
model: model model
}); });
$fixture.html(view.render().el); $fixture.html(view.render().el);
expect(view.$input.val()).toEqual(''); expect(view.$input.val()).toEqual('');
}); });
it('Input value is as default', function() { it('Input value is as default', () => {
expect(view.$input.val()).toEqual(defValue); expect(view.$input.val()).toEqual(defValue);
}); });

82
test/specs/style_manager/view/PropertyStackView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyStackView', function() { describe('PropertyStackView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -41,39 +41,39 @@ module.exports = {
}, },
]; ];
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
target.model = component; target.model = component;
model = new Property({ model = new Property({
type: 'stack', type: 'stack',
property: propName, property: propName,
properties: properties properties
}); });
view = new PropertyStackView({ view = new PropertyStackView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
view = null; view = null;
model = null; model = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
@ -81,15 +81,15 @@ module.exports = {
expect(prop.querySelector('#add')).toExist(); expect(prop.querySelector('#add')).toExist();
}); });
it('Layers rendered', function() { it('Layers rendered', () => {
expect(view.el.querySelector('.layers')).toExist(); expect(view.el.querySelector('.layers')).toExist();
}); });
it('Layers should exist', function() { it('Layers should exist', () => {
expect(view.$props).toExist(); expect(view.$props).toExist();
}); });
it('Layers rendered correctly', function() { it('Layers rendered correctly', () => {
var children = view.$props.get(0).children; var children = view.$props.get(0).children;
expect(children.length).toEqual(properties.length + 1); expect(children.length).toEqual(properties.length + 1);
expect(children[0].id).toEqual(properties[0].property); expect(children[0].id).toEqual(properties[0].property);
@ -97,25 +97,25 @@ module.exports = {
expect(children[2].id).toEqual(properties[2].property); expect(children[2].id).toEqual(properties[2].property);
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
}); });
it('Layers container is empty', function() { it('Layers container is empty', () => {
var layers = view.el.querySelector('.layers'); var layers = view.el.querySelector('.layers');
expect(layers.innerHTML).toNotExist(); expect(layers.innerHTML).toNotExist();
}); });
describe('With layers', function() { describe('With layers', () => {
beforeEach(function () { beforeEach(() => {
model = new Property({ model = new Property({
type: 'stack', type: 'stack',
property: propName, property: propName,
properties: properties, properties,
}); });
view = new PropertyStackView({ view = new PropertyStackView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
@ -123,27 +123,27 @@ module.exports = {
model.get('layers').add(layers); model.get('layers').add(layers);
}); });
it('Layers inserted', function() { it('Layers inserted', () => {
expect(view.getLayers().length).toEqual(layers.length); expect(view.getLayers().length).toEqual(layers.length);
}); });
it('Get value on index', function() { it('Get value on index', () => {
view.model.set('stackIndex', 1); view.model.set('stackIndex', 1);
expect(view.valueOnIndex(1)).toEqual('lval22'); expect(view.valueOnIndex(1)).toEqual('lval22');
}); });
it('createValue merges layers', function() { it('createValue merges layers', () => {
expect(view.createValue()).toEqual('lval1, lval2 lval22, lval3 lval32 lval33'); expect(view.createValue()).toEqual('lval1, lval2 lval22, lval3 lval32 lval33');
}); });
it('Add layer', function() { it('Add layer', () => {
view.addLayer(); view.addLayer();
expect(view.getLayers().length).toEqual(layers.length + 1); expect(view.getLayers().length).toEqual(layers.length + 1);
}); });
}); });
describe('With target setted', function() { describe('With target setted', () => {
var prop2Val; var prop2Val;
var prop3Val; var prop3Val;
@ -153,14 +153,14 @@ module.exports = {
var $prop2; var $prop2;
var $prop3; var $prop3;
beforeEach(function () { beforeEach(() => {
model = new Property({ model = new Property({
type: 'stack', type: 'stack',
property: propName, property: propName,
properties: properties properties
}); });
view = new PropertyStackView({ view = new PropertyStackView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
@ -175,19 +175,19 @@ module.exports = {
$prop3 = view.$props.find('#' + properties[2].property + ' select'); $prop3 = view.$props.find('#' + properties[2].property + ' select');
}); });
it('Update model on input change', function() { it('Update model on input change', () => {
$prop1.val(propValue).trigger('change'); $prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change'); $prop3.val(prop3Val).trigger('change');
expect(view.model.get('value')).toEqual(finalResult); expect(view.model.get('value')).toEqual(finalResult);
}); });
it('Update value on models change', function() { it('Update value on models change', () => {
view.model.get('properties').at(0).set('value', propValue); view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val); view.model.get('properties').at(2).set('value', prop3Val);
expect(view.model.get('value')).toEqual(finalResult); expect(view.model.get('value')).toEqual(finalResult);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
$prop1.val(propValue).trigger('change'); $prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style'); var compStyle = view.getTarget().get('style');
var assertStyle = {}; var assertStyle = {};
@ -195,7 +195,7 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
var finalResult2 = 'A B C'; var finalResult2 = 'A B C';
style[propName] = finalResult + ', ' + finalResult2; style[propName] = finalResult + ', ' + finalResult2;
@ -206,7 +206,7 @@ module.exports = {
expect(layers.at(1).get('value')).toEqual(finalResult2); expect(layers.at(1).get('value')).toEqual(finalResult2);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
var finalResult2 = 'A2 B2 C2'; var finalResult2 = 'A2 B2 C2';
style[propName] = finalResult; style[propName] = finalResult;
@ -220,7 +220,7 @@ module.exports = {
expect(layers.at(1).get('value')).toEqual(finalResult2); expect(layers.at(1).get('value')).toEqual(finalResult2);
}); });
it('The value is correctly extracted from the composite string', function() { it('The value is correctly extracted from the composite string', () => {
var style = {}; var style = {};
style[propName] = 'value1 value2, value3 value4'; style[propName] = 'value1 value2, value3 value4';
component.set('style', style); component.set('style', style);
@ -232,7 +232,7 @@ module.exports = {
}); });
it('The value is correctly extracted from the string with functions', function() { it('The value is correctly extracted from the string with functions', () => {
var style = {}; var style = {};
style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3'; style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3';
component.set('style', style); component.set('style', style);
@ -243,7 +243,7 @@ module.exports = {
expect(view.valueOnIndex(2)).toEqual(null); expect(view.valueOnIndex(2)).toEqual(null);
}); });
it('Build value from properties', function() { it('Build value from properties', () => {
view.model.get('properties').at(0).set('value', propValue); view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val); view.model.get('properties').at(2).set('value', prop3Val);
expect(view.build()).toEqual(finalResult); expect(view.build()).toEqual(finalResult);
@ -251,7 +251,7 @@ module.exports = {
}); });
describe('Detached with target setted', function() { describe('Detached with target setted', () => {
var prop2Val; var prop2Val;
var prop3Val; var prop3Val;
@ -267,15 +267,15 @@ module.exports = {
subprop555: 'T, T, T', subprop555: 'T, T, T',
}; };
beforeEach(function () { beforeEach(() => {
model = new Property({ model = new Property({
type: 'stack', type: 'stack',
property: propName, property: propName,
properties: properties, properties,
detached: true, detached: true,
}); });
view = new PropertyStackView({ view = new PropertyStackView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.html(view.render().el); $fixture.html(view.render().el);
@ -289,7 +289,7 @@ module.exports = {
$prop3 = view.$props.find('#' + properties[2].property + ' select'); $prop3 = view.$props.find('#' + properties[2].property + ' select');
}); });
it('Returns correctly layers array from target', function() { it('Returns correctly layers array from target', () => {
component.set('style', compStyle); component.set('style', compStyle);
var result = [{ var result = [{
subprop1: '1px', subprop1: '1px',
@ -307,7 +307,7 @@ module.exports = {
expect(view.getLayersFromTarget()).toEqual(result); expect(view.getLayersFromTarget()).toEqual(result);
}); });
it('Update target on detached value change', function() { it('Update target on detached value change', () => {
$prop1.val(propValue).trigger('change'); $prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style'); var compStyle = view.getTarget().get('style');
var assertStyle = {}; var assertStyle = {};
@ -317,7 +317,7 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
component.set('style', compStyle); component.set('style', compStyle);
view.propTarget.trigger('update'); view.propTarget.trigger('update');

70
test/specs/style_manager/view/PropertyView.js
View File

@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component'); const Component = require('dom_components/model/Component');
module.exports = { module.exports = {
run : function(){ run() {
describe('PropertyView', function() { describe('PropertyView', () => {
var component; var component;
var $fixtures; var $fixtures;
@ -17,71 +17,71 @@ module.exports = {
var propValue = 'testvalue'; var propValue = 'testvalue';
var defValue = 'testDefault'; var defValue = 'testDefault';
before(function () { before(() => {
$fixtures = $("#fixtures"); $fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>'); $fixture = $('<div class="sm-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
target = new Component(); target = new Component();
component = new Component(); component = new Component();
model = new Property({property: propName}); model = new Property({property: propName});
view = new PropertyView({ view = new PropertyView({
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(); // strange errors ??? //view.remove(); // strange errors ???
}); });
after(function () { after(() => {
$fixture.remove(); $fixture.remove();
component = null; component = null;
}); });
it('Rendered correctly', function() { it('Rendered correctly', () => {
var prop = view.el; var prop = view.el;
expect($fixture.get(0).querySelector('.property')).toExist(); expect($fixture.get(0).querySelector('.property')).toExist();
expect(prop.querySelector('.label')).toExist(); expect(prop.querySelector('.label')).toExist();
expect(prop.querySelector('.field')).toExist(); expect(prop.querySelector('.field')).toExist();
}); });
it('Input should exist', function() { it('Input should exist', () => {
expect(view.$input).toExist(); expect(view.$input).toExist();
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
expect(view.$input.val()).toNotExist(); expect(view.$input.val()).toNotExist();
}); });
it('Model not change without update trigger', function() { it('Model not change without update trigger', () => {
view.$input.val(propValue); view.$input.val(propValue);
expect(view.model.get('value')).toNotExist(); expect(view.model.get('value')).toNotExist();
}); });
// Tests valueUpdated() // Tests valueUpdated()
it('Update model on input change', function() { it('Update model on input change', () => {
view.$input.val(propValue).trigger('change'); view.$input.val(propValue).trigger('change');
expect(view.model.get('value')).toEqual(propValue); expect(view.model.get('value')).toEqual(propValue);
}); });
// Tests getValueForTarget() // Tests getValueForTarget()
it('Get value for target', function() { it('Get value for target', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.getValueForTarget()).toEqual(propValue); expect(view.getValueForTarget()).toEqual(propValue);
}); });
// Tests valueChanged() -> ... // Tests valueChanged() -> ...
it('Update input on value change', function() { it('Update input on value change', () => {
view.model.set('value', propValue); view.model.set('value', propValue);
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
it('Update target on value change', function() { it('Update target on value change', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style'); var compStyle = view.selectedComponent.get('style');
@ -90,7 +90,7 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Update target on value change with functionName', function() { it('Update target on value change with functionName', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('functionName', 'testfunc'); view.model.set('functionName', 'testfunc');
view.model.set('value', propValue); view.model.set('value', propValue);
@ -100,7 +100,7 @@ module.exports = {
expect(compStyle).toEqual(assertStyle); expect(compStyle).toEqual(assertStyle);
}); });
it('Clean target from the property if its value is empty', function() { it('Clean target from the property if its value is empty', () => {
view.selectedComponent = component; view.selectedComponent = component;
view.model.set('value', propValue); view.model.set('value', propValue);
view.model.set('value', ''); view.model.set('value', '');
@ -108,7 +108,7 @@ module.exports = {
expect(compStyle).toEqual({}); expect(compStyle).toEqual({});
}); });
it('Check stylable element', function() { it('Check stylable element', () => {
view.selectedComponent = component; view.selectedComponent = component;
expect(view.isTargetStylable()).toEqual(true); expect(view.isTargetStylable()).toEqual(true);
component.set('stylable', false); component.set('stylable', false);
@ -121,12 +121,12 @@ module.exports = {
expect(view.isTargetStylable()).toEqual(false); expect(view.isTargetStylable()).toEqual(false);
}); });
it('Target style is empty without values', function() { it('Target style is empty without values', () => {
view.selectedComponent = component; view.selectedComponent = component;
expect(view.getComponentValue()).toNotExist(); expect(view.getComponentValue()).toNotExist();
}); });
it('Target style is correct', function() { it('Target style is correct', () => {
view.selectedComponent = component; view.selectedComponent = component;
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
@ -134,7 +134,7 @@ module.exports = {
expect(view.getComponentValue()).toEqual(propValue); expect(view.getComponentValue()).toEqual(propValue);
}); });
it('Target style is empty with an other style', function() { it('Target style is empty with an other style', () => {
view.selectedComponent = component; view.selectedComponent = component;
var style = {}; var style = {};
style[propName + '2'] = propValue; style[propName + '2'] = propValue;
@ -142,7 +142,7 @@ module.exports = {
expect(view.getComponentValue()).toNotExist(); expect(view.getComponentValue()).toNotExist();
}); });
it('Fetch value from function', function() { it('Fetch value from function', () => {
view.selectedComponent = component; view.selectedComponent = component;
var style = {}; var style = {};
style[propName] = 'testfun(' + propValue + ')'; style[propName] = 'testfun(' + propValue + ')';
@ -151,33 +151,33 @@ module.exports = {
expect(view.getComponentValue()).toEqual(propValue); expect(view.getComponentValue()).toEqual(propValue);
}); });
describe('With target setted', function() { describe('With target setted', () => {
beforeEach(function () { beforeEach(() => {
target.model = component; target.model = component;
view = new PropertyView({ view = new PropertyView({
model: model, model,
propTarget: target propTarget: target
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('updateTargetStyle', function() { it('updateTargetStyle', () => {
view.updateTargetStyle(propValue); view.updateTargetStyle(propValue);
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
expect(component.get('style')).toEqual(style); expect(component.get('style')).toEqual(style);
}); });
it('updateTargetStyle with custom property', function() { it('updateTargetStyle with custom property', () => {
view.updateTargetStyle(propValue, propName + '2'); view.updateTargetStyle(propValue, propName + '2');
var style = {}; var style = {};
style[propName + '2'] = propValue; style[propName + '2'] = propValue;
expect(component.get('style')).toEqual(style); expect(component.get('style')).toEqual(style);
}); });
it('Update value and input on target swap', function() { it('Update value and input on target swap', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -186,7 +186,7 @@ module.exports = {
expect(view.$input.val()).toEqual(propValue); expect(view.$input.val()).toEqual(propValue);
}); });
it('Update value after multiple swaps', function() { it('Update value after multiple swaps', () => {
var style = {}; var style = {};
style[propName] = propValue; style[propName] = propValue;
component.set('style', style); component.set('style', style);
@ -200,30 +200,30 @@ module.exports = {
}) })
describe('Init property', function() { describe('Init property', () => {
beforeEach(function () { beforeEach(() => {
component = new Component(); component = new Component();
model = new Property({ model = new Property({
property: propName, property: propName,
defaults: defValue defaults: defValue
}); });
view = new PropertyView({ view = new PropertyView({
model: model model
}); });
$fixture.empty().appendTo($fixtures); $fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el); $fixture.html(view.render().el);
}); });
it('Value as default', function() { it('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.get('value')).toEqual(defValue);
}); });
it('Placeholder as default', function() { it('Placeholder as default', () => {
expect(view.$input.attr('placeholder')).toEqual(defValue); expect(view.$input.attr('placeholder')).toEqual(defValue);
}); });
it('Input value is empty', function() { it('Input value is empty', () => {
expect(view.$input.val()).toEqual(defValue); expect(view.$input.val()).toEqual(defValue);
}); });

34
test/specs/style_manager/view/SectorView.js
View File

@ -2,38 +2,38 @@ const SectorView = require('style_manager/view/SectorView');
const Sector = require('style_manager/model/Sector'); const Sector = require('style_manager/model/Sector');
module.exports = { module.exports = {
run : function(){ run() {
describe('SectorView', function() { describe('SectorView', () => {
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="sector-fixture"></div>'); $fixture = $('<div class="sector-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
model = new Sector(); model = new Sector();
view = new SectorView({ view = new SectorView({
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('Rendered correctly', function() { it('Rendered correctly', () => {
var sector = view.el; var sector = view.el;
expect(sector.querySelector('.title')).toExist(); expect(sector.querySelector('.title')).toExist();
var props = sector.querySelector('.properties'); var props = sector.querySelector('.properties');
@ -41,12 +41,12 @@ module.exports = {
expect(sector.classList.contains('open')).toEqual(true); expect(sector.classList.contains('open')).toEqual(true);
}); });
it('No properties', function() { it('No properties', () => {
var props = view.el.querySelector('.properties'); var props = view.el.querySelector('.properties');
expect(props.innerHTML).toEqual('<div class="clear"></div>'); expect(props.innerHTML).toEqual('<div class="clear"></div>');
}); });
it('Update on open', function() { it('Update on open', () => {
var sector = view.el; var sector = view.el;
var props = sector.querySelector('.properties'); var props = sector.querySelector('.properties');
model.set('open', false); model.set('open', false);
@ -54,15 +54,15 @@ module.exports = {
expect(props.style.display).toEqual('none'); expect(props.style.display).toEqual('none');
}); });
it('Toggle on click', function() { it('Toggle on click', () => {
var sector = view.el; var sector = view.el;
view.$el.find('.title').click(); view.$el.find('.title').click();
expect(sector.classList.contains('open')).toEqual(false); expect(sector.classList.contains('open')).toEqual(false);
}); });
describe('Init with options', function() { describe('Init with options', () => {
beforeEach(function () { beforeEach(() => {
model = new Sector({ model = new Sector({
open: false, open: false,
name: 'TestName', name: 'TestName',
@ -73,17 +73,17 @@ module.exports = {
] ]
}); });
view = new SectorView({ view = new SectorView({
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();
}); });
it('Rendered correctly2', function() { it('Rendered correctly2', () => {
var sector = view.el; var sector = view.el;
var props = sector.querySelector('.properties'); var props = sector.querySelector('.properties');
expect(sector.querySelector('.title').innerHTML).toContain('TestName'); expect(sector.querySelector('.title').innerHTML).toContain('TestName');
@ -92,7 +92,7 @@ module.exports = {
expect(props.style.display).toEqual('none'); expect(props.style.display).toEqual('none');
}); });
it('Has properties', function() { it('Has properties', () => {
var props = view.el.querySelector('.properties'); var props = view.el.querySelector('.properties');
expect(props.children.length).toEqual(4); // Last one is 'clear' element expect(props.children.length).toEqual(4); // Last one is 'clear' element
}); });

16
test/specs/style_manager/view/SectorsView.js
View File

@ -2,21 +2,21 @@ const SectorsView = require('style_manager/view/SectorsView');
const Sectors = require('style_manager/model/Sectors'); const Sectors = require('style_manager/model/Sectors');
module.exports = { module.exports = {
run : function(){ run() {
describe('SectorsView', function() { describe('SectorsView', () => {
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="sectors-fixture"></div>'); $fixture = $('<div class="sectors-fixture"></div>');
}); });
beforeEach(function () { beforeEach(() => {
model = new Sectors([]); model = new Sectors([]);
view = new SectorsView({ view = new SectorsView({
collection: model collection: model
@ -25,19 +25,19 @@ 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.innerHTML).toEqual(''); expect(view.el.innerHTML).toEqual('');
}); });
it("Add new sectors", function (){ it("Add new sectors", () => {
view.collection.add([{}, {}]); view.collection.add([{}, {}]);
expect(view.el.children.length).toEqual(2); expect(view.el.children.length).toEqual(2);
}); });

8
test/specs/test_utils.js
View File

@ -1,15 +1,15 @@
module.exports = { module.exports = {
storageMock: function() { storageMock() {
var db = {}; var db = {};
return { return {
id: 'testStorage', id: 'testStorage',
store: function(data){ store(data) {
db = data; db = data;
}, },
load: function(keys){ load(keys) {
return db; return db;
}, },
getDb: function(){ getDb() {
return db; return db;
}, },
}; };

Write Preview
Loading…
Cancel
Save