OTS-OpenSource/Cloud-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Upload

Browse Source
This commit is contained in:
Matt Batchelder
2025-12-02 10:32:59 -05:00
commit 05ce0da296
2240 changed files with 467811 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
cypress/e2e/Layout/Editor/layout-action-menu.cy.js Normal file
View File

@@ -0,0 +1,134 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Editor Toolbar (Back button, Interactive Mode, Layout jump list)', () => {
beforeEach(function() {
cy.login();
cy.intercept('GET', '/user/pref?preference=toolbar').as('toolbarPrefsLoad');
cy.intercept('GET', '/user/pref?preference=editor').as('editorPrefsLoad');
cy.visit('/layout/view');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
cy.wait('@toolbarPrefsLoad');
cy.wait('@editorPrefsLoad');
});
it('Back button should be present and navigate correctly', () => {
cy.get('#backBtn')
.should('have.class', 'btn btn-lg')
.and('have.attr', 'href', '/layout/view')
.click({force: true});
cy.url().should('include', '/layout/view');
});
it('should display Interactive Mode with OFF status initially', () => { // done
cy.get('li.interactive-control')
.should('have.attr', 'data-status', 'off')
.within(() => {
cy.contains('.interactive-control-label', 'Interactive Mode');
cy.get('.interactive-control-status-off').should('be.visible').and('contain.text', 'OFF');
cy.get('.interactive-control-status-on').should('not.be.visible');
});
});
it('should toggle Interactive Mode status on click', () => { // done
cy.get('li.nav-item.interactive-control[data-status="off"]')
.should(($el) => {
expect($el).to.be.visible;
})
.click({force: true});
cy.get('.interactive-control-status-off').should('not.be.visible');
});
it.only('should open and close the layout jump list dropdown safely', () => {
cy.intercept('GET', '/layout?onlyMyLayouts=*').as('onlyMyLayouts');
const layoutName = 'Audio-Video-PDF';
cy.get('#select2-layoutJumpList-container')
.should('be.visible');
// Force click because the element intermittently detaches in CI environment
cy.get('#layoutJumpListContainer .select2-selection')
.should('be.visible')
.click({force: true});
// Check for status
cy.wait('@onlyMyLayouts').then((interception) => {
const result = interception.response.body.data[0];
cy.log('result:', result.layoutId);
});
// Type into the search input
cy.get('.select2-search__field')
.should('be.visible')
.clear()
.type(layoutName, {delay: 100});
// Click the matching option
cy.get('.select2-results__option')
.contains(layoutName)
.click();
});
it('Options dropdown menu toggles and contains expected items', () => {
cy.get('#optionsContainerTop').should('be.visible');
cy.get('#optionsContainerTop').click({force: true});
cy.get('.navbar-submenu-options-container')
.should('be.visible')
.within(() => {
cy.get('#publishLayout').should('be.visible');
cy.get('#checkoutLayout').should('have.class', 'd-none');
cy.get('#discardLayout').should('be.visible');
cy.get('#newLayout').should('be.visible');
cy.get('#deleteLayout').should('have.class', 'd-none');
cy.get('#saveTemplate').should('have.class', 'd-none');
cy.get('#scheduleLayout').should('have.class', 'd-none');
cy.get('#clearLayout').should('be.visible');
cy.get('#displayTooltips').should('be.checked');
cy.get('#deleteConfirmation').should('be.checked');
});
});
it('Tooltips and popovers appear on hover', () => {
// Tooltip
cy.get('.layout-info-name')
.should('be.visible')
.trigger('mouseover');
cy.get('.tooltip').should('be.visible');
cy.get('.layout-info-name')
.should('be.visible')
.trigger('mouseout');
// Popover
cy.get('#layout-info-status')
.should('be.visible')
.trigger('mouseover');
cy.get('.popover').should('be.visible');
cy.get('#layout-info-status')
.should('be.visible')
.trigger('mouseout');
});
});

85
cypress/e2e/Layout/Editor/layout_editor_background.cy.js Normal file
View File

@@ -0,0 +1,85 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Editor Background', function() {
const SELECTORS = {
layoutAddButton: 'button.layout-add-button',
layoutViewer: '#layout-viewer',
propertiesPanel: '#properties-panel',
colorPickerTrigger: '.input-group-prepend',
colorPickerSaturation: '.colorpicker-saturation',
backgroundColorInput: '#input_backgroundColor',
backgroundzIndex: '#input_backgroundzIndex',
resolutionDropdown: '#input_resolutionId',
select2Selection: '.select2-selection',
select2SearchInput: '.select2-container--open input[type="search"]',
layoutInfoDimensions: '.layout-info-dimensions span',
};
beforeEach(function() {
cy.login();
cy.visit('/layout/view');
cy.get(SELECTORS.layoutAddButton).click();
cy.get(SELECTORS.layoutViewer).should('be.visible'); // Assert that the URL has changed to the layout editor
});
it('should update the background according to the colour set via colour picker', function() {
cy.get(SELECTORS.propertiesPanel).should('be.visible'); // Verify properties panel is present
cy.get(SELECTORS.colorPickerTrigger).click(); // Open colour picker
cy.get(SELECTORS.colorPickerSaturation).click(68, 28); // Select on a specific saturation
cy.get(SELECTORS.propertiesPanel).click(30, 60); // Click outside color picker to close
// Verify the selected color is applied to the background
cy.get(SELECTORS.layoutViewer).should('have.css', 'background-color', 'rgb(243, 248, 255)');
});
it('should update the background according to the colour set via hex input', function() {
cy.get(SELECTORS.propertiesPanel).should('be.visible');
cy.get(SELECTORS.backgroundColorInput).clear().type('#b53939{enter}');
// Verify the selected color is applied to the background
cy.get(SELECTORS.layoutViewer).should('have.css', 'background-color', 'rgb(243, 248, 255)');
});
it('should update the layer according to the input', function() {
cy.get(SELECTORS.propertiesPanel).should('be.visible');
cy.get(SELECTORS.backgroundzIndex).clear().type('1{enter}');
// Verify the selected number is applied to the layer
cy.get(SELECTORS.backgroundzIndex).should('have.value', '1');
});
// This is failing and a bug reported
it.skip('should update the layout resolution', function() {
cy.get(SELECTORS.propertiesPanel).should('be.visible');
const resName = 'cinema';
cy.get(SELECTORS.resolutionDropdown).parent().find(SELECTORS.select2Selection).click();
cy.get(SELECTORS.select2SearchInput).type(resName);
cy.selectOption(resName);
cy.get(SELECTORS.layoutInfoDimensions)
.should('be.visible')
.and('contain', '4096x2304');
});
});

