Textbox testing - add, remove, edit (#3589)

Author: ranbena

client/app/pages/dashboards/dashboard.html

@@ -97,7 +97,7 @@ <h3>
       <div class="dashboard-widget-wrapper"
         ng-repeat="widget in $ctrl.dashboard.widgets track by widget.id"
         gridstack-item="widget.options.position" gridstack-item-id="{{ widget.id }}">
-        <div class="grid-stack-item-content">
+        <div class="grid-stack-item-content" data-test="WidgetId{{ widget.id }}">
           <dashboard-widget widget="widget" dashboard="$ctrl.dashboard" on-delete="$ctrl.removeWidget(widget.id)"></dashboard-widget>
         </div>
       </div>

cypress/integration/dashboard/dashboard_spec.js

@@ -1,59 +1,145 @@
-function createNewDashboard(dashboardName) {
-  cy.visit('/dashboards');
-  cy.getByTestId('CreateButton').click();
-  cy.get('li[role="menuitem"]')
-    .contains('Dashboard')
-    .click();
-
+function createNewDashboardByAPI(name) {
   cy.server();
-  cy.route('POST', 'api/dashboards').as('NewDashboard');
-
-  cy.getByTestId('EditDashboardDialog').within(() => {
-    cy.getByTestId('DashboardSaveButton').should('be.disabled');
-    cy.get('input').type(dashboardName);
-    cy.getByTestId('DashboardSaveButton').click();
-  });
-
-  return cy.wait('@NewDashboard').then((xhr) => {
-    const slug = Cypress._.get(xhr, 'response.body.slug');
-    assert.isDefined(slug, 'Dashboard api call returns slug');
+  return cy.request('POST', 'api/dashboards', { name }).then((response) => {
+    const slug = Cypress._.get(response, 'body.slug');
+    assert.isDefined(slug, 'Dashboard api call returns dashboard slug');
     return slug;
   });
 }
 
-function archiveCurrentDashboard() {
+function editDashboard() {
   cy.getByTestId('DashboardMoreMenu')
     .click()
     .within(() => {
       cy.get('li')
-        .contains('Archive')
+        .contains('Edit')
         .click();
     });
+}
+
+function addTextbox(text) {
+  cy.server();
+  cy.route('POST', 'api/widgets').as('NewWidget');
+
+  editDashboard();
+
+  cy.contains('a', 'Add Textbox').click();
+  cy.get('.add-textbox').within(() => {
+    cy.get('textarea').type(text);
+  });
+  cy.contains('button', 'Add to Dashboard').click();
+  cy.get('.add-textbox').should('not.exist');
+  cy.contains('button', 'Apply Changes').click();
 
-  cy.get('.btn-warning')
-    .contains('Archive')
-    .click();
-  cy.get('.label-tag-archived').should('exist');
+  return cy.wait('@NewWidget').then((xhr) => {
+    const id = Cypress._.get(xhr, 'response.body.id');
+    assert.isDefined(id, 'Widget api call returns widget id');
+    return cy.getByTestId(`WidgetId${id}`);
+  });
 }
 
 describe('Dashboard', () => {
   beforeEach(() => {
     cy.login();
   });
 
-  it('creates a new dashboard and archives it', () => {
-    createNewDashboard('Foo Bar').then((slug) => {
+  it('creates new dashboard', () => {
+    cy.visit('/dashboards');
+    cy.getByTestId('CreateButton').click();
+    cy.get('li[role="menuitem"]').contains('Dashboard').click();
+
+    cy.server();
+    cy.route('POST', 'api/dashboards').as('NewDashboard');
+
+    cy.getByTestId('EditDashboardDialog').within(() => {
+      cy.getByTestId('DashboardSaveButton').should('be.disabled');
+      cy.get('input').type('Foo Bar');
+      cy.getByTestId('DashboardSaveButton').click();
+    });
+
+    cy.wait('@NewDashboard').then((xhr) => {
+      const slug = Cypress._.get(xhr, 'response.body.slug');
+      assert.isDefined(slug, 'Dashboard api call returns slug');
+
       cy.visit('/dashboards');
       cy.getByTestId('DashboardLayoutContent').within(() => {
-        cy.getByTestId(slug).should('exist').click();
+        cy.getByTestId(slug).should('exist');
       });
+    });
+  });
+
+  it('archives dashboard', function () {
+    createNewDashboardByAPI('Foo Bar').then((slug) => {
+      cy.visit(`/dashboard/${slug}`);
 
-      archiveCurrentDashboard();
+      cy.getByTestId('DashboardMoreMenu')
+        .click()
+        .within(() => {
+          cy.get('li')
+            .contains('Archive')
+            .click();
+        });
+
+      cy.get('.btn-warning')
+        .contains('Archive')
+        .click();
+      cy.get('.label-tag-archived').should('exist');
 
       cy.visit('/dashboards');
       cy.getByTestId('DashboardLayoutContent').within(() => {
         cy.getByTestId(slug).should('not.exist');
       });
     });
   });
+
+
+  describe('Textbox', () => {
+    before(function () {
+      cy.login();
+      createNewDashboardByAPI('Foo Bar')
+        .then(slug => `/dashboard/${slug}`)
+        .as('dashboardUrl');
+    });
+
+    beforeEach(function () {
+      cy.visit(this.dashboardUrl);
+      addTextbox('Hello World!').as('textboxEl');
+    });
+
+    it('removes textbox from X button', function () {
+      editDashboard();
+
+      cy.get('@textboxEl').within(() => {
+        cy.get('.widget-menu-remove').click();
+      });
+
+      cy.get('@textboxEl').should('not.exist');
+    });
+
+    it('removes textbox from menu', function () {
+      cy.get('@textboxEl').within(() => {
+        cy.get('.widget-menu-regular').click({ force: true }).within(() => {
+          cy.get('li a').contains('Remove From Dashboard').click({ force: true });
+        });
+      });
+
+      cy.get('@textboxEl').should('not.exist');
+    });
+
+    it('edits textbox', function () {
+      cy.get('@textboxEl').within(() => {
+        cy.get('.widget-menu-regular').click({ force: true }).within(() => {
+          cy.get('li a').contains('Edit').click({ force: true });
+        });
+      });
+
+      const newContent = '[edited]';
+      cy.get('edit-text-box').should('exist').within(() => {
+        cy.get('textarea').clear().type(newContent);
+        cy.contains('button', 'Save').click();
+      });
+
+      cy.get('@textboxEl').should('contain', newContent);
+    });
+  });
 });