Cypress test - dashboard create/archive

.circleci/Dockerfile.cypress

@@ -3,7 +3,8 @@ FROM cypress/browsers:chrome67
 ENV APP /usr/src/app
 WORKDIR $APP
 
-RUN npm install --no-save puppeteer@1.10.0 cypress@^3.1.5 @percy/cypress@^0.2.3 atob@2.1.2 > /dev/null
+COPY package.json $APP/package.json
+RUN npm run cypress:install > /dev/null
 
 COPY cypress $APP/cypress
 COPY cypress.json $APP/cypress.json

client/app/components/app-header/app-header.html

@@ -67,7 +67,7 @@
 
       <!-- Add New Button -->
       <div class="btn-group navbar-btn navbar-left btn__new hidden-xs" uib-dropdown is-open="status.isopen">
-        <button id="create-button" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
+        <button id="create-button" data-test="CreateButton" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
           Create <span class="caret caret--nav"></span>
         </button>
         <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="create-button">

client/app/components/dashboards/edit-dashboard-dialog.html

@@ -1,17 +1,19 @@
-<div class="modal-header">
-  <button type="button" class="close" ng-click="$ctrl.dismiss()" ng-disabled="$ctrl.saveInProgress" aria-hidden="true">&times;</button>
-  <h4 class="modal-title">New Dashboard</h4>
-</div>
-<div class="modal-body" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
-  <p>
-    <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="$ctrl.dashboard.name" autofocus ng-keyup="$event.keyCode === 13 && $ctrl.saveDashboard()">
-  </p>
-</div>
-<div class="modal-footer" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
-  <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
-  <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !$ctrl.isFormValid()" ng-click="$ctrl.saveDashboard()">Save</button>
-</div>
+<div data-test="EditDashboardDialog">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$ctrl.dismiss()" ng-disabled="$ctrl.saveInProgress" aria-hidden="true">&times;</button>
+    <h4 class="modal-title">New Dashboard</h4>
+  </div>
+  <div class="modal-body" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
+    <p>
+      <input type="text" class="form-control" placeholder="Dashboard Name" ng-model="$ctrl.dashboard.name" autofocus ng-keyup="$event.keyCode === 13 && $ctrl.saveDashboard()">
+    </p>
+  </div>
+  <div class="modal-footer" ng-if="$ctrl.policy.isCreateDashboardEnabled()">
+    <button type="button" class="btn btn-default" ng-disabled="$ctrl.saveInProgress" ng-click="$ctrl.dismiss()">Close</button>
+    <button type="button" class="btn btn-primary" ng-disabled="$ctrl.saveInProgress || !$ctrl.isFormValid()" ng-click="$ctrl.saveDashboard()" data-test="DashboardSaveButton">Save</button>
+  </div>
 
-<div class="modal-body" ng-if="!$ctrl.policy.isCreateDashboardEnabled()">
-  <edit-dashboard-dialog-disabled></edit-dashboard-dialog-disabled>
+  <div class="modal-body" ng-if="!$ctrl.policy.isCreateDashboardEnabled()">
+    <edit-dashboard-dialog-disabled></edit-dashboard-dialog-disabled>
+  </div>
 </div>

client/app/pages/dashboards/DashboardList.jsx

@@ -45,7 +45,7 @@ class DashboardList extends React.Component {
     Columns.favorites({ className: 'p-r-0' }),
     Columns.custom.sortable((text, item) => (
       <React.Fragment>
-        <a className="table-main-title" href={'dashboard/' + item.slug}>{ item.name }</a>
+        <a className="table-main-title" href={'dashboard/' + item.slug} data-test={item.slug}>{ item.name }</a>
         <DashboardTagsControl
           className="d-block"
           tags={item.tags}
@@ -88,35 +88,35 @@ class DashboardList extends React.Component {
             />
           </Layout.Sidebar>
           <Layout.Content>
-            {!controller.isLoaded && <LoadingState />}
-            {
-              controller.isLoaded && controller.isEmpty && (
-                <DashboardListEmptyState
-                  page={controller.params.currentPage}
-                  searchTerm={controller.searchTerm}
-                  selectedTags={controller.selectedTags}
-                />
-              )
-            }
-            {
-              controller.isLoaded && !controller.isEmpty && (
-                <div className="bg-white tiled table-responsive">
-                  <ItemsTable
-                    items={controller.pageItems}
-                    columns={this.listColumns}
-                    orderByField={controller.orderByField}
-                    orderByReverse={controller.orderByReverse}
-                    toggleSorting={controller.toggleSorting}
+            {controller.isLoaded ? (
+              <div data-test="DashboardLayoutContent">
+                {controller.isEmpty ? (
+                  <DashboardListEmptyState
+                    page={controller.params.currentPage}
+                    searchTerm={controller.searchTerm}
+                    selectedTags={controller.selectedTags}
                   />
-                  <Paginator
-                    totalCount={controller.totalItemsCount}
-                    itemsPerPage={controller.itemsPerPage}
-                    page={controller.page}
-                    onChange={page => controller.updatePagination({ page })}
-                  />
-                </div>
-              )
-            }
+                ) : (
+                  <div className="bg-white tiled table-responsive">
+                    <ItemsTable
+                      items={controller.pageItems}
+                      columns={this.listColumns}
+                      orderByField={controller.orderByField}
+                      orderByReverse={controller.orderByReverse}
+                      toggleSorting={controller.toggleSorting}
+                    />
+                    <Paginator
+                      totalCount={controller.totalItemsCount}
+                      itemsPerPage={controller.itemsPerPage}
+                      page={controller.page}
+                      onChange={page => controller.updatePagination({ page })}
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <LoadingState />
+            )}
           </Layout.Content>
         </Layout>
       </div>

client/app/pages/dashboards/dashboard.html

@@ -61,7 +61,7 @@ <h3>
           </button>
       </span>
 
-      <div class="btn-group hidden-print hidden-xs" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown ng-if="!$ctrl.dashboard.is_archived && !$ctrl.layoutEditing">
+      <div class="btn-group hidden-print hidden-xs" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown ng-if="!$ctrl.dashboard.is_archived && !$ctrl.layoutEditing" data-test="DashboardMoreMenu">
         <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
           <span class="zmdi zmdi-more"></span>
         </button>

cypress/integration/dashboard/dashboard_spec.js

@@ -0,0 +1,59 @@
+function createNewDashboard(dashboardName) {
+  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(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 slug;
+  });
+}
+
+function 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');
+}
+
+describe('Dashboard', () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('creates a new dashboard and archives it', () => {
+    createNewDashboard('Foo Bar').then((slug) => {
+      cy.visit('/dashboards');
+      cy.getByTestId('DashboardLayoutContent').within(() => {
+        cy.getByTestId(slug).should('exist').click();
+      });
+
+      archiveCurrentDashboard();
+
+      cy.visit('/dashboards');
+      cy.getByTestId('DashboardLayoutContent').within(() => {
+        cy.getByTestId(slug).should('not.exist');
+      });
+    });
+  });
+});