Tests: cypress tests for widget on layout editor (#1891)

xibosignage · Jul 10, 2023 · 14f5e06 · 14f5e06
1 parent 5e8df78
commit 14f5e06
Show file tree

Hide file tree

Showing 5 changed files with 673 additions and 294 deletions.
diff --git a/cypress/e2e/layout_clock.cy.js b/cypress/e2e/layout_clock.cy.js
@@ -0,0 +1,79 @@
+/*
+ * 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', 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.visit('/layout/view');
+
+    cy.get('button[href="/layout"]').click();
+
+    // Open widget menu
+    cy.openToolbarMenu(0);
+
+    cy.get('[data-sub-type="clock"]').click();
+
+    cy.get('[data-sub-type="clock-analogue"] > .toolbar-card-thumb').click();
+
+    cy.get('.viewer-element.layout.ui-droppable-active').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.get('.widget-form .nav-link[href="#advancedTab"]').click();
+    cy.wait('@saveWidget');
+
+    // Type the new name in the input
+    cy.get('#advancedTab input[name="name"]').clear().type('newName');
+
+    // Set a duration
+    cy.get('#advancedTab input[name="useDuration"]').check();
+    cy.get('#advancedTab input[name="duration"]').clear().type(12).trigger('change');
+
+    // Change the background of the layout
+    cy.get('.viewer-element').click({force: true});
+    cy.get('[name="backgroundColor"]').clear().type('#ffffff').trigger('change');
+
+    // Validate background color changed wo white
+    cy.get('.viewer-element').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();
+    cy.get('[data-title="Delete"]').click();
+    cy.get('.btn-bb-confirm').click();
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').should('not.exist');
+  });
+});
diff --git a/cypress/e2e/layout_dataset.cy.js b/cypress/e2e/layout_dataset.cy.js
@@ -0,0 +1,109 @@
+/*
+ * 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', function() {
+  beforeEach(function() {
+    cy.login();
+  });
+
+  it('should create a new layout and be redirected to the layout designer, add/delete dataset widget', function() {
+    // Create and alias for load dataset
+    cy.intercept('/dataset?start=*').as('loadDatasets');
+
+    cy.visit('/layout/view');
+
+    cy.get('button[href="/layout"]').click();
+
+    // Open widget menu
+    cy.openToolbarMenu(0);
+
+    cy.get('[data-sub-type="dataset"]').click();
+    cy.get('[data-template-id="dataset_table_1"]').click();
+    cy.get('.viewer-element.layout.ui-droppable-active').click();
+
+    // // Check if the widget is in the viewer
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('exist');
+
+    // Select the dataset
+    cy.get('#configureTab > .dropdown-input-group > .select2 > .selection > .select2-selection').click();
+
+    // Wait for datasets to load
+    cy.wait('@loadDatasets');
+
+    // Type the dataset name
+    cy.get('.select2-container--open input[type="search"]').type('test');
+
+    // Wait for datasets to load
+    cy.wait('@loadDatasets');
+    cy.get('.select2-container--open').contains('test');
+    cy.get('.select2-container--open .select2-results > ul > li').should('have.length', 1);
+    cy.get('.select2-container--open .select2-results > ul > li:first').contains('test').click();
+
+    cy.get('[contenteditable="true" ]').should('exist');
+    cy.get('.cke_editable_inline').clear();
+    cy.get('.cke_editable_inline').type('No data to show').trigger('change');
+    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('Text', {force: true});
+    cy.get('.order-clause-row > .btn').click();
+    cy.get(':nth-child(2) > :nth-child(2) > .form-control').select('Number', {force: true});
+
+    // -------------
+    // -------------Appearance Tab
+    cy.get('.nav-link[href="#appearanceTab"]').click();
+
+    // Select columns available/ move them to columns selected
+    cy.get('#columnsOut>li:first').should('have.attr', 'id').and('equal', '1');
+    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').should('have.attr', 'id').and('equal', '2');
+    cy.get('#columnsOut>li:first')
+      .trigger('mousedown', {
+        which: 1,
+      })
+      .trigger('mousemove', {
+        which: 1,
+        pageX: 583,
+        pageY: 440,
+      });
+    cy.get('#columnsIn').click();
+
+    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');
+
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').parents('.designer-region').rightclick();
+    cy.get('[data-title="Delete"]').click();
+    cy.get('.btn-bb-confirm').click();
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('not.exist');
+  });
+});
diff --git a/cypress/e2e/layout_mastodon.cy.js b/cypress/e2e/layout_mastodon.cy.js
@@ -0,0 +1,67 @@
+/*
+ * 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', function() {
+  beforeEach(function() {
+    cy.login();
+  });
+
+  it('should create a new layout and be redirected to the layout designer, add/delete Mastodon widget', function() {
+    cy.visit('/layout/view');
+
+    cy.get('button[href="/layout"]').click();
+
+    // Open widget menu
+    cy.openToolbarMenu(0);
+
+    cy.get('[data-sub-type="mastodon"]').click();
+
+    cy.get('[data-template-id="social_media_static_1"] > .toolbar-card-thumb').click();
+
+    cy.get('.viewer-element.layout.ui-droppable-active').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});
+
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]').parents('.designer-region').rightclick();
+    cy.get('[data-title="Delete"]').click();
+    cy.get('.btn-bb-confirm').click();
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]').should('not.exist');
+  });
+});
diff --git a/cypress/e2e/layout_rss_ticker.cy.js b/cypress/e2e/layout_rss_ticker.cy.js
@@ -0,0 +1,76 @@
+/*
+ * 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', 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.visit('/layout/view');
+
+    cy.get('button[href="/layout"]').click();
+
+    // Open widget menu
+    cy.openToolbarMenu(0);
+
+    cy.get('[data-sub-type="rss-ticker"]').click();
+
+    cy.get('[data-template-id="article_image_only"] > .toolbar-card-thumb').click();
+
+    cy.get('.viewer-element.layout.ui-droppable-active').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');
+    cy.get('.cke_editable_inline').focus().clear();
+    cy.get('.cke_editable_inline').type('No data to show').trigger('change');
+    cy.get('[name="copyright"]').clear().type('Xibo').trigger('change');
+
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').parents('.designer-region').rightclick();
+    cy.get('[data-title="Delete"]').click();
+    cy.get('.btn-bb-confirm').click();
+    cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').should('not.exist');
+  });
+});