From 2fb97ab8f9e8fd6459304cb18c600d3aff167547 Mon Sep 17 00:00:00 2001 From: Tom Sherman Date: Sat, 19 Oct 2019 16:30:08 +0100 Subject: [PATCH 1/2] Use jest runner --- package.json | 3 + test/main.test.js | 28 - test/specs/asset_manager/index.js | 9 - test/specs/asset_manager/model/Asset.js | 52 +- test/specs/asset_manager/model/AssetImage.js | 34 +- test/specs/asset_manager/model/Assets.js | 34 +- .../asset_manager/view/AssetImageView.js | 112 +- test/specs/asset_manager/view/AssetView.js | 58 +- test/specs/asset_manager/view/AssetsView.js | 136 +- test/specs/asset_manager/view/FileUploader.js | 150 +- test/specs/block_manager/index.js | 2 - test/specs/block_manager/view/BlocksView.js | 124 +- test/specs/code_manager/index.js | 2 - test/specs/code_manager/model/CodeModels.js | 672 +++-- test/specs/commands/index.js | 3 - test/specs/commands/model/CommandModels.js | 66 +- test/specs/commands/view/CommandAbstract.js | 144 +- test/specs/css_composer/e2e/CssComposer.js | 368 ++- test/specs/css_composer/index.js | 7 +- test/specs/css_composer/model/CssModels.js | 238 +- test/specs/css_composer/view/CssRuleView.js | 150 +- test/specs/css_composer/view/CssRulesView.js | 186 +- test/specs/device_manager/index.js | 2 - test/specs/device_manager/view/DevicesView.js | 116 +- test/specs/dom_components/index.js | 11 +- test/specs/dom_components/model/Component.js | 1311 +++++----- .../dom_components/view/ComponentImageView.js | 60 +- .../dom_components/view/ComponentTextView.js | 72 +- test/specs/dom_components/view/ComponentV.js | 276 +- .../dom_components/view/ComponentsView.js | 76 +- test/specs/modal/index.js | 2 - test/specs/modal/view/ModalView.js | 104 +- test/specs/panels/e2e/PanelsE2e.js | 120 +- test/specs/panels/index.js | 10 - test/specs/panels/model/PanelModels.js | 244 +- test/specs/panels/view/ButtonView.js | 148 +- test/specs/panels/view/ButtonsView.js | 62 +- test/specs/panels/view/PanelView.js | 118 +- test/specs/panels/view/PanelsView.js | 64 +- test/specs/parser/index.js | 7 - test/specs/parser/model/ParserCss.js | 981 ++++--- test/specs/parser/model/ParserHtml.js | 925 ++++--- .../selector_manager/e2e/ClassManager.js | 232 +- test/specs/selector_manager/index.js | 12 - .../selector_manager/model/SelectorModels.js | 100 +- .../selector_manager/view/ClassTagView.js | 162 +- .../selector_manager/view/ClassTagsView.js | 400 ++- test/specs/storage_manager/index.js | 2 - test/specs/storage_manager/model/Models.js | 308 ++- test/specs/style_manager/index.js | 15 - test/specs/style_manager/model/Models.js | 2254 ++++++++--------- test/specs/style_manager/view/LayerView.js | 106 +- .../style_manager/view/PropertyColorView.js | 304 ++- .../view/PropertyCompositeView.js | 450 ++-- .../style_manager/view/PropertyIntegerView.js | 376 ++- .../style_manager/view/PropertyRadioView.js | 342 ++- .../style_manager/view/PropertySelectView.js | 360 ++- .../style_manager/view/PropertyStackView.js | 214 +- test/specs/style_manager/view/PropertyView.js | 414 ++- test/specs/style_manager/view/SectorView.js | 150 +- test/specs/style_manager/view/SectorsView.js | 52 +- test/specs/trait_manager/index.js | 20 - test/specs/trait_manager/model/TraitsModel.js | 40 +- test/specs/trait_manager/view/TraitsView.js | 114 +- test/specs/utils/Sorter.js | 865 ++++--- test/specs/utils/main.js | 9 - test/{specs => }/test_utils.js | 0 67 files changed, 7105 insertions(+), 7483 deletions(-) delete mode 100644 test/main.test.js delete mode 100644 test/specs/parser/index.js delete mode 100644 test/specs/trait_manager/index.js delete mode 100644 test/specs/utils/main.js rename test/{specs => }/test_utils.js (100%) diff --git a/package.json b/package.json index 0998402ff..15cb3e76d 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,9 @@ "modulePaths": [ "./src" ], + "testMatch": [ + "/test/specs/**/*.js" + ], "setupFiles": [ "/test/setup.js" ], diff --git a/test/main.test.js b/test/main.test.js deleted file mode 100644 index c53467018..000000000 --- a/test/main.test.js +++ /dev/null @@ -1,28 +0,0 @@ -import grapesjs from './../src'; - -describe('Main', () => { - describe('Startup', () => { - test('Main object should be loaded', () => { - expect(grapesjs).toBeTruthy(); - }); - }); - - const path = './specs/'; - require(`${path}keymaps`); - require(`${path}asset_manager`); - require(`${path}block_manager`); - require(`${path}code_manager`); - require(`${path}commands`); - require(`${path}css_composer`); - require(`${path}device_manager`); - require(`${path}dom_components`); - require(`${path}modal`); - require(`${path}panels`); - require(`${path}parser`); - require(`${path}plugin_manager`); - require(`${path}selector_manager`); - require(`${path}storage_manager`); - require(`${path}style_manager`); - require(`${path}trait_manager`); - require(`${path}grapesjs`); -}); diff --git a/test/specs/asset_manager/index.js b/test/specs/asset_manager/index.js index a092a5ded..d4a0aa8f0 100644 --- a/test/specs/asset_manager/index.js +++ b/test/specs/asset_manager/index.js @@ -114,13 +114,4 @@ describe('Asset Manager', () => { }); }); }); - - require('./model/Asset').run(); - require('./model/AssetImage').run(); - require('./model/Assets').run(); - - require('./view/AssetView').run(); - require('./view/AssetImageView').run(); - require('./view/AssetsView').run(); - require('./view/FileUploader').run(); }); diff --git a/test/specs/asset_manager/model/Asset.js b/test/specs/asset_manager/model/Asset.js index 0f424d60f..95532b497 100644 --- a/test/specs/asset_manager/model/Asset.js +++ b/test/specs/asset_manager/model/Asset.js @@ -1,33 +1,29 @@ import Asset from 'asset_manager/model/Asset'; -module.exports = { - run() { - describe('Asset', () => { - test('Object exists', () => { - expect(Asset).toBeTruthy(); - }); +describe('Asset', () => { + test('Object exists', () => { + expect(Asset).toBeTruthy(); + }); - test('Has default values', () => { - var obj = new Asset({}); - expect(obj.get('type')).toBeFalsy(); - expect(obj.get('src')).toBeFalsy(); - expect(obj.getExtension()).toBeFalsy(); - expect(obj.getFilename()).toBeFalsy(); - }); + test('Has default values', () => { + var obj = new Asset({}); + expect(obj.get('type')).toBeFalsy(); + expect(obj.get('src')).toBeFalsy(); + expect(obj.getExtension()).toBeFalsy(); + expect(obj.getFilename()).toBeFalsy(); + }); - test('Test getFilename', () => { - var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' }); - expect(obj.getFilename()).toEqual('t.e.s.t'); - var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc' }); - expect(obj.getFilename()).toEqual('1234abc'); - }); + test('Test getFilename', () => { + var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' }); + expect(obj.getFilename()).toEqual('t.e.s.t'); + var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc' }); + expect(obj.getFilename()).toEqual('1234abc'); + }); - test('Test getExtension', () => { - var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' }); - expect(obj.getExtension()).toEqual('t'); - var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc.' }); - expect(obj.getExtension()).toEqual(''); - }); - }); - } -}; + test('Test getExtension', () => { + var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' }); + expect(obj.getExtension()).toEqual('t'); + var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc.' }); + expect(obj.getExtension()).toEqual(''); + }); +}); diff --git a/test/specs/asset_manager/model/AssetImage.js b/test/specs/asset_manager/model/AssetImage.js index d9ce822fe..6635e3f44 100644 --- a/test/specs/asset_manager/model/AssetImage.js +++ b/test/specs/asset_manager/model/AssetImage.js @@ -1,22 +1,18 @@ import AssetImage from 'asset_manager/model/AssetImage'; -module.exports = { - run() { - describe('AssetImage', () => { - test('Object exists', () => { - expect(AssetImage).toBeTruthy(); - }); +describe('AssetImage', () => { + test('Object exists', () => { + expect(AssetImage).toBeTruthy(); + }); - test('Has default values', () => { - var obj = new AssetImage({}); - expect(obj.get('type')).toEqual('image'); - expect(obj.get('src')).toBeFalsy(); - expect(obj.get('unitDim')).toEqual('px'); - expect(obj.get('height')).toEqual(0); - expect(obj.get('width')).toEqual(0); - expect(obj.getExtension()).toBeFalsy(); - expect(obj.getFilename()).toBeFalsy(); - }); - }); - } -}; + test('Has default values', () => { + var obj = new AssetImage({}); + expect(obj.get('type')).toEqual('image'); + expect(obj.get('src')).toBeFalsy(); + expect(obj.get('unitDim')).toEqual('px'); + expect(obj.get('height')).toEqual(0); + expect(obj.get('width')).toEqual(0); + expect(obj.getExtension()).toBeFalsy(); + expect(obj.getFilename()).toBeFalsy(); + }); +}); diff --git a/test/specs/asset_manager/model/Assets.js b/test/specs/asset_manager/model/Assets.js index 71c41648f..24958d66b 100644 --- a/test/specs/asset_manager/model/Assets.js +++ b/test/specs/asset_manager/model/Assets.js @@ -1,25 +1,21 @@ import Assets from 'asset_manager/model/Assets'; -module.exports = { - run() { - describe('Assets', () => { - var obj; +describe('Assets', () => { + var obj; - beforeEach(() => { - obj = new Assets(); - }); + beforeEach(() => { + obj = new Assets(); + }); - afterEach(() => { - obj = null; - }); + afterEach(() => { + obj = null; + }); - test('Object exists', () => { - expect(obj).toBeTruthy(); - }); + test('Object exists', () => { + expect(obj).toBeTruthy(); + }); - test('Collection is empty', () => { - expect(obj.length).toEqual(0); - }); - }); - } -}; + test('Collection is empty', () => { + expect(obj.length).toEqual(0); + }); +}); diff --git a/test/specs/asset_manager/view/AssetImageView.js b/test/specs/asset_manager/view/AssetImageView.js index 8fb1c15e9..bb6e532c9 100644 --- a/test/specs/asset_manager/view/AssetImageView.js +++ b/test/specs/asset_manager/view/AssetImageView.js @@ -1,70 +1,66 @@ import AssetImageView from 'asset_manager/view/AssetImageView'; import Assets from 'asset_manager/model/Assets'; -module.exports = { - run() { - let obj; +let obj; - describe('AssetImageView', () => { - beforeEach(() => { - var coll = new Assets(); - var model = coll.add({ type: 'image', src: '/test' }); - obj = new AssetImageView({ - collection: new Assets(), - config: {}, - model - }); - document.body.innerHTML = '
'; - document.body.querySelector('#fixtures').appendChild(obj.render().el); - }); +describe('AssetImageView', () => { + beforeEach(() => { + var coll = new Assets(); + var model = coll.add({ type: 'image', src: '/test' }); + obj = new AssetImageView({ + collection: new Assets(), + config: {}, + model + }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(obj.render().el); + }); - afterEach(() => { - obj = null; - document.body.innerHTML = ''; - }); + afterEach(() => { + obj = null; + document.body.innerHTML = ''; + }); - test('Object exists', () => { - expect(AssetImageView).toBeTruthy(); - }); + test('Object exists', () => { + expect(AssetImageView).toBeTruthy(); + }); - describe('Asset should be rendered correctly', () => { - test('Has preview box', () => { - var $asset = obj.$el; - expect($asset.find('.preview').length).toEqual(1); - }); + describe('Asset should be rendered correctly', () => { + test('Has preview box', () => { + var $asset = obj.$el; + expect($asset.find('.preview').length).toEqual(1); + }); - test('Has meta box', () => { - var $asset = obj.$el; - expect($asset.find('.meta').length).toEqual(1); - }); + test('Has meta box', () => { + var $asset = obj.$el; + expect($asset.find('.meta').length).toEqual(1); + }); - test('Has close button', () => { - var $asset = obj.$el; - expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1); - }); - }); + test('Has close button', () => { + var $asset = obj.$el; + expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1); + }); + }); - test('Could be selected', () => { - var spy = jest.spyOn(obj, 'updateTarget'); - obj.$el.trigger('click'); - expect(obj.$el.attr('class')).toContain('highlight'); - expect(spy).toHaveBeenCalled(); - }); + test('Could be selected', () => { + var spy = jest.spyOn(obj, 'updateTarget'); + obj.$el.trigger('click'); + expect(obj.$el.attr('class')).toContain('highlight'); + expect(spy).toHaveBeenCalled(); + }); - test('Could be chosen', () => { - sinon.stub(obj, 'updateTarget'); - var spy = jest.spyOn(obj, 'updateTarget'); - obj.$el.trigger('dblclick'); - expect(spy).toHaveBeenCalled(); - //obj.updateTarget.calledOnce.should.equal(true); - }); + test('Could be chosen', () => { + sinon.stub(obj, 'updateTarget'); + var spy = jest.spyOn(obj, 'updateTarget'); + obj.$el.trigger('dblclick'); + expect(spy).toHaveBeenCalled(); + //obj.updateTarget.calledOnce.should.equal(true); + }); - test('Could be removed', () => { - var spy = sinon.spy(); - obj.model.on('remove', spy); - obj.onRemove({ stopImmediatePropagation() {} }); - expect(spy.called).toEqual(true); - }); - }); - } -}; + test('Could be removed', () => { + var spy = sinon.spy(); + obj.model.on('remove', spy); + obj.onRemove({ stopImmediatePropagation() {} }); + expect(spy.called).toEqual(true); + }); +}); diff --git a/test/specs/asset_manager/view/AssetView.js b/test/specs/asset_manager/view/AssetView.js index 22d2a1811..65a81b930 100644 --- a/test/specs/asset_manager/view/AssetView.js +++ b/test/specs/asset_manager/view/AssetView.js @@ -1,39 +1,35 @@ import Assets from 'asset_manager/model/Assets'; import AssetView from 'asset_manager/view/AssetView'; -module.exports = { - run() { - describe('AssetView', () => { - let testContext; +describe('AssetView', () => { + let testContext; - beforeEach(() => { - testContext = {}; - }); + beforeEach(() => { + testContext = {}; + }); - beforeEach(() => { - var coll = new Assets(); - var model = coll.add({ src: 'test' }); - testContext.view = new AssetView({ - config: {}, - model - }); - document.body.innerHTML = '
'; - document.body - .querySelector('#fixtures') - .appendChild(testContext.view.render().el); - }); + beforeEach(() => { + var coll = new Assets(); + var model = coll.add({ src: 'test' }); + testContext.view = new AssetView({ + config: {}, + model + }); + document.body.innerHTML = '
'; + document.body + .querySelector('#fixtures') + .appendChild(testContext.view.render().el); + }); - afterEach(() => { - testContext.view.remove(); - }); + afterEach(() => { + testContext.view.remove(); + }); - test('Object exists', () => { - expect(AssetView).toBeTruthy(); - }); + test('Object exists', () => { + expect(AssetView).toBeTruthy(); + }); - test('Has correct prefix', () => { - expect(testContext.view.pfx).toEqual(''); - }); - }); - } -}; + test('Has correct prefix', () => { + expect(testContext.view.pfx).toEqual(''); + }); +}); diff --git a/test/specs/asset_manager/view/AssetsView.js b/test/specs/asset_manager/view/AssetsView.js index ae580e7c4..328bbc188 100644 --- a/test/specs/asset_manager/view/AssetsView.js +++ b/test/specs/asset_manager/view/AssetsView.js @@ -2,86 +2,82 @@ import AssetsView from 'asset_manager/view/AssetsView'; import FileUploader from 'asset_manager/view/FileUploader'; import Assets from 'asset_manager/model/Assets'; -module.exports = { - run() { - describe('AssetsView', () => { - var obj; - var coll; +describe('AssetsView', () => { + var obj; + var coll; - beforeEach(() => { - coll = new Assets([]); - obj = new AssetsView({ - config: {}, - collection: coll, - globalCollection: new Assets([]), - fu: new FileUploader({}) - }); - obj = obj; - document.body.innerHTML = '
'; - obj.render(); - document.body.querySelector('#fixtures').appendChild(obj.el); - }); + beforeEach(() => { + coll = new Assets([]); + obj = new AssetsView({ + config: {}, + collection: coll, + globalCollection: new Assets([]), + fu: new FileUploader({}) + }); + obj = obj; + document.body.innerHTML = '
'; + obj.render(); + document.body.querySelector('#fixtures').appendChild(obj.el); + }); - afterEach(() => { - obj.collection.reset(); - }); + afterEach(() => { + obj.collection.reset(); + }); - test('Object exists', () => { - expect(AssetsView).toBeTruthy(); - }); + test('Object exists', () => { + expect(AssetsView).toBeTruthy(); + }); - test('Collection is empty', () => { - expect(obj.getAssetsEl().innerHTML).toBeFalsy(); - }); + test('Collection is empty', () => { + expect(obj.getAssetsEl().innerHTML).toBeFalsy(); + }); - test('Add new asset', () => { - sinon.stub(obj, 'addAsset'); - coll.add({ src: 'test' }); - expect(obj.addAsset.calledOnce).toEqual(true); - }); + test('Add new asset', () => { + sinon.stub(obj, 'addAsset'); + coll.add({ src: 'test' }); + expect(obj.addAsset.calledOnce).toEqual(true); + }); - test('Render new asset', () => { - coll.add({ src: 'test' }); - expect(obj.getAssetsEl().innerHTML).toBeTruthy(); - }); + test('Render new asset', () => { + coll.add({ src: 'test' }); + expect(obj.getAssetsEl().innerHTML).toBeTruthy(); + }); - test('Render correctly new image asset', () => { - coll.add({ type: 'image', src: 'test' }); - var asset = obj.getAssetsEl().firstChild; - expect(asset.tagName).toEqual('DIV'); - expect(asset.innerHTML).toBeTruthy(); - }); + test('Render correctly new image asset', () => { + coll.add({ type: 'image', src: 'test' }); + var asset = obj.getAssetsEl().firstChild; + expect(asset.tagName).toEqual('DIV'); + expect(asset.innerHTML).toBeTruthy(); + }); - test('Clean collection from asset', () => { - var model = coll.add({ src: 'test' }); - coll.remove(model); - expect(obj.getAssetsEl().innerHTML).toBeFalsy(); - }); + test('Clean collection from asset', () => { + var model = coll.add({ src: 'test' }); + coll.remove(model); + expect(obj.getAssetsEl().innerHTML).toBeFalsy(); + }); - test('Deselect works', () => { - coll.add([{}, {}]); - var $asset = obj.$el.children().first(); - $asset.attr('class', obj.pfx + 'highlight'); - coll.trigger('deselectAll'); - expect($asset.attr('class')).toBeFalsy(); - }); + test('Deselect works', () => { + coll.add([{}, {}]); + var $asset = obj.$el.children().first(); + $asset.attr('class', obj.pfx + 'highlight'); + coll.trigger('deselectAll'); + expect($asset.attr('class')).toBeFalsy(); + }); - test('Returns not empty assets element', () => { - expect(obj.getAssetsEl()).toBeTruthy(); - }); + test('Returns not empty assets element', () => { + expect(obj.getAssetsEl()).toBeTruthy(); + }); - test('Returns not empty url input', () => { - expect(obj.getAddInput()).toBeTruthy(); - }); + test('Returns not empty url input', () => { + expect(obj.getAddInput()).toBeTruthy(); + }); - test('Add image asset from input string', () => { - obj.getAddInput().value = 'test'; - obj.handleSubmit({ - preventDefault() {} - }); - var asset = obj.options.globalCollection.at(0); - expect(asset.get('src')).toEqual('test'); - }); + test('Add image asset from input string', () => { + obj.getAddInput().value = 'test'; + obj.handleSubmit({ + preventDefault() {} }); - } -}; + var asset = obj.options.globalCollection.at(0); + expect(asset.get('src')).toEqual('test'); + }); +}); diff --git a/test/specs/asset_manager/view/FileUploader.js b/test/specs/asset_manager/view/FileUploader.js index f8e97b833..914dd9b47 100644 --- a/test/specs/asset_manager/view/FileUploader.js +++ b/test/specs/asset_manager/view/FileUploader.js @@ -1,97 +1,85 @@ import FileUploader from 'asset_manager/view/FileUploader'; -module.exports = { - run() { - describe('File Uploader', () => { - let obj; +describe('File Uploader', () => { + let obj; - beforeEach(() => { - obj = new FileUploader({ config: {} }); - document.body.innerHTML = '
'; - document.body.querySelector('#fixtures').appendChild(obj.render().el); - }); + beforeEach(() => { + obj = new FileUploader({ config: {} }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(obj.render().el); + }); - afterEach(() => { - obj.remove(); - }); + afterEach(() => { + obj.remove(); + }); - test('Object exists', () => { - expect(FileUploader).toBeTruthy(); - }); + test('Object exists', () => { + expect(FileUploader).toBeTruthy(); + }); - test('Has correct prefix', () => { - expect(obj.pfx).toBeFalsy(); - }); + test('Has correct prefix', () => { + expect(obj.pfx).toBeFalsy(); + }); - describe('Should be rendered correctly', () => { - test('Has title', () => { - expect(obj.$el.find('#title').length).toEqual(1); - }); + describe('Should be rendered correctly', () => { + test('Has title', () => { + expect(obj.$el.find('#title').length).toEqual(1); + }); - test('Title is empty', () => { - expect(obj.$el.find('#title').html()).toEqual(''); - }); + test('Title is empty', () => { + expect(obj.$el.find('#title').html()).toEqual(''); + }); - test('Has file input', () => { - expect(obj.$el.find('input[type=file]').length).toEqual(1); - }); + test('Has file input', () => { + expect(obj.$el.find('input[type=file]').length).toEqual(1); + }); - test('File input is enabled', () => { - expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual( - true - ); - }); - }); + test('File input is enabled', () => { + expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual(true); + }); + }); - describe('Interprets configurations correctly', () => { - test('Has correct title', () => { - var view = new FileUploader({ - config: { - uploadText: 'Test' - } - }); - view.render(); - expect(view.$el.find('#title').html()).toEqual('Test'); - }); + describe('Interprets configurations correctly', () => { + test('Has correct title', () => { + var view = new FileUploader({ + config: { + uploadText: 'Test' + } + }); + view.render(); + expect(view.$el.find('#title').html()).toEqual('Test'); + }); - test('Could be disabled', () => { - var view = new FileUploader({ - config: { - disableUpload: true, - upload: 'something' - } - }); - view.render(); - expect(view.$el.find('input[type=file]').prop('disabled')).toEqual( - true - ); - }); + test('Could be disabled', () => { + var view = new FileUploader({ + config: { + disableUpload: true, + upload: 'something' + } + }); + view.render(); + expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(true); + }); - test('Handles multiUpload false', () => { - var view = new FileUploader({ - config: { - multiUpload: false - } - }); - view.render(); - expect( - view.$el.find('input[type=file]').prop('multiple') - ).toBeFalsy(); - }); + test('Handles multiUpload false', () => { + var view = new FileUploader({ + config: { + multiUpload: false + } + }); + view.render(); + expect(view.$el.find('input[type=file]').prop('multiple')).toBeFalsy(); + }); - test('Handles embedAsBase64 parameter', () => { - var view = new FileUploader({ - config: { - embedAsBase64: true - } - }); - view.render(); - expect(view.$el.find('input[type=file]').prop('disabled')).toEqual( - false - ); - expect(view.uploadFile).toEqual(FileUploader.embedAsBase64); - }); + test('Handles embedAsBase64 parameter', () => { + var view = new FileUploader({ + config: { + embedAsBase64: true + } }); + view.render(); + expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(false); + expect(view.uploadFile).toEqual(FileUploader.embedAsBase64); }); - } -}; + }); +}); diff --git a/test/specs/block_manager/index.js b/test/specs/block_manager/index.js index edf31b391..89378416d 100644 --- a/test/specs/block_manager/index.js +++ b/test/specs/block_manager/index.js @@ -67,6 +67,4 @@ describe('BlockManager', () => { expect(obj.getContainer()).toBeTruthy(); }); }); - - BlocksView.run(); }); diff --git a/test/specs/block_manager/view/BlocksView.js b/test/specs/block_manager/view/BlocksView.js index 962e9012b..f1178f068 100644 --- a/test/specs/block_manager/view/BlocksView.js +++ b/test/specs/block_manager/view/BlocksView.js @@ -2,78 +2,72 @@ import Backbone from 'backbone'; import BlocksView from 'block_manager/view/BlocksView'; import Blocks from 'block_manager/model/Blocks'; -module.exports = { - run() { - describe('BlocksView', () => { - var $fixtures; - var $fixture; - var model; - var view; - var editorModel; - var ppfx; +describe('BlocksView', () => { + var $fixtures; + var $fixture; + var model; + var view; + var editorModel; + var ppfx; - beforeEach(() => { - model = new Blocks([]); - view = new BlocksView({ collection: model }); - document.body.innerHTML = '
'; - document.body.querySelector('#fixtures').appendChild(view.render().el); - }); + beforeEach(() => { + model = new Blocks([]); + view = new BlocksView({ collection: model }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(view.render().el); + }); - afterEach(() => { - view.collection.reset(); - }); + afterEach(() => { + view.collection.reset(); + }); - test('The container is not empty', () => { - expect(view.el.outerHTML).toBeTruthy(); - }); + test('The container is not empty', () => { + expect(view.el.outerHTML).toBeTruthy(); + }); - test('No children inside', () => { - expect(view.getBlocksEl().children.length).toEqual(0); - }); + test('No children inside', () => { + expect(view.getBlocksEl().children.length).toEqual(0); + }); - test('Render children on add', () => { - model.add({}); - expect(view.getBlocksEl().children.length).toEqual(1); - model.add([{}, {}]); - expect(view.getBlocksEl().children.length).toEqual(3); - }); + test('Render children on add', () => { + model.add({}); + expect(view.getBlocksEl().children.length).toEqual(1); + model.add([{}, {}]); + expect(view.getBlocksEl().children.length).toEqual(3); + }); - test('Destroy children on remove', () => { - model.add([{}, {}]); - expect(view.getBlocksEl().children.length).toEqual(2); - model.at(0).destroy(); - expect(view.getBlocksEl().children.length).toEqual(1); - }); + test('Destroy children on remove', () => { + model.add([{}, {}]); + expect(view.getBlocksEl().children.length).toEqual(2); + model.at(0).destroy(); + expect(view.getBlocksEl().children.length).toEqual(1); + }); - describe('With configs', () => { - beforeEach(() => { - ppfx = 'pfx-t-'; - editorModel = new Backbone.Model(); - model = new Blocks([{ name: 'test1' }, { name: 'test2' }]); - view = new BlocksView( - { - collection: model - }, - { - pStylePrefix: ppfx - } - ); - document.body.innerHTML = '
'; - document.body - .querySelector('#fixtures') - .appendChild(view.render().el); - }); + describe('With configs', () => { + beforeEach(() => { + ppfx = 'pfx-t-'; + editorModel = new Backbone.Model(); + model = new Blocks([{ name: 'test1' }, { name: 'test2' }]); + view = new BlocksView( + { + collection: model + }, + { + pStylePrefix: ppfx + } + ); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(view.render().el); + }); - test('Render children', () => { - expect(view.getBlocksEl().children.length).toEqual(2); - }); + test('Render children', () => { + expect(view.getBlocksEl().children.length).toEqual(2); + }); - test('Render container', () => { - expect(view.getBlocksEl().getAttribute('class')).toEqual( - ppfx + 'blocks-c' - ); - }); - }); + test('Render container', () => { + expect(view.getBlocksEl().getAttribute('class')).toEqual( + ppfx + 'blocks-c' + ); }); - } -}; + }); +}); diff --git a/test/specs/code_manager/index.js b/test/specs/code_manager/index.js index 02fe9462b..7975d6dee 100644 --- a/test/specs/code_manager/index.js +++ b/test/specs/code_manager/index.js @@ -35,6 +35,4 @@ describe('Code Manager', () => { expect(obj.getViewer('test')).toEqual('view'); }); }); - - Models.run(); }); diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js index 50107af1b..72b3a6005 100644 --- a/test/specs/code_manager/model/CodeModels.js +++ b/test/specs/code_manager/model/CodeModels.js @@ -5,343 +5,339 @@ import Component from 'dom_components/model/Component'; import Editor from 'editor/model/Editor'; import CssComposer from 'css_composer'; -module.exports = { - run() { - let comp; - let dcomp; - let obj; - let em; - let cc; - - describe('HtmlGenerator', () => { - beforeEach(() => { - em = new Editor(); - obj = new HtmlGenerator(); - dcomp = new DomComponents(); - comp = new Component( - {}, - { - em, - componentTypes: dcomp.componentTypes - } - ); - }); - - afterEach(() => { - obj = null; - }); - - test('Build correctly one component', () => { - expect(obj.build(comp)).toEqual(''); - }); - - test('Build correctly empty component inside', () => { - var m1 = comp.get('components').add({}); - expect(obj.build(comp)).toEqual('
'); - }); - - test('Build correctly not empty component inside', () => { - var m1 = comp.get('components').add({ - tagName: 'article', - attributes: { - 'data-test1': 'value1', - 'data-test2': 'value2' - } - }); - expect(obj.build(comp)).toEqual( - '
' - ); - }); - - test('Build correctly component with classes', () => { - var m1 = comp.get('components').add({ - tagName: 'article', - attributes: { - 'data-test1': 'value1', - 'data-test2': 'value2' - } - }); - ['class1', 'class2'].forEach(item => { - m1.get('classes').add({ name: item }); - }); - expect(obj.build(comp)).toEqual( - '
' - ); - }); +let comp; +let dcomp; +let obj; +let em; +let cc; + +describe('HtmlGenerator', () => { + beforeEach(() => { + em = new Editor(); + obj = new HtmlGenerator(); + dcomp = new DomComponents(); + comp = new Component( + {}, + { + em, + componentTypes: dcomp.componentTypes + } + ); + }); + + afterEach(() => { + obj = null; + }); + + test('Build correctly one component', () => { + expect(obj.build(comp)).toEqual(''); + }); + + test('Build correctly empty component inside', () => { + var m1 = comp.get('components').add({}); + expect(obj.build(comp)).toEqual('
'); + }); + + test('Build correctly not empty component inside', () => { + var m1 = comp.get('components').add({ + tagName: 'article', + attributes: { + 'data-test1': 'value1', + 'data-test2': 'value2' + } }); - - describe('CssGenerator', () => { - let newCssComp; - - beforeEach(() => { - em = new Editor({}); - newCssComp = () => new CssComposer().init({ em }); - - cc = em.get('CssComposer'); - obj = new CssGenerator(); - dcomp = new DomComponents(); - comp = new Component( - {}, - { - em, - componentTypes: dcomp.componentTypes - } - ); - }); - - afterEach(() => { - obj = null; - }); - - test('Build correctly one component', () => { - expect(obj.build(comp)).toEqual(''); - }); - - test('Build correctly empty component inside', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - expect(obj.build(comp)).toEqual(''); - }); - - test('Build correctly component with style inside', () => { - var m1 = comp.get('components').add({ - tagName: 'article', - style: { - prop1: 'value1', - prop2: 'value2' - } - }); - expect(obj.build(comp)).toEqual( - '#' + m1.getId() + '{prop1:value1;prop2:value2;}' - ); - }); - - test('Build correctly component with class styled', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - - var cssc = newCssComp(); - var rule = cssc.add(cls1); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1{prop1:value1;prop2:value2;}' - ); - }); - - test('Build correctly component styled with class and state', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - - var cssc = newCssComp(); - var rule = cssc.add(cls1); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - rule.set('state', 'hover'); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1:hover{prop1:value1;prop2:value2;}' - ); - }); - - test('Build correctly with more classes', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - var cls2 = m1.get('classes').add({ name: 'class2' }); - - var cssc = newCssComp(); - var rule = cssc.add([cls1, cls2]); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1.class2{prop1:value1;prop2:value2;}' - ); - }); - - test('Build rules with mixed classes', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - var cls2 = m1.get('classes').add({ name: 'class2' }); - - var cssc = newCssComp(); - var rule = cssc.add([cls1, cls2]); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - rule.set('selectorsAdd', '.class1 .class2, div > .class4'); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}' - ); - }); - - test('Build rules with only not class based selectors', () => { - var cssc = newCssComp(); - var rule = cssc.add([]); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - rule.set('selectorsAdd', '.class1 .class2, div > .class4'); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1 .class2, div > .class4{prop1:value1;prop2:value2;}' - ); - }); - - test('Build correctly with class styled out', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - var cls2 = m1.get('classes').add({ name: 'class2' }); - - var cssc = newCssComp(); - var rule = cssc.add([cls1, cls2]); - rule.set('style', { prop1: 'value1' }); - var rule2 = cssc.add(cls2); - rule2.set('style', { prop2: 'value2' }); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1.class2{prop1:value1;}.class2{prop2:value2;}' - ); - }); - - test('Rule with media query', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - var cls2 = m1.get('classes').add({ name: 'class2' }); - - var cssc = newCssComp(); - var rule = cssc.add([cls1, cls2]); - rule.set('style', { prop1: 'value1' }); - rule.set('mediaText', '(max-width: 999px)'); - - expect(obj.build(comp, { cssc })).toEqual( - '@media (max-width: 999px){.class1.class2{prop1:value1;}}' - ); - }); - - test('Rules mixed with media queries', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - var cls2 = m1.get('classes').add({ name: 'class2' }); - - var cssc = newCssComp(); - - var rule = cssc.add([cls1, cls2]); - rule.set('style', { prop1: 'value1' }); - var rule2 = cssc.add(cls2); - rule2.set('style', { prop2: 'value2' }); - - var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); - rule3.set('style', { prop3: 'value3' }); - var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); - rule4.set('style', { prop4: 'value4' }); - - var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); - rule5.set('style', { prop5: 'value5' }); - - expect(obj.build(comp, { cssc })).toEqual( - '.class1.class2{prop1:value1;}.class2{prop2:value2;}' + - '@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}' + - '@media (max-width: 100px){.class1{prop5:value5;}}' - ); - }); - - test('Avoid useless code', () => { - var m1 = comp.get('components').add({ tagName: 'article' }); - var cls1 = m1.get('classes').add({ name: 'class1' }); - - var cssc = newCssComp(); - var rule = cssc.add(cls1); - rule.set('style', { prop1: 'value1', prop2: 'value2' }); - - comp.get('components').remove(m1); - expect(obj.build(comp, { cssc })).toEqual(''); - }); - - test('Render correctly a rule without avoidInlineStyle option', () => { - comp.setStyle({ color: 'red' }); - const id = comp.getId(); - const result = `#${id}{color:red;}`; - expect(obj.build(comp, { cssc: cc })).toEqual(result); - }); - - test('Render correctly a rule with avoidInlineStyle option', () => { - em.getConfig().avoidInlineStyle = 1; - comp = new Component( - {}, - { - em, - componentTypes: dcomp.componentTypes - } - ); - comp.setStyle({ color: 'red' }); - const id = comp.getId(); - const result = `#${id}{color:red;}`; - expect(obj.build(comp, { cssc: cc, em })).toEqual(result); - }); - - test('Render correctly a rule with avoidInlineStyle and state', () => { - em.getConfig().avoidInlineStyle = 1; - const state = 'hover'; - comp.config.avoidInlineStyle = 1; - comp.set('state', state); - comp.setStyle({ color: 'red' }); - const id = comp.getId(); - const result = `#${id}:${state}{color:red;}`; - expect(obj.build(comp, { cssc: cc, em })).toEqual(result); - }); - - test('Render correctly a rule with avoidInlineStyle and w/o state', () => { - em.getConfig().avoidInlineStyle = 1; - const state = 'hover'; - comp.config.avoidInlineStyle = 1; - comp.setStyle({ color: 'blue' }); - comp.set('state', state); - comp.setStyle({ color: 'red' }); - const id = comp.getId(); - const result = `#${id}{color:blue;}#${id}:${state}{color:red;}`; - expect(obj.build(comp, { cssc: cc, em })).toEqual(result); - }); - - test('Media queries are correctly cleaned for the length', () => { - [ - ['@media (max-width: 999px)', 999], - ['@media (min-width: 123%)', 123], - ['@media (min-width: 1040rem)', 1040] - ].forEach(item => { - expect(obj.getQueryLength(item[0])).toBe(item[1]); - }); - }); - - test('The media objects are correctly sorted', () => { - expect( - obj.sortMediaObject({ - '@media (max-width: 480px)': 1, - '@font-face': 2, - '@media (max-width: 768px)': 3, - '@media (max-width: 1020ch)': 4, - '@media (max-width: 10%)': 5 - }) - ).toEqual([ - { key: '@font-face', value: 2 }, - { key: '@media (max-width: 1020ch)', value: 4 }, - { key: '@media (max-width: 768px)', value: 3 }, - { key: '@media (max-width: 480px)', value: 1 }, - { key: '@media (max-width: 10%)', value: 5 } - ]); - }); - - test('The media objects, for the mobile first approach, are correctly sorted', () => { - expect( - obj.sortMediaObject({ - '@media (min-width: 480px)': 1, - '@font-face': 2, - '@media (min-width: 768px)': 3, - '@media (min-width: 1020ch)': 4, - '@media (min-width: 10%)': 5 - }) - ).toEqual([ - { key: '@font-face', value: 2 }, - { key: '@media (min-width: 10%)', value: 5 }, - { key: '@media (min-width: 480px)', value: 1 }, - { key: '@media (min-width: 768px)', value: 3 }, - { key: '@media (min-width: 1020ch)', value: 4 } - ]); - }); + expect(obj.build(comp)).toEqual( + '
' + ); + }); + + test('Build correctly component with classes', () => { + var m1 = comp.get('components').add({ + tagName: 'article', + attributes: { + 'data-test1': 'value1', + 'data-test2': 'value2' + } + }); + ['class1', 'class2'].forEach(item => { + m1.get('classes').add({ name: item }); + }); + expect(obj.build(comp)).toEqual( + '
' + ); + }); +}); + +describe('CssGenerator', () => { + let newCssComp; + + beforeEach(() => { + em = new Editor({}); + newCssComp = () => new CssComposer().init({ em }); + + cc = em.get('CssComposer'); + obj = new CssGenerator(); + dcomp = new DomComponents(); + comp = new Component( + {}, + { + em, + componentTypes: dcomp.componentTypes + } + ); + }); + + afterEach(() => { + obj = null; + }); + + test('Build correctly one component', () => { + expect(obj.build(comp)).toEqual(''); + }); + + test('Build correctly empty component inside', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + expect(obj.build(comp)).toEqual(''); + }); + + test('Build correctly component with style inside', () => { + var m1 = comp.get('components').add({ + tagName: 'article', + style: { + prop1: 'value1', + prop2: 'value2' + } + }); + expect(obj.build(comp)).toEqual( + '#' + m1.getId() + '{prop1:value1;prop2:value2;}' + ); + }); + + test('Build correctly component with class styled', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + + var cssc = newCssComp(); + var rule = cssc.add(cls1); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1{prop1:value1;prop2:value2;}' + ); + }); + + test('Build correctly component styled with class and state', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + + var cssc = newCssComp(); + var rule = cssc.add(cls1); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + rule.set('state', 'hover'); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1:hover{prop1:value1;prop2:value2;}' + ); + }); + + test('Build correctly with more classes', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + var cls2 = m1.get('classes').add({ name: 'class2' }); + + var cssc = newCssComp(); + var rule = cssc.add([cls1, cls2]); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1.class2{prop1:value1;prop2:value2;}' + ); + }); + + test('Build rules with mixed classes', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + var cls2 = m1.get('classes').add({ name: 'class2' }); + + var cssc = newCssComp(); + var rule = cssc.add([cls1, cls2]); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + rule.set('selectorsAdd', '.class1 .class2, div > .class4'); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}' + ); + }); + + test('Build rules with only not class based selectors', () => { + var cssc = newCssComp(); + var rule = cssc.add([]); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + rule.set('selectorsAdd', '.class1 .class2, div > .class4'); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1 .class2, div > .class4{prop1:value1;prop2:value2;}' + ); + }); + + test('Build correctly with class styled out', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + var cls2 = m1.get('classes').add({ name: 'class2' }); + + var cssc = newCssComp(); + var rule = cssc.add([cls1, cls2]); + rule.set('style', { prop1: 'value1' }); + var rule2 = cssc.add(cls2); + rule2.set('style', { prop2: 'value2' }); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1.class2{prop1:value1;}.class2{prop2:value2;}' + ); + }); + + test('Rule with media query', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + var cls2 = m1.get('classes').add({ name: 'class2' }); + + var cssc = newCssComp(); + var rule = cssc.add([cls1, cls2]); + rule.set('style', { prop1: 'value1' }); + rule.set('mediaText', '(max-width: 999px)'); + + expect(obj.build(comp, { cssc })).toEqual( + '@media (max-width: 999px){.class1.class2{prop1:value1;}}' + ); + }); + + test('Rules mixed with media queries', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + var cls2 = m1.get('classes').add({ name: 'class2' }); + + var cssc = newCssComp(); + + var rule = cssc.add([cls1, cls2]); + rule.set('style', { prop1: 'value1' }); + var rule2 = cssc.add(cls2); + rule2.set('style', { prop2: 'value2' }); + + var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); + rule3.set('style', { prop3: 'value3' }); + var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); + rule4.set('style', { prop4: 'value4' }); + + var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); + rule5.set('style', { prop5: 'value5' }); + + expect(obj.build(comp, { cssc })).toEqual( + '.class1.class2{prop1:value1;}.class2{prop2:value2;}' + + '@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}' + + '@media (max-width: 100px){.class1{prop5:value5;}}' + ); + }); + + test('Avoid useless code', () => { + var m1 = comp.get('components').add({ tagName: 'article' }); + var cls1 = m1.get('classes').add({ name: 'class1' }); + + var cssc = newCssComp(); + var rule = cssc.add(cls1); + rule.set('style', { prop1: 'value1', prop2: 'value2' }); + + comp.get('components').remove(m1); + expect(obj.build(comp, { cssc })).toEqual(''); + }); + + test('Render correctly a rule without avoidInlineStyle option', () => { + comp.setStyle({ color: 'red' }); + const id = comp.getId(); + const result = `#${id}{color:red;}`; + expect(obj.build(comp, { cssc: cc })).toEqual(result); + }); + + test('Render correctly a rule with avoidInlineStyle option', () => { + em.getConfig().avoidInlineStyle = 1; + comp = new Component( + {}, + { + em, + componentTypes: dcomp.componentTypes + } + ); + comp.setStyle({ color: 'red' }); + const id = comp.getId(); + const result = `#${id}{color:red;}`; + expect(obj.build(comp, { cssc: cc, em })).toEqual(result); + }); + + test('Render correctly a rule with avoidInlineStyle and state', () => { + em.getConfig().avoidInlineStyle = 1; + const state = 'hover'; + comp.config.avoidInlineStyle = 1; + comp.set('state', state); + comp.setStyle({ color: 'red' }); + const id = comp.getId(); + const result = `#${id}:${state}{color:red;}`; + expect(obj.build(comp, { cssc: cc, em })).toEqual(result); + }); + + test('Render correctly a rule with avoidInlineStyle and w/o state', () => { + em.getConfig().avoidInlineStyle = 1; + const state = 'hover'; + comp.config.avoidInlineStyle = 1; + comp.setStyle({ color: 'blue' }); + comp.set('state', state); + comp.setStyle({ color: 'red' }); + const id = comp.getId(); + const result = `#${id}{color:blue;}#${id}:${state}{color:red;}`; + expect(obj.build(comp, { cssc: cc, em })).toEqual(result); + }); + + test('Media queries are correctly cleaned for the length', () => { + [ + ['@media (max-width: 999px)', 999], + ['@media (min-width: 123%)', 123], + ['@media (min-width: 1040rem)', 1040] + ].forEach(item => { + expect(obj.getQueryLength(item[0])).toBe(item[1]); }); - } -}; + }); + + test('The media objects are correctly sorted', () => { + expect( + obj.sortMediaObject({ + '@media (max-width: 480px)': 1, + '@font-face': 2, + '@media (max-width: 768px)': 3, + '@media (max-width: 1020ch)': 4, + '@media (max-width: 10%)': 5 + }) + ).toEqual([ + { key: '@font-face', value: 2 }, + { key: '@media (max-width: 1020ch)', value: 4 }, + { key: '@media (max-width: 768px)', value: 3 }, + { key: '@media (max-width: 480px)', value: 1 }, + { key: '@media (max-width: 10%)', value: 5 } + ]); + }); + + test('The media objects, for the mobile first approach, are correctly sorted', () => { + expect( + obj.sortMediaObject({ + '@media (min-width: 480px)': 1, + '@font-face': 2, + '@media (min-width: 768px)': 3, + '@media (min-width: 1020ch)': 4, + '@media (min-width: 10%)': 5 + }) + ).toEqual([ + { key: '@font-face', value: 2 }, + { key: '@media (min-width: 10%)', value: 5 }, + { key: '@media (min-width: 480px)', value: 1 }, + { key: '@media (min-width: 768px)', value: 3 }, + { key: '@media (min-width: 1020ch)', value: 4 } + ]); + }); +}); diff --git a/test/specs/commands/index.js b/test/specs/commands/index.js index 8d504741a..94c975188 100644 --- a/test/specs/commands/index.js +++ b/test/specs/commands/index.js @@ -115,6 +115,3 @@ describe('Commands', () => { }); }); }); - -Models.run(); -CommandAbstract.run(); diff --git a/test/specs/commands/model/CommandModels.js b/test/specs/commands/model/CommandModels.js index 3715e2329..ac338fdf2 100644 --- a/test/specs/commands/model/CommandModels.js +++ b/test/specs/commands/model/CommandModels.js @@ -1,38 +1,34 @@ import Command from 'commands/model/Command'; import Commands from 'commands'; -module.exports = { - run() { - describe('Command', () => { - let obj; - - beforeEach(() => { - obj = new Command(); - }); - - afterEach(() => { - obj = null; - }); - - test('Has id property', () => { - expect(obj.has('id')).toEqual(true); - }); - }); - - describe('Commands', () => { - var obj; - - beforeEach(() => { - obj = new Commands(); - }); - - afterEach(() => { - obj = null; - }); - - test('Object is ok', () => { - expect(obj).toBeTruthy(); - }); - }); - } -}; +describe('Command', () => { + let obj; + + beforeEach(() => { + obj = new Command(); + }); + + afterEach(() => { + obj = null; + }); + + test('Has id property', () => { + expect(obj.has('id')).toEqual(true); + }); +}); + +describe('Commands', () => { + var obj; + + beforeEach(() => { + obj = new Commands(); + }); + + afterEach(() => { + obj = null; + }); + + test('Object is ok', () => { + expect(obj).toBeTruthy(); + }); +}); diff --git a/test/specs/commands/view/CommandAbstract.js b/test/specs/commands/view/CommandAbstract.js index 6aa88162d..095dab294 100644 --- a/test/specs/commands/view/CommandAbstract.js +++ b/test/specs/commands/view/CommandAbstract.js @@ -1,94 +1,84 @@ import CommandAbstract from 'commands/view/CommandAbstract'; import Editor from 'editor/model/Editor'; -module.exports = { - run() { - describe('CommandAbstract', () => { - let editor, editorTriggerSpy, command; +describe('CommandAbstract', () => { + let editor, editorTriggerSpy, command; - beforeEach(() => { - editor = new Editor(); - editorTriggerSpy = sinon.spy(editor, 'trigger'); + beforeEach(() => { + editor = new Editor(); + editorTriggerSpy = sinon.spy(editor, 'trigger'); - command = new CommandAbstract(); - command.id = 'test'; - }); + command = new CommandAbstract(); + command.id = 'test'; + }); - afterEach(() => { - command = null; - editorTriggerSpy = null; - editor = null; - }); + afterEach(() => { + command = null; + editorTriggerSpy = null; + editor = null; + }); - test('callRun returns result when no "abort" option specified', () => { - const runStub = sinon.stub(command, 'run').returns('result'); + test('callRun returns result when no "abort" option specified', () => { + const runStub = sinon.stub(command, 'run').returns('result'); - const result = command.callRun(editor); - expect(editorTriggerSpy.callCount).toEqual(3); - expect(editorTriggerSpy.getCall(0).args).toEqual([ - 'run:test:before', - {} - ]); - expect(editorTriggerSpy.getCall(1).args).toEqual([ - 'run:test', - 'result', - {} - ]); - expect(editorTriggerSpy.getCall(2).args).toEqual([ - 'run', - 'test', - 'result', - {} - ]); + const result = command.callRun(editor); + expect(editorTriggerSpy.callCount).toEqual(3); + expect(editorTriggerSpy.getCall(0).args).toEqual(['run:test:before', {}]); + expect(editorTriggerSpy.getCall(1).args).toEqual([ + 'run:test', + 'result', + {} + ]); + expect(editorTriggerSpy.getCall(2).args).toEqual([ + 'run', + 'test', + 'result', + {} + ]); - expect(result).toEqual('result'); - expect(runStub.calledOnce).toEqual(true); - }); + expect(result).toEqual('result'); + expect(runStub.calledOnce).toEqual(true); + }); - test('callRun returns undefined when "abort" option is specified', () => { - const runStub = sinon.stub(command, 'run').returns('result'); + test('callRun returns undefined when "abort" option is specified', () => { + const runStub = sinon.stub(command, 'run').returns('result'); - const result = command.callRun(editor, { abort: true }); + const result = command.callRun(editor, { abort: true }); - expect(editorTriggerSpy.calledTwice).toEqual(true); - expect(editorTriggerSpy.getCall(0).args).toEqual([ - 'run:test:before', - { abort: true } - ]); - expect(editorTriggerSpy.getCall(1).args).toEqual([ - 'abort:test', - { abort: true } - ]); + expect(editorTriggerSpy.calledTwice).toEqual(true); + expect(editorTriggerSpy.getCall(0).args).toEqual([ + 'run:test:before', + { abort: true } + ]); + expect(editorTriggerSpy.getCall(1).args).toEqual([ + 'abort:test', + { abort: true } + ]); - expect(result).toEqual(undefined); - expect(runStub.notCalled).toEqual(true); - }); + expect(result).toEqual(undefined); + expect(runStub.notCalled).toEqual(true); + }); - test('callStop returns result', () => { - const stopStub = sinon.stub(command, 'stop').returns('stopped'); + test('callStop returns result', () => { + const stopStub = sinon.stub(command, 'stop').returns('stopped'); - const result = command.callStop(editor); + const result = command.callStop(editor); - expect(editorTriggerSpy.callCount).toEqual(3); - expect(editorTriggerSpy.getCall(0).args).toEqual([ - 'stop:test:before', - {} - ]); - expect(editorTriggerSpy.getCall(1).args).toEqual([ - 'stop:test', - 'stopped', - {} - ]); - expect(editorTriggerSpy.getCall(2).args).toEqual([ - 'stop', - 'test', - 'stopped', - {} - ]); + expect(editorTriggerSpy.callCount).toEqual(3); + expect(editorTriggerSpy.getCall(0).args).toEqual(['stop:test:before', {}]); + expect(editorTriggerSpy.getCall(1).args).toEqual([ + 'stop:test', + 'stopped', + {} + ]); + expect(editorTriggerSpy.getCall(2).args).toEqual([ + 'stop', + 'test', + 'stopped', + {} + ]); - expect(result).toEqual('stopped'); - expect(stopStub.calledOnce).toEqual(true); - }); - }); - } -}; + expect(result).toEqual('stopped'); + expect(stopStub.calledOnce).toEqual(true); + }); +}); diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index 16b759de7..83a015a1f 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -1,202 +1,198 @@ import Backbone from 'backbone'; const $ = Backbone.$; -module.exports = { - run() { - describe('E2E tests', () => { - var fixtures; - var fixture; - var gjs; - var cssc; - var clsm; - var domc; - var rulesSet; - var rulesSet2; +describe('E2E tests', () => { + var fixtures; + var fixture; + var gjs; + var cssc; + var clsm; + var domc; + var rulesSet; + var rulesSet2; - beforeAll(() => { - fixtures = $('#fixtures'); - fixture = $('
'); - }); + beforeAll(() => { + fixtures = $('#fixtures'); + fixture = $('
'); + }); - beforeEach(done => { - //this.timeout(5000); - gjs = grapesjs.init({ - stylePrefix: '', - storageManager: { autoload: 0, type: 'none' }, - assetManager: { storageType: 'none' }, - container: 'csscomposer-fixture' - }); - cssc = gjs.CssComposer; - clsm = gjs.SelectorManager; - domc = gjs.DomComponents; - fixture.empty().appendTo(fixtures); - gjs.render(); - rulesSet = [ - { selectors: [{ name: 'test1' }, { name: 'test2' }] }, - { selectors: [{ name: 'test2' }, { name: 'test3' }] }, - { selectors: [{ name: 'test3' }] } - ]; - rulesSet2 = [ - { - selectors: [{ name: 'test1' }, { name: 'test2' }], - state: ':active' - }, - { selectors: [{ name: 'test2' }, { name: 'test3' }] }, - { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' } - ]; - done(); - }); + beforeEach(done => { + //this.timeout(5000); + gjs = grapesjs.init({ + stylePrefix: '', + storageManager: { autoload: 0, type: 'none' }, + assetManager: { storageType: 'none' }, + container: 'csscomposer-fixture' + }); + cssc = gjs.CssComposer; + clsm = gjs.SelectorManager; + domc = gjs.DomComponents; + fixture.empty().appendTo(fixtures); + gjs.render(); + rulesSet = [ + { selectors: [{ name: 'test1' }, { name: 'test2' }] }, + { selectors: [{ name: 'test2' }, { name: 'test3' }] }, + { selectors: [{ name: 'test3' }] } + ]; + rulesSet2 = [ + { + selectors: [{ name: 'test1' }, { name: 'test2' }], + state: ':active' + }, + { selectors: [{ name: 'test2' }, { name: 'test3' }] }, + { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' } + ]; + done(); + }); - afterEach(() => { - gjs = null; - cssc = null; - clsm = null; - }); + afterEach(() => { + gjs = null; + cssc = null; + clsm = null; + }); - afterAll(() => { - fixture.remove(); - }); + afterAll(() => { + fixture.remove(); + }); - test('Rules are correctly imported from default property', () => { - var gj = grapesjs.init({ - stylePrefix: '', - storageManager: { autoload: 0, type: 'none' }, - cssComposer: { rules: rulesSet }, - container: 'csscomposer-fixture' - }); - var cssc = gj.editor.get('CssComposer'); - expect(cssc.getAll().length).toEqual(rulesSet.length); - var cls = gj.editor.get('SelectorManager').getAll(); - expect(cls.length).toEqual(3); - }); + test('Rules are correctly imported from default property', () => { + var gj = grapesjs.init({ + stylePrefix: '', + storageManager: { autoload: 0, type: 'none' }, + cssComposer: { rules: rulesSet }, + container: 'csscomposer-fixture' + }); + var cssc = gj.editor.get('CssComposer'); + expect(cssc.getAll().length).toEqual(rulesSet.length); + var cls = gj.editor.get('SelectorManager').getAll(); + expect(cls.length).toEqual(3); + }); - test('New rule adds correctly the class inside selector manager', () => { - var rules = cssc.getAll(); - rules.add({ selectors: [{ name: 'test1', private: true }] }); - var rule = clsm.getAll().at(0); - expect(rule.get('name')).toEqual('test1'); - expect(rule.get('private')).toEqual(true); - }); + test('New rule adds correctly the class inside selector manager', () => { + var rules = cssc.getAll(); + rules.add({ selectors: [{ name: 'test1', private: true }] }); + var rule = clsm.getAll().at(0); + expect(rule.get('name')).toEqual('test1'); + expect(rule.get('private')).toEqual(true); + }); - test('New rules are correctly imported inside selector manager', () => { - var rules = cssc.getAll(); - rulesSet.forEach(item => { - rules.add(item); - }); - var cls = clsm.getAll(); - expect(cls.length).toEqual(3); - expect(cls.at(0).get('name')).toEqual('test1'); - expect(cls.at(1).get('name')).toEqual('test2'); - expect(cls.at(2).get('name')).toEqual('test3'); - }); + test('New rules are correctly imported inside selector manager', () => { + var rules = cssc.getAll(); + rulesSet.forEach(item => { + rules.add(item); + }); + var cls = clsm.getAll(); + expect(cls.length).toEqual(3); + expect(cls.at(0).get('name')).toEqual('test1'); + expect(cls.at(1).get('name')).toEqual('test2'); + expect(cls.at(2).get('name')).toEqual('test3'); + }); - test('Add rules from the new component added as a string with style tag', () => { - var comps = domc.getComponents(); - var rules = cssc.getAll(); - comps.add( - '
Test
' - ); - expect(comps.length).toEqual(1); - expect(rules.length).toEqual(2); - }); + test('Add rules from the new component added as a string with style tag', () => { + var comps = domc.getComponents(); + var rules = cssc.getAll(); + comps.add( + '
Test
' + ); + expect(comps.length).toEqual(1); + expect(rules.length).toEqual(2); + }); - test('Add raw rule objects with addCollection', () => { - cssc.addCollection(rulesSet); - expect(cssc.getAll().length).toEqual(3); - expect(clsm.getAll().length).toEqual(3); - }); + test('Add raw rule objects with addCollection', () => { + cssc.addCollection(rulesSet); + expect(cssc.getAll().length).toEqual(3); + expect(clsm.getAll().length).toEqual(3); + }); - test('Add raw rule objects twice with addCollection do not duplucate rules', () => { - var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); - var coll1 = cssc.addCollection(rulesSet2); - var coll2 = cssc.addCollection(rulesSet2Copy); - expect(cssc.getAll().length).toEqual(3); - expect(clsm.getAll().length).toEqual(3); - expect(coll1).toEqual(coll2); - }); + test('Add raw rule objects twice with addCollection do not duplucate rules', () => { + var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2)); + var coll1 = cssc.addCollection(rulesSet2); + var coll2 = cssc.addCollection(rulesSet2Copy); + expect(cssc.getAll().length).toEqual(3); + expect(clsm.getAll().length).toEqual(3); + expect(coll1).toEqual(coll2); + }); - test('Extend css rule style, if requested', () => { - var style1 = { color: 'red', width: '10px' }; - var style2 = { height: '20px', width: '20px' }; - var rule1 = { - selectors: ['test1'], - style: style1 - }; - var rule2 = { - selectors: ['test1'], - style: style2 - }; - var ruleOut = cssc.addCollection(rule1)[0]; - // ruleOut is a Model - ruleOut = JSON.parse(JSON.stringify(ruleOut)); - var ruleResult = { - selectors: [ - { - active: true, - label: 'test1', - name: 'test1', - type: clsm.Selector.TYPE_CLASS, - private: false, - protected: false - } - ], - style: { - color: 'red', - width: '10px' - } - }; - expect(ruleOut).toEqual(ruleResult); - var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0]; - ruleOut = JSON.parse(JSON.stringify(ruleOut)); - ruleResult.style = { - color: 'red', - height: '20px', - width: '20px' - }; - expect(ruleOut).toEqual(ruleResult); - }); + test('Extend css rule style, if requested', () => { + var style1 = { color: 'red', width: '10px' }; + var style2 = { height: '20px', width: '20px' }; + var rule1 = { + selectors: ['test1'], + style: style1 + }; + var rule2 = { + selectors: ['test1'], + style: style2 + }; + var ruleOut = cssc.addCollection(rule1)[0]; + // ruleOut is a Model + ruleOut = JSON.parse(JSON.stringify(ruleOut)); + var ruleResult = { + selectors: [ + { + active: true, + label: 'test1', + name: 'test1', + type: clsm.Selector.TYPE_CLASS, + private: false, + protected: false + } + ], + style: { + color: 'red', + width: '10px' + } + }; + expect(ruleOut).toEqual(ruleResult); + var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0]; + ruleOut = JSON.parse(JSON.stringify(ruleOut)); + ruleResult.style = { + color: 'red', + height: '20px', + width: '20px' + }; + expect(ruleOut).toEqual(ruleResult); + }); - test('Do not extend with different selectorsAdd', () => { - var style1 = { color: 'red', width: '10px' }; - var style2 = { height: '20px', width: '20px' }; - var rule1 = { - selectors: [], - selectorsAdd: '*', - style: style1 - }; - var rule2 = { - selectors: [], - selectorsAdd: 'p', - style: style2 - }; - var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0]; - var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0]; - rule1Out = JSON.parse(JSON.stringify(rule1Out)); - rule2Out = JSON.parse(JSON.stringify(rule2Out)); - var rule1Result = { - selectors: [], - selectorsAdd: '*', - style: { - color: 'red', - width: '10px' - } - }; - var rule2Result = { - selectors: [], - selectorsAdd: 'p', - style: { - height: '20px', - width: '20px' - } - }; - expect(rule1Out).toEqual(rule1Result); - expect(rule2Out).toEqual(rule2Result); - }); + test('Do not extend with different selectorsAdd', () => { + var style1 = { color: 'red', width: '10px' }; + var style2 = { height: '20px', width: '20px' }; + var rule1 = { + selectors: [], + selectorsAdd: '*', + style: style1 + }; + var rule2 = { + selectors: [], + selectorsAdd: 'p', + style: style2 + }; + var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0]; + var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0]; + rule1Out = JSON.parse(JSON.stringify(rule1Out)); + rule2Out = JSON.parse(JSON.stringify(rule2Out)); + var rule1Result = { + selectors: [], + selectorsAdd: '*', + style: { + color: 'red', + width: '10px' + } + }; + var rule2Result = { + selectors: [], + selectorsAdd: 'p', + style: { + height: '20px', + width: '20px' + } + }; + expect(rule1Out).toEqual(rule1Result); + expect(rule2Out).toEqual(rule2Result); + }); - test('Add raw rule objects with width via addCollection', () => { - var coll1 = cssc.addCollection(rulesSet2); - expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText); - }); - }); - } -}; + test('Add raw rule objects with width via addCollection', () => { + var coll1 = cssc.addCollection(rulesSet2); + expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText); + }); +}); diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js index 306cb2689..b00c1f828 100644 --- a/test/specs/css_composer/index.js +++ b/test/specs/css_composer/index.js @@ -3,7 +3,7 @@ import CssRuleView from './view/CssRuleView'; import CssRulesView from './view/CssRulesView'; import CssComposer from 'css_composer'; import e2e from './e2e/CssComposer'; -import utils from './../test_utils.js'; +import utils from './../../test_utils.js'; import Editor from 'editor/model/Editor'; describe('Css Composer', () => { @@ -322,9 +322,4 @@ describe('Css Composer', () => { expect(obj.getAll().length).toEqual(toTest.length); }); }); - - Models.run(); - CssRuleView.run(); - CssRulesView.run(); - e2e.run(); }); diff --git a/test/specs/css_composer/model/CssModels.js b/test/specs/css_composer/model/CssModels.js index 59c710ad0..e92ecfd6f 100644 --- a/test/specs/css_composer/model/CssModels.js +++ b/test/specs/css_composer/model/CssModels.js @@ -3,125 +3,119 @@ import CssRules from 'css_composer/model/CssRules'; import Selectors from 'selector_manager/model/Selectors'; import Selector from 'selector_manager/model/Selector'; -module.exports = { - run() { - describe('CssRule', () => { - let obj; - - beforeEach(() => { - obj = new CssRule(); - }); - - afterEach(() => { - obj = null; - }); - - test('Has selectors property', () => { - expect(obj.has('selectors')).toEqual(true); - }); - - test('Has style property', () => { - expect(obj.has('style')).toEqual(true); - }); - - test('Has state property', () => { - expect(obj.has('state')).toEqual(true); - }); - - test('No default selectors', () => { - expect(obj.get('selectors').length).toEqual(0); - }); - - test('Compare returns true with the same selectors', () => { - var s1 = obj.get('selectors').add({ name: 'test1' }); - var s2 = obj.get('selectors').add({ name: 'test2' }); - expect(obj.compare([s1, s2])).toEqual(true); - }); - - test('Compare with different state', () => { - var s1 = obj.get('selectors').add({ name: 'test1' }); - var s2 = obj.get('selectors').add({ name: 'test2' }); - obj.set('state', 'hover'); - expect(obj.compare([s1, s2])).toEqual(false); - expect(obj.compare([s1, s2], 'hover')).toEqual(true); - }); - - test('Compare with different mediaText', () => { - var s1 = obj.get('selectors').add({ name: 'test1' }); - var s2 = obj.get('selectors').add({ name: 'test2' }); - obj.set('state', 'hover'); - obj.set('mediaText', '1000'); - expect(obj.compare([s1, s2])).toEqual(false); - expect(obj.compare([s1, s2], 'hover')).toEqual(false); - expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true); - }); - - test('toCSS returns empty if there is no style', () => { - var s1 = obj.get('selectors').add({ name: 'test1' }); - expect(obj.toCSS()).toEqual(''); - }); - - test('toCSS returns empty if there is no selectors', () => { - obj.setStyle({ color: 'red' }); - expect(obj.toCSS()).toEqual(''); - }); - - test('toCSS returns simple CSS', () => { - obj.get('selectors').add({ name: 'test1' }); - obj.setStyle({ color: 'red' }); - expect(obj.toCSS()).toEqual(`.test1{color:red;}`); - }); - - test('toCSS wraps correctly inside media rule', () => { - const media = '(max-width: 768px)'; - obj.set('atRuleType', 'media'); - obj.set('mediaText', media); - obj.get('selectors').add({ name: 'test1' }); - obj.setStyle({ color: 'red' }); - expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`); - }); - - test('toCSS with a generic at-rule', () => { - obj.set('atRuleType', 'supports'); - obj.get('selectors').add({ name: 'test1' }); - obj.setStyle({ 'font-family': 'Open Sans' }); - expect(obj.toCSS()).toEqual( - `@supports{.test1{font-family:Open Sans;}}` - ); - }); - - test('toCSS with a generic single at-rule', () => { - obj.set('atRuleType', 'font-face'); - obj.set('singleAtRule', 1); - obj.setStyle({ 'font-family': 'Sans' }); - expect(obj.toCSS()).toEqual(`@font-face{font-family:Sans;}`); - }); - - test('toCSS with a generic at-rule and condition', () => { - obj.set('atRuleType', 'font-face'); - obj.set('mediaText', 'some-condition'); - obj.get('selectors').add({ name: 'test1' }); - obj.setStyle({ 'font-family': 'Open Sans' }); - expect(obj.toCSS()).toEqual( - `@font-face some-condition{.test1{font-family:Open Sans;}}` - ); - }); - }); - - describe('CssRules', () => { - test('Creates collection item correctly', () => { - var c = new CssRules(); - var m = c.add({}); - expect(m instanceof CssRule).toEqual(true); - }); - }); - - describe('Selectors', () => { - test('Creates collection item correctly', () => { - var c = new Selectors(); - var m = c.add({}); - expect(m instanceof Selector).toEqual(true); - }); - }); - } -}; +describe('CssRule', () => { + let obj; + + beforeEach(() => { + obj = new CssRule(); + }); + + afterEach(() => { + obj = null; + }); + + test('Has selectors property', () => { + expect(obj.has('selectors')).toEqual(true); + }); + + test('Has style property', () => { + expect(obj.has('style')).toEqual(true); + }); + + test('Has state property', () => { + expect(obj.has('state')).toEqual(true); + }); + + test('No default selectors', () => { + expect(obj.get('selectors').length).toEqual(0); + }); + + test('Compare returns true with the same selectors', () => { + var s1 = obj.get('selectors').add({ name: 'test1' }); + var s2 = obj.get('selectors').add({ name: 'test2' }); + expect(obj.compare([s1, s2])).toEqual(true); + }); + + test('Compare with different state', () => { + var s1 = obj.get('selectors').add({ name: 'test1' }); + var s2 = obj.get('selectors').add({ name: 'test2' }); + obj.set('state', 'hover'); + expect(obj.compare([s1, s2])).toEqual(false); + expect(obj.compare([s1, s2], 'hover')).toEqual(true); + }); + + test('Compare with different mediaText', () => { + var s1 = obj.get('selectors').add({ name: 'test1' }); + var s2 = obj.get('selectors').add({ name: 'test2' }); + obj.set('state', 'hover'); + obj.set('mediaText', '1000'); + expect(obj.compare([s1, s2])).toEqual(false); + expect(obj.compare([s1, s2], 'hover')).toEqual(false); + expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true); + }); + + test('toCSS returns empty if there is no style', () => { + var s1 = obj.get('selectors').add({ name: 'test1' }); + expect(obj.toCSS()).toEqual(''); + }); + + test('toCSS returns empty if there is no selectors', () => { + obj.setStyle({ color: 'red' }); + expect(obj.toCSS()).toEqual(''); + }); + + test('toCSS returns simple CSS', () => { + obj.get('selectors').add({ name: 'test1' }); + obj.setStyle({ color: 'red' }); + expect(obj.toCSS()).toEqual(`.test1{color:red;}`); + }); + + test('toCSS wraps correctly inside media rule', () => { + const media = '(max-width: 768px)'; + obj.set('atRuleType', 'media'); + obj.set('mediaText', media); + obj.get('selectors').add({ name: 'test1' }); + obj.setStyle({ color: 'red' }); + expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`); + }); + + test('toCSS with a generic at-rule', () => { + obj.set('atRuleType', 'supports'); + obj.get('selectors').add({ name: 'test1' }); + obj.setStyle({ 'font-family': 'Open Sans' }); + expect(obj.toCSS()).toEqual(`@supports{.test1{font-family:Open Sans;}}`); + }); + + test('toCSS with a generic single at-rule', () => { + obj.set('atRuleType', 'font-face'); + obj.set('singleAtRule', 1); + obj.setStyle({ 'font-family': 'Sans' }); + expect(obj.toCSS()).toEqual(`@font-face{font-family:Sans;}`); + }); + + test('toCSS with a generic at-rule and condition', () => { + obj.set('atRuleType', 'font-face'); + obj.set('mediaText', 'some-condition'); + obj.get('selectors').add({ name: 'test1' }); + obj.setStyle({ 'font-family': 'Open Sans' }); + expect(obj.toCSS()).toEqual( + `@font-face some-condition{.test1{font-family:Open Sans;}}` + ); + }); +}); + +describe('CssRules', () => { + test('Creates collection item correctly', () => { + var c = new CssRules(); + var m = c.add({}); + expect(m instanceof CssRule).toEqual(true); + }); +}); + +describe('Selectors', () => { + test('Creates collection item correctly', () => { + var c = new Selectors(); + var m = c.add({}); + expect(m instanceof Selector).toEqual(true); + }); +}); diff --git a/test/specs/css_composer/view/CssRuleView.js b/test/specs/css_composer/view/CssRuleView.js index c2e4875b5..c992b64d9 100644 --- a/test/specs/css_composer/view/CssRuleView.js +++ b/test/specs/css_composer/view/CssRuleView.js @@ -1,95 +1,91 @@ import CssRuleView from 'css_composer/view/CssRuleView'; import CssRule from 'css_composer/model/CssRule'; -module.exports = { - run() { - describe('CssRuleView', () => { - let obj; - let fixtures; +describe('CssRuleView', () => { + let obj; + let fixtures; - beforeEach(() => { - var m = new CssRule(); - obj = new CssRuleView({ - model: m - }); - document.body.innerHTML = '
'; - fixtures = document.body.querySelector('#fixtures'); - fixtures.appendChild(obj.render().el); - }); + beforeEach(() => { + var m = new CssRule(); + obj = new CssRuleView({ + model: m + }); + document.body.innerHTML = '
'; + fixtures = document.body.querySelector('#fixtures'); + fixtures.appendChild(obj.render().el); + }); - afterEach(() => { - obj.model.destroy(); - }); + afterEach(() => { + obj.model.destroy(); + }); - test('Object exists', () => { - expect(CssRuleView).toBeTruthy(); - }); + test('Object exists', () => { + expect(CssRuleView).toBeTruthy(); + }); - test('Empty style inside', () => { - expect(fixtures.innerHTML).toEqual(''); - }); + test('Empty style inside', () => { + expect(fixtures.innerHTML).toEqual(''); + }); - test('On update of style always empty as there is no selectors', () => { - obj.model.set('style', { prop: 'value' }); - expect(fixtures.innerHTML).toEqual(''); - }); + test('On update of style always empty as there is no selectors', () => { + obj.model.set('style', { prop: 'value' }); + expect(fixtures.innerHTML).toEqual(''); + }); - describe('CssRuleView with selectors', () => { - let objReg; + describe('CssRuleView with selectors', () => { + let objReg; - beforeEach(() => { - var m = new CssRule({ - selectors: [{ name: 'test1' }, { name: 'test2' }] - }); - objReg = new CssRuleView({ - model: m - }); - objReg.render(); - document.body.innerHTML = '
'; - fixtures = document.body.querySelector('#fixtures'); - fixtures.appendChild(objReg.el); - }); + beforeEach(() => { + var m = new CssRule({ + selectors: [{ name: 'test1' }, { name: 'test2' }] + }); + objReg = new CssRuleView({ + model: m + }); + objReg.render(); + document.body.innerHTML = '
'; + fixtures = document.body.querySelector('#fixtures'); + fixtures.appendChild(objReg.el); + }); - afterEach(() => { - objReg.model.destroy(); - }); + afterEach(() => { + objReg.model.destroy(); + }); - test('Empty with no style', () => { - expect(objReg.$el.html()).toEqual(''); - }); + test('Empty with no style', () => { + expect(objReg.$el.html()).toEqual(''); + }); - test('Not empty on update of style', () => { - objReg.model.set('style', { prop: 'value' }); - expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); - }); + test('Not empty on update of style', () => { + objReg.model.set('style', { prop: 'value' }); + expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); + }); - test('State correctly rendered', () => { - objReg.model.set('style', { prop: 'value' }); - objReg.model.set('state', 'hover'); - expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}'); - }); + test('State correctly rendered', () => { + objReg.model.set('style', { prop: 'value' }); + objReg.model.set('state', 'hover'); + expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}'); + }); - test('State render changes on update', () => { - objReg.model.set('style', { prop: 'value' }); - objReg.model.set('state', 'hover'); - objReg.model.set('state', ''); - expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); - }); + test('State render changes on update', () => { + objReg.model.set('style', { prop: 'value' }); + objReg.model.set('state', 'hover'); + objReg.model.set('state', ''); + expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}'); + }); - test('Render media queries', () => { - objReg.model.set('style', { prop: 'value' }); - objReg.model.set('mediaText', '(max-width: 999px)'); - expect(objReg.$el.html()).toEqual( - '@media (max-width: 999px){.test1.test2{prop:value;}}' - ); - }); + test('Render media queries', () => { + objReg.model.set('style', { prop: 'value' }); + objReg.model.set('mediaText', '(max-width: 999px)'); + expect(objReg.$el.html()).toEqual( + '@media (max-width: 999px){.test1.test2{prop:value;}}' + ); + }); - test('Empty on clear', () => { - objReg.model.set('style', { prop: 'value' }); - objReg.model.set('style', {}); - expect(objReg.$el.html()).toEqual(''); - }); - }); + test('Empty on clear', () => { + objReg.model.set('style', { prop: 'value' }); + objReg.model.set('style', {}); + expect(objReg.$el.html()).toEqual(''); }); - } -}; + }); +}); diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js index 0394ed839..13cf44498 100644 --- a/test/specs/css_composer/view/CssRulesView.js +++ b/test/specs/css_composer/view/CssRulesView.js @@ -2,108 +2,104 @@ import CssRulesView from 'css_composer/view/CssRulesView'; import CssRules from 'css_composer/model/CssRules'; import Editor from 'editor/model/Editor'; -module.exports = { - run() { - describe('CssRulesView', () => { - let obj; - const prefix = 'rules'; - const devices = [ - { - name: 'Mobile portrait', - width: '320px', - widthMedia: '480px' - }, - { - name: 'Tablet', - width: '768px', - widthMedia: '992px' - }, - { - name: 'Desktop', - width: '', - widthMedia: '' - } - ]; +describe('CssRulesView', () => { + let obj; + const prefix = 'rules'; + const devices = [ + { + name: 'Mobile portrait', + width: '320px', + widthMedia: '480px' + }, + { + name: 'Tablet', + width: '768px', + widthMedia: '992px' + }, + { + name: 'Desktop', + width: '', + widthMedia: '' + } + ]; - beforeEach(() => { - const col = new CssRules([]); - obj = new CssRulesView({ - collection: col, - config: { - em: new Editor({ - deviceManager: { - devices - } - }) + beforeEach(() => { + const col = new CssRules([]); + obj = new CssRulesView({ + collection: col, + config: { + em: new Editor({ + deviceManager: { + devices } - }); - document.body.innerHTML = '
'; - document.body.querySelector('#fixtures').appendChild(obj.render().el); - }); + }) + } + }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(obj.render().el); + }); - afterEach(() => { - obj.collection.reset(); - }); + afterEach(() => { + obj.collection.reset(); + }); - test('Object exists', () => { - expect(CssRulesView).toBeTruthy(); - }); + test('Object exists', () => { + expect(CssRulesView).toBeTruthy(); + }); - test('Collection is empty. Styles structure bootstraped', () => { - expect(obj.$el.html()).toBeTruthy(); - const foundStylesContainers = obj.$el.find('div'); - expect(foundStylesContainers.length).toEqual(devices.length); + test('Collection is empty. Styles structure bootstraped', () => { + expect(obj.$el.html()).toBeTruthy(); + const foundStylesContainers = obj.$el.find('div'); + expect(foundStylesContainers.length).toEqual(devices.length); - const sortedDevicesWidthMedia = devices - .map(dvc => dvc.widthMedia) - .sort((left, right) => { - return ( - ((right && right.replace('px', '')) || Number.MAX_VALUE) - - ((left && left.replace('px', '')) || Number.MAX_VALUE) - ); - }) - .map(widthMedia => parseFloat(widthMedia)); + const sortedDevicesWidthMedia = devices + .map(dvc => dvc.widthMedia) + .sort((left, right) => { + return ( + ((right && right.replace('px', '')) || Number.MAX_VALUE) - + ((left && left.replace('px', '')) || Number.MAX_VALUE) + ); + }) + .map(widthMedia => parseFloat(widthMedia)); - foundStylesContainers.each(($styleC, idx) => { - const width = sortedDevicesWidthMedia[idx]; - expect($styleC.id).toEqual(`${prefix}${width ? `-${width}` : ''}`); - }); - }); + foundStylesContainers.each(($styleC, idx) => { + const width = sortedDevicesWidthMedia[idx]; + expect($styleC.id).toEqual(`${prefix}${width ? `-${width}` : ''}`); + }); + }); - test('Add new rule', () => { - sinon.stub(obj, 'addToCollection'); - obj.collection.add({}); - expect(obj.addToCollection.calledOnce).toBeTruthy(); - }); + test('Add new rule', () => { + sinon.stub(obj, 'addToCollection'); + obj.collection.add({}); + expect(obj.addToCollection.calledOnce).toBeTruthy(); + }); - test('Add correctly rules with different media queries', () => { - const foundStylesContainers = obj.$el.find('div'); - const rules = [ - { - selectorsAdd: '#testid' - }, - { - selectorsAdd: '#testid2', - mediaText: '(max-width: 1000px)' - }, - { - selectorsAdd: '#testid3', - mediaText: '(min-width: 900px)' - }, - { - selectorsAdd: '#testid4', - mediaText: 'screen and (max-width: 900px) and (min-width: 600px)' - } - ]; - obj.collection.add(rules); - const stylesCont = obj.el.querySelector(`#${obj.className}`); - expect(stylesCont.children.length).toEqual(rules.length); - }); + test('Add correctly rules with different media queries', () => { + const foundStylesContainers = obj.$el.find('div'); + const rules = [ + { + selectorsAdd: '#testid' + }, + { + selectorsAdd: '#testid2', + mediaText: '(max-width: 1000px)' + }, + { + selectorsAdd: '#testid3', + mediaText: '(min-width: 900px)' + }, + { + selectorsAdd: '#testid4', + mediaText: 'screen and (max-width: 900px) and (min-width: 600px)' + } + ]; + obj.collection.add(rules); + const stylesCont = obj.el.querySelector(`#${obj.className}`); + expect(stylesCont.children.length).toEqual(rules.length); + }); - test('Render new rule', () => { - obj.collection.add({}); - expect(obj.$el.find(`#${prefix}`).html()).toBeTruthy(); - }); - }); - } -}; + test('Render new rule', () => { + obj.collection.add({}); + expect(obj.$el.find(`#${prefix}`).html()).toBeTruthy(); + }); +}); diff --git a/test/specs/device_manager/index.js b/test/specs/device_manager/index.js index 77b1dc1e1..636fb2c62 100644 --- a/test/specs/device_manager/index.js +++ b/test/specs/device_manager/index.js @@ -58,6 +58,4 @@ describe('DeviceManager', () => { expect(obj.render()).toBeTruthy(); }); }); - - DevicesView.run(); }); diff --git a/test/specs/device_manager/view/DevicesView.js b/test/specs/device_manager/view/DevicesView.js index 5f5eb0136..ce090adec 100644 --- a/test/specs/device_manager/view/DevicesView.js +++ b/test/specs/device_manager/view/DevicesView.js @@ -1,68 +1,62 @@ import DevicesView from 'device_manager/view/DevicesView'; import Devices from 'device_manager/model/Devices'; -module.exports = { - run() { - describe('DevicesView', () => { - var $fixtures; - var $fixture; - var model; - var view; - var editorModel; - var em; - - beforeEach(() => { - model = new Devices([]); - view = new DevicesView({ - collection: model - }); - document.body.innerHTML = '
'; - document.body.querySelector('#fixtures').appendChild(view.render().el); - }); - - afterEach(() => { - view.collection.reset(); - }); - - test('The content is not empty', () => { - expect(view.el.innerHTML).toBeTruthy(); - }); - - test('No options without devices', () => { - expect(view.getOptions()).toEqual(''); - }); - - test('Render new button', () => { - view.collection.add({}); - expect(view.$el.html()).toBeTruthy(); +describe('DevicesView', () => { + var $fixtures; + var $fixture; + var model; + var view; + var editorModel; + var em; + + beforeEach(() => { + model = new Devices([]); + view = new DevicesView({ + collection: model + }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(view.render().el); + }); + + afterEach(() => { + view.collection.reset(); + }); + + test('The content is not empty', () => { + expect(view.el.innerHTML).toBeTruthy(); + }); + + test('No options without devices', () => { + expect(view.getOptions()).toEqual(''); + }); + + test('Render new button', () => { + view.collection.add({}); + expect(view.$el.html()).toBeTruthy(); + }); + + describe('With configs', () => { + beforeEach(() => { + editorModel = new Backbone.Model(); + model = new Devices([{ name: 'test1' }, { name: 'test2' }]); + view = new DevicesView({ + collection: model, + config: { em: editorModel } }); + document.body.innerHTML = '
'; + document.body.querySelector('#fixtures').appendChild(view.render().el); + }); - describe('With configs', () => { - beforeEach(() => { - editorModel = new Backbone.Model(); - model = new Devices([{ name: 'test1' }, { name: 'test2' }]); - view = new DevicesView({ - collection: model, - config: { em: editorModel } - }); - document.body.innerHTML = '
'; - document.body - .querySelector('#fixtures') - .appendChild(view.render().el); - }); - - test('Update device on select change', () => { - view.$el.find('select').val('test2'); - view.updateDevice(); - expect(view.config.em.get('device')).toEqual('test2'); - }); + test('Update device on select change', () => { + view.$el.find('select').val('test2'); + view.updateDevice(); + expect(view.config.em.get('device')).toEqual('test2'); + }); - test('Render options', () => { - expect(view.getOptions()).toEqual( - '' - ); - }); - }); + test('Render options', () => { + expect(view.getOptions()).toEqual( + '' + ); }); - } -}; + }); +}); diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js index f53b265ca..39d72fa8c 100644 --- a/test/specs/dom_components/index.js +++ b/test/specs/dom_components/index.js @@ -6,7 +6,7 @@ import ComponentsView from './view/ComponentsView'; import ComponentTextView from './view/ComponentTextView'; import ComponentImageView from './view/ComponentImageView'; import Editor from 'editor/model/Editor'; -import utils from './../test_utils.js'; +import utils from './../../test_utils.js'; describe('DOM Components', () => { describe('Main', () => { @@ -267,13 +267,4 @@ describe('DOM Components', () => { expect(comp.get('editable')).toBe(1); }); }); - - ComponentModels.run(); - - describe('Views', () => { - ComponentView.run(); - ComponentsView.run(); - ComponentTextView.run(); - ComponentImageView.run(); - }); }); diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index 47e1919ea..05bd10e1f 100644 --- a/test/specs/dom_components/model/Component.js +++ b/test/specs/dom_components/model/Component.js @@ -11,673 +11,660 @@ import Selector from 'selector_manager/model/Selector'; import Editor from 'editor/model/Editor'; const $ = Backbone.$; -module.exports = { - run() { - let obj; - let dcomp; - let compOpts; - let em; - - describe('Component', () => { - beforeEach(() => { - em = new Editor({}); - dcomp = new DomComponents(); - compOpts = { - em, - componentTypes: dcomp.componentTypes, - domc: dcomp - }; - obj = new Component({}, compOpts); - dcomp.init({ em }); - }); - - afterEach(() => { - obj = null; - }); - - test('Has no children', () => { - expect(obj.get('components').length).toEqual(0); - }); - - test('Clones correctly', () => { - var sAttr = obj.attributes; - var cloned = obj.clone(); - var eAttr = cloned.attributes; - eAttr.components = {}; - sAttr.components = {}; - eAttr.traits = {}; - sAttr.traits = {}; - expect(sAttr.length).toEqual(eAttr.length); - }); - - test('Clones correctly with traits', () => { - obj - .get('traits') - .at(0) - .set('value', 'testTitle'); - var cloned = obj.clone(); - cloned.set('stylable', 0); - cloned - .get('traits') - .at(0) - .set('value', 'testTitle2'); - expect( - obj - .get('traits') - .at(0) - .get('value') - ).toEqual('testTitle'); - expect(obj.get('stylable')).toEqual(true); - }); - - test('Sets attributes correctly from traits', () => { - obj.set('traits', [ - { - label: 'Title', - name: 'title', - value: 'The title' - }, - { - label: 'Context', - value: 'primary' - } - ]); - expect(obj.get('attributes')).toEqual({ title: 'The title' }); - }); - - test('Has expected name', () => { - expect(obj.getName()).toEqual('Box'); - }); - - test('Has expected name 2', () => { - obj.cid = 'c999'; - obj.set('type', 'testType'); - expect(obj.getName()).toEqual('TestType'); - }); - - test('Component toHTML', () => { - expect(obj.toHTML()).toEqual('
'); - }); - - test('Component toHTML with attributes', () => { - obj = new Component({ - tagName: 'article', - attributes: { - 'data-test1': 'value1', - 'data-test2': 'value2' - } - }); - expect(obj.toHTML()).toEqual( - '
' - ); - }); - - test('Component toHTML with value-less attribute', () => { - obj = new Component({ - tagName: 'div', - attributes: { - 'data-is-a-test': '' - } - }); - expect(obj.toHTML()).toEqual('
'); - }); - - test('Component toHTML with classes', () => { - obj = new Component({ - tagName: 'article' - }); - ['class1', 'class2'].forEach(item => { - obj.get('classes').add({ name: item }); - }); - expect(obj.toHTML()).toEqual( - '
' - ); - }); - - test('Component toHTML with children', () => { - obj = new Component({ tagName: 'article' }, compOpts); - obj.get('components').add({ tagName: 'span' }); - expect(obj.toHTML()).toEqual('
'); - }); - - test('Component toHTML with more children', () => { - obj = new Component({ tagName: 'article' }, compOpts); - obj.get('components').add([{ tagName: 'span' }, { tagName: 'div' }]); - expect(obj.toHTML()).toEqual( - '
' - ); - }); - - test('Component toHTML with no closing tag', () => { - obj = new Component({ void: 1 }); - expect(obj.toHTML()).toEqual('
'); - }); - - test('Component toHTML with quotes in attribute', () => { - obj = new Component(); - let attrs = obj.get('attributes'); - attrs['data-test'] = '"value"'; - obj.set('attributes', attrs); - expect(obj.toHTML()).toEqual( - '
' - ); - }); - - test('Manage correctly boolean attributes', () => { - obj = new Component(); - obj.set('attributes', { - 'data-test': 'value', - checked: false, - required: true, - avoid: true - }); - expect(obj.toHTML()).toEqual( - '
' - ); - }); - - test('Component parse empty div', () => { - var el = document.createElement('div'); - obj = Component.isComponent(el); - expect(obj).toEqual({ tagName: 'div' }); - }); - - test('Component parse span', () => { - var el = document.createElement('span'); - obj = Component.isComponent(el); - expect(obj).toEqual({ tagName: 'span' }); - }); - - test('setClass single class string', () => { - obj.setClass('class1'); - const result = obj.get('classes').models; - expect(result.length).toEqual(1); - expect(result[0] instanceof Selector).toEqual(true); - expect(result[0].get('name')).toEqual('class1'); - }); - - test('setClass multiple class string', () => { - obj.setClass('class1 class2'); - const result = obj.get('classes').models; - expect(result.length).toEqual(2); - }); - - test('setClass single class array', () => { - obj.setClass(['class1']); - const result = obj.get('classes').models; - expect(result.length).toEqual(1); - }); - - test('setClass multiple class array', () => { - obj.setClass(['class1', 'class2']); - const result = obj.get('classes').models; - expect(result.length).toEqual(2); - }); - - test('addClass multiple array', () => { - obj.addClass(['class1', 'class2']); - const result = obj.get('classes').models; - expect(result.length).toEqual(2); - }); - - test('addClass avoid same name classes', () => { - obj.addClass(['class1', 'class2']); - obj.addClass(['class1', 'class3']); - const result = obj.get('classes').models; - expect(result.length).toEqual(3); - }); - - test('removeClass by string', () => { - obj.addClass(['class1', 'class2']); - obj.removeClass('class2'); - const result = obj.get('classes').models; - expect(result.length).toEqual(1); - }); - - test('removeClass by string with multiple classes', () => { - obj.addClass(['class1', 'class2']); - obj.removeClass('class2 class1'); - const result = obj.get('classes').models; - expect(result.length).toEqual(0); - }); - - test('removeClass by array', () => { - obj.addClass(['class1', 'class2']); - obj.removeClass(['class1', 'class2']); - const result = obj.get('classes').models; - expect(result.length).toEqual(0); - }); - - test('removeClass do nothing with undefined classes', () => { - obj.addClass(['class1', 'class2']); - obj.removeClass(['class3']); - const result = obj.get('classes').models; - expect(result.length).toEqual(2); - }); - - test('removeClass actually removes classes from attributes', () => { - obj.addClass('class1'); - obj.removeClass('class1'); - const result = obj.getAttributes(); - expect(result.class).toEqual(undefined); - }); - - test('setAttributes', () => { - obj.setAttributes({ - id: 'test', - 'data-test': 'value', - class: 'class1 class2', - style: 'color: white; background: #fff' - }); - expect(obj.getAttributes()).toEqual({ - id: 'test', - class: 'class1 class2', - 'data-test': 'value' - }); - expect(obj.get('classes').length).toEqual(2); - expect(obj.getStyle()).toEqual({ - color: 'white', - background: '#fff' - }); - }); - - test('setAttributes overwrites correctly', () => { - obj.setAttributes({ id: 'test', 'data-test': 'value', a: 'b' }); - obj.setAttributes({ 'data-test': 'value2' }); - expect(obj.getAttributes()).toEqual({ 'data-test': 'value2' }); - }); - - test('append() returns always an array', () => { - let result = obj.append('text1'); - expect(result.length).toEqual(1); - result = obj.append('text1
text2
'); - expect(result.length).toEqual(2); - }); - - test('append() new components as string', () => { - obj.append('text1
text2
'); - const comps = obj.components(); - expect(comps.length).toEqual(2); - expect(comps.models[0].get('tagName')).toEqual('span'); - expect(comps.models[1].get('tagName')).toEqual('div'); - }); - - test('append() new components as Objects', () => { - obj.append([{}, {}]); - const comps = obj.components(); - expect(comps.length).toEqual(2); - obj.append({}); - expect(comps.length).toEqual(3); - }); - - test('components() set new collection', () => { - obj.append([{}, {}]); - obj.components('test
'); - const result = obj.components(); - expect(result.length).toEqual(1); - expect(result.models[0].get('tagName')).toEqual('span'); - }); - - test('Propagate properties to children', () => { - obj.append({ propagate: 'removable' }); - const result = obj.components(); - const newObj = result.models[0]; - expect(newObj.get('removable')).toEqual(true); - newObj.set('removable', false); - newObj.append({ draggable: false }); - const child = newObj.components().models[0]; - expect(child.get('removable')).toEqual(false); - expect(child.get('propagate')).toEqual(['removable']); - }); - - // This will try to avoid, eventually, issues with circular structures - test('Can stringify object after edits', () => { - const added = dcomp.addComponent(` -
-
Comp 1
-
Comp 2
-
Comp 3
-
- `); - const comp1 = added.components().at(0); - comp1.remove(); - added.append(comp1); - expect(JSON.stringify(added)).toBeTruthy(); - }); - - test('Guarantee the uniqueness of components ids', () => { - const idName = 'test'; - const added = dcomp.addComponent(` -
Comp 1
-
Comp 2
-
Comp 3
- - `); - const comp1 = added[0]; - const comp2 = added[1]; - const comp1Id = comp1.getId(); - const comp2Sel = comp2._getStyleSelector(); - expect(comp2Sel.get('name')).toEqual(idName); - const idNameNew = `${idName}2`; - comp2.setId(idNameNew); - // Check if the style selector has changed its name - expect(comp2Sel.get('name')).toEqual(idNameNew); - comp1.setId(idNameNew); - // The id shouldn't change - expect(comp1.getId()).toEqual(comp1Id); - }); - - test('Ability to stop/change propagation chain', () => { - obj.append({ - removable: false, - draggable: false, - propagate: ['removable', 'draggable'] - }); - const result = obj.components(); - const newObj = result.models[0]; - newObj.components(` -
-
comp1
-
-
comp21
-
comp22
-
-
-
comp31
-
comp32
-
-
-
TEST
`); - const notInhereted = model => { - expect(model.get('stop')).toEqual('1'); - expect(model.get('removable')).toEqual(true); - expect(model.get('draggable')).toEqual(true); - expect(model.get('propagate')).toEqual(['stop']); - model.components().each(model => inhereted(model)); - }; - const inhereted = model => { - if (model.get('stop')) { - notInhereted(model); - } else { - expect(model.get('removable')).toEqual(false); - expect(model.get('draggable')).toEqual(false); - expect(model.get('propagate')).toEqual(['removable', 'draggable']); - model.components().each(model => inhereted(model)); - } - }; - newObj.components().each(model => inhereted(model)); - }); +let obj; +let dcomp; +let compOpts; +let em; + +describe('Component', () => { + beforeEach(() => { + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { + em, + componentTypes: dcomp.componentTypes, + domc: dcomp + }; + obj = new Component({}, compOpts); + dcomp.init({ em }); + }); + + afterEach(() => { + obj = null; + }); + + test('Has no children', () => { + expect(obj.get('components').length).toEqual(0); + }); + + test('Clones correctly', () => { + var sAttr = obj.attributes; + var cloned = obj.clone(); + var eAttr = cloned.attributes; + eAttr.components = {}; + sAttr.components = {}; + eAttr.traits = {}; + sAttr.traits = {}; + expect(sAttr.length).toEqual(eAttr.length); + }); + + test('Clones correctly with traits', () => { + obj + .get('traits') + .at(0) + .set('value', 'testTitle'); + var cloned = obj.clone(); + cloned.set('stylable', 0); + cloned + .get('traits') + .at(0) + .set('value', 'testTitle2'); + expect( + obj + .get('traits') + .at(0) + .get('value') + ).toEqual('testTitle'); + expect(obj.get('stylable')).toEqual(true); + }); + + test('Sets attributes correctly from traits', () => { + obj.set('traits', [ + { + label: 'Title', + name: 'title', + value: 'The title' + }, + { + label: 'Context', + value: 'primary' + } + ]); + expect(obj.get('attributes')).toEqual({ title: 'The title' }); + }); + + test('Has expected name', () => { + expect(obj.getName()).toEqual('Box'); + }); + + test('Has expected name 2', () => { + obj.cid = 'c999'; + obj.set('type', 'testType'); + expect(obj.getName()).toEqual('TestType'); + }); + + test('Component toHTML', () => { + expect(obj.toHTML()).toEqual('
'); + }); + + test('Component toHTML with attributes', () => { + obj = new Component({ + tagName: 'article', + attributes: { + 'data-test1': 'value1', + 'data-test2': 'value2' + } }); - - describe('Image Component', () => { - beforeEach(() => { - obj = new ComponentImage(); - }); - - afterEach(() => { - obj = null; - }); - - test('Has src property', () => { - expect(obj.has('src')).toEqual(true); - }); - - test('Not droppable', () => { - expect(obj.get('droppable')).toEqual(0); - }); - - test('ComponentImage toHTML', () => { - obj = new ComponentImage({ src: '' }); - expect(obj.toHTML()).toEqual(''); - }); - - test('Component toHTML with attributes', () => { - obj = new ComponentImage({ - attributes: { alt: 'AltTest' }, - src: 'testPath' - }); - expect(obj.toHTML()).toEqual('AltTest'); - }); - - test('Refuse not img element', () => { - var el = document.createElement('div'); - obj = ComponentImage.isComponent(el); - expect(obj).toEqual(''); - }); - - test('Component parse img element', () => { - var el = document.createElement('img'); - obj = ComponentImage.isComponent(el); - expect(obj).toEqual({ type: 'image' }); - }); - - test('Component parse img element with src', () => { - var el = document.createElement('img'); - el.src = 'http://localhost/'; - obj = ComponentImage.isComponent(el); - expect(obj).toEqual({ type: 'image' }); - }); + expect(obj.toHTML()).toEqual( + '
' + ); + }); + + test('Component toHTML with value-less attribute', () => { + obj = new Component({ + tagName: 'div', + attributes: { + 'data-is-a-test': '' + } }); + expect(obj.toHTML()).toEqual('
'); + }); - describe('Text Component', () => { - beforeEach(() => { - obj = new ComponentText(); - }); - - afterEach(() => { - obj = null; - }); - - test('Has content property', () => { - expect(obj.has('content')).toEqual(true); - }); - - test('Not droppable', () => { - expect(obj.get('droppable')).toEqual(false); - }); - - test('Component toHTML with attributes', () => { - obj = new ComponentText({ - attributes: { 'data-test': 'value' }, - content: 'test content' - }); - expect(obj.toHTML()).toEqual( - '
test content
' - ); - }); + test('Component toHTML with classes', () => { + obj = new Component({ + tagName: 'article' }); - - describe('Link Component', () => { - const aEl = document.createElement('a'); - - test('Component parse link element', () => { - obj = ComponentLink.isComponent(aEl); - expect(obj).toEqual({ type: 'link' }); - }); - - test('Component parse link element with text content', () => { - aEl.innerHTML = 'some text here '; - obj = ComponentLink.isComponent(aEl); - expect(obj).toEqual({ type: 'link' }); - }); - - test('Component parse link element with not only text content', () => { - aEl.innerHTML = '
Some
text
here
'; - obj = ComponentLink.isComponent(aEl); - expect(obj).toEqual({ type: 'link' }); - }); - - test('Component parse link element with only not text content', () => { - aEl.innerHTML = `
Some
-
text
-
here
`; - obj = ComponentLink.isComponent(aEl); - expect(obj).toEqual({ type: 'link', editable: 0 }); - }); - - test('Link element with only an image inside is not editable', () => { - aEl.innerHTML = ''; - obj = ComponentLink.isComponent(aEl); - expect(obj).toEqual({ type: 'link', editable: 0 }); - }); + ['class1', 'class2'].forEach(item => { + obj.get('classes').add({ name: item }); }); - - describe('Map Component', () => { - test('Component parse map iframe', () => { - var src = - 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed'; - var el = $(''); - obj = ComponentMap.isComponent(el.get(0)); - expect(obj).toEqual({ type: 'map', src }); - }); - - test('Component parse not map iframe', () => { - var el = $( - '' - ); - obj = ComponentMap.isComponent(el.get(0)); - expect(obj).toEqual(''); - }); + expect(obj.toHTML()).toEqual('
'); + }); + + test('Component toHTML with children', () => { + obj = new Component({ tagName: 'article' }, compOpts); + obj.get('components').add({ tagName: 'span' }); + expect(obj.toHTML()).toEqual('
'); + }); + + test('Component toHTML with more children', () => { + obj = new Component({ tagName: 'article' }, compOpts); + obj.get('components').add([{ tagName: 'span' }, { tagName: 'div' }]); + expect(obj.toHTML()).toEqual('
'); + }); + + test('Component toHTML with no closing tag', () => { + obj = new Component({ void: 1 }); + expect(obj.toHTML()).toEqual('
'); + }); + + test('Component toHTML with quotes in attribute', () => { + obj = new Component(); + let attrs = obj.get('attributes'); + attrs['data-test'] = '"value"'; + obj.set('attributes', attrs); + expect(obj.toHTML()).toEqual('
'); + }); + + test('Manage correctly boolean attributes', () => { + obj = new Component(); + obj.set('attributes', { + 'data-test': 'value', + checked: false, + required: true, + avoid: true }); - - describe('Video Component', () => { - test('Component parse video', () => { - var src = 'http://localhost/'; - var el = $(''); - obj = ComponentVideo.isComponent(el.get(0)); - expect(obj).toEqual({ type: 'video', src }); - }); - - test('Component parse youtube video iframe', () => { - var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; - var el = $(''); + obj = ComponentMap.isComponent(el.get(0)); + expect(obj).toEqual({ type: 'map', src }); + }); + + test('Component parse not map iframe', () => { + var el = $( + '' + ); + obj = ComponentMap.isComponent(el.get(0)); + expect(obj).toEqual(''); + }); +}); + +describe('Video Component', () => { + test('Component parse video', () => { + var src = 'http://localhost/'; + var el = $(''); + obj = ComponentVideo.isComponent(el.get(0)); + expect(obj).toEqual({ type: 'video', src }); + }); + + test('Component parse youtube video iframe', () => { + var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?'; + var el = $('