164
cypress/e2e/Layout/Editor/layout_editor_empty.cy.js Normal file
View File

@@ -0,0 +1,164 @@
/*
* Copyright (C) 2023 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Designer (Empty)', function() {
beforeEach(function() {
cy.login();
});
context('Unexisting Layout', function() {
it('show layout not found if layout does not exist', function() {
// Use a huge id to test a layout not found
cy.visit({
url: '/layout/designer/111111111111',
failOnStatusCode: false,
});
// See page not found message
cy.contains('Layout not found');
});
});
context('Empty layout (published)', function() {
const layoutTempName = '';
beforeEach(function() {
// Import a layout and go to the Layout's designer page - we need a Layout in a Published state
cy.importLayout('../assets/export_test_layout.zip').as('testLayoutId').then((res) => {
cy.goToLayoutAndLoadPrefs(res);
});
});
it.skip('goes into draft mode when checked out', function() {
// Get the done button from the checkout modal
cy.get('[data-test="welcomeModal"] button.btn-bb-checkout').click();
// Check if campaign is deleted in toast message
cy.contains('Checked out ' + layoutTempName);
});
it.skip('should prevent a layout edit action, and show a toast message', function() {
// Should contain widget options form
cy.get('#properties-panel-form-container').contains('Edit Layout');
// The save button should not be visible
cy.get('#properties-panel-form-container [data-action="save"]').should('not.exist');
});
});
context('Empty layout (draft)', function() {
beforeEach(function() {
// Create random name
const uuid = Cypress._.random(0, 1e9);
// Create a new layout and go to the layout's designer page, then load toolbar prefs
cy.createLayout(uuid).as('testLayoutId').then((res) => {
cy.goToLayoutAndLoadPrefs(res);
});
});
it.skip('should create a new region from within the navigator edit', () => {
// Open navigator edit
cy.get('.editor-bottom-bar #navigator-edit-btn').click();
// Click on add region button
cy.get('.editor-bottom-bar #add-btn').click();
// Check if there are 2 regions in the timeline ( there was 1 by default )
cy.get('#layout-timeline [data-type="region"]').should('have.length', 2);
});
it.skip('should delete a region using the toolbar bin', () => {
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
// Open navigator edit
cy.get('.editor-bottom-bar #navigator-edit-btn').click();
// Select a region from the navigator
cy.get('#layout-navigator-content [data-type="region"]:first-child').click().then(($el) => {
const regionId = $el.attr('id');
// Click trash container
cy.get('.editor-bottom-bar #delete-btn').click();
// Confirm delete on modal
cy.get('[data-test="deleteObjectModal"] button.btn-bb-confirm').click();
// Check toast message
cy.get('.toast-success').contains('Deleted');
// Wait for the layout to reload
cy.wait('@reloadLayout');
// Check that region is not on timeline
cy.get('#layout-timeline [data-type="region"]#' + regionId).should('not.exist');
});
});
it.skip('creates a new widget by selecting a searched media from the toolbar to layout-navigator region', () => {
cy.populateLibraryWithMedia();
// Create and alias for reload Layout
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.intercept('GET', '/library/search?*').as('mediaLoad');
// Open library search tab
cy.get('.editor-main-toolbar #btn-menu-0').should('be.visible').click({force: true});
cy.get('.editor-main-toolbar #btn-menu-1').should('be.visible').click({force: true});
cy.wait('@mediaLoad');
cy.get('.editor-bottom-bar #navigator-edit-btn').click({force: true});
cy.get('.editor-main-toolbar #media-content-1 .toolbar-card:nth-of-type(2)').find('img').should('be.visible');
// Get a table row, select it and add to the region
cy.get('.editor-main-toolbar #media-content-1 .toolbar-card:nth-of-type(2) .select-button').click({force: true}).then(() => {
cy.get('#layout-navigator [data-type="region"]:first-child').click().then(() => {
// Wait for the layout to reload
cy.wait('@reloadLayout');
// Check if there is just one widget in the timeline
cy.get('#layout-timeline [data-type="region"] [data-type="widget"]').then(($widgets) => {
expect($widgets.length).to.eq(1);
});
});
});
});
it.skip('shows the file upload form by adding a uploadable media from the toolbar to layout-navigator region', () => {
cy.populateLibraryWithMedia();
// Open toolbar Widgets tab
cy.get('.editor-main-toolbar #btn-menu-1').should('be.visible').click({force: true});
cy.get('.editor-main-toolbar #btn-menu-2').should('be.visible').click({force: true});
cy.get('.editor-bottom-bar #navigator-edit-btn').click();
cy.get('.editor-main-toolbar #content-2 .toolbar-pane-content .toolbar-card.upload-card').should('be.visible').then(() => {
cy.get('.editor-main-toolbar #content-2 .toolbar-pane-content .toolbar-card.upload-card .select-upload').click({force: true});
cy.get('#layout-navigator [data-type="region"]:first-child').click({force: true});
cy.get('[data-test="uploadFormModal"]').contains('Upload media');
});
});
});
});

348
cypress/e2e/Layout/Editor/layout_editor_options.cy.js Normal file
View File

@@ -0,0 +1,348 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Editor Options', function() {
beforeEach(function() {
cy.login();
cy.visit('/layout/view');
});
it.skip('should be able to publish, checkout and discard layout', function() {
let layoutName;
cy.intercept('GET', '/layout?layoutId=*').as('layoutStatus');
cy.intercept('PUT', '/layout/discard/*').as('discardLayout');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
// Publish layout
cy.openOptionsMenu();
cy.get('#publishLayout').click();
cy.get('button.btn-bb-Publish').click();
cy.wait('@layoutStatus').then((interception) => {
expect(interception.response.statusCode).to.eq(200);
// Check if the publishedStatus is "Published"
const layoutData = interception.response.body.data[0];
expect(layoutData).to.have.property('publishedStatus', 'Published');
});
// Checkout published layout
cy.openOptionsMenu();
cy.get('#checkoutLayout').click();
cy.wait('@layoutStatus').then((interception) => {
expect(interception.response.statusCode).to.eq(200);
// Check if the publishedStatus is back to "Draft"
const layoutData = interception.response.body.data[0];
expect(layoutData).to.have.property('publishedStatus', 'Draft');
});
// Capture layout name before discarding draft layout
cy.get('.layout-info-name span')
.invoke('text')
.then((name) => {
layoutName = name.trim().replace(/^"|"$/g, ''); // Remove double quotes
cy.log(`Layout Name: ${layoutName}`);
cy.openOptionsMenu();
cy.get('#discardLayout').click();
cy.get('button.btn-bb-Discard').click();
// Verify that the layout has been discarded
cy.wait('@discardLayout').then((interception) => {
expect(interception.response.statusCode).to.equal(200);
});
// Check if the user is redirected to the layouts page
cy.url().should('include', '/layout/view');
// Search for the layout name
cy.get('input[name="layout"]').clear().type(`${layoutName}{enter}`);
// Check status of the layout with matching layout name
cy.get('#layouts tbody')
.find('tr')
.should('contain', layoutName)
.should('contain', 'Published');
});
});
it.skip('should display an error when publishing an invalid layout', function() {
cy.intercept('GET', '/playlist/widget/form/edit/*').as('addElement');
cy.intercept('PUT', '/layout/publish/*').as('publishLayout');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
// Open widgets toolbox
cy.openToolbarMenu(0, false);
cy.get('[data-sub-type="ics-calendar"]').click();
cy.get('[data-template-id="daily_light"]').click();
cy.get('.viewer-object').click();
// Wait for element to be loaded on layout
cy.wait('@addElement').then((interception) => {
expect(interception.response.statusCode).to.eq(200);
});
// Publish layout
cy.openOptionsMenu();
cy.get('#publishLayout').click();
cy.get('button.btn-bb-Publish').click();
// Verify response
cy.wait('@publishLayout').then((interception) => {
expect(interception.response.statusCode).to.eq(200);
expect(interception.response.body).to.have.property('message', 'There is an error with this Layout: Missing required property Feed URL');
});
// Verify that a toast message is displayed
cy.get('.toast-message')
.should('be.visible')
.and('contain.text', 'There is an error with this Layout');
});
it.skip('should be able to create new layout', function() {
cy.intercept('GET', '/layout?layoutId=*').as('newLayout');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
// Capture the layout ID of the initial layout loaded
cy.get('#layout-editor')
.invoke('attr', 'data-layout-id')
.then((initialLayoutId) => {
// Create new layout
cy.wait(1000);
cy.openOptionsMenu();
cy.get('#newLayout').click();
cy.wait('@newLayout').then((interception) => {
expect(interception.response.statusCode).to.eq(200); // Check if the request was successful
// Get the new layout ID
cy.get('#layout-editor')
.invoke('attr', 'data-layout-id')
.then((newLayoutId) => {
// Assert that the new layout ID is different from the initial layout ID
expect(newLayoutId).to.not.eq(initialLayoutId);
});
});
});
});
it.skip('should be able to unlock layout', function() {
let layoutName;
cy.intercept('GET', '/layout?layoutId=*').as('checkLockStatus');
cy.intercept('GET', '/playlist/widget/form/edit/*').as('addElement');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
// Capture layout name to navigate back to it after unlocking
cy.get('.layout-info-name span')
.invoke('text')
.then((name) => {
layoutName = name.trim().replace(/^"|"$/g, '');
cy.log(`Layout Name: ${layoutName}`);
// Open global elements toolbox
cy.openToolbarMenu(1, false);
cy.get('[data-template-id="text"]').click();
cy.get('.viewer-object').click();
// Wait for element to be loaded on layout
cy.wait('@addElement').then((interception) => {
expect(interception.response.statusCode).to.eq(200);
});
// Check for lock status
cy.wait('@checkLockStatus').then((interception) => {
const isLocked = interception.response.body.data[0].isLocked;
expect(isLocked).to.not.be.empty;
cy.log('isLocked:', isLocked);
});
cy.intercept('PUT', '/layout/lock/release/*').as('unlock');
// Unlock layout
cy.wait(1000);
cy.openOptionsMenu();
cy.get('#unlockLayout').should('be.visible').click();
cy.get('button.btn-bb-unlock').click();
// Wait for the release lock request to complete
cy.wait('@unlock').then((interception) => {
expect(interception.response.statusCode).to.equal(200);
});
// Check if the user is redirected to the /layout/view page
cy.url().should('include', '/layout/view');
// Search for the layout name
cy.get('input[name="layout"]').clear().type(`${layoutName}{enter}`);
cy.get('#layouts tbody tr').should('contain.text', layoutName);
cy.get('#layouts tbody tr').should('have.length', 1);
cy.openRowMenu();
cy.get('#layout_button_design').click();
cy.get('#layout-viewer').should('be.visible');
// Check for lock status
cy.wait('@checkLockStatus').then((interception) => {
const isLocked = interception.response.body.data[0].isLocked;
expect(isLocked).be.empty;
cy.log('isLocked:', isLocked);
});
});
});
it.skip('should enable tooltips', function() {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
cy.openOptionsMenu();
// Enable tooltips
// Check the current state of the tooltips checkbox
cy.get('#displayTooltips').then(($checkbox) => {
if (!$checkbox.is(':checked')) {
// Check the checkbox if it is currently unchecked
cy.wrap($checkbox).click();
cy.wait('@updatePreferences');
// Confirm the checkbox is checked
cy.get('#displayTooltips').should('be.checked');
}
});
// Verify that tooltips are present
cy.get('.navbar-nav .btn-menu-option[data-toggle="tooltip"]').each(($element) => {
// Trigger hover to show tooltip
cy.wrap($element).trigger('mouseover');
// Check that the tooltip is visible for each button
cy.get('.tooltip').should('be.visible'); // Expect tooltip to be present
});
});
it.skip('should disable tooltips', function() {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
cy.openOptionsMenu();
// Disable tooltips
// Check the current state of the tooltips checkbox
cy.get('#displayTooltips').then(($checkbox) => {
if ($checkbox.is(':checked')) {
// Uncheck the checkbox if it is currently checked
cy.wrap($checkbox).click();
cy.wait('@updatePreferences');
// Confirm the checkbox is now unchecked
cy.get('#displayTooltips').should('not.be.checked');
}
});
// Verify that tooltips are gone
cy.get('.navbar-nav .btn-menu-option[data-toggle="tooltip"]').each(($element) => {
cy.wrap($element).trigger('mouseover'); // Trigger hover to show tooltip
cy.get('.tooltip').should('not.exist'); // Check if tooltip is gone for each button on the toolbox
});
});
it.skip('should enable delete confirmation', function() {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
cy.openOptionsMenu();
// Check the current state of the delete confirmation checkbox
cy.get('#deleteConfirmation').then(($checkbox) => {
if (!$checkbox.is(':checked')) {
// Check the checkbox if it is currently unchecked
cy.wrap($checkbox).click();
cy.wait('@updatePreferences');
// Confirm the checkbox is checked
cy.get('#deleteConfirmation').should('be.checked');
}
});
// Add an element then attempt to delete
cy.openToolbarMenu(0, false);
cy.get('[data-sub-type="clock"]').click();
cy.get('[data-sub-type="clock-analogue"]').click();
cy.get('.viewer-object').click();
cy.get('#delete-btn').click();
// Verify that delete confirmation modal appears
cy.get('.modal-content')
.should('be.visible')
.and('contain.text', 'Delete Widget');
});
it.skip('should disable delete confirmation', function() {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
cy.openOptionsMenu();
// Check the current state of the delete confirmation checkbox
cy.get('#deleteConfirmation').then(($checkbox) => {
if ($checkbox.is(':checked')) {
// Uncheck the checkbox if it is currently checked
cy.wrap($checkbox).click();
cy.wait('@updatePreferences');
// Confirm the checkbox is now unchecked
cy.get('#displayTooltips').should('not.be.checked');
}
});
cy.intercept('DELETE', '/region/*').as('deleteElement');
// Add an element then attempt to delete
cy.openToolbarMenu(0, false);
cy.get('[data-sub-type="clock"]').click();
cy.get('[data-sub-type="clock-analogue"]').click();
cy.get('.viewer-object').click();
cy.get('#delete-btn').click();
// Verify that the widget is immediately deleted without confirmation
cy.wait('@deleteElement').then((interception) => {
expect(interception.response.statusCode).to.equal(200);
});
cy.get('.viewer-object').within(() => {
cy.get('[data-type="region"]').should('not.exist');
});
});
});

240
cypress/e2e/Layout/Editor/layout_editor_populated.cy.js Normal file
View File

@@ -0,0 +1,240 @@
/*
* Copyright (C) 2023 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Designer (Populated)', function() {
beforeEach(function() {
cy.login();
// Import existing
cy.importLayout('../assets/export_test_layout.zip').as('testLayoutId').then((res) => {
cy.checkoutLayout(res);
cy.goToLayoutAndLoadPrefs(res);
});
});
// Open widget form, change the name and duration, save, and see the name change result
it.skip('changes and saves widget properties', () => {
// Create and alias for reload widget
cy.intercept('GET', '/playlist/widget/form/edit/*').as('reloadWidget');
// Select the first widget from the first region on timeline ( image )
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').click();
// Type the new name in the input
cy.get('#properties-panel input[name="name"]').clear().type('newName');
// Set a duration
cy.get('#properties-panel #useDuration').check();
cy.get('#properties-panel input[name="duration"]').clear().type(12);
// Save form
cy.get('#properties-panel button[data-action="save"]').click();
// Should show a notification for the name change
cy.get('.toast-success').contains('newName');
// Check if the values are the same entered after reload
cy.wait('@reloadWidget').then(() => {
cy.get('#properties-panel input[name="name"]').should('have.attr', 'value').and('equal', 'newName');
cy.get('#properties-panel input[name="duration"]').should('have.attr', 'value').and('equal', '12');
});
});
// On layout edit form, change background color and layer, save and check the changes
it.skip('changes and saves layout properties', () => {
// Create and alias for reload layout
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
// Change background color
cy.get('#properties-panel input[name="backgroundColor"]').clear().type('#ccc');
// Change layer
cy.get('#properties-panel input[name="backgroundzIndex"]').clear().type(1);
// Save form
cy.get('#properties-panel button[data-action="save"]').click();
// Should show a notification for the successful save
cy.get('.toast-success').contains('Edited');
// Check if the values are the same entered after reload
cy.wait('@reloadLayout').then(() => {
cy.get('#properties-panel input[name="backgroundColor"]').should('have.attr', 'value').and('equal', '#cccccc');
cy.get('#properties-panel input[name="backgroundzIndex"]').should('have.value', '1');
});
});
// On layout edit form, change background image check the changes
it.skip('should change layout´s background image', () => {
// Create and alias for reload layout
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.intercept('GET', '/library/search?*').as('mediaLoad');
cy.get('#properties-panel #backgroundRemoveButton').click();
// Open library search tab
cy.get('.editor-main-toolbar #btn-menu-0').click();
cy.get('.editor-main-toolbar #btn-menu-1').click();
cy.wait('@mediaLoad');
cy.get('.editor-bottom-bar #navigator-edit-btn').click();
cy.get('.editor-main-toolbar #media-content-1 .toolbar-card:nth-of-type(2)').find('img').should('be.visible');
// Get a table row, select it and add to the region
cy.get('.editor-main-toolbar #media-content-1 .toolbar-card:nth-of-type(2) .select-button').click({force: true}).then(() => {
cy.get('#properties-panel-form-container .background-image-drop').click().then(() => {
// Save form
cy.get('#properties-panel button[data-action="save"]').click();
// Should show a notification for the successful save
cy.get('.toast-success').contains('Edited');
// Check if the background field has an image
cy.get('#properties-panel .background-image-add img#bg_image_image').should('be.visible');
});
});
});
// Navigator
it.skip('should change and save the region´s position', () => {
// Create and alias for position save and reload layout
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.intercept('GET', '/region/form/edit/*').as('reloadRegion');
cy.intercept('GET', '**/region/preview/*').as('regionPreview');
// Open navigator edit
cy.get('.editor-bottom-bar #navigator-edit-btn').click();
// Wait for the region to preview
cy.wait('@regionPreview');
cy.get('#layout-navigator [data-type="region"]:first').then(($originalRegion) => {
const regionId = $originalRegion.attr('id');
// Select region
cy.get('#layout-navigator-content #' + regionId).click();
// Move region 50px for each dimension
cy.get('#layout-navigator-content #' + regionId).then(($movedRegion) => {
const regionOriginalPosition = {
top: Math.round($movedRegion.position().top),
left: Math.round($movedRegion.position().left),
};
const offsetToAdd = 50;
// Move the region
cy.get('#layout-navigator-content #' + regionId)
.trigger('mousedown', {
which: 1,
})
.trigger('mousemove', {
which: 1,
pageX: $movedRegion.width() / 2 + $movedRegion.offset().left + offsetToAdd,
pageY: $movedRegion.height() / 2 + $movedRegion.offset().top + offsetToAdd,
})
.trigger('mouseup');
// Close the navigator edit
cy.wait('@reloadRegion');
// Save
cy.get('#properties-panel button#save').click();
// Wait for the layout to reload
cy.wait('@reloadLayout');
// Check if the region´s position are not the original
cy.get('#layout-navigator-content #' + regionId).then(($changedRegion) => {
expect(Math.round($changedRegion.position().top)).to.not.eq(regionOriginalPosition.top);
expect(Math.round($changedRegion.position().left)).to.not.eq(regionOriginalPosition.left);
});
});
});
});
it.skip('should delete a widget using the toolbar bin', () => {
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.intercept('GET', '/region/preview/*').as('regionPreview');
// Select a widget from the timeline
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').click().then(($el) => {
const widgetId = $el.attr('id');
// Wait for the widget to be loaded
cy.wait('@regionPreview');
// Click trash container
cy.get('.editor-bottom-bar button#delete-btn').click({force: true});
// Confirm delete on modal
cy.get('[data-test="deleteObjectModal"] button.btn-bb-confirm').click();
// Check toast message
cy.get('.toast-success').contains('Deleted');
// Wait for the layout to reload
cy.wait('@reloadLayout');
// Check that widget is not on timeline
cy.get('#layout-timeline [data-type="widget"]#' + widgetId).should('not.exist');
});
});
it.skip('saves the widgets order when sorting by dragging', () => {
cy.intercept('GET', 'POST', '**/playlist/order/*').as('saveOrder');
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').then(($oldWidget) => {
const offsetX = 50;
// Move to the second widget position ( plus offset )
cy.wrap($oldWidget)
.trigger('mousedown', {
which: 1,
})
.trigger('mousemove', {
which: 1,
pageX: $oldWidget.offset().left + $oldWidget.width() * 1.5 + offsetX,
})
.trigger('mouseup', {force: true});
cy.wait('@saveOrder');
// Should show a notification for the order change
cy.get('.toast-success').contains('Order Changed');
// Reload layout and check if the new first widget has a different Id
cy.wait('@reloadLayout');
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').then(($newWidget) => {
expect($oldWidget.attr('id')).not.to.eq($newWidget.attr('id'));
});
});
});
});

70
cypress/e2e/Layout/Editor/layout_editor_status_bar.cy.js Normal file
View File

@@ -0,0 +1,70 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Editor Status Bar', function() {
const layoutStatusSelector = '#layout-info-status';
const layoutNameSelector = '.layout-info-name span';
const layoutDurationSelector = '.layout-info-duration .layout-info-duration-value';
const layoutDimensionsSelector = '.layout-info-dimensions span';
const tooltipSelector = '.popover';
beforeEach(function() {
cy.login();
cy.visit('/layout/view');
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
});
it('should display the correct Layout status icon and tooltip', function() {
cy.get(layoutStatusSelector)
.should('be.visible')
.and('have.class', 'badge-danger')
.trigger('mouseover');
cy.get(tooltipSelector)
.should('be.visible')
.and('contain', 'This Layout is invalid');
cy.get(layoutStatusSelector).trigger('mouseout');
});
it('should display the correct Layout name', () => {
// Verify the Layout name text
cy.get(layoutNameSelector)
.should('be.visible')
.and('contain', 'Untitled');
});
it('should display the correct Layout duration', () => {
// Verify the duration is correctly displayed
cy.get(layoutDurationSelector)
.should('be.visible')
.and('contain', '00:00');
});
it('should display the correct Layout dimensions', () => {
// Verify the dimensions are correctly displayed
cy.get(layoutDimensionsSelector)
.should('be.visible')
.and('contain', '1920x1080');
});
});

181
cypress/e2e/Layout/Editor/layout_editor_toolbar.cy.js Normal file
View File

@@ -0,0 +1,181 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout Editor Toolbar', function() {
beforeEach(function() {
cy.login();
});
it.skip('should expand and close the toolbox', function() {
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
cy.openToolbarMenu(0);
cy.get('.close-content').filter(':visible').click();
});
const setZoomLevel = (level) => {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.openToolbarMenu(0);
cy.get('.toolbar-level-control-menu').click();
cy.get('nav.navbar').then(($toolbar) => {
if ($toolbar.hasClass(`toolbar-level-${level}`)) return;
cy.get(`i[data-level="${level}"]`).click();
cy.wait('@updatePreferences');
});
cy.get('nav.navbar').should('have.class', `toolbar-level-${level}`);
};
it.skip('should be able to set zoom level to 1', function() {
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
setZoomLevel(1);
});
it.skip('should be able to set zoom level to 2', function() {
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
setZoomLevel(2);
});
function searchAndAddElement(tabIndex, keyword, elementSelector, subTypeSelector, paneSelector) {
cy.intercept('POST', '/region/*').as('addRegion');
// Search for the element
cy.toolbarSearch(keyword);
cy.get(paneSelector + '.active')
.find('.toolbar-pane-content')
.find('.toolbar-card')
.should('have.length.greaterThan', 0)
.each(($card) => {
cy.wrap($card)
.find('.card-title')
.should('include.text', keyword);
});
// Add the widget to layout
cy.get(elementSelector).click();
if (subTypeSelector) {
cy.get(subTypeSelector).click();
}
cy.get('.viewer-object').click();
cy.wait('@addRegion').then((interception) => { // todo: error here
expect(interception.response.statusCode).to.eq(200);
});
}
it.skip('should navigate to Widgets tab, search and add a widget', function() {
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
// Open the respective toolbar tab
cy.openToolbarMenu(0);
searchAndAddElement(0, 'Clock', '[data-sub-type="clock"]', '[data-sub-type="clock-analogue"]', '.toolbar-widgets-pane');
});
it.skip('should navigate to Global Elements tab, search and add an element', function() {
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
searchAndAddElement(1, 'Text', '[data-template-id="text"]', '', '.toolbar-global-pane');
});
function testLibrarySearchAndAddMedia(mediaType, tabIndex, keyword, folderName, mediaTitle) {
cy.intercept('POST', '/user/pref').as('updatePreferences');
cy.intercept('GET', '/folders?start=0&length=10').as('loadFolders');
cy.intercept('GET', '/library/search*').as('librarySearch');
cy.intercept('POST', '/region/*').as('addRegion');
cy.openToolbarMenu(tabIndex);
// Conditionally filter media by Folder if folderName is provided
if (folderName) {
cy.get(`.toolbar-pane.toolbar-${mediaType}-pane.active`)
.find('#input-folder')
.parent()
.find('.select2-selection')
.click();
cy.wait('@loadFolders');
cy.get('.select2-container--open')
.contains(folderName)
.click();
cy.wait('@updatePreferences');
cy.wait('@librarySearch');
}
// Search for a media
cy.toolbarSearchWithActiveFilter(keyword);
cy.get(`.toolbar-pane.toolbar-${mediaType}-pane.active`)
.find('.toolbar-pane-content')
.find('.toolbar-card[data-type="media"]')
.each(($card) => {
cy.wrap($card)
.find('span.media-title')
.should('include.text', keyword);
});
cy.wait('@librarySearch');
cy.wait('@updatePreferences');
// Add media to layout
cy.get(`.toolbar-pane.toolbar-${mediaType}-pane.active`)
.find(`[data-card-title="${mediaTitle}"]`)
.should('exist')
.click();
cy.get('.viewer-object').click();
cy.wait('@addRegion');
}
// Test cases
it.skip('should navigate to Library Image Search tab, filter, search and add media', function() {
testLibrarySearchAndAddMedia('image', 2, 'media_for_search', 'FolderWithImage', 'media_for_search_in_folder');
});
it.skip('should navigate to Library Audio Search tab, filter, search and add media', function() {
testLibrarySearchAndAddMedia('audio', 3, 'test-audio', null, 'test-audio.mp3');
});
it.skip('should navigate to Library Video Search tab, filter, search and add media', function() {
testLibrarySearchAndAddMedia('video', 4, 'test-video', null, 'test-video.mp4');
});
it.skip('should navigate to Interactive Actions tab and search for actions', function() {
const keyword = 'Next';
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
cy.openToolbarMenu(7, false);
cy.toolbarSearch(keyword);
cy.get('.toolbar-pane.toolbar-actions-pane.active')
.find('.toolbar-pane-content .toolbar-card')
.each(($card) => {
cy.wrap($card).find('.card-title').should('include.text', keyword);
});
});
});

168
cypress/e2e/Layout/Editor/layout_editor_unchanged.cy.js Normal file
View File

@@ -0,0 +1,168 @@
/*
* Copyright (C) 2023 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
describe('Layout Designer (Populated/Unchanged)', function() {
before(function() {
// Import existing
// cy.importLayout('../assets/export_test_layout.zip').as('testLayoutId').then((res) => {
// cy.checkoutLayout(res);
// });
});
beforeEach(function() {
cy.login();
// cy.goToLayoutAndLoadPrefs(this.testLayoutId);
});
it.skip('should load all the layout designer elements', function() {
// Check if the basic elements of the designer loaded
cy.get('#layout-editor').should('be.visible');
cy.get('.timeline-panel').should('be.visible');
cy.get('#layout-viewer-container').should('be.visible');
cy.get('#properties-panel').should('be.visible');
});
it.skip('shows widget properties in the properties panel when clicking on a widget in the timeline', function() {
// Select the first widget from the first region on timeline ( image )
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').click();
// Check if the properties panel title is Edit Image
cy.get('#properties-panel').contains('Edit Image');
});
it.skip('should open the playlist editor and be able to show modals', function() {
cy.intercept('GET', '/playlist/widget/form/edit/*').as('reloadWidget');
// Open the playlist editor
cy.get('#layout-timeline .designer-region-info:first .open-playlist-editor').click();
// Wait for the widget to load
cy.wait('@reloadWidget');
// Right click on the first widget in the playlist editor
cy.get('.editor-modal #timeline-container .playlist-widget:first').rightclick();
// Open the delete modal for the first widget
cy.get('.context-menu-overlay .context-menu-widget .deleteBtn').should('be.visible').click();
// Modal should be visible
cy.get('[data-test="deleteObjectModal"]').should('be.visible');
});
it.skip('should revert a saved form to a previous state', () => {
let oldName;
// Create and alias for reload widget
cy.intercept('GET', '/playlist/widget/form/edit/*').as('reloadWidget');
cy.intercept('PUT', '/playlist/widget/*').as('saveWidget');
// Select the first widget on timeline ( image )
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').click();
// Wait for the widget to load
cy.wait('@reloadWidget');
// Get the input field
cy.get('#properties-panel input[name="name"]').then(($input) => {
// Save old name
oldName = $input.val();
// Type the new name in the input
cy.get('#properties-panel input[name="name"]').clear().type('newName');
// Save form
cy.get('#properties-panel button[data-action="save"]').click();
// Should show a notification for the name change
cy.get('.toast-success');
// Wait for the widget to save
cy.wait('@reloadWidget');
// Click the revert button
cy.get('.editor-bottom-bar #undo-btn').click();
// Wait for the widget to save
cy.wait('@saveWidget');
// Test if the revert made the name go back to the old name
cy.get('#properties-panel input[name="name"]').should('have.attr', 'value').and('equal', oldName);
});
});
it.skip('should revert the widgets order when using the undo feature', () => {
cy.intercept('POST', '**/playlist/order/*').as('saveOrder');
cy.intercept('GET', '/layout?layoutId=*').as('reloadLayout');
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').then(($oldWidget) => {
const offsetX = 50;
// Move to the second widget position ( plus offset )
cy.wrap($oldWidget)
.trigger('mousedown', {
which: 1,
})
.trigger('mousemove', {
which: 1,
pageX: $oldWidget.offset().left + $oldWidget.width() * 1.5 + offsetX,
})
.trigger('mouseup', {force: true});
cy.wait('@saveOrder');
// Should show a notification for the order change
cy.get('.toast-success').contains('Order Changed');
// Reload layout and check if the new first widget has a different Id
cy.wait('@reloadLayout');
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').then(($newWidget) => {
expect($oldWidget.attr('id')).not.to.eq($newWidget.attr('id'));
});
// Click the revert button
cy.get('.editor-bottom-bar #undo-btn').click();
// Wait for the order to save
cy.wait('@saveOrder');
cy.wait('@reloadLayout');
// Test if the revert made the name go back to the first widget
cy.get('#layout-timeline .designer-region:first [data-type="widget"]:first-child').then(($newWidget) => {
expect($oldWidget.attr('id')).to.eq($newWidget.attr('id'));
});
});
});
it.skip('should play a preview in the viewer', () => {
cy.intercept('GET', '**/region/preview/*').as('loadRegion');
// Wait for the viewer and region to load
cy.get('#layout-viewer-container .viewer-object.layout-player').should('be.visible');
cy.wait('@loadRegion');
// Click play
cy.get('.editor-bottom-bar #play-btn').click();
// Check if the fullscreen iframe has loaded
cy.get('#layout-viewer-container #layout-viewer .viewer-object > iframe').should('be.visible');
});
});

56
cypress/e2e/Layout/IA/toggle_mode_on_off.cy.js Normal file
View File

@@ -0,0 +1,56 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
describe('Test IA: Toggle Mode ON/OFF', () => {
beforeEach(() => {
cy.login();
// Navigate to Layouts page
cy.visit('/layout/view');
//Click the Add Layout button
cy.get('button.layout-add-button').click();
cy.get('#layout-viewer').should('be.visible');
});
it('should verify default status = OFF and checks the status of IA Mode when toggled to ON or OFF', () => {
//check default IA Mode = OFF
cy.get('li.nav-item.interactive-control')
.should('have.attr', 'data-status', 'off')
.then(($el) => {
cy.wrap($el).click({ force: true })
})
//Toggle Mode = ON
cy.get('li.nav-item.interactive-control')
.should('have.attr', 'data-status', 'on')
.and('contain.text', 'ON')
//Toggle OFF back to Layout Editor
cy.get('li.nav-item.interactive-control').click({ force: true })
cy.get('li.nav-item.interactive-control')
.should('have.attr', 'data-status', 'off')
.and('contain.text', 'OFF')
});
});

97
cypress/e2e/Layout/Widget/layout_editor_clock.cy.js Normal file
View File

@@ -0,0 +1,97 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Clock Analogue Widget', function() {
beforeEach(function() {
cy.login();
});
it('should create a new layout and be redirected to the layout designer, add/delete analogue clock', function() {
cy.intercept('/playlist/widget/*').as('saveWidget');
cy.intercept('DELETE', '**/region/**').as('deleteWidget');
cy.intercept('POST', '/user/pref').as('userPref');
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
// Open widget menu
cy.openToolbarMenu(0);
cy.get('[data-sub-type="clock"]')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('[data-sub-type="clock-analogue"] > .toolbar-card-thumb')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('.viewer-object.layout.ui-droppable-active')
.should('be.visible')
.click();
// Check if the widget is in the viewer
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').should('exist');
cy.get('[name="themeId"]').select('Dark', {force: true});
cy.get('[name="offset"]').clear().type('1').trigger('change');
cy.wait('@saveWidget');
cy.get('.widget-form .nav-link[href="#advancedTab"]').click();
// Type the new name in the input
cy.get('#advancedTab input[name="name"]').clear().type('newName');
cy.wait('@saveWidget');
// Set a duration
cy.get('#advancedTab input[name="useDuration"]').check();
cy.wait('@saveWidget');
cy.get('#advancedTab input[name="duration"]').clear().type('12').trigger('change');
cy.wait('@saveWidget');
// Change the background of the layout
cy.get('.viewer-object').click({force: true});
cy.get('[name="backgroundColor"]').clear().type('#ffffff').trigger('change');
// Validate background color changed wo white
cy.get('.viewer-object').should('have.css', 'background-color', 'rgb(255, 255, 255)');
// Check if the name and duration values are the same entered
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').parents('.designer-region').click();
cy.get('.widget-form .nav-link[href="#advancedTab"]').click();
cy.get('#advancedTab input[name="name"]').should('have.attr', 'value').and('equal', 'newName');
cy.get('#advancedTab input[name="duration"]').should('have.attr', 'value').and('equal', '12');
// Delete
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]')
.parents('.designer-region')
.rightclick();
// todo -investigate further why this is not working in ci/cdk mode
// cy.get('[data-title="Delete"]').click().then(() => {
// cy.wait('@deleteWidget').its('response.statusCode').should('eq', 200);
// cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]')
// .should('not.exist');
// });
});
});

103
cypress/e2e/Layout/Widget/layout_editor_dataset.cy.js Normal file
View File

@@ -0,0 +1,103 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Dataset', function() {
beforeEach(function() {
cy.login();
});
it('should create a new layout, add/delete dataset widget', function() {
cy.intercept('/dataset?start=*').as('loadDatasets');
cy.intercept('DELETE', '**/region/**').as('deleteWidget');
cy.intercept('POST', '/user/pref').as('userPref');
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
// Open widget menu and add dataset widget
cy.openToolbarMenu(0);
cy.get('[data-sub-type="dataset"]')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('[data-template-id="dataset_table_1"]')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('.viewer-object.layout.ui-droppable-active')
.should('be.visible')
.click();
// Verify widget exists in the layout viewer
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('exist');
// Select and configure the dataset
cy.get('#configureTab .select2-selection').click();
cy.wait('@loadDatasets');
cy.get('.select2-container--open input[type="search"]').type('8 items');
cy.get('.select2-container--open').contains('8 items').click();
cy.get('[name="lowerLimit"]').clear().type('1');
cy.get('[name="upperLimit"]').clear().type('10');
cy.get('.order-clause-row > :nth-child(2) > .form-control').select('Col1', {force: true});
cy.get('.order-clause-row > .btn').click();
cy.get(':nth-child(2) > :nth-child(2) > .form-control').select('Col2', {force: true});
// Open Appearance Tab
cy.get('.nav-link[href="#appearanceTab"]').click();
// Ensure dataset has exactly two columns
cy.get('#columnsOut li').should('have.length', 2);
// Move columns to "Columns Selected"
cy.get('#columnsOut li:first').trigger('mousedown', {which: 1}).trigger('mousemove', {which: 1, pageX: 583, pageY: 440});
cy.get('#columnsIn').click();
cy.get('#columnsOut li:first').trigger('mousedown', {which: 1}).trigger('mousemove', {which: 1, pageX: 583, pageY: 440});
cy.get('#columnsIn').click();
// Customize appearance settings
cy.get('[name="showHeadings"]').check();
cy.get('[name="rowsPerPage"]').clear().type('5');
cy.get('[name="fontSize"]').clear().type('48');
cy.get('[name="backgroundColor"]').clear().type('#333333');
// Delete widget
// The .moveable-control-box overlay obstructing the right-click interaction on the designer region, causing the test to fail.
// By invoking .hide(), we remove the overlay temporarily to allow uninterrupted interaction with the underlying elements.
cy.get('.moveable-control-box').invoke('hide');
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]')
.parents('.designer-region')
.scrollIntoView()
.should('be.visible')
.rightclick();
// Wait until the widget has been deleted
// cy.get('[data-title="Delete"]').click().then(() => {
// cy.wait('@deleteWidget').its('response.statusCode').should('eq', 200);
// cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]')
// .should('not.exist');
// });
});
});

91
cypress/e2e/Layout/Widget/layout_editor_mastodon.cy.js Normal file
View File

@@ -0,0 +1,91 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Mastodon', function() {
beforeEach(function() {
cy.login();
});
it('should create a new layout and be redirected to the layout designer, add/delete Mastodon widget', function() {
cy.intercept('DELETE', '**/region/**').as('deleteWidget');
cy.intercept('POST', '/user/pref').as('userPref');
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
// Open widget menu
cy.openToolbarMenu(0);
cy.get('[data-sub-type="mastodon"]')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('[data-template-id="social_media_static_1"] > .toolbar-card-thumb')
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('.viewer-object.layout.ui-droppable-active')
.should('be.visible')
.click();
// Check if the widget is in the viewer
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]')
.should('exist');
cy.get('[name="hashtag"]').clear();
cy.get('[name="hashtag"]').type('#cat');
cy.get('[name="searchOn"]').select('local', {force: true});
cy.get('[name="numItems"]').clear().type('10').trigger('change');
cy.get('[name="onlyMedia"]').check();
// Click on Appearance Tab
cy.get('.nav-link[href="#appearanceTab"]').click();
cy.get('[name="itemsPerPage"]').clear().type('2').trigger('change');
// Vertical/Fade/100/Right/Bottom
cy.get('[name="displayDirection"]').select('Vertical', {force: true});
cy.get('[name="effect"]').select('Fade', {force: true});
cy.get('[name="speed"]').clear().type('100').trigger('change');
cy.get('[name="alignmentH"]').select('Right', {force: true});
cy.get('[name="alignmentV"]').select('Bottom', {force: true});
// Delete widget
// The .moveable-control-box overlay obstructing the right-click interaction on the designer region, causing the test to fail.
// By invoking .hide(), we remove the overlay temporarily to allow uninterrupted interaction with the underlying elements.
cy.get('.moveable-control-box').invoke('hide');
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]')
.parents('.designer-region')
.scrollIntoView()
.should('be.visible')
.rightclick();
// Wait until the widget has been deleted
// cy.get('[data-title="Delete"]').click().then(() => {
// cy.wait('@deleteWidget').its('response.statusCode').should('eq', 200);
// cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]')
// .should('not.exist');
// });
});
});

101
cypress/e2e/Layout/Widget/layout_editor_rss_ticker.cy.js Normal file
View File

@@ -0,0 +1,101 @@
/*
* Copyright (C) 2025 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('RSS Ticker', function() {
beforeEach(function() {
cy.login();
});
it('should create a new layout and be redirected to the layout designer, add/delete RSS ticker widget', function() {
cy.intercept('DELETE', '**/region/**').as('deleteWidget');
cy.intercept('POST', '/user/pref').as('userPref');
cy.visit('/layout/view');
cy.get('button[href="/layout"]').click();
// Open widget menu
cy.openToolbarMenu(0);
cy.get('[data-sub-type="rss-ticker"]')
.scrollIntoView()
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('[data-template-id="article_image_only"] > .toolbar-card-thumb')
.scrollIntoView()
.should('be.visible')
.click();
cy.wait('@userPref');
cy.get('.viewer-object.layout.ui-droppable-active')
.should('be.visible')
.click();
// Check if the widget is in the viewer
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').should('exist');
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').parents('.designer-region').click();
// Validate if uri is not provide we show an error message
cy.get('[name="numItems"]').clear().type('10').trigger('change');
cy.get('.form-container').contains('Missing required property Feed URL');
cy.get('[name="uri"]').clear();
cy.get('[name="uri"]').type('http://xibo.org.uk/feed');
cy.get('[name="numItems"]').clear().type('10').trigger('change');
cy.get('[name="durationIsPerItem"]').check();
cy.get('[name="takeItemsFrom"]').select('End of the Feed', {force: true});
cy.get('[name="reverseOrder"]').check();
cy.get('[name="randomiseItems"]').check();
cy.get('[name="userAgent"]').clear().type('Mozilla/5.0');
cy.get('[name="updateInterval"]').clear().type('10').trigger('change');
// Click on Appearance Tab
cy.get('.nav-link[href="#appearanceTab"]').click();
cy.get('[name="backgroundColor"]').clear().type('#dddddd');
cy.get('[name="itemImageFit"]').select('Fill', {force: true});
cy.get('[name="effect"]').select('Fade', {force: true});
cy.get('[name="speed"]').clear().type('500');
// Update CKEditor value
cy.updateCKEditor('noDataMessage', 'No data to show');
cy.get('[name="copyright"]').clear().type('Xibo').trigger('change');
// Delete widget
// The .moveable-control-box overlay obstructing the right-click interaction on the designer region, causing the test to fail.
// By invoking .hide(), we remove the overlay temporarily to allow uninterrupted interaction with the underlying elements.
cy.get('.moveable-control-box').invoke('hide');
cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]')
.parents('.designer-region')
.scrollIntoView()
.should('be.visible')
.rightclick();
// Wait until the widget has been deleted
// cy.get('[data-title="Delete"]').click().then(() => {
// cy.wait('@deleteWidget').its('response.statusCode').should('eq', 200);
// cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]')
// .should('not.exist');
// });
});
});

56
cypress/e2e/Layout/layout_view.cy.js Normal file
View File

@@ -0,0 +1,56 @@
/*
* Copyright (C) 2023 Xibo Signage Ltd
*
* Xibo - Digital Signage - https://xibosignage.com
*
* This file is part of Xibo.
*
* Xibo is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Xibo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
*/
/* eslint-disable max-len */
describe('Layout View', function() {
beforeEach(function() {
cy.login();
});
it('searches and delete existing layout', function() {
// Create random name
const uuid = Cypress._.random(0, 1e10);
// Create a new layout and go to the layout's designer page, then load toolbar prefs
cy.createLayout(uuid).as('testLayoutId').then((res) => {
cy.intercept('GET', '/layout?draw=2&*').as('layoutGridLoad');
cy.visit('/layout/view');
// Filter for the created layout
cy.get('#Filter input[name="layout"]')
.type(uuid);
// Wait for the layout grid reload
cy.wait('@layoutGridLoad');
// Click on the first row element to open the designer
cy.get('#layouts tr:first-child .dropdown-toggle').click({force: true});
cy.get('#layouts tr:first-child .layout_button_delete').click({force: true});
// Delete test layout
cy.get('.bootbox .save-button').click();
// Check if layout is deleted in toast message
cy.get('.toast').contains('Deleted ' + uuid);
});
});
});