Automation/reorder widgets reworking

functional/cypress-tests/cypress/integration/reordering_dashboards.js

@@ -0,0 +1,101 @@
+import { dashboardNameGen } from '../fixtures/Dashboard';
+
+describe('Reordering dashboards', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('Logged in user can reorder dashboards', () => {
+    const dashboardName = dashboardNameGen('firstBoard');
+    const dashboardName2 = dashboardNameGen('secondBoard');
+    const boardCards = [];
+
+    cy.login();
+    cy.addDashboard(dashboardName);
+    cy.closeDrawer();
+    cy.addDashboard(dashboardName2);
+
+    cy.get(`h3:contains("${dashboardName2}")`).drag(
+      `h3:contains("${dashboardName}")`
+    );
+
+    cy.get('[data-cy="board-card"]')
+      .each(boardCard => {
+        cy.wrap(boardCard)
+          .find('h3')
+          .then(heading => {
+            boardCards.push(heading.text());
+          });
+      })
+      .then(() => {
+        for (let i = 0; i < boardCards.length; i++) {
+          if (
+            boardCards[i] == dashboardName2 &&
+            boardCards[i + 1] == dashboardName
+          ) {
+            i = boardCards.length;
+          } else if (
+            i == boardCards.length - 1 &&
+            !(
+              boardCards[i] == dashboardName2 &&
+              boardCards[i + 1] == dashboardName
+            )
+          ) {
+            throw new Error('Reording of dashboard is not working.');
+          }
+        }
+      });
+    cy.closeDrawer();
+    cy.removeDashboard(dashboardName);
+    cy.closeDrawer();
+    cy.removeDashboard(dashboardName2);
+  });
+
+  it("Logged out user can't reorder dashboards", () => {
+    const dashboardName = dashboardNameGen('firstBoard');
+    const dashboardName2 = dashboardNameGen('secondBoard');
+    const boardCards = [];
+
+    cy.login();
+    cy.addDashboard(dashboardName);
+    cy.closeDrawer();
+    cy.addDashboard(dashboardName2);
+    cy.get('[alt="Cogboard logo"]').type('{esc}');
+    cy.logout();
+    cy.openDrawer();
+    cy.get(`h3:contains("${dashboardName2}")`).drag(
+      `h3:contains("${dashboardName}")`
+    );
+    cy.get('[data-cy="board-card"]')
+      .each(boardCard => {
+        cy.wrap(boardCard)
+          .find('h3')
+          .then(heading => {
+            boardCards.push(heading.text());
+          });
+      })
+      .then(() => {
+        for (let i = 0; i < boardCards.length; i++) {
+          if (
+            boardCards[i] == dashboardName &&
+            boardCards[i + 1] == dashboardName2
+          ) {
+            i = boardCards.length;
+          } else if (
+            i == boardCards.length - 1 &&
+            !(
+              boardCards[i] == dashboardName &&
+              boardCards[i + 1] == dashboardName2
+            )
+          ) {
+            throw new Error('Logged out user can reorder dashboards.');
+          }
+        }
+      });
+    cy.closeDrawer();
+    cy.login();
+    cy.removeDashboard(dashboardName);
+    cy.closeDrawer();
+    cy.removeDashboard(dashboardName2);
+  });
+});

functional/cypress-tests/cypress/integration/reordering_widgets.js

@@ -0,0 +1,82 @@
+import { dashboardNameGen } from '../fixtures/Dashboard';
+import { createWidget } from '../support/widget';
+import Widgets from '../fixtures/Widgets';
+import { addWidgetsDashboard } from '../support/dashboard';
+
+describe('Reordering widgets', () => {
+  const firstWidgetsTitle = 'First Widget';
+  const secondWidgetsTitle = 'Second Widget';
+  const thirdWidgetsTitle = 'Third Widget';
+  let first, second, third, dashboard;
+
+  before(() => {
+    cy.visit('/');
+    cy.login();
+    dashboard = addWidgetsDashboard(
+      dashboardNameGen('ReorderWidgetsTest')
+    ).select();
+
+    first = createCheckboxWidget(firstWidgetsTitle);
+    second = createCheckboxWidget(secondWidgetsTitle);
+    third = createCheckboxWidget(thirdWidgetsTitle);
+  });
+
+  it("Logged in user can reorder widgets, logged out user can't", () => {
+    validateOrder('Verifying the initial order', [
+      firstWidgetsTitle,
+      secondWidgetsTitle,
+      thirdWidgetsTitle
+    ]);
+
+    third.move(firstWidgetsTitle);
+
+    validateOrder('Verifying if reordering widgets works', [
+      thirdWidgetsTitle,
+      firstWidgetsTitle,
+      secondWidgetsTitle
+    ]);
+
+    first.move(thirdWidgetsTitle);
+
+    validateOrder('Verifying if reordering widgets works', [
+      firstWidgetsTitle,
+      thirdWidgetsTitle,
+      secondWidgetsTitle
+    ]);
+
+    cy.logout();
+    second.move(firstWidgetsTitle);
+
+    validateOrder(
+      'Verifying if user is unable to reorder widgets when logged out',
+      [firstWidgetsTitle, thirdWidgetsTitle, secondWidgetsTitle]
+    );
+
+    cy.login();
+    cy.get('[data-cy="navbar-show-drawer-button"]').click();
+    dashboard.delete();
+  });
+
+  function createCheckboxWidget(title) {
+    cy.clickAddWidgetButton();
+    const widget = createWidget(Widgets.checkbox.name);
+    widget.title = title;
+    widget.configure(false);
+    return widget;
+  }
+
+  function validateOrder(message, order) {
+    let widgets = [];
+    cy.get('[draggable="true"]')
+      .each(widget => {
+        cy.wrap(widget)
+          .find('h3')
+          .then(heading => {
+            widgets.push(heading.text());
+          });
+      })
+      .then(() => {
+        expect(widgets, message).to.deep.equal(order);
+      });
+  }
+});

functional/cypress-tests/cypress/support/widget.js

@@ -7,6 +7,13 @@ class Widget {
     this.title = `Test-${name}`;
   }
 
+  configure(disabled) {
+    cy.fillNewWidgetGeneral(this.name, this.title, false, disabled, 1, 1);
+    fillDynamicTab(this);
+    cy.confirmAddWidget();
+    return this;
+  }
+
   assertBackground(color) {
     cy.contains('h3', this.title)
       .parents('[draggable="true"]')
@@ -40,13 +47,6 @@ class Widget {
     return this;
   }
 
-  configure(disabled) {
-    cy.fillNewWidgetGeneral(this.name, this.title, false, disabled, 4, 2);
-    fillDynamicTab(this);
-    cy.confirmAddWidget();
-    return this;
-  }
-
   assertTitle() {
     this.assertText('h3', this.title);
     return this;
@@ -62,6 +62,14 @@ class Widget {
     cy.contains('Disabled').should('is.visible');
     return this;
   }
+
+  move(movetoTarget) {
+    cy.get(`h3:contains("${this.title}")`).drag(
+      `h3:contains("${movetoTarget}")`,
+      'left'
+    );
+    return this;
+  }
 }
 
 export function createWidget(name) {