bruks/dynamicweb
1
0
Fork 0
forked from ungleich-public/dynamicweb
Code Pull requests Activity
dynamicweb/cms/tests/frontend/unit/cms.structureboard.test.js

2814 lines
113 KiB
JavaScript
Raw Blame History

'use strict';
import StructureBoard from '../../../static/cms/js/modules/cms.structureboard';
import Plugin from '../../../static/cms/js/modules/cms.plugins';
import CMS, { Helpers, KEYS } from '../../../static/cms/js/modules/cms.base';
import $ from 'jquery';
import keyboard from '../../../static/cms/js/modules/keyboard';
import { rewire, resetRewire } from './helpers/rewire';
vi.mock('../../../static/cms/js/modules/loader', async () => {
const { lazyMock, registerActual } = await import('./helpers/rewire');
registerActual('loader', await vi.importActual('../../../static/cms/js/modules/loader'));
return lazyMock('loader', { showLoader: 'showLoader', hideLoader: 'hideLoader' });
});
vi.mock('../../../static/cms/js/modules/cms.plugins', async () => {
const { lazyMock, registerActual } = await import('./helpers/rewire');
const namespace = lazyMock('cms.plugins', { default: 'Plugin' });
// not awaited on purpose: cms.plugins is part of the plugins/structureboard/
// clipboard import cycle, and awaiting it here deadlocks the mock
vi.importActual('../../../static/cms/js/modules/cms.plugins')
.then(actual => registerActual('cms.plugins', actual));
return namespace;
});
vi.mock('../../../static/cms/js/modules/cms.clipboard', async () => {
const { lazyMock, registerActual } = await import('./helpers/rewire');
const namespace = lazyMock('cms.clipboard', { default: 'Clipboard' });
// not awaited on purpose: cms.clipboard is part of the plugins/structureboard/
// clipboard import cycle, and awaiting it here deadlocks the mock
vi.importActual('../../../static/cms/js/modules/cms.clipboard')
.then(actual => registerActual('cms.clipboard', actual));
return namespace;
});
vi.mock('../../../static/cms/js/modules/dom-diff', async () => {
const { lazyMock, registerActual } = await import('./helpers/rewire');
registerActual('dom-diff', await vi.importActual('../../../static/cms/js/modules/dom-diff'));
return lazyMock('dom-diff', { DiffDOM: 'DiffDOM', nodeToObj: 'nodeToObj' });
});
vi.mock('../../../static/cms/js/modules/preload-images', async () => {
const { lazyMock, registerActual } = await import('./helpers/rewire');
registerActual('preload-images', await vi.importActual('../../../static/cms/js/modules/preload-images'));
return lazyMock('preload-images', { default: 'preloadImagesFromMarkup' });
});
var showLoader;
var hideLoader;
window.CMS = CMS;
CMS.StructureBoard = StructureBoard;
CMS.Plugin = Plugin;
CMS.API = CMS.API || {};
CMS.API.Helpers = Helpers;
CMS.KEYS = KEYS;
CMS.$ = $;
const pluginConstructor = jasmine.createSpy();
// the real class, not the rewirable stand-in: FakePlugin._updateClipboard()
// delegates to it, which would otherwise recurse into itself
const originalPlugin = (await vi.importActual('../../../static/cms/js/modules/cms.plugins')).default;
class FakePlugin {
constructor(container, opts) {
this.options = opts;
const el = $('<div></div>');
el.data('cms', []);
this.ui = {
container: el
};
pluginConstructor(container, opts);
}
static _recalculatePluginPositions() {}
}
FakePlugin._updateRegistry = jasmine.createSpy();
FakePlugin._updateClipboard = jasmine.createSpy().and.callFake(() => {
originalPlugin._updateClipboard();
});
FakePlugin.aliasPluginDuplicatesMap = {};
FakePlugin._refreshPlugins = jasmine.createSpy().and.callFake(() => {
originalPlugin._refreshPlugins();
});
FakePlugin.prototype._setupUI = jasmine.createSpy();
FakePlugin.prototype._ensureData = jasmine.createSpy();
FakePlugin.prototype._setGeneric = jasmine.createSpy();
FakePlugin.prototype._setPlaceholder = jasmine.createSpy();
FakePlugin.prototype._collapsables = jasmine.createSpy();
FakePlugin.prototype._setPluginContentEvents = jasmine.createSpy();
FakePlugin.prototype._setPluginStructureEvents = jasmine.createSpy();
describe('CMS.StructureBoard', function() {
fixture.setBase('cms/tests/frontend/unit/fixtures');
beforeEach(() => {
CMS.API.Clipboard = {
populate: jasmine.createSpy()
};
showLoader = jasmine.createSpy();
hideLoader = jasmine.createSpy();
rewire('showLoader', showLoader);
rewire('hideLoader', hideLoader);
});
afterEach(() => {
FakePlugin.aliasPluginDuplicatesMap = {};
FakePlugin.prototype._setupUI.calls.reset();
FakePlugin.prototype._ensureData.calls.reset();
FakePlugin.prototype._setGeneric.calls.reset();
FakePlugin.prototype._setPlaceholder.calls.reset();
FakePlugin.prototype._collapsables.calls.reset();
FakePlugin.prototype._setPluginContentEvents.calls.reset();
FakePlugin.prototype._setPluginStructureEvents.calls.reset();
FakePlugin._refreshPlugins.calls.reset();
resetRewire('showLoader');
resetRewire('hideLoader');
});
it('creates a StructureBoard class', function() {
expect(CMS.StructureBoard).toBeDefined();
});
it('has public API', function() {
expect(CMS.StructureBoard.prototype.show).toEqual(jasmine.any(Function));
expect(CMS.StructureBoard.prototype.hide).toEqual(jasmine.any(Function));
expect(CMS.StructureBoard.prototype.getId).toEqual(jasmine.any(Function));
expect(CMS.StructureBoard.prototype.getIds).toEqual(jasmine.any(Function));
});
describe('instance', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: '/structure'
},
mode: 'edit'
};
$(function() {
CMS.StructureBoard._initializeGlobalHandlers();
jasmine.clock().install();
board = new CMS.StructureBoard();
done();
});
});
afterEach(function() {
jasmine.clock().uninstall();
fixture.cleanup();
});
it('has ui', function() {
expect(board.ui).toEqual(jasmine.any(Object));
expect(Object.keys(board.ui)).toContain('container');
expect(Object.keys(board.ui)).toContain('content');
expect(Object.keys(board.ui)).toContain('doc');
expect(Object.keys(board.ui)).toContain('window');
expect(Object.keys(board.ui)).toContain('html');
expect(Object.keys(board.ui)).toContain('toolbar');
expect(Object.keys(board.ui)).toContain('sortables');
expect(Object.keys(board.ui)).toContain('plugins');
expect(Object.keys(board.ui)).toContain('render_model');
expect(Object.keys(board.ui)).toContain('placeholders');
expect(Object.keys(board.ui)).toContain('dragitems');
expect(Object.keys(board.ui)).toContain('dragareas');
expect(Object.keys(board.ui)).toContain('toolbarModeSwitcher');
expect(Object.keys(board.ui)).toContain('toolbarModeLinks');
expect(Object.keys(board.ui).length).toEqual(14);
});
it('has no options', function() {
expect(board.options).not.toBeDefined();
});
it('applies correct classes to empty placeholder dragareas', function() {
$('.cms-dragarea').removeClass('cms-dragarea-empty');
board = new CMS.StructureBoard();
expect('.cms-dragarea-1').not.toHaveClass('cms-dragarea-empty');
expect('.cms-dragarea-2').toHaveClass('cms-dragarea-empty');
expect('.cms-dragarea-10').toHaveClass('cms-dragarea-empty');
});
it('initially shows or hides board based on settings', function() {
spyOn(CMS.StructureBoard.prototype, 'show');
spyOn(CMS.StructureBoard.prototype, 'hide');
expect(CMS.config.settings.mode).toEqual('edit');
board = new CMS.StructureBoard();
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).toHaveBeenCalled();
});
it('initially shows or hides board based on settings 2', function() {
spyOn(CMS.StructureBoard.prototype, 'show');
spyOn(CMS.StructureBoard.prototype, 'hide');
CMS.config.settings.mode = 'structure';
board = new CMS.StructureBoard();
expect(board.show).toHaveBeenCalled();
expect(board.hide).not.toHaveBeenCalled();
});
it('does not show or hide structureboard if there are no dragareas', function() {
board.ui.dragareas.remove();
board = new CMS.StructureBoard();
spyOn(board, 'show');
spyOn(board, 'hide');
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).not.toHaveBeenCalled();
jasmine.clock().tick(200);
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).not.toHaveBeenCalled();
});
it('does not show or hide structureboard if there is no board mode switcher', function() {
board.ui.toolbarModeSwitcher.remove();
board = new CMS.StructureBoard();
spyOn(board, 'show');
spyOn(board, 'hide');
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).not.toHaveBeenCalled();
jasmine.clock().tick(200);
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).not.toHaveBeenCalled();
});
it('enables board mode switcher if there are placeholders', function() {
expect(board.ui.placeholders.length > 0).toEqual(true);
board.ui.toolbarModeSwitcher.find('.cms-btn').addClass('cms-btn-disabled');
new CMS.StructureBoard();
jasmine.clock().tick(100);
expect(board.ui.toolbarModeSwitcher.find('.cms-btn')).not.toHaveClass('cms-btn-disabled');
});
it('does not enable board mode switcher if there are no placeholders', function() {
expect(board.ui.placeholders.length > 0).toEqual(true);
expect(board.ui.dragareas.length > 0).toEqual(true);
board.ui.placeholders.remove();
board.ui.dragareas.remove();
board.ui.toolbarModeSwitcher.find('.cms-btn').addClass('cms-btn-disabled');
board = new CMS.StructureBoard();
expect(board.ui.placeholders.length).toEqual(0);
expect(board.ui.dragareas.length).toEqual(0);
jasmine.clock().tick(100);
expect(board.ui.toolbarModeSwitcher.find('.cms-btn')).toHaveClass('cms-btn-disabled');
});
it('sets loaded content and structure flags if it is a legacy renderer', () => {
CMS.config.settings.legacy_mode = true;
board = new CMS.StructureBoard();
expect(board._loadedStructure).toEqual(true);
expect(board._loadedContent).toEqual(true);
});
});
describe('.show()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.API.Toolbar = {
_refreshMarkup: jasmine.createSpy()
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
spyOn(CMS.API.Helpers, 'setSettings').and.callFake(function(input) {
return input;
});
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, '_loadStructure').and.returnValue(Promise.resolve());
done();
});
});
afterEach(function() {
fixture.cleanup();
});
it('shows the board', function(done) {
spyOn(board, '_showBoard').and.callThrough();
expect(board.ui.container).not.toBeVisible();
board.show().then(function() {
expect(board.ui.container).toBeVisible();
expect(board._showBoard).toHaveBeenCalled();
done();
});
});
it('does not show the board if we are viewing published page', function(done) {
CMS.config.mode = 'live';
spyOn(board, '_showBoard').and.callThrough();
expect(board.ui.container).not.toBeVisible();
board.show().then(r => {
expect(r).toEqual(false);
expect(board.ui.container).not.toBeVisible();
expect(board._showBoard).not.toHaveBeenCalled();
done();
});
});
it('highlights correct trigger', function(done) {
expect(board.ui.toolbarModeLinks).not.toHaveClass('cms-btn-active');
board.show().then(() => {
expect(board.ui.toolbarModeLinks).toHaveClass('cms-btn-active');
done();
});
});
it('adds correct classes to the root of the document', function(done) {
board.ui.html.removeClass('cms-structure-mode-structure');
expect(board.ui.html).not.toHaveClass('cms-structure-mode-structure');
board.show().then(() => {
expect(board.ui.html).toHaveClass('cms-structure-mode-structure');
done();
});
});
it('does set state through settings', function(done) {
CMS.API.Helpers.setSettings.and.callFake(function(input) {
return input;
});
expect(CMS.settings.mode).toEqual('edit');
board.show().then(() => {
expect(CMS.settings.mode).toEqual('structure');
expect(CMS.API.Helpers.setSettings).toHaveBeenCalled();
done();
});
});
it('saves the state in the url');
});
describe('highlights', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html', 'clipboard.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
spyOn(CMS.API.Helpers, 'setSettings').and.callFake(function(input) {
return input;
});
CMS.API.Tooltip = {
domElem: {
is: function() {
return true;
},
data: function() {
return 1;
}
}
};
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, 'show').and.returnValue(Promise.resolve());
spyOn(board, 'hide').and.returnValue(Promise.resolve());
spyOn(Plugin, '_highlightPluginStructure');
spyOn(Plugin, '_highlightPluginContent');
done();
});
});
afterEach(function() {
fixture.cleanup();
});
describe('._showAndHighlightPlugin()', function() {
it('returns false if tooltip does not exist', function(done) {
CMS.API.Tooltip = false;
board._showAndHighlightPlugin().then(r => {
expect(r).toEqual(false);
expect(board.show).not.toHaveBeenCalled();
done();
});
});
it('returns false if in live mode', function(done) {
CMS.config.mode = 'live';
board._showAndHighlightPlugin().then(r => {
expect(r).toEqual(false);
expect(board.show).not.toHaveBeenCalled();
done();
});
});
it('returns false if no plugin is hovered', function(done) {
CMS.API.Tooltip.domElem.is = function() {
return false;
};
board._showAndHighlightPlugin().then(r => {
expect(r).toEqual(false);
expect(board.show).not.toHaveBeenCalled();
done();
});
});
it('shows board if plugin is hovered', function(done) {
jasmine.clock().install();
board._showAndHighlightPlugin().then(() => {
expect(board.show).toHaveBeenCalledTimes(1);
expect(Plugin._highlightPluginStructure).not.toHaveBeenCalled();
jasmine.clock().tick(201);
expect(Plugin._highlightPluginStructure).toHaveBeenCalledTimes(1);
jasmine.clock().uninstall();
done();
});
});
});
});
describe('.hide()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
$(function() {
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
spyOn(CMS.API.Helpers, 'setSettings').and.callFake(function(input) {
return input;
});
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, '_loadContent').and.returnValue(Promise.resolve());
spyOn(board, '_loadStructure').and.returnValue(Promise.resolve());
done();
});
});
afterEach(function() {
fixture.cleanup();
});
it('hides the board', function(done) {
spyOn(board, '_hideBoard').and.callThrough();
board
.show()
.then(() => {
expect(board.ui.container).toBeVisible();
return board.hide();
})
.then(() => {
expect(board.ui.container).not.toBeVisible();
expect(board._hideBoard).toHaveBeenCalled();
done();
});
});
it('does not hide the board if we are viewing published page', function() {
CMS.config.mode = 'live';
spyOn(board, '_hideBoard');
expect(board.ui.container).not.toBeVisible();
expect(board.hide()).toEqual(false);
expect(board.ui.container).not.toBeVisible();
expect(board._hideBoard).not.toHaveBeenCalled();
});
it('deactivates the button', function(done) {
board.hide().then(() => {
expect(board.ui.toolbarModeLinks).not.toHaveClass('cms-btn-active');
done();
});
});
it('does not remember the state in localstorage', function() {
board.show();
expect(CMS.settings.mode).toEqual('structure');
CMS.API.Helpers.setSettings.and.callFake(function(input) {
return input;
});
CMS.API.Helpers.setSettings.calls.reset();
board.hide();
expect(CMS.settings.mode).toEqual('edit');
expect(CMS.API.Helpers.setSettings).not.toHaveBeenCalled();
});
it('remembers the state in the url');
it('triggers `resize` event on the window', function(done) {
var spy = jasmine.createSpy();
board
.show()
.then(() => {
$(window).on('resize', spy);
return board.hide();
})
.then(() => {
expect(spy).toHaveBeenCalledTimes(1);
$(window).off('resize', spy);
done();
});
});
});
describe('.getId()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
done();
});
});
afterEach(function() {
fixture.cleanup();
});
it('returns the id of passed element', function() {
[
{
from: 'cms-plugin cms-plugin-1',
result: '1'
},
{
from: 'cms-plugin cms-plugin-125',
result: '125'
},
{
from: 'cms-draggable cms-draggable-1',
result: '1'
},
{
from: 'cms-draggable cms-draggable-125',
result: '125'
},
{
from: 'cms-placeholder cms-placeholder-1',
result: '1'
},
{
from: 'cms-placeholder cms-placeholder-125',
result: '125'
},
{
from: 'cms-dragbar cms-dragbar-1',
result: '1'
},
{
from: 'cms-dragbar cms-dragbar-125',
result: '125'
},
{
from: 'cms-dragarea cms-dragarea-1',
result: '1'
},
{
from: 'cms-dragarea cms-dragarea-125',
result: '125'
}
].forEach(function(obj) {
expect(board.getId($('<div class="' + obj.from + '"></div>'))).toEqual(obj.result);
});
});
it('returns null if element is of non supported "type"', function() {
[
{
from: 'cannot determine',
result: null
},
{
from: 'cms-not-supported cms-not-supported-1',
result: null
}
].forEach(function(obj) {
expect(board.getId($('<div class="' + obj.from + '"></div>'))).toEqual(obj.result);
});
});
it('returns false if element does not exist', function() {
expect(board.getId()).toEqual(false);
expect(board.getId(null)).toEqual(false);
expect(board.getId($('.non-existent'))).toEqual(false);
expect(board.getId([])).toEqual(false);
});
it('fails if classname string is incorrect', function() {
expect(board.getId.bind(board, $('<div class="cms-plugin"></div>'))).toThrow();
expect(board.getId($('<div class="cms-plugin fail cms-plugin-10"></div>'))).toEqual('fail');
});
});
describe('.getIds()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
done();
});
});
afterEach(function() {
fixture.cleanup();
});
it('returns the array of ids of passed collection', function() {
spyOn(board, 'getId').and.callThrough();
[
{
from: ['cms-plugin cms-plugin-1'],
result: ['1']
},
{
from: ['cms-plugin cms-plugin-125', 'cms-plugin cms-plugin-1'],
result: ['125', '1']
},
{
from: ['cms-plugin cms-plugin-125', 'cms-plugin cms-plugin-1', 'cms-draggable cms-draggable-12'],
result: ['125', '1', '12']
},
{
from: ['non-existent', 'cms-plugin cms-plugin-1'],
result: [null, '1']
}
].forEach(function(obj) {
var collection = $();
obj.from.forEach(function(className) {
collection = collection.add($('<div class="' + className + '"></div>'));
});
expect(board.getIds(collection)).toEqual(obj.result);
});
expect(board.getId).toHaveBeenCalled();
});
});
describe('._setupModeSwitcher()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
spyOn(keyboard, 'bind');
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, 'show').and.callFake(function() {
CMS.settings.mode = 'structure';
});
spyOn(board, 'hide').and.callFake(function() {
CMS.settings.mode = 'edit';
});
done();
});
});
afterEach(function() {
board.ui.doc.off('keydown.cms.structureboard.switcher');
fixture.cleanup();
});
it('sets up click handler to show board', function() {
var showTrigger = board.ui.toolbarModeLinks;
expect(showTrigger).toHandle(board.click);
CMS.settings.mode = 'structure';
showTrigger.trigger(board.click);
expect(board.show).not.toHaveBeenCalled();
CMS.settings.mode = 'edit';
showTrigger.trigger(board.click);
expect(board.show).toHaveBeenCalledTimes(1);
});
it('sets up click handler to hide board', function() {
var hideTrigger = board.ui.toolbarModeLinks;
expect(hideTrigger).toHandle(board.click);
CMS.settings.mode = 'edit';
hideTrigger.trigger(board.click);
expect(board.hide).not.toHaveBeenCalled();
CMS.settings.mode = 'structure';
hideTrigger.trigger(board.click);
expect(board.hide).toHaveBeenCalledTimes(1);
});
it('sets up shortcuts to toggle board', function() {
spyOn(board, '_toggleStructureBoard');
var preventDefaultSpySpace = jasmine.createSpy();
var preventDefaultSpyShiftSpace = jasmine.createSpy();
expect(keyboard.bind).toHaveBeenCalledTimes(2);
expect(keyboard.bind).toHaveBeenCalledWith('space', jasmine.any(Function));
expect(keyboard.bind).toHaveBeenCalledWith('shift+space', jasmine.any(Function));
var calls = keyboard.bind.calls.all();
calls[0].args[1]({ preventDefault: preventDefaultSpySpace });
expect(board._toggleStructureBoard).toHaveBeenCalledTimes(1);
expect(board._toggleStructureBoard).toHaveBeenCalledWith();
expect(preventDefaultSpySpace).toHaveBeenCalledTimes(1);
expect(preventDefaultSpyShiftSpace).not.toHaveBeenCalled();
calls[1].args[1]({ preventDefault: preventDefaultSpyShiftSpace });
expect(board._toggleStructureBoard).toHaveBeenCalledTimes(2);
expect(board._toggleStructureBoard).toHaveBeenCalledWith({
useHoveredPlugin: true
});
expect(preventDefaultSpySpace).toHaveBeenCalledTimes(1);
expect(preventDefaultSpyShiftSpace).toHaveBeenCalledTimes(1);
});
it('does not setup key binds if toggler is not availabe', function() {
keyboard.bind.calls.reset();
board.ui.toolbarModeSwitcher.remove();
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, 'show').and.callFake(function() {
CMS.settings.mode = 'structure';
});
spyOn(board, 'hide').and.callFake(function() {
CMS.settings.mode = 'edit';
});
expect(keyboard.bind).not.toHaveBeenCalled();
});
it('does not setup key binds if toggler is not visible (there are no placeholders)', function() {
keyboard.bind.calls.reset();
board.ui.placeholders.remove();
board.ui.dragareas.remove();
board.ui.toolbarModeSwitcher.find('.cms-btn').addClass('cms-btn-disabled');
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, 'show').and.callFake(function() {
CMS.settings.mode = 'structure';
});
spyOn(board, 'hide').and.callFake(function() {
CMS.settings.mode = 'edit';
});
expect(keyboard.bind).not.toHaveBeenCalled();
});
});
describe('._toggleStructureBoard()', function() {
var board;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'edit'
};
CMS.config = {
settings: {
mode: 'edit',
structure: 'structure'
},
mode: 'edit'
};
$(function() {
spyOn(keyboard, 'bind');
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
spyOn(board, 'show').and.callFake(function() {
CMS.settings.mode = 'structure';
});
spyOn(board, 'hide').and.callFake(function() {
CMS.settings.mode = 'edit';
});
spyOn(board, '_showAndHighlightPlugin').and.returnValue({
then() {}
});
done();
});
});
it('shows structureboard', function() {
board._toggleStructureBoard();
expect(board.show).toHaveBeenCalledTimes(1);
expect(board.hide).not.toHaveBeenCalled();
});
it('hides strucrueboard', function() {
CMS.settings.mode = 'structure';
board._toggleStructureBoard();
expect(board.show).not.toHaveBeenCalled();
expect(board.hide).toHaveBeenCalledTimes(1);
});
it('shows structureboard and highlights plugin', function() {
CMS.settings.mode = 'edit';
board._toggleStructureBoard({ useHoveredPlugin: true });
expect(board._showAndHighlightPlugin).toHaveBeenCalledTimes(1);
});
it('does not show structureboard and highlights plugin if it is open already', function() {
CMS.settings.mode = 'structure';
board._toggleStructureBoard({ useHoveredPlugin: true });
expect(board._showAndHighlightPlugin).not.toHaveBeenCalled();
});
});
describe('._drag()', function() {
var board;
var options;
beforeEach(function(done) {
fixture.load('plugins.html');
CMS.settings = {
mode: 'structure'
};
CMS.config = {
settings: {
mode: 'structure',
structure: '/structure'
},
mode: 'structure'
};
$(function() {
CMS.StructureBoard._initializeGlobalHandlers();
board = new CMS.StructureBoard();
board._drag();
options = board.ui.sortables.nestedSortable('option');
board.show().then(() => {
done();
});
});
});
afterEach(function() {
board.ui.doc.off('keyup.cms.interrupt');
fixture.cleanup();
});
it('initializes nested sortable', function() {
options = board.ui.sortables.nestedSortable('option');
expect(options).toEqual(
jasmine.objectContaining({
items: '> .cms-draggable:not(.cms-drag-disabled):not(.cms-draggable-disabled .cms-draggable)',
placeholder: 'cms-droppable',
connectWith: '.cms-draggables:not(.cms-hidden)',
appendTo: '.cms-structure-content',
listType: 'div.cms-draggables',
doNotClear: true,
toleranceElement: '> div',
disableNestingClass: 'cms-draggable-disabled',
errorClass: 'cms-draggable-disallowed',
start: jasmine.any(Function),
helper: jasmine.any(Function),
beforeStop: jasmine.any(Function),
update: jasmine.any(Function),
isAllowed: jasmine.any(Function)
})
);
});
it('adds event handler for cms-structure-update to actualize empty placeholders', function() {
if (!CMS.$._data(board.ui.sortables[0]).events['cms-structure-update'][0].handler.name) {
pending();
}
expect(board.ui.sortables).toHandle('cms-structure-update');
// cheating here a bit
expect(CMS.$._data(board.ui.sortables[0]).events['cms-structure-update'][0].handler.name).toEqual(
'actualizePlaceholders'
);
});
it('defines how draggable helper is created', function() {
options = board.ui.sortables.nestedSortable('option');
var helper = options.helper;
var item = $(
'<div class="some class string">' +
'<div class="cms-dragitem">Only this will be cloned</div>' +
'<div class="cms-draggables">' +
'<div class="cms-dragitem">This will not</div>' +
'</div>' +
'</div>'
);
var result = helper(null, item);
expect(result).toHaveClass('some');
expect(result).toHaveClass('class');
expect(result).toHaveClass('string');
expect(result).toHaveText('Only this will be cloned');
expect(result).not.toHaveText('This will not');
});
describe('start', function() {
it('sets touchAction style property', function() {
expect(board.ui.content[0].style.touchAction).toEqual('pan-y');
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(board.ui.content[0].style.touchAction).toEqual('none');
});
it('sets dragging state', function() {
expect(board.dragging).toEqual(false);
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(board.dragging).toEqual(true);
});
it('actualizes empty placeholders', function() {
var firstPlaceholder = board.ui.dragareas.eq(0);
var firstPlaceholderCopyAll = firstPlaceholder.find(
'.cms-dragbar .cms-submenu-item:has(a[data-rel="copy"]):first'
);
var secondPlaceholder = board.ui.dragareas.eq(1);
var secondPlaceholderCopyAll = secondPlaceholder.find(
'.cms-dragbar .cms-submenu-item:has(a[data-rel="copy"]):first'
);
expect(firstPlaceholder).toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
secondPlaceholder
.find('> .cms-draggables')
.contents()
.appendTo(firstPlaceholder.find('> .cms-draggables'));
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(firstPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
// now check that the plugin currently being dragged does not count
// towards "plugins count"
firstPlaceholder
.find('> .cms-draggables')
.contents()
.appendTo(secondPlaceholder.find('> .cms-draggables'));
firstPlaceholder
.find('> .cms-draggables')
.append($('<div class="cms-draggable cms-draggable-is-dragging"></div>'));
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(firstPlaceholder).toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
});
it('hides settings menu', function() {
spyOn(CMS.Plugin, '_hideSettingsMenu');
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(CMS.Plugin._hideSettingsMenu).toHaveBeenCalledTimes(1);
});
it('shows all the empty sortables', function() {
expect($('.cms-draggables.cms-hidden').length).toEqual(1);
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect($('.cms-draggables.cms-hidden').length).toEqual(0);
});
it('adds appropriate classes on item without children and helper', function() {
var item = $('<div class="cms-draggable"><div class="cms-dragitem">Some plugin</div></div>');
var helper = options.helper(null, item);
options.start(
{},
{
item: item,
helper: helper
}
);
expect(item).toHaveClass('cms-is-dragging');
expect(helper).toHaveClass('cms-draggable-is-dragging');
});
it('adds appropriate classes on item with children', function() {
var item = $(
'<div class="cms-draggable">' +
'<div class="cms-dragitem">Some plugin</div>' +
'<div class="cms-draggables">' +
'<div></div>' +
'</div>' +
'</div>'
);
var helper = options.helper(null, item);
options.start(
{},
{
item: item,
helper: helper
}
);
expect(helper).toHaveClass('cms-draggable-stack');
});
it('sets up a handler for interrupting dragging with keyboard', function() {
expect(board.ui.doc).not.toHandle('keyup.cms.interrupt');
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
expect(board.ui.doc).toHandle('keyup.cms.interrupt');
var spy = jasmine.createSpy();
board.ui.sortables.on('mouseup', spy);
spyOn($.ui.sortable.prototype, '_mouseStop');
var wrongEvent = new $.Event('keyup.cms.interrupt', { keyCode: 1287926834 });
var correctEvent = new $.Event('keyup.cms.interrupt', { keyCode: CMS.KEYS.ESC });
board.state = 'mock';
board.ui.doc.trigger(wrongEvent);
expect(board.state).toEqual('mock');
expect($.ui.sortable.prototype._mouseStop).not.toHaveBeenCalled();
expect(spy).not.toHaveBeenCalled();
board.state = 'mock';
board.ui.doc.trigger(wrongEvent, [true]);
expect(board.state).toEqual(false);
expect($.ui.sortable.prototype._mouseStop).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledTimes(1 + board.ui.sortables.length);
board.ui.doc.off('keyup.cms.interrupt');
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
board.state = 'mock';
board.ui.doc.trigger(correctEvent);
expect(board.state).toEqual(false);
expect($.ui.sortable.prototype._mouseStop).toHaveBeenCalledTimes(2);
expect(spy).toHaveBeenCalledTimes((1 + board.ui.sortables.length) * 2);
});
});
describe('beforeStop', function() {
it('sets dragging state to false', function() {
board.dragging = true;
options.beforeStop(null, { item: $('<div></div>') });
expect(board.dragging).toEqual(false);
});
it('removes classes', function() {
var item = $('<div class="cms-is-dragging cms-draggable-stack"></div>');
options.beforeStop(null, { item: item });
expect(item).not.toHaveClass('cms-is-dragging');
expect(item).not.toHaveClass('cms-draggable-stack');
});
it('unbinds interrupt event', function() {
var spy = jasmine.createSpy();
board.ui.doc.on('keyup.cms.interrupt', spy);
options.beforeStop(null, { item: $('<div></div>') });
board.ui.doc.trigger('keyup.cms.interrupt');
expect(spy).not.toHaveBeenCalled();
expect(board.ui.doc).not.toHandle('keyup.cms.interrupt');
});
it('resets touchAction style property', function() {
board.ui.content[0].style.touchAction = '';
options.beforeStop(null, { item: $('<div></div>') });
expect(board.ui.content[0].style.touchAction).toEqual('pan-y');
});
});
describe('update', function() {
it('returns false if it is not possible to update', function() {
board.state = false;
expect(options.update()).toEqual(false);
});
it('actualizes collapsible status', function() {
var textPlugin = $('.cms-draggable-1');
var randomPlugin = $('.cms-draggable-2');
var helper = options.helper(null, textPlugin);
// we need to start first to set a private variable original container
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
expect(randomPlugin.find('> .cms-dragitem')).not.toHaveClass('cms-dragitem-collapsable');
expect(randomPlugin.find('> .cms-dragitem')).not.toHaveClass('cms-dragitem-expanded');
textPlugin.appendTo(randomPlugin.find('.cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect(randomPlugin.find('> .cms-dragitem')).toHaveClass('cms-dragitem-collapsable');
expect(randomPlugin.find('> .cms-dragitem')).toHaveClass('cms-dragitem-expanded');
// and back
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.appendTo($('.cms-dragarea-1').find('> .cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect(randomPlugin.find('> .cms-dragitem')).not.toHaveClass('cms-dragitem-collapsable');
expect(randomPlugin.find('> .cms-dragitem')).toHaveClass('cms-dragitem-expanded');
});
it('returns false if we moved plugin inside same container and the event is fired on the container', () => {
var textPlugin = $('.cms-draggable-1');
var helper = options.helper(null, textPlugin);
var placeholderDraggables = $('.cms-dragarea-1').find('> .cms-draggables');
// and one more time
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.prependTo(placeholderDraggables);
expect(options.update.bind(textPlugin)(null, { item: textPlugin, helper: helper })).toEqual(false);
});
it('triggers event on the plugin when necessary', function() {
var textPlugin = $('.cms-draggable-1');
var randomPlugin = $('.cms-draggable-2');
var helper = options.helper(null, textPlugin);
var placeholderDraggables = $('.cms-dragarea-1').find('> .cms-draggables');
var spy = jasmine.createSpy();
textPlugin.on('cms-plugins-update', spy);
// we need to start first to set a private variable original container
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.appendTo(randomPlugin.find('.cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect(spy).toHaveBeenCalledTimes(1);
// and back
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.appendTo($('.cms-dragarea-1').find('> .cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect(spy).toHaveBeenCalledTimes(2);
// and one more time
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.prependTo(placeholderDraggables);
options.update.bind(placeholderDraggables)(null, { item: textPlugin, helper: helper });
expect(spy).toHaveBeenCalledTimes(3);
});
it('triggers event on the plugin in clipboard', function() {
$(fixture.el).prepend(
'<div class="cms-clipboard">' +
'<div class="cms-clipboard-containers cms-draggables"></div>' +
'</div>'
);
var textPlugin = $('.cms-draggable-1');
var randomPlugin = $('.cms-draggable-2');
var helper = options.helper(null, textPlugin);
textPlugin.prependTo('.cms-clipboard-containers');
var pluginSpy = jasmine.createSpy();
var clipboardSpy = jasmine.createSpy();
textPlugin.on('cms-plugins-update', pluginSpy);
textPlugin.on('cms-paste-plugin-update', clipboardSpy);
// we need to start first to set a private variable original container
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
textPlugin.appendTo(randomPlugin.find('.cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect(pluginSpy).not.toHaveBeenCalled();
expect(clipboardSpy).toHaveBeenCalledTimes(1);
});
it('actualizes empty placeholders', function() {
var firstPlaceholder = board.ui.dragareas.eq(0);
var firstPlaceholderCopyAll = firstPlaceholder.find(
'.cms-dragbar .cms-submenu-item:has(a[data-rel="copy"]):first'
);
var secondPlaceholder = board.ui.dragareas.eq(1);
var secondPlaceholderCopyAll = secondPlaceholder.find(
'.cms-dragbar .cms-submenu-item:has(a[data-rel="copy"]):first'
);
expect(firstPlaceholder).toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
options.start({}, { item: $('<div></div>'), helper: $('<div></div>') });
secondPlaceholder
.find('> .cms-draggables')
.contents()
.appendTo(firstPlaceholder.find('> .cms-draggables'));
board.state = true;
options.update({}, { item: $('<div class="cms-plugin-1"></div>'), helper: $('<div></div>') });
expect(firstPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
// now check that the plugin currently being dragged does not count
// towards "plugins count"
firstPlaceholder
.find('> .cms-draggables')
.contents()
.appendTo(secondPlaceholder.find('> .cms-draggables'));
firstPlaceholder
.find('> .cms-draggables')
.append($('<div class="cms-draggable cms-draggable-is-dragging"></div>'));
options.update({}, { item: $('<div class="cms-plugin-1"></div>'), helper: $('<div></div>') });
expect(firstPlaceholder).toHaveClass('cms-dragarea-empty');
expect(firstPlaceholderCopyAll).toHaveClass('cms-submenu-item-disabled');
expect(secondPlaceholder).not.toHaveClass('cms-dragarea-empty');
expect(secondPlaceholderCopyAll).not.toHaveClass('cms-submenu-item-disabled');
});
it('hides empty sortables', function() {
var textPlugin = $('.cms-draggable-1');
var randomPlugin = $('.cms-draggable-2');
var helper = options.helper(null, textPlugin);
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
expect($('.cms-draggables.cms-hidden').length).toEqual(0);
textPlugin.appendTo(randomPlugin.find('.cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect($('.cms-draggables.cms-hidden').length).toEqual(0);
options.start(null, { item: textPlugin, helper: helper });
board.state = true;
expect($('.cms-draggables.cms-hidden').length).toEqual(0);
textPlugin.appendTo($('.cms-dragarea-1').find('> .cms-draggables'));
options.update(null, { item: textPlugin, helper: helper });
expect($('.cms-draggables.cms-hidden').length).toEqual(1);
});
});
describe('isAllowed', function() {
it('returns false if CMS.API is locked', function() {
CMS.API.locked = true;
board.state = 'mock';
expect(options.isAllowed()).toEqual(false);
expect(board.state).toEqual('mock');
});
it('returns false if there is no item', function() {
CMS.API.locked = false;
board.state = 'mock';
expect(options.isAllowed()).toEqual(false);
expect(board.state).toEqual('mock');
});
it('returns false if item has no settings', function() {
board.state = 'mock';
expect(options.isAllowed(null, null, $('.cms-draggable-1'))).toEqual(false);
expect(board.state).toEqual('mock');
});
it('returns false if parent cannot have children', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var pluginEdit = $('.cms-plugin-1');
var placeholder = $('.cms-draggables').eq(0);
placeholder.parent().addClass('cms-draggable-disabled');
$('.cms-placeholder-1').remove();
pluginEdit.data('cms', {});
expect(options.isAllowed(placeholder, null, pluginStructure)).toEqual(false);
expect(board.state).toEqual('mock');
});
it('returns false if parent is a clipboard', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var pluginEdit = $('.cms-plugin-1');
var placeholder = $('.cms-draggables').eq(0);
placeholder.parent().addClass('cms-clipboard-containers');
$('.cms-placeholder-1').remove();
pluginEdit.data('cms', {});
expect(options.isAllowed(placeholder, null, pluginStructure)).toEqual(false);
expect(board.state).toEqual('mock');
});
describe('bounds of a place we put current plugin in', function() {
it('uses placeholder bounds', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var placeholder = $('.cms-dragarea-1 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.data('cms', {});
placeholderEdit.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
expect(options.isAllowed(placeholder, null, pluginStructure)).toEqual(false);
expect(board.state).toEqual(false);
});
it('uses placeholder bounds', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var placeholder = $('.cms-dragarea-1 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.data('cms', { plugin_type: 'OnlyThisPlugin' });
placeholderEdit.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
expect(options.isAllowed(placeholder, null, pluginStructure)).toEqual(true);
expect(board.state).toEqual(true);
});
it('uses plugin bounds if pasted into the plugin', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var parentPluginStructure = $('.cms-draggable-2');
var placeholder = $('.cms-draggable-2 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.appendTo(parentPluginStructure.find('> .cms-draggables'));
pluginStructure.data('cms', { plugin_type: 'OtherPlugin' });
parentPluginStructure.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
placeholderEdit.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
expect(options.isAllowed(placeholder, null, $('.cms-draggable-1'))).toEqual(false);
expect(board.state).toEqual(false);
});
it('uses plugin bounds if pasted into the plugin', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var parentPluginStructure = $('.cms-draggable-2');
var placeholder = $('.cms-draggable-2 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.appendTo(parentPluginStructure.find('> .cms-draggables'));
pluginStructure.data('cms', { plugin_type: 'OtherPlugin' });
parentPluginStructure.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
placeholderEdit.data('cms', { plugin_restriction: ['OtherPlugin'] });
expect(options.isAllowed(placeholder, null, $('.cms-draggable-1'))).toEqual(false);
expect(board.state).toEqual(false);
});
it('uses plugin bounds if pasted into the plugin', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var parentPluginStructure = $('.cms-draggable-2');
var placeholder = $('.cms-draggable-2 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.appendTo(parentPluginStructure.find('> .cms-draggables'));
pluginStructure.data('cms', { plugin_type: 'OtherPlugin' });
parentPluginStructure.data('cms', { plugin_restriction: [] });
placeholderEdit.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
expect(options.isAllowed(placeholder, null, $('.cms-draggable-1'))).toEqual(true);
expect(board.state).toEqual(true);
});
it('uses placeholderParent bounds', function() {
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var parentPluginStructure = $('.cms-draggable-2');
var placeholder = $('.cms-draggable-2 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.appendTo(parentPluginStructure.find('> .cms-draggables'));
pluginStructure.data('cms', { plugin_type: 'OtherPlugin' });
parentPluginStructure.data('cms', { plugin_restriction: [] });
placeholderEdit.data('cms', { plugin_restriction: ['OnlyThisPlugin'] });
// it's important that placeholder is used, and not .cms-draggable-1
expect(options.isAllowed($('.cms-draggable-1'), placeholder, $('.cms-draggable-1'))).toEqual(true);
expect(board.state).toEqual(true);
});
});
it('blocks a plugin that the target placeholder does not allow at its root', function() {
// A plugin that requires a parent is excluded from the placeholder's root list
// server-side, so it is blocked at the root purely by the bounds (child list) check.
board.state = 'mock';
var pluginStructure = $('.cms-draggable-1');
var placeholder = $('.cms-dragarea-1 > .cms-draggables');
var placeholderEdit = $('.cms-placeholder-1');
pluginStructure.data('cms', { plugin_type: 'OtherPlugin' });
placeholderEdit.data('cms', { plugin_restriction: ['OnlyRootPlugin'] });
expect(options.isAllowed(placeholder, null, pluginStructure)).toEqual(false);
expect(board.state).toEqual(false);
});
});
});
describe('invalidateState', () => {
let board;
beforeEach(done => {
fixture.load('plugins.html');
board = new CMS.StructureBoard();
rewire('Plugin', FakePlugin);
spyOn(StructureBoard, 'actualizePluginCollapseStatus');
spyOn(StructureBoard, 'actualizePlaceholders');
spyOn(StructureBoard, 'actualizePluginsCollapsibleStatus');
spyOn(Plugin, '_updateClipboard');
spyOn(board, '_drag');
setTimeout(() => {
done();
}, 20);
});
afterEach(() => {
fixture.cleanup();
resetRewire('Plugin');
});
describe('itself', () => {
beforeEach(() => {
spyOn(CMS.API.Helpers, 'reloadBrowser');
CMS.API.Toolbar = {
_refreshMarkup: jasmine.createSpy()
};
spyOn(board, 'handleAddPlugin');
spyOn(board, 'handleEditPlugin');
spyOn(board, 'handleDeletePlugin');
spyOn(board, 'handleClearPlaceholder');
spyOn(board, 'handleCopyPlugin');
spyOn(board, 'handleMovePlugin');
spyOn(board, 'handleCutPlugin');
spyOn(board, '_loadToolbar').and.returnValue({
done() {
return {
fail() {}
};
}
});
spyOn(board, '_requestMode').and.returnValue({
done() {
return {
fail() {}
};
}
});
spyOn(board, 'refreshContent');
});
it('delegates to correct methods', () => {
board.invalidateState('ADD', { randomData: 1 });
expect(board.handleAddPlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('MOVE', { randomData: 1 });
expect(board.handleMovePlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('COPY', { randomData: 1 });
expect(board.handleCopyPlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('PASTE', { randomData: 1 });
expect(board.handleMovePlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('CUT', { randomData: 1 });
expect(board.handleCutPlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('EDIT', { randomData: 1 });
expect(board.handleEditPlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('DELETE', { randomData: 1 });
expect(board.handleDeletePlugin).toHaveBeenCalledWith({ randomData: 1 });
board.invalidateState('CLEAR_PLACEHOLDER', { randomData: 1 });
expect(board.handleClearPlaceholder).toHaveBeenCalledWith({ randomData: 1 });
expect(board.handleAddPlugin).toHaveBeenCalledTimes(1);
expect(board.handleCopyPlugin).toHaveBeenCalledTimes(1);
expect(board.handleMovePlugin).toHaveBeenCalledTimes(2);
expect(board.handleCutPlugin).toHaveBeenCalledTimes(1);
expect(board.handleEditPlugin).toHaveBeenCalledTimes(1);
expect(board.handleDeletePlugin).toHaveBeenCalledTimes(1);
expect(board.handleClearPlaceholder).toHaveBeenCalledTimes(1);
});
it('reloads browser if there was no action', () => {
board.invalidateState();
expect(CMS.API.Helpers.reloadBrowser).toHaveBeenCalledWith();
expect(board._loadToolbar).not.toHaveBeenCalled();
});
it('reloads toolbar if there is an action', () => {
board.invalidateState('ADD', { randomData: 1 });
board.invalidateState('MOVE', { randomData: 1 });
board.invalidateState('COPY', { randomData: 1 });
board.invalidateState('PASTE', { randomData: 1 });
board.invalidateState('CUT', { randomData: 1 });
board.invalidateState('EDIT', { randomData: 1 });
board.invalidateState('DELETE', { randomData: 1 });
board.invalidateState('CLEAR_PLACEHOLDER', { randomData: 1 });
expect(board._loadToolbar).toHaveBeenCalledTimes(8);
board.invalidateState('x');
expect(board._loadToolbar).toHaveBeenCalledTimes(9);
});
it('refreshes markup if loading markup succeeds', () => {
board._loadToolbar.and.returnValue({
done(fn) {
fn();
return {
fail() {}
};
}
});
board.invalidateState('x');
expect(CMS.API.Toolbar._refreshMarkup).toHaveBeenCalled();
});
it('reloads if fails', () => {
board._loadToolbar.and.returnValue({
done() {
return {
fail(fn) {
fn();
}
};
}
});
board.invalidateState('x');
expect(CMS.API.Helpers.reloadBrowser).toHaveBeenCalled();
});
it('resets the requested content', () => {
const args = ['random', 'stuff'];
expect(CMS.settings.mode).toEqual('structure');
board._loadedContent = false;
board._requestMode.and.callFake(mode => {
expect(mode).toEqual('content');
return {
done(fn) {
fn(...args);
return { fail() {} };
}
};
});
board._requestcontent = '1';
board.invalidateState('x');
expect(board._requestcontent).toEqual(null);
expect(board.refreshContent).not.toHaveBeenCalled();
});
it('refreshes content mode if needed', () => {
const args = ['random', 'stuff'];
expect(CMS.settings.mode).toEqual('structure');
board._loadedContent = true;
board._requestMode.and.callFake(mode => {
expect(mode).toEqual('content');
return {
done(fn) {
fn(...args);
return { fail() {} };
}
};
});
board.invalidateState('x');
expect(board.refreshContent).toHaveBeenCalledWith('random');
});
it('reloads if it cannot refresh content', () => {
const args = ['random', 'stuff'];
expect(CMS.settings.mode).toEqual('structure');
board._loadedContent = true;
board._requestMode.and.callFake(mode => {
expect(mode).toEqual('content');
return {
done() {
return {
fail(fn) {
fn(...args);
}
};
}
};
});
board.invalidateState('x');
expect(CMS.API.Helpers.reloadBrowser).toHaveBeenCalledWith();
});
it('refreshes content if in content mode', () => {
const args = ['random', 'stuff'];
CMS.settings.mode = 'edit';
board._loadedContent = true;
board._requestMode.and.callFake(mode => {
expect(mode).toEqual('content');
expect(board._requestcontent).toEqual(null);
return {
done(fn) {
fn(...args);
return {
fail() {}
};
}
};
});
board.invalidateState('x');
expect(board._requestMode).toHaveBeenCalledWith('content');
expect(board.refreshContent).toHaveBeenCalledWith('random');
});
it('reloads if cant refresh content when in content mode', () => {
const args = ['random', 'stuff'];
CMS.settings.mode = 'edit';
board._loadedContent = false;
board._requestMode.and.callFake(mode => {
expect(mode).toEqual('content');
expect(board._requestcontent).toEqual(null);
return {
done() {
return {
fail(fn) {
fn(...args);
}
};
}
};
});
board.invalidateState('x');
expect(board._requestMode).toHaveBeenCalledWith('content');
expect(CMS.API.Helpers.reloadBrowser).toHaveBeenCalledWith();
});
});
describe('handleMovePlugin', () => {
it('replaces markup with given one', () => {
const data = {
plugin_parent: false,
plugin_id: 1,
html: '<div class="new-draggable"><div class="cms-draggables"></div></div>',
plugins: [{ plugin_id: 1, otherStuff: true }]
};
board.handleMovePlugin(data);
expect($('.cms-draggable-1')).not.toExist();
expect($('.new-draggable')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(1);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
it('replaces markup with given one when parent is also provided', () => {
const data = {
plugin_parent: 2,
plugin_id: 1,
html: `
<div class="new-draggable ">
<div class="cms-draggables"><div class="cms-draggable-1"></div></div>
</div>
`,
plugins: [{ plugin_id: 1, otherStuff: true }]
};
board.handleMovePlugin(data);
expect($('.cms-draggable-1')).toExist();
expect($('.cms-draggable-2')).not.toExist();
expect($('.new-draggable')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(1);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
it('replaces markup with given one when it is copying from language', () => {
const data = {
target_placeholder_id: 2,
html: '<div class="new-draggable"><div class="cms-draggables"></div></div>',
plugins: [{ plugin_id: 1, otherStuff: true }]
};
board.handleMovePlugin(data);
expect($('.cms-draggable-1')).toExist();
expect($('.cms-draggable-2')).toExist();
expect($('.new-draggable')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(1);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.cms-dragarea-2 .new-draggable .cms-draggables')).toExist();
});
it('handles top level move update when in same placeholder', () => {
const data = {
placeholder_id: 1,
plugin_id: 2,
plugin_order: ['2', '1'],
html: `
<div class="cms-draggable cms-draggable-2 new-cms-draggable-2">
</div>
`,
plugins: [{ plugin_id: 2, otherStuff: true }, { plugin_id: 1, otherStuff: true }]
};
board.handleMovePlugin(data);
expect($('.cms-draggable-1')).toExist();
expect($('.cms-draggable-2')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(2);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(2);
expect(board._drag).toHaveBeenCalled();
expect($('.new-cms-draggable-2')).toExist();
expect($('.cms-draggable-2').index()).toEqual(0); // account for "empty" message
expect($('.cms-draggable-1').index()).toEqual(2);
});
it('handles top level move update when in same placeholder', () => {
const data = {
placeholder_id: 1,
plugin_id: 1,
plugin_order: ['2', '1'],
html: `
<div class="cms-draggable cms-draggable-1 new-cms-draggable-1">
</div>
`,
plugins: [{ plugin_id: 2, otherStuff: true }, { plugin_id: 1, otherStuff: true }]
};
board.handleMovePlugin(data);
expect($('.cms-draggable-1')).toExist();
expect($('.cms-draggable-2')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(2);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(2);
expect(board._drag).toHaveBeenCalled();
expect($('.new-cms-draggable-1')).toExist();
expect($('.cms-draggable-2').index()).toEqual(1);
expect($('.cms-draggable-1').index()).toEqual(2);
});
});
describe('handleAddPlugin', () => {
it('replaces parent if provided', () => {
const data = {
plugin_parent: 2,
plugin_id: 3,
structure: {
html: `
<div class="cms-draggable-2 new">
<div class="cms-draggables">
<div class="cms-draggable-3 new-draggable">
<div class="cms-draggables"></div>
</div>
</div>
</div>
`,
plugins: [{ plugin_id: 2, otherStuff: true }, { plugin_id: 3, other_stuff: false }]
}
};
board.handleAddPlugin(data);
expect($('.cms-draggable-2')).toHaveClass('new');
expect($('.new-draggable')).toExist();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.structure.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(2);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(2);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(3);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
it('appends to placeholder if no parent', () => {
const data = {
plugin_parent: null,
placeholder_id: 2,
plugin_id: 3,
structure: {
html: `
<div class="cms-draggable-3 new-draggable">
<div class="cms-draggables"></div>
</div>
`,
plugins: [{ plugin_id: 3, other_stuff: false }]
}
};
board.handleAddPlugin(data);
expect($('.cms-draggable-2')).not.toHaveClass('new');
expect($('.cms-dragarea-2 > .cms-draggables > .new-draggable')).toBeInDOM();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.structure.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(3);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
});
describe('handleEditPlugin', () => {
it('replaces edited plugin with new markup', () => {
const data = {
plugin_parent: null,
plugin_id: 2,
structure: {
html: `
<div class="cms-draggable-3 new-draggable">
<div class="cms-draggables"></div>
</div>
`,
plugins: [{ plugin_id: 3, other_stuff: false }]
}
};
board.handleEditPlugin(data);
expect($('.cms-draggable-2')).not.toExist();
expect($('.new-draggable')).toBeInDOM();
expect(StructureBoard.actualizePlaceholders).not.toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.structure.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(3);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
it('replaces parent of edited plugin if it was passed', () => {
const data = {
plugin_parent: 2,
plugin_id: 3,
structure: {
html: `
<div class="cms-draggable-3 new-draggable">
<div class="cms-draggables"></div>
</div>
`,
plugins: [{ plugin_id: 3, other_stuff: false }]
}
};
board.handleEditPlugin(data);
expect($('.cms-draggable-2')).not.toExist();
expect($('.new-draggable')).toBeInDOM();
expect(StructureBoard.actualizePlaceholders).not.toHaveBeenCalled();
expect(FakePlugin._updateRegistry).toHaveBeenCalledWith(data.structure.plugins);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledTimes(1);
expect(StructureBoard.actualizePluginCollapseStatus).toHaveBeenCalledWith(3);
expect(board._drag).toHaveBeenCalled();
expect(board.ui.sortables.filter('.new-draggable .cms-draggables')).toExist();
});
});
describe('handleDeletePlugin', () => {
it('removes plugin', () => {
CMS._plugins = [['cms-plugin-1', { plugin_id: 1 }], ['cms-plugin-2']];
CMS._instances = [{ options: { plugin_id: 1 } }, { options: { plugin_id: 2 } }];
board.handleDeletePlugin({ plugin_id: 1 });
expect($('.cms-draggable-1')).not.toBeInDOM();
expect(StructureBoard.actualizePluginsCollapsibleStatus).toHaveBeenCalledWith(
$('.cms-dragarea-1 > .cms-draggables')
);
expect(CMS._plugins).toEqual([['cms-plugin-2']]);
expect(CMS._instances).toEqual([{ options: { plugin_id: 2 } }]);
});
it('removes plugin and its children', () => {
CMS._plugins = [['cms-plugin-3', { plugin_id: 3 }], ['cms-plugin-4']];
CMS._instances = [{ options: { plugin_id: 3 } }, { options: { plugin_id: 4 } }];
$('.cms-draggable-2').find('.cms-draggables').append(`
<div class="cms-draggable cms-draggable-3">
<div class="cms-draggables">
<div class="cms-draggable cms-draggable-4">
</div>
</div>
</div>
`);
expect($('.cms-draggable-3')).toBeInDOM();
expect($('.cms-draggable-4')).toBeInDOM();
board.handleDeletePlugin({ plugin_id: 3 });
expect($('.cms-draggable-3')).not.toBeInDOM();
expect($('.cms-draggable-4')).not.toBeInDOM();
expect(StructureBoard.actualizePluginsCollapsibleStatus).toHaveBeenCalledWith(
$('.cms-draggable-2 > .cms-draggables')
);
expect(CMS._plugins).toEqual([]);
expect(CMS._instances).toEqual([]);
});
});
describe('handleClearPlaceholder', () => {
it('clears placeholder', () => {
CMS._plugins = [
['cms-plugin-3'],
['cms-plugin-1', { plugin_id: 1, placeholder_id: 1 }],
['cms-plugin-2', { plugin_id: '2', placeholder_id: 1 }]
];
CMS._instances = [
{ options: { plugin_id: 3 } },
{ options: { plugin_id: 1, placeholder_id: 1 } },
{ options: { plugin_id: '2', placeholder_id: '1' } }
];
expect($('.cms-draggable-1')).toBeInDOM();
expect($('.cms-draggable-2')).toBeInDOM();
board.handleClearPlaceholder({ placeholder_id: 1 });
expect($('.cms-draggable-1')).not.toBeInDOM();
expect($('.cms-draggable-2')).not.toBeInDOM();
expect(StructureBoard.actualizePluginsCollapsibleStatus).not.toHaveBeenCalled();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(CMS._plugins).toEqual([['cms-plugin-3']]);
expect(CMS._instances).toEqual([{ options: { plugin_id: 3 } }]);
});
});
describe('handleCopyPlugin', () => {
const clipboardConstructor = jasmine.createSpy();
const close = jasmine.createSpy();
// Use a function constructor instead of class to allow prototype mutation in tests
function FakeClipboard(...args) {
clipboardConstructor(...args);
}
// Assign methods without replacing the non-writable ES6 class prototype
Object.assign(FakeClipboard.prototype, {
_isClipboardModalOpen: jasmine.createSpy(),
modal: {
close: jasmine.createSpy()
},
populate: jasmine.createSpy(),
_enableTriggers: jasmine.createSpy()
});
beforeEach(() => {
CMS.API.Clipboard = {
_isClipboardModalOpen: jasmine.createSpy(),
modal: {
close
},
populate: jasmine.createSpy(),
_enableTriggers: jasmine.createSpy()
};
rewire('Clipboard', FakeClipboard);
rewire('Plugin', FakePlugin);
fixture.load('clipboard.html');
});
afterEach(() => {
resetRewire('Clipboard');
resetRewire('Plugin');
});
it('updates the clipboard', () => {
const data = {
plugins: [{ plugin_id: 10, stuff: true }],
html: '<div class="new-clipboard-draggable cms-draggable-from-clipboard"></div>'
};
CMS._plugins = [];
CMS._instances = [];
board.handleCopyPlugin(data);
expect(CMS._plugins).toEqual([['cms-plugin-10', data.plugins[0]]]);
expect(CMS._instances).toEqual([jasmine.any(FakePlugin)]);
expect(FakePlugin._updateClipboard).toHaveBeenCalled();
expect(clipboardConstructor).toHaveBeenCalled();
expect(FakeClipboard.prototype.populate).toHaveBeenCalled();
expect(FakeClipboard.prototype._enableTriggers).toHaveBeenCalled();
expect(board.ui.sortables.find('.new-clipboard-draggable')).toExist();
expect(board._drag).toHaveBeenCalled();
expect(pluginConstructor).toHaveBeenCalledWith('cms-plugin-10', data.plugins[0]);
expect(CMS.API.Clipboard.modal.close).not.toHaveBeenCalled();
});
it('closes clipboard modal if needed', () => {
CMS.API.Clipboard._isClipboardModalOpen.and.returnValue(true);
const data = {
plugins: [{ plugin_id: 10, stuff: true }],
html: '<div class="new-clipboard-draggable cms-draggable-from-clipboard"></div>'
};
board.handleCopyPlugin(data);
expect(close).toHaveBeenCalled();
});
});
describe('handleCutPlugin', () => {
it('calls delete and copy', () => {
spyOn(board, 'handleDeletePlugin');
spyOn(board, 'handleCopyPlugin');
board.handleCutPlugin({ randomData: true });
expect(board.handleDeletePlugin).toHaveBeenCalledWith({ randomData: true });
expect(board.handleCopyPlugin).toHaveBeenCalledWith({ randomData: true });
});
});
});
describe('_loadToolbar', () => {
it('loads toolbar url', () => {
const board = new StructureBoard();
spyOn($, 'ajax');
CMS.config.settings.structure = '/structure';
CMS.config.settings.edit = '/edit';
CMS.config.settings.mode = 'edit';
CMS.config.request = {
toolbar: 'TOOLBAR_URL',
pk: 100,
model: 'cms.page',
language: 'en'
};
board._loadToolbar();
expect($.ajax).toHaveBeenCalledWith({
url: jasmine.stringMatching(
/TOOLBAR_URL\?obj_id=100&obj_type=cms.page&language=en&cms_path=%2Fstructure*/
)
});
});
});
describe('_requestMode', () => {
let board;
let request;
const preloadImages = jasmine.createSpy();
beforeEach(() => {
board = new StructureBoard();
rewire('preloadImagesFromMarkup', preloadImages);
});
afterEach(() => {
resetRewire('preloadImagesFromMarkup');
preloadImages.calls.reset();
});
it('requests content', () => {
request = {
then(fn) {
fn('markup');
return request;
}
};
spyOn($, 'ajax').and.callFake(req => {
expect(req.method).toEqual('GET');
expect(req.url).toEqual('/edit');
return request;
});
expect(board._requestcontent).not.toBeDefined();
board._requestMode('content');
expect(preloadImages).toHaveBeenCalledWith('markup');
expect(board._requestcontent).toBe(request);
});
it('requests structure', () => {
request = {
then(fn) {
fn('markup');
return request;
}
};
spyOn($, 'ajax').and.callFake(req => {
expect(req.method).toEqual('GET');
expect(req.url).toEqual('/structure');
return request;
});
expect(board._requeststructure).not.toBeDefined();
board._requestMode('structure');
expect(preloadImages).toHaveBeenCalledWith('markup');
expect(board._requeststructure).toBe(request);
});
it('reuses same promise if it was not reset', () => {
request = {
then(fn) {
fn('markup');
return request;
}
};
spyOn($, 'ajax').and.callFake(req => {
expect(req.method).toEqual('GET');
expect(req.url).toEqual('/edit');
return request;
});
expect(board._requestcontent).not.toBeDefined();
board._requestMode('content');
expect(preloadImages).toHaveBeenCalledWith('markup');
expect(board._requestcontent).toBe(request);
board._requestMode('content');
expect(preloadImages).toHaveBeenCalledTimes(1);
expect(board._requestcontent).toBe(request);
});
});
describe('_loadContent', () => {
let board;
let response = '';
let requestSucceeded;
beforeEach(() => {
requestSucceeded = jasmine.createSpy();
CMS.API.Toolbar = {
_refreshMarkup: jasmine.createSpy()
};
board = new StructureBoard();
CMS.config = {
settings: {
mode: 'structure'
}
};
spyOn(board, '_requestMode').and.returnValue({
done(fn) {
requestSucceeded();
fn(response);
return {
fail() {
return {
then(callback) {
callback();
}
};
}
};
}
});
rewire('Plugin', FakePlugin);
rewire('Plugin', FakePlugin);
});
afterEach(() => {
resetRewire('Plugin');
resetRewire('Plugin', FakePlugin);
});
it('resolves immediately when content mode is already loaded', done => {
CMS.config.settings.mode = 'edit';
board._loadContent().then(() => {
expect(requestSucceeded).not.toHaveBeenCalled();
done();
});
CMS.config.settings.mode = 'structure';
});
it('resolves immediately when content mode is already loaded', done => {
board._loadedContent = true;
board._loadContent().then(() => {
expect(requestSucceeded).not.toHaveBeenCalled();
done();
});
CMS.config.settings.mode = 'structure';
});
it('requests content', done => {
response = `
<html attr0="a" attr1="b">
<head>
<title>i am a new title</title>
</head>
<body attr2="x" attr3="y">
<p class="new-content">New body content yay</p>
</body>
</html>
`;
CMS._instances = [
new FakePlugin('cms-plugin-1', { plugin_id: 1, type: 'plugin' }),
new FakePlugin('cms-placeholder-1', { placeholder_id: 1, type: 'placeholder' }),
new FakePlugin('cms-plugin-existing-generic-1', { plugin_id: '1', type: 'generic' })
];
CMS._plugins = [
['cms-plugin-1', { plugin_id: 1, type: 'plugin' }],
['cms-plugin-1', { plugin_id: 1, type: 'plugin' }],
['cms-placeholder-1', { placeholder_id: 1, type: 'placeholder' }],
['cms-plugin-existing-generic-1', { plugin_id: 1, type: 'generic' }],
['cms-plugin-new-generic-2', { plugin_id: 2, type: 'generic' }]
];
expect(board._loadedContent).not.toBeDefined();
pluginConstructor.calls.reset();
// FakePlugin._refreshPlugins() delegates to the real implementation,
// and that one instantiates cms.plugins' own reference to itself -
// something vi.mock cannot swap, so the instances it creates are real
// plugins and the spies have to sit on the real prototype.
spyOn(originalPlugin.prototype, '_setupUI').and.callFake(function() {
const el = $('<div></div>');
el.data('cms', []);
this.ui = { container: el };
});
spyOn(originalPlugin.prototype, '_ensureData');
spyOn(originalPlugin.prototype, '_setGeneric');
spyOn(originalPlugin.prototype, '_setPluginContentEvents');
const instancesBefore = CMS._instances.length;
board._loadContent().then(() => {
expect(showLoader).toHaveBeenCalled();
expect(hideLoader).toHaveBeenCalled();
expect(CMS.API.Toolbar._refreshMarkup).toHaveBeenCalled();
expect($('html').attr('attr0')).toEqual('a');
expect($('html').attr('attr1')).toEqual('b');
expect($('body').attr('attr2')).toEqual('x');
expect($('body').attr('attr3')).toEqual('y');
expect($('.new-content')).toBeInDOM();
expect(FakePlugin.prototype._ensureData).toHaveBeenCalledTimes(3);
expect(originalPlugin.prototype._ensureData).toHaveBeenCalledTimes(1);
expect(originalPlugin.prototype._setGeneric).toHaveBeenCalledTimes(1);
expect(FakePlugin.prototype._setPluginContentEvents).toHaveBeenCalledTimes(1);
expect(CMS._instances.length).toEqual(instancesBefore + 1);
$('.new-content').remove();
expect(board._loadedContent).toBe(true);
done();
});
});
});
describe('_loadStructure', () => {
let board;
let response = '';
let requestSucceeded;
beforeEach(() => {
requestSucceeded = jasmine.createSpy();
CMS.API.Toolbar = {
_refreshMarkup: jasmine.createSpy()
};
board = new StructureBoard();
CMS.config = {
settings: {
mode: 'edit'
}
};
spyOn(StructureBoard, '_initializeGlobalHandlers');
spyOn(StructureBoard, 'actualizePlaceholders');
spyOn(StructureBoard, '_initializeDragItemsStates');
spyOn(board, '_drag');
spyOn(board, '_requestMode').and.returnValue({
done(fn) {
requestSucceeded();
fn(response);
return {
fail() {
return {
then(callback) {
callback();
}
};
}
};
}
});
rewire('Plugin', FakePlugin);
});
afterEach(() => {
resetRewire('Plugin');
});
it('resolves immediately when structure mode is already loaded', done => {
CMS.config.settings.mode = 'structure';
board._loadStructure().then(() => {
expect(requestSucceeded).not.toHaveBeenCalled();
done();
});
CMS.config.settings.mode = 'edit';
});
it('resolves immediately when structure mode is already loaded', done => {
board._loadedStructure = true;
board._loadStructure().then(() => {
expect(requestSucceeded).not.toHaveBeenCalled();
done();
});
CMS.config.settings.mode = 'edit';
});
it('requests structure', done => {
response = `
<html attr0="a" attr1="b">
<head>
<title>i am a new title</title>
</head>
<body attr2="x" attr3="y">
<p class="new-content">New body content yay</p>
</body>
</html>
`;
CMS._instances = [
new FakePlugin('cms-plugin-1', { plugin_id: 1, type: 'plugin' }),
new FakePlugin('cms-placeholder-1', { placeholder_id: 1, type: 'placeholder' }),
new FakePlugin('cms-plugin-existing-generic-1', { plugin_id: '1', type: 'generic' })
];
expect(board._loadedStructure).not.toBeDefined();
pluginConstructor.calls.reset();
board._loadStructure().then(() => {
expect(showLoader).toHaveBeenCalled();
expect(hideLoader).toHaveBeenCalled();
expect(CMS.API.Toolbar._refreshMarkup).toHaveBeenCalled();
expect(FakePlugin.prototype._setPlaceholder).toHaveBeenCalledTimes(1);
expect(FakePlugin.prototype._setPluginStructureEvents).toHaveBeenCalledTimes(1);
expect(FakePlugin.prototype._setGeneric).not.toHaveBeenCalled();
expect(pluginConstructor).not.toHaveBeenCalled();
expect(board._drag).toHaveBeenCalled();
expect(StructureBoard._initializeDragItemsStates).toHaveBeenCalled();
expect(StructureBoard._initializeGlobalHandlers).toHaveBeenCalled();
expect(StructureBoard.actualizePlaceholders).toHaveBeenCalled();
expect(board._loadedStructure).toBe(true);
done();
});
});
});
describe('_getPluginDataFromMarkup()', () => {
const wrap = markup => $(`<div>${markup}</div>`)[0];
[
{
args: [wrap(''), [1, 2, 3]],
expected: []
},
{
args: [wrap('whatever'), []],
expected: []
},
{
args: [wrap('<script id="cms-plugin-4">{"plugin_id":"4"}</script>'), [1, 2, 3]],
expected: []
},
{
args: [wrap('<script id="cms-plugin-4">{"plugin_id":"4"}</script>'), [1, 2, 4]],
expected: [{ plugin_id: '4' }]
},
{
args: [
wrap('<script id="cms-plugin-4">{"plugin_id":"4"}</script>' +
'<script id="cms-plugin-10">{"plugin_id":"meh"}</script>'),
[1, 2, 10]],
expected: [{ plugin_id: 'meh' }]
},
{
args: [wrap('<script id="cms-plugin-4">{plugin_id:"4"}</script>'), [4]],
expected: []
},
{
args: [wrap('<script id="cms-plugin-4">not a json :(]</script>'), [4]],
expected: []
},
{
args: [wrap('<script id="cms-plugin-4">{"something":1}</script>'), [4]],
expected: [{ something: 1 }]
}
].forEach((test, i) => {
it(`extracts plugin data from markup ${i}`, () => {
expect(StructureBoard._getPluginDataFromMarkup(...test.args)).toEqual(test.expected);
});
});
});
describe('_extractMessages()', () => {
let board;
beforeEach(() => {
board = new StructureBoard();
});
it('extracts messages', () => {
expect(
board._extractMessages(
$(`
<div>
<div data-cms-messages-container>
<div data-cms-message data-cms-message-tags="error">
Error
</div>
<div data-cms-message data-cms-message-tags="invalid">
Normal
</div>
<div data-cms-message>
</div>
</div>
</div>
`)
)
).toEqual([{ message: 'Error', error: true }, { message: 'Normal', error: false }]);
expect(
board._extractMessages(
$(`
<div>
<ul class="messagelist"></ul>
<div data-cms-messages-container>
<div data-cms-message data-cms-message-tags="error">
Error1
</div>
<div data-cms-message data-cms-message-tags="invalid">
Normal1
</div>
</div>
</div>
`)
)
).toEqual([{ message: 'Error1', error: true }, { message: 'Normal1', error: false }]);
expect(
board._extractMessages(
$(`
<div>
<ul class="messagelist">
<li class="whatever">normal message</li>
<li class="error">error message</li>
</ul>
</div>
`)
)
).toEqual([{ message: 'normal message', error: false }, { message: 'error message', error: true }]);
expect(
board._extractMessages(
$(`
<div>
</div>
`)
)
).toEqual([]);
});
});
describe('_refreshContent()', () => {
let board;
const diffDOMConstructor = jasmine.createSpy();
const newDoc = `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="new-markup">new markup</div>
</body>
</html>
`;
class DiffDOM {
constructor() {
diffDOMConstructor();
}
}
DiffDOM.prototype.diff = jasmine.createSpy();
DiffDOM.prototype.apply = jasmine.createSpy();
let originalDOMParser;
class FakeDOMParser {}
FakeDOMParser.prototype.parseFromString = jasmine.createSpy().and.returnValue({
head: 'fakeNewHead',
body: 'fakeNewBody'
});
beforeEach(() => {
rewire('DiffDOM', DiffDOM);
// DOMParser is a browser global in the module under test
originalDOMParser = window.DOMParser;
window.DOMParser = FakeDOMParser;
board = new StructureBoard();
spyOn(board, '_replaceBodyWithHTML');
CMS.API.Messages = {
open: jasmine.createSpy()
};
CMS.API.Toolbar = {
_refreshMarkup: jasmine.createSpy()
};
});
afterEach(() => {
resetRewire('DiffDOM');
window.DOMParser = originalDOMParser;
});
it('resets loaded content flag', () => {
CMS._instances = [];
board._requestcontent = {};
board._loadedContent = false;
board.refreshContent(newDoc);
expect(board._requestcontent).toBe(null);
expect(board._loadedContent).toBe(true);
});
it('shows messages', done => {
CMS._instances = [];
spyOn(board, '_extractMessages').and.returnValue([{ message: 'hello' }]);
board.refreshContent(newDoc);
setTimeout(() => {
expect(CMS.API.Messages.open).toHaveBeenCalledWith({ message: 'hello' });
done();
}, 20);
});
it('resets plugin instances', () => {
CMS._instances = [
new FakePlugin('cms-plugin-1', { plugin_id: 1, type: 'plugin' }),
new FakePlugin('cms-placeholder-1', { placeholder_id: 1, type: 'placeholder' })
];
board.refreshContent(newDoc);
expect(FakePlugin.prototype._setupUI).toHaveBeenCalledTimes(2);
expect(FakePlugin.prototype._setupUI).toHaveBeenCalledWith('cms-plugin-1');
expect(FakePlugin.prototype._setupUI).toHaveBeenCalledWith('cms-placeholder-1');
expect(FakePlugin.prototype._ensureData).toHaveBeenCalledTimes(2);
expect(FakePlugin.prototype._setPlaceholder).toHaveBeenCalledTimes(1);
expect(FakePlugin.prototype._setPluginContentEvents).toHaveBeenCalledTimes(1);
});
});
describe('_updateContentFromDataBridge', () => {
beforeEach(() => {
CMS.API.StructureBoard = new StructureBoard();
});
it('should return true if data is missing or incomplete', () => {
const incompleteData = {};
expect(CMS.API.StructureBoard._updateContentFromDataBridge(incompleteData)).toBe(true);
const missingContent = { content: [] };
expect(CMS.API.StructureBoard._updateContentFromDataBridge(missingContent)).toBe(true);
const missingPluginIds = { content: [{ html: '<div></div>' }] };
expect(CMS.API.StructureBoard._updateContentFromDataBridge(missingPluginIds)).toBe(true);
});
it('should return true if source placeholder is not found', () => {
const data = {
source_placeholder_id: 1,
content: {
pluginIds: [1],
html: '<div></div>'
}
};
spyOn(CMS._instances, 'some').and.returnValue(false);
expect(CMS.API.StructureBoard._updateContentFromDataBridge(data)).toBe(true);
});
it('should update content and return false if data is valid', () => {
const data = {
content: [{
pluginIds: [1],
html: '<template class="cms-plugin cms-plugin-1 cms-plugin-start"></template>' +
'<div>My new plugin</div>' +
'<template class="cms-plugin cms-plugin-1 cms-plugin-end"></template>',
placeholder_id: 1,
position: 0
}]
};
spyOn(CMS.API.StructureBoard, '_findNextElement').and.returnValue($('<div></div>'));
spyOn(CMS.API.StructureBoard, '_updateSekizai');
spyOn(CMS.API.StructureBoard, '_contentChanged');
expect(CMS.API.StructureBoard._updateContentFromDataBridge(data)).toBe(false);
expect(CMS.API.StructureBoard._updateSekizai).toHaveBeenCalledWith(data.content[0], 'css');
expect(CMS.API.StructureBoard._updateSekizai).toHaveBeenCalledWith(data.content[0], 'js');
expect(CMS.API.StructureBoard._contentChanged).toHaveBeenCalledWith(undefined);
});
it('should remove previous content and update Sekizai blocks', () => {
const data = {
content: [{
pluginIds: [1, 2],
html: '<div class="cms-plugin cms-plugin-1 cms-plugin-start"></div>',
placeholder_id: 1,
position: 0,
css: '<link rel="stylesheet" href="style.css">',
js: '<script src="script.js"></script>'
}]
};
spyOn(CMS.API.StructureBoard, '_findNextElement').and.returnValue($('<div></div>'));
spyOn(CMS.API.StructureBoard, '_updateSekizai');
spyOn(CMS.API.StructureBoard, '_contentChanged');
$('body').append('<div class="cms-plugin cms-plugin-1"></div>');
$('body').append('<div class="cms-plugin cms-plugin-2"></div>');
$('body').append('<script data-cms-plugin id="cms-plugin-1"></script>');
$('body').append('<script data-cms-plugin id="cms-plugin-2"></script>');
expect(CMS.API.StructureBoard._updateContentFromDataBridge(data)).toBe(false);
expect($('.cms-plugin.cms-plugin-1').length).toBe(0);
expect($('.cms-plugin.cms-plugin-2').length).toBe(0);
expect($('script[data-cms-plugin]#cms-plugin-1').length).toBe(0);
expect($('script[data-cms-plugin]#cms-plugin-2').length).toBe(0);
expect(CMS.API.StructureBoard._updateSekizai).toHaveBeenCalledWith(data.content[0], 'css');
expect(CMS.API.StructureBoard._updateSekizai).toHaveBeenCalledWith(data.content[0], 'js');
expect(CMS.API.StructureBoard._contentChanged).toHaveBeenCalledWith(undefined);
});
});
describe('_preloadOppositeMode', () => {
['content', 'structure'].forEach(mode => {
it(`preloads the opposite mode (${mode})`, () => {
const div = document.createElement('div');
const _getWindow = jasmine.createSpy().and.returnValue(div);
spyOn(Helpers, '_getWindow').and.callFake(_getWindow);
const board = new StructureBoard();
spyOn(board, '_requestMode');
jasmine.clock().install();
if (mode === 'content') {
board._loadedStructure = false;
} else {
board._loadedStructure = true;
}
board._preloadOppositeMode();
expect(board._requestMode).not.toHaveBeenCalled();
$(div).trigger('load');
expect(board._requestMode).not.toHaveBeenCalled();
jasmine.clock().tick(2001);
expect(board._requestMode).toHaveBeenCalledTimes(1);
expect(board._requestMode).toHaveBeenCalledWith(mode === 'content' ? 'structure' : 'content');
jasmine.clock().uninstall();
});
});
it('does not preload the opposite mode (legacy renderer)', () => {
const div = document.createElement('div');
const _getWindow = jasmine.createSpy().and.returnValue(div);
spyOn(Helpers, '_getWindow').and.callFake(_getWindow);
const board = new StructureBoard();
spyOn(board, '_requestMode');
jasmine.clock().install();
CMS.config.settings.legacy_mode = true;
board._loadedContent = true;
board._loadedStructure = true;
board._preloadOppositeMode();
expect(board._requestMode).not.toHaveBeenCalled();
$(div).trigger('load');
expect(board._requestMode).not.toHaveBeenCalled();
jasmine.clock().tick(2001);
expect(board._requestMode).not.toHaveBeenCalled();
jasmine.clock().uninstall();
});
});
describe('actualizePluginCollapseStatus', () => {
it('works', () => {
$('#fixture_container').append(`
<div class="cms-draggable-1">
<div class="cms-collapsable-container cms-hidden"></div>
<div class="cms-dragitem"></div>
<div class="cms-draggables"></div>
</div>
`);
CMS.settings = {
states: ['1\n']
};
StructureBoard.actualizePluginCollapseStatus(1);
expect('.cms-draggable-1 .cms-collapsable-container').not.toHaveClass('cms-hidden');
expect('.cms-draggable-1 .cms-dragitem').toHaveClass('cms-dragitem-expanded');
$('#fixture_container').empty();
});
});
});
View git blame Copy permalink