208 lines
8.3 KiB
JavaScript
208 lines
8.3 KiB
JavaScript
|
/*
|
||
|
|
* 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('Playlist Editor (Populated)', function() {
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
cy.login();
|
||
|
|
|
||
|
|
// Create random name
|
||
|
|
let uuid = Cypress._.random(0, 1e9);
|
||
|
|
|
||
|
|
// Create a new layout and go to the layout's designer page
|
||
|
|
cy.createNonDynamicPlaylist(uuid).as('testPlaylistId').then((res) => {
|
||
|
|
|
||
|
|
// Populate playlist with some widgets and media
|
||
|
|
cy.addWidgetToPlaylist(res, 'embedded', {
|
||
|
|
name: 'Embedded Widget'
|
||
|
|
});
|
||
|
|
|
||
|
|
cy.addMediaToLibrary("file/example.zip");
|
||
|
|
|
||
|
|
cy.addWidgetToPlaylist(res, 'clock', {
|
||
|
|
name: 'Clock Widget'
|
||
|
|
});
|
||
|
|
|
||
|
|
cy.openPlaylistEditorAndLoadPrefs(res);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('changes and saves widget properties', () => {
|
||
|
|
// Create and alias for reload widget
|
||
|
|
// cy.intercept('GET','/playlist/widget/form/edit/*').as('reloadWidget');
|
||
|
|
|
||
|
|
// Select the first widget on timeline ( image )
|
||
|
|
cy.get('#timeline-container [data-type="widget"]').first().click();
|
||
|
|
|
||
|
|
// Wait for the widget to load
|
||
|
|
// cy.wait('@reloadWidget');
|
||
|
|
|
||
|
|
// Type the new name in the input
|
||
|
|
cy.get('a[href="#advancedTab"]').click();
|
||
|
|
cy.get('#properties-panel-form-container input[name="name"]').clear().type('newName');
|
||
|
|
|
||
|
|
// Set a duration
|
||
|
|
cy.get('#properties-panel-form-container input[name="useDuration"]').check();
|
||
|
|
cy.get('#properties-panel-form-container input[name="duration"]').clear().type(12);
|
||
|
|
|
||
|
|
// Save form
|
||
|
|
cy.get('#properties-panel-form-container button[data-action="save"]').click();
|
||
|
|
|
||
|
|
// Should show a notification for the name change
|
||
|
|
// cy.get('.toast-success');
|
||
|
|
|
||
|
|
// Wait for the widget to reload
|
||
|
|
// cy.wait('@reloadWidget');
|
||
|
|
|
||
|
|
// Check if the values are the same entered after reload
|
||
|
|
cy.get('#properties-panel-form-container input[name="name"]').should('have.prop', 'value').and('equal', 'newName');
|
||
|
|
cy.get('#properties-panel-form-container input[name="duration"]').should('have.prop', 'value').and('equal', '12');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
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('#timeline-container [data-type="widget"]').first().click();
|
||
|
|
|
||
|
|
// Wait for the widget to load
|
||
|
|
// cy.wait('@reloadWidget');
|
||
|
|
|
||
|
|
// Get the input field
|
||
|
|
cy.get('a[href="#advancedTab"]').click();
|
||
|
|
cy.get('#properties-panel-form-container input[name="name"]').then(($input) => {
|
||
|
|
|
||
|
|
// Save old name
|
||
|
|
oldName = $input.val();
|
||
|
|
|
||
|
|
//Type the new name in the input
|
||
|
|
cy.get('#properties-panel-form-container input[name="name"]').clear().type('newName');
|
||
|
|
|
||
|
|
// Save form
|
||
|
|
cy.get('#properties-panel-form-container 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('#playlist-editor-toolbar #undoContainer').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-form-container input[name="name"]').should('have.prop', 'value').and('equal', oldName);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should delete a widget using the toolbar bin', () => {
|
||
|
|
// cy.intercept('/playlist?playlistId=*').as('reloadPlaylist');
|
||
|
|
|
||
|
|
// Select a widget from the navigator
|
||
|
|
cy.get('#playlist-timeline [data-type="widget"]').first().click().then(($el) => {
|
||
|
|
|
||
|
|
const widgetId = $el.attr('id');
|
||
|
|
|
||
|
|
// Click trash container
|
||
|
|
cy.get('div[class="widgetDelete"]').first().click({force: true});
|
||
|
|
|
||
|
|
// Confirm delete on modal
|
||
|
|
cy.get('button[class*="btn-bb-confirm"]').click();
|
||
|
|
|
||
|
|
// Check toast message
|
||
|
|
// cy.get('.toast-success').contains('Deleted');
|
||
|
|
|
||
|
|
// Wait for the layout to reload
|
||
|
|
// cy.wait('@reloadPlaylist');
|
||
|
|
|
||
|
|
// Check that widget is not on timeline
|
||
|
|
cy.get('#playlist-timeline [data-type="widget"]#' + widgetId).should('not.exist');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it.skip('should add an audio clip to a widget by the context menu, and adds a link to open the form in the timeline', () => {
|
||
|
|
|
||
|
|
cy.populateLibraryWithMedia();
|
||
|
|
|
||
|
|
// Create and alias for reload playlist
|
||
|
|
cy.intercept('/playlist?playlistId=*').as('reloadPlaylist');
|
||
|
|
|
||
|
|
// Right click to open the context menu and select add audio
|
||
|
|
cy.get('#timeline-container [data-type="widget"]').first().should('be.visible').rightclick();
|
||
|
|
cy.get('.context-menu-btn[data-property="Audio"]').should('be.visible').click();
|
||
|
|
|
||
|
|
// Select the 1st option
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] #mediaId > option').eq(1).then(($el) => {
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] #mediaId').select($el.val());
|
||
|
|
});
|
||
|
|
|
||
|
|
// Save and close the form
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] .btn-bb-done').click();
|
||
|
|
|
||
|
|
// Check if the widget has the audio icon
|
||
|
|
// cy.wait('@reloadPlaylist');
|
||
|
|
cy.get('#timeline-container [data-type="widget"]:first-child')
|
||
|
|
.find('i[data-property="Audio"]').should('exist').click({force: true});
|
||
|
|
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"]').contains('Audio for');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Skip test for now ( it's failing in the test suite and being tested already in layout designer spec )
|
||
|
|
it.skip('attaches expiry dates to a widget by the context menu, and adds a link to open the form in the timeline', () => {
|
||
|
|
// Create and alias for reload playlist
|
||
|
|
// cy.intercept('/playlist?playlistId=*').as('reloadPlaylist');
|
||
|
|
|
||
|
|
// Right click to open the context menu and select add audio
|
||
|
|
cy.get('#timeline-container [data-type="widget"]').first().should('be.visible').rightclick();
|
||
|
|
cy.get('.context-menu-btn[data-property="Expiry"]').should('be.visible').click();
|
||
|
|
|
||
|
|
// Add dates
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] .starttime-control .date-clear-button').click();
|
||
|
|
// cy.get('[data-test="widgetPropertiesForm"] #fromDt').find('input[class="datePickerHelper form-control dateControl dateTime active"]').click();
|
||
|
|
cy.get('div[class="flatpickr-wrapper"]').first().click();
|
||
|
|
cy.get('.flatpickr-calendar.open .dayContainer .flatpickr-day:first').click();
|
||
|
|
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] .endtime-control .date-clear-button').click();
|
||
|
|
// cy.get('[data-test="widgetPropertiesForm"] #toDt').find('input[class="datePickerHelper form-control dateControl dateTime active"]').click();
|
||
|
|
cy.get('div[class="flatpickr-wrapper"]').last().click();
|
||
|
|
cy.get('.flatpickr-calendar.open .dayContainer .flatpickr-day:first').click();
|
||
|
|
|
||
|
|
|
||
|
|
// Save and close the form
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"] .btn-bb-done').click();
|
||
|
|
|
||
|
|
// Check if the widget has the expiry dates icon
|
||
|
|
// cy.wait('@reloadPlaylist');
|
||
|
|
cy.get('#timeline-container [data-type="widget"]:first-child')
|
||
|
|
.find('i[data-property="Expiry"]').should('exist').click({force: true});
|
||
|
|
|
||
|
|
cy.get('[data-test="widgetPropertiesForm"]').contains('Expiry for');
|
||
|
|
});
|
||
|
|
});
|