Skip to content

Commit

Permalink
Changed textbox and widget addition to an api call
Browse files Browse the repository at this point in the history
  • Loading branch information
@ranbena
ranbena committed Mar 19, 2019
1 parent 87b8191 commit 5c6fa6f
Showing 1 changed file with 132 additions and 110 deletions.
242 changes: 132 additions & 110 deletions cypress/integration/dashboard/dashboard_spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
function createNewDashboardByAPI(name) {
cy.server();
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;
});
return cy.request('POST', 'api/dashboards', { name })
.then(({ body }) => body);
}

function editDashboard() {
Expand All @@ -17,61 +14,69 @@ function editDashboard() {
});
}

function addTextbox(text) {
cy.server();
cy.route('POST', 'api/widgets').as('NewWidget');

editDashboard();
function addTextboxByAPI(text, dashId) {
const data = {
width: 1,
dashboard_id: dashId,
visualization_id: null,
text: 'text',
options: {
position: { col: 0, row: 0, sizeX: 3, sizeY: 3 },
},
};

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();

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}`);
});
cy.server();
return cy.request('POST', 'api/widgets', data)
.then(({ body }) => {
const id = Cypress._.get(body, 'id');
assert.isDefined(id, 'Widget api call returns widget id');
return `WidgetId${id}`;
});
}

const defaultQueryData = {
name: 'Test Query',
query: 'select 1',
data_source_id: 1,
options: {
parameters: [],
},
schedule: null,
};

function addWidget(queryData = {}) {
const merged = Object.assign({}, defaultQueryData, queryData);
function addQueryByAPI(data, shouldPublish = true) {
const merged = Object.assign({
name: 'Test Query',
query: 'select 1',
data_source_id: 1,
options: {
parameters: [],
},
schedule: null,
}, data);

// create query
cy.server();
return cy.request('POST', '/api/queries', merged)
// publish it so it's avail for widget
.then(({ body }) => cy.request('POST', `/api/queries/${body.id}`, { is_draft: false }))
.then(({ body }) => {
// create widget
editDashboard();
cy.contains('a', 'Add Widget').click();
cy.getByTestId('AddWidgetDialog').within(() => {
cy.get(`.query-selector-result[data-test="QueryId${body.id}"]`).click();
});
const request = cy.request('POST', '/api/queries', merged);
if (shouldPublish) {
request.then(({ body }) => cy.request('POST', `/api/queries/${body.id}`, { is_draft: false }));
}

return request.then(({ body }) => body);
}

cy.route('POST', 'api/widgets').as('NewWidget');
cy.contains('button', 'Add to Dashboard').click();
return cy.wait('@NewWidget');
function addWidgetByAPI(dashId, queryData = {}) {
const data = {
width: 1,
dashboard_id: dashId,
visualization_id: null,
options: {
position: { col: 0, row: 0, sizeX: 3, sizeY: 3 },
},
};

return addQueryByAPI(queryData)
.then((query) => {
const visId = Cypress._.get(query, 'visualizations.0.id');
assert.isDefined(visId, 'Query api call returns at least one visualization with id');
data.visualization_id = visId;

cy.server();
return cy.request('POST', 'api/widgets', data);
})
.then((xhr) => {
const body = Cypress._.get(xhr, 'response.body');
assert.isDefined(body, 'Widget api call returns response body');
return body;
.then(({ body }) => {
const id = Cypress._.get(body, 'id');
assert.isDefined(id, 'Widget api call returns widget id');
return `WidgetId${id}`;
});
}

Expand Down Expand Up @@ -106,7 +111,7 @@ describe('Dashboard', () => {
});

it('archives dashboard', function () {
createNewDashboardByAPI('Foo Bar').then((slug) => {
createNewDashboardByAPI('Foo Bar').then(({ slug }) => {
cy.visit(`/dashboard/${slug}`);

cy.getByTestId('DashboardMoreMenu')
Expand All @@ -130,76 +135,98 @@ describe('Dashboard', () => {
});

describe('Textbox', () => {
before(function () {
cy.login();
createNewDashboardByAPI('Foo Bar')
.then(slug => `/dashboard/${slug}`)
.as('dashboardUrl');
beforeEach(function () {
createNewDashboardByAPI('Foo Bar').then(({ slug, id }) => {
this.dashboardId = id;
this.dashboardUrl = `/dashboard/${slug}`;
});
});

beforeEach(function () {
it('adds textbox', function () {
cy.visit(this.dashboardUrl);
addTextbox('Hello World!').as('textboxEl');
editDashboard();
cy.contains('a', 'Add Textbox').click();
cy.get('.add-textbox').within(() => {
cy.get('textarea').type('Hello World!');
});
cy.contains('button', 'Add to Dashboard').click();
cy.get('.add-textbox').should('not.exist');
cy.get('.textbox').should('exist');
});

it('removes textbox from X button', function () {
editDashboard();
it('removes textbox by X button', function () {
addTextboxByAPI('Hello World!', this.dashboardId).then((elTestId) => {
cy.visit(this.dashboardUrl);
editDashboard();

cy.get('@textboxEl').within(() => {
cy.get('.widget-menu-remove').click();
cy.getByTestId(elTestId)
.within(() => {
cy.get('.widget-menu-remove').click();
})
.should('not.exist');
});

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 });
});
it('removes textbox by menu', function () {
addTextboxByAPI('Hello World!', this.dashboardId).then((elTestId) => {
cy.visit(this.dashboardUrl);
cy.getByTestId(elTestId)
.within(() => {
cy.get('.widget-menu-regular').click({ force: true }).within(() => {
cy.get('li a').contains('Remove From Dashboard').click({ force: true });
});
})
.should('not.exist');
});

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 });
addTextboxByAPI('Hello World!', this.dashboardId).then((elTestId) => {
cy.visit(this.dashboardUrl);
cy.getByTestId(elTestId).as('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();
});
});

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);
});

cy.get('@textboxEl').should('contain', newContent);
});
});

describe('Widget', () => {
before(function () {
cy.login();
createNewDashboardByAPI('Foo Bar')
.then(slug => `/dashboard/${slug}`)
.as('dashboardUrl');
});

beforeEach(function () {
cy.visit(this.dashboardUrl);
createNewDashboardByAPI('Foo Bar').then(({ slug, id }) => {
this.dashboardId = id;
this.dashboardUrl = `/dashboard/${slug}`;
});
});

it('adds widget', () => {
addWidget().then(({ id }) => {
cy.getByTestId(`WidgetId${id}`).should('exist');
addQueryByAPI().then(({ id: queryId }) => {
editDashboard();
cy.contains('a', 'Add Widget').click();
cy.getByTestId('AddWidgetDialog').within(() => {
cy.get(`.query-selector-result[data-test="QueryId${queryId}"]`).click();
});
cy.contains('button', 'Add to Dashboard').click();
cy.getByTestId('AddWidgetDialog').should('not.exist');
cy.get('.widget-wrapper').should('exist');
});
});

it('removes widget', () => {
addWidget().then(({ id }) => {
cy.getByTestId(`WidgetId${id}`)
it('removes widget', function () {
addWidgetByAPI(this.dashboardId).then((elTestId) => {
cy.visit(this.dashboardUrl);
editDashboard();
cy.getByTestId(elTestId)
.within(() => {
cy.get('.widget-menu-remove').click();
})
Expand All @@ -208,32 +235,27 @@ describe('Dashboard', () => {
});

describe('Auto height for table visualization', () => {
it('has correct visualization and position config', () => {
addWidget().then(({ options, visualization }) => {
expect(visualization.type).to.eq('TABLE');
expect(options.position.autoHeight).to.be.true;
});
});

it('renders correct height for 2 table rows', () => {
it('renders correct height for 2 table rows', function () {
const queryData = {
query: 'select s.a FROM generate_series(1,2) AS s(a)',
};

addWidget(queryData).then(({ id }) => {
cy.getByTestId(`WidgetId${id}`)
addWidgetByAPI(this.dashboardId, queryData).then((elTestId) => {
cy.visit(this.dashboardUrl);
cy.getByTestId(elTestId)
.its('0.offsetHeight')
.should('eq', 235);
});
});

it('renders correct height for 5 table rows', () => {
it('renders correct height for 5 table rows', function () {
const queryData = {
query: 'select s.a FROM generate_series(1,5) AS s(a)',
};

addWidget(queryData).then(({ id }) => {
cy.getByTestId(`WidgetId${id}`)
addWidgetByAPI(this.dashboardId, queryData).then((elTestId) => {
cy.visit(this.dashboardUrl);
cy.getByTestId(elTestId)
.its('0.offsetHeight')
.should('eq', 335);
});
Expand Down

0 comments on commit 5c6fa6f

Please sign in to comment.