Skip to content

Commit

Permalink
Cypress test - dashboard create/archive (getredash#3565)
Browse files Browse the repository at this point in the history
  • Loading branch information
ranbena authored Mar 14, 2019
1 parent b799ab6 commit ab39242
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 47 deletions.
3 changes: 2 additions & 1 deletion .circleci/Dockerfile.cypress
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ FROM cypress/browsers:chrome67
ENV APP /usr/src/app
WORKDIR $APP

RUN npm install --no-save [email protected] cypress@^3.1.5 @percy/cypress@^0.2.3 [email protected] > /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
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/app-header/app-header.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
32 changes: 17 additions & 15 deletions client/app/components/dashboards/edit-dashboard-dialog.html
Original file line number Diff line number Diff line change
@@ -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>
58 changes: 29 additions & 29 deletions client/app/pages/dashboards/DashboardList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion client/app/pages/dashboards/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions cypress/integration/dashboard/dashboard_spec.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
});

0 comments on commit ab39242

Please sign in to comment.