Skip to content

Commit

Permalink
refactor: migrate table chart to new API (#10270)
Browse files Browse the repository at this point in the history 
* refactor: migrate table chart to new API

* chore: bump superset-ui to 0.17.0

* Fix Cypress tests

* Apply soft-conversion to numeric metrics

Fix time column formatting test

* Add translation to chart does not exist error

* Bump to 0.17.1
  • Loading branch information
@ktmud
ktmud authored Jan 29, 2021
1 parent bab86ab commit e3db935
Show file tree
Hide file tree
Showing 24 changed files with 680 additions and 390 deletions.
2 changes: 1 addition & 1 deletion .pylintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ ignored-argument-names=_.*
max-locals=15

# Maximum number of return / yield for function / method body
max-returns=6
max-returns=10

# Maximum number of branch for function / method body
max-branches=12
Expand Down
9 changes: 5 additions & 4 deletions ...ypress/integration/dashboard/load.test.js → ...ypress/integration/dashboard/load.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,20 @@ import {
getChartAliases,
isLegacyResponse,
getSliceIdFromRequestUrl,
JsonObject,
} from '../../utils/vizPlugins';
import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';

describe('Dashboard load', () => {
let dashboard;
let aliases;
let aliases: string[];
beforeEach(() => {
cy.login();

cy.visit(WORLD_HEALTH_DASHBOARD);

cy.get('#app').then(data => {
const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
cy.get('#app').then(nodes => {
const bootstrapData = JSON.parse(nodes[0].dataset.bootstrap || '');
dashboard = bootstrapData.dashboard_data;
const { slices } = dashboard;
// then define routes and create alias for each requests
Expand All @@ -53,7 +54,7 @@ describe('Dashboard load', () => {
sliceId = responseBody.form_data.slice_id;
} else {
sliceId = getSliceIdFromRequestUrl(request.url);
responseBody.result.forEach(element => {
responseBody.result.forEach((element: JsonObject) => {
expect(element).to.have.property('error', null);
expect(element).to.have.property('status', 'success');
});
Expand Down
30 changes: 17 additions & 13 deletions ...ypress/integration/dashboard/tabs.test.js → ...ypress/integration/dashboard/tabs.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { interceptChart, parsePostForm } from 'cypress/utils';
import { interceptChart, parsePostForm, Slice } from 'cypress/utils';
import { TABBED_DASHBOARD } from './dashboard.helper';

describe('Dashboard tabs', () => {
Expand All @@ -40,24 +40,28 @@ describe('Dashboard tabs', () => {
cy.visit(TABBED_DASHBOARD);

cy.get('#app').then(data => {
const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
const dashboard = bootstrapData.dashboard_data;
const bootstrapData = JSON.parse(data[0].dataset.bootstrap || '');
const dashboard = bootstrapData.dashboard_data as { slices: Slice[] };
filterId = dashboard.slices.find(
slice => slice.form_data.viz_type === 'filter_box',
).slice_id;
)?.slice_id;
boxplotId = dashboard.slices.find(
slice => slice.form_data.viz_type === 'box_plot',
).slice_id;
)?.slice_id;
treemapId = dashboard.slices.find(
slice => slice.form_data.viz_type === 'treemap',
).slice_id;
)?.slice_id;
linechartId = dashboard.slices.find(
slice => slice.form_data.viz_type === 'line',
).slice_id;
interceptChart(filterId).as('filterRequest');
interceptChart(treemapId).as('treemapRequest');
interceptChart(linechartId).as('linechartRequest');
interceptChart(boxplotId, false).as('boxplotRequest');
)?.slice_id;
interceptChart({ sliceId: filterId, legacy: true }).as('filterRequest');
interceptChart({ sliceId: treemapId, legacy: true }).as('treemapRequest');
interceptChart({ sliceId: linechartId, legacy: true }).as(
'linechartRequest',
);
interceptChart({ sliceId: boxplotId, legacy: false }).as(
'boxplotRequest',
);
});
});

Expand Down Expand Up @@ -140,7 +144,7 @@ describe('Dashboard tabs', () => {
// send new query from same tab
cy.wait('@treemapRequest').then(({ request }) => {
const requestBody = parsePostForm(request.body);
const requestParams = JSON.parse(requestBody.form_data);
const requestParams = JSON.parse(requestBody.form_data as string);
expect(requestParams.extra_filters[0]).deep.eq({
col: 'region',
op: '==',
Expand All @@ -153,7 +157,7 @@ describe('Dashboard tabs', () => {

cy.wait('@linechartRequest').then(({ request }) => {
const requestBody = parsePostForm(request.body);
const requestParams = JSON.parse(requestBody.form_data);
const requestParams = JSON.parse(requestBody.form_data as string);
expect(requestParams.extra_filters[0]).deep.eq({
col: 'region',
op: '==',
Expand Down
17 changes: 11 additions & 6 deletions .../integration/dashboard/url_params.test.js → .../integration/dashboard/url_params.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,22 @@ import {
isLegacyResponse,
getChartAliases,
parsePostForm,
Dashboard,
JsonObject,
} from 'cypress/utils';
import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';

describe('Dashboard form data', () => {
const urlParams = { param1: '123', param2: 'abc' };
let dashboard;
let dashboard: Dashboard;

beforeEach(() => {
cy.login();

cy.visit(WORLD_HEALTH_DASHBOARD, { qs: urlParams });

cy.get('#app').then(data => {
const bootstrapData = JSON.parse(data[0].dataset.bootstrap);
const bootstrapData = JSON.parse(data[0].dataset.bootstrap || '');
dashboard = bootstrapData.dashboard_data;
});
});
Expand All @@ -47,13 +49,16 @@ describe('Dashboard form data', () => {
const responseBody = response?.body;
if (isLegacyResponse(responseBody)) {
const requestParams = JSON.parse(
parsePostForm(request.body).form_data,
parsePostForm(request.body).form_data as string,
);
expect(requestParams.url_params).deep.eq(urlParams);
} else {
request.body.queries.forEach(query => {
expect(query.url_params).deep.eq(urlParams);
});
// TODO: export url params to chart data API
request.body.queries.forEach(
(query: { url_params: JsonObject }) => {
expect(query.url_params).deep.eq(urlParams);
},
);
}
}),
),
Expand Down
49 changes: 26 additions & 23 deletions superset-frontend/cypress-base/cypress/integration/explore/control.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
// ***********************************************
// Tests for setting controls in the UI
// ***********************************************
import { interceptChart } from 'cypress/utils';
import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';

describe('Datasource control', () => {
Expand All @@ -29,10 +30,10 @@ describe('Datasource control', () => {
let numScripts = 0;

cy.login();
cy.intercept('GET', '/superset/explore_json/**').as('getJson');
cy.intercept('POST', '/superset/explore_json/**').as('postJson');
interceptChart({ legacy: false }).as('chartData');

cy.visitChartByName('Num Births Trend');
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test="open-datasource-tab').click({ force: true });
cy.get('[data-test="datasource-menu-trigger"]').click();
Expand Down Expand Up @@ -90,13 +91,13 @@ describe('Datasource control', () => {
describe('VizType control', () => {
beforeEach(() => {
cy.login();
cy.intercept('GET', '/superset/explore_json/**').as('getJson');
cy.intercept('POST', '/superset/explore_json/**').as('postJson');
interceptChart({ legacy: false }).as('tableChartData');
interceptChart({ legacy: true }).as('lineChartData');
});

it('Can change vizType', () => {
cy.visitChartByName('Daily Totals');
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@tableChartData' });

let numScripts = 0;
cy.get('script').then(nodes => {
Expand All @@ -114,27 +115,29 @@ describe('VizType control', () => {
});

cy.get('button[data-test="run-query-button"]').click();
cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg' });
cy.verifySliceSuccess({
waitAlias: '@lineChartData',
chartSelector: 'svg',
});
});
});

describe('Time range filter', () => {
beforeEach(() => {
cy.login();
cy.intercept('GET', '/superset/explore_json/**').as('getJson');
cy.intercept('POST', '/superset/explore_json/**').as('postJson');
interceptChart({ legacy: true }).as('chartData');
});

it('Advanced time_range params', () => {
const formData = {
...FORM_DATA_DEFAULTS,
metrics: [NUM_METRIC],
viz_type: 'line',
time_range: '100 years ago : now',
metrics: [NUM_METRIC],
};

cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=time-range-trigger]')
.click()
Expand All @@ -152,13 +155,13 @@ describe('Time range filter', () => {
it('Common time_range params', () => {
const formData = {
...FORM_DATA_DEFAULTS,
metrics: [NUM_METRIC],
viz_type: 'line',
metrics: [NUM_METRIC],
time_range: 'Last year',
};

cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=time-range-trigger]')
.click()
Expand All @@ -172,13 +175,13 @@ describe('Time range filter', () => {
it('Previous time_range params', () => {
const formData = {
...FORM_DATA_DEFAULTS,
metrics: [NUM_METRIC],
viz_type: 'line',
metrics: [NUM_METRIC],
time_range: 'previous calendar month',
};

cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=time-range-trigger]')
.click()
Expand All @@ -192,13 +195,13 @@ describe('Time range filter', () => {
it('Custom time_range params', () => {
const formData = {
...FORM_DATA_DEFAULTS,
metrics: [NUM_METRIC],
viz_type: 'line',
metrics: [NUM_METRIC],
time_range: 'DATEADD(DATETIME("today"), -7, day) : today',
};

cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=time-range-trigger]')
.click()
Expand All @@ -215,13 +218,13 @@ describe('Time range filter', () => {
it('No filter time_range params', () => {
const formData = {
...FORM_DATA_DEFAULTS,
metrics: [NUM_METRIC],
viz_type: 'line',
metrics: [NUM_METRIC],
time_range: 'No filter',
};

cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=time-range-trigger]')
.click()
Expand All @@ -235,16 +238,16 @@ describe('Time range filter', () => {
describe('Groupby control', () => {
it('Set groupby', () => {
cy.login();
cy.intercept('GET', '/superset/explore_json/**').as('getJson');
cy.intercept('POST', '/superset/explore_json/**').as('postJson');
interceptChart({ legacy: true }).as('chartData');

cy.visitChartByName('Num Births Trend');
cy.verifySliceSuccess({ waitAlias: '@postJson' });
cy.verifySliceSuccess({ waitAlias: '@chartData' });

cy.get('[data-test=groupby]').within(() => {
cy.get('.Select__control').click();
cy.get('input[type=text]').type('state{enter}');
});
cy.get('button[data-test="run-query-button"]').click();
cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg' });
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'svg' });
});
});
Loading

0 comments on commit e3db935

Please sign in to comment.