refactor: migrate table chart to new API (#10270)

* 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
This commit is contained in:
Jesse Yang
2021-01-29 03:12:09 -08:00
committed by GitHub
parent bab86abd92
commit e3db935c62
24 changed files with 680 additions and 390 deletions

View File

@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { interceptChart } from 'cypress/utils';
import {
FORM_DATA_DEFAULTS,
NUM_METRIC,
@@ -34,7 +35,7 @@ describe('Visualization > Table', () => {
const PERCENT_METRIC = {
expressionType: 'SQL',
sqlExpression: 'CAST(SUM(num_girls)+AS+FLOAT)/SUM(num)',
sqlExpression: 'CAST(SUM(num_girls) AS FLOAT)/SUM(num)',
column: null,
aggregate: null,
hasCustomLabel: true,
@@ -44,7 +45,7 @@ describe('Visualization > Table', () => {
beforeEach(() => {
cy.login();
cy.intercept('POST', '/superset/explore_json/**').as('getJson');
interceptChart({ legacy: false }).as('chartData');
});
it('Use default time column', () => {
@@ -66,8 +67,8 @@ describe('Visualization > Table', () => {
});
// when format with smart_date, time column use format by granularity
cy.get('.chart-container td:nth-child(1)').contains('2008 Q1');
// other column with timestamp use raw timestamp
cy.get('.chart-container td:nth-child(3)').contains('2008-01-01T00:00:00');
// other column with timestamp use adaptive formatting
cy.get('.chart-container td:nth-child(3)').contains('2008');
cy.get('.chart-container td:nth-child(4)').contains('TX');
});
@@ -99,7 +100,7 @@ describe('Visualization > Table', () => {
groupby: ['name'],
});
cy.verifySliceSuccess({
waitAlias: '@getJson',
waitAlias: '@chartData',
querySubstring: /group by.*name/i,
chartSelector: 'table',
});
@@ -115,14 +116,14 @@ describe('Visualization > Table', () => {
groupby: ['name'],
});
cy.verifySliceSuccess({
waitAlias: '@getJson',
waitAlias: '@chartData',
querySubstring: /group by.*name/i,
chartSelector: 'table',
});
// should handle sorting correctly
cy.get('.chart-container th').contains('name').click();
cy.get('.chart-container td:nth-child(2):eq(0)').contains('Abigail');
cy.get('.chart-container td:nth-child(2):eq(0)').contains('Aaron');
cy.get('.chart-container th').contains('Time').click().click();
cy.get('.chart-container td:nth-child(1):eq(0)').contains('2008');
});
@@ -134,7 +135,7 @@ describe('Visualization > Table', () => {
metrics: [],
groupby: ['name'],
});
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'table' });
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'table' });
});
it('Test table with groupby order desc', () => {
@@ -144,7 +145,7 @@ describe('Visualization > Table', () => {
groupby: ['name'],
order_desc: true,
});
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'table' });
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'table' });
});
it('Test table with groupby and limit', () => {
@@ -156,9 +157,9 @@ describe('Visualization > Table', () => {
row_limit: limit,
};
cy.visitChartByParams(JSON.stringify(formData));
cy.wait('@getJson').then(({ response }) => {
cy.wait('@chartData').then(({ response }) => {
cy.verifySliceContainer('table');
expect(response?.body.data.records.length).to.eq(limit);
expect(response?.body.result[0].data.length).to.eq(limit);
});
cy.get('span.label-danger').contains('10 rows');
});
@@ -178,7 +179,7 @@ describe('Visualization > Table', () => {
cy.get('div[data-test="all_columns"]').should('be.visible');
cy.get('div[data-test="groupby"]').should('not.exist');
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'table' });
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'table' });
// should allow switch to aggregate mode
cy.get('div[data-test="query_mode"] .btn').contains('Aggregate').click();
@@ -196,14 +197,13 @@ describe('Visualization > Table', () => {
all_columns: ['name', 'state', 'ds', 'num'],
metrics: [],
row_limit: limit,
order_by_cols: ['["num",+false]'],
order_by_cols: ['["num", false]'],
};
cy.visitChartByParams(JSON.stringify(formData));
cy.wait('@getJson').then(({ response }) => {
cy.wait('@chartData').then(({ response }) => {
cy.verifySliceContainer('table');
const responseBody = response?.body;
const { records } = responseBody.data;
const records = response?.body.result[0].data;
expect(records[0].num).greaterThan(records[records.length - 1].num);
});
});
@@ -215,7 +215,7 @@ describe('Visualization > Table', () => {
const formData = { ...VIZ_DEFAULTS, metrics, adhoc_filters: filters };
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'table' });
cy.verifySliceSuccess({ waitAlias: '@chartData', chartSelector: 'table' });
});
it('Tests table number formatting with % in metric name', () => {
@@ -227,7 +227,7 @@ describe('Visualization > Table', () => {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({
waitAlias: '@getJson',
waitAlias: '@chartData',
querySubstring: /group by.*state/i,
chartSelector: 'table',
});