[cypress] Add integration test for area, pie, pivot_table, world_map, dual_line, sunburst, sankey, big_number, bubble, box_plot, treemap (#5924)

* Add integration test for world map

* add pie chart

* add area

* use should for assertion

* update area test

* update it message

* remove null params

* add pivot tests

* remove urlparams

* add dual_line

* add sunburst test

* add big number

* add sankey

* add bubble

* add box plot

* add treemap tests

* combine all vis under single test
This commit is contained in:
Krist Wongsuphasawat
2018-10-03 11:44:38 -07:00
committed by Chris Williams
parent 5c2a7880cc
commit df64ecaa18
13 changed files with 726 additions and 1 deletions

View File

@@ -0,0 +1,76 @@
export default () => describe('Area', () => {
const AREA_FORM_DATA = {
datasource: '2__table',
viz_type: 'area',
slice_id: 48,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '1960-01-01 : now',
metrics: ['sum__SP_POP_TOTL'],
adhoc_filters: [],
groupby: [],
limit: '25',
order_desc: true,
contribution: false,
row_limit: 50000,
show_brush: 'auto',
show_legend: true,
line_interpolation: 'linear',
stacked_style: 'stack',
color_scheme: 'bnbColors',
rich_tooltip: true,
show_controls: false,
x_axis_label: '',
bottom_margin: 'auto',
x_ticks_layout: 'auto',
x_axis_format: 'smart_date',
x_axis_showminmax: false,
y_axis_format: '.3s',
y_log_scale: false,
rolling_type: 'None',
comparison_type: 'values',
annotation_layers: [],
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work without groupby', () => {
verify(AREA_FORM_DATA);
cy.get('.nv-area').should('have.length', 1);
});
it('should work with group by', () => {
verify({
...AREA_FORM_DATA,
groupby: ['region'],
});
cy.get('.nv-area').should('have.length', 7);
});
it('should work with groupby and filter', () => {
verify({
...AREA_FORM_DATA,
groupby: ['region'],
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: 'in',
comparator: ['South Asia', 'North America'],
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_txje2ikiv6_wxmn0qwd1xo',
}],
});
cy.get('.nv-area').should('have.length', 2);
});
});

View File

@@ -0,0 +1,63 @@
export default () => describe('Big Number', () => {
const BIG_NUMBER_FORM_DATA = {
datasource: '2__table',
viz_type: 'big_number',
slice_id: 42,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '2000+:+2014-01-02',
metric: 'sum__SP_POP_TOTL',
adhoc_filters: [],
compare_lag: '10',
compare_suffix: 'over+10Y',
y_axis_format: '.3s',
show_trend_line: true,
start_y_axis_at_zero: true,
color_picker: {
r: 0,
g: 122,
b: 135,
a: 1,
},
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: '.big_number' });
}
beforeEach(() => {
cy.login();
cy.server();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(BIG_NUMBER_FORM_DATA);
cy.get('.chart-container .header_line');
cy.get('.chart-container .subheader_line');
cy.get('.chart-container svg path.vx-linepath');
});
it('should work without subheader', () => {
verify({
...BIG_NUMBER_FORM_DATA,
compare_lag: null,
});
cy.get('.chart-container .header_line');
cy.get('.chart-container .subheader_line');
cy.get('.chart-container svg path.vx-linepath');
});
it('should not render trendline when hidden', () => {
verify({
...BIG_NUMBER_FORM_DATA,
show_trend_line: false,
});
cy.get('.chart-container .header_line');
cy.get('.chart-container .subheader_line');
cy.get('.chart-container').then((containers) => {
expect(containers[0].querySelector('svg')).to.equal(null);
});
});
});

View File

@@ -0,0 +1,50 @@
export default () => describe('Box Plot', () => {
const BOX_PLOT_FORM_DATA = {
datasource: '2__table',
viz_type: 'box_plot',
slice_id: 49,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '1960-01-01+:+now',
metrics: ['sum__SP_POP_TOTL'],
adhoc_filters: [],
groupby: ['region'],
limit: '25',
color_scheme: 'bnbColors',
whisker_options: 'Min/max+(no+outliers)',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(BOX_PLOT_FORM_DATA);
cy.get('.chart-container svg rect.nv-boxplot-box').should('have.length', 7);
});
it('should work with filter', () => {
verify({
...BOX_PLOT_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: '==',
comparator: 'South Asia',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_8aqxcf5co1a_x7lm2d1fq0l',
}],
});
cy.get('.chart-container svg rect.nv-boxplot-box').should('have.length', 1);
});
});

View File

@@ -0,0 +1,71 @@
export default () => describe('Bubble', () => {
const BUBBLE_FORM_DATA = {
datasource: '2__table',
viz_type: 'bubble',
slice_id: 46,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '2011-01-01+:+2011-01-02',
series: 'region',
entity: 'country_name',
x: 'sum__SP_RUR_TOTL_ZS',
y: 'sum__SP_DYN_LE00_IN',
size: 'sum__SP_POP_TOTL',
max_bubble_size: '50',
limit: 0,
color_scheme: 'bnbColors',
show_legend: true,
x_axis_label: '',
left_margin: 'auto',
x_axis_format: '.3s',
x_ticks_layout: 'auto',
x_log_scale: false,
x_axis_showminmax: false,
y_axis_label: '',
bottom_margin: 'auto',
y_axis_format: '.3s',
y_log_scale: false,
y_axis_showminmax: false,
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(BUBBLE_FORM_DATA);
cy.get('.chart-container svg circle').should('have.length', 208);
});
it('should work with filter', () => {
verify({
...BUBBLE_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: '==',
comparator: 'South+Asia',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_b2tfg1rs8y_8kmrcyxvsqd',
}],
});
cy.get('.chart-container svg circle')
.should('have.length', 9)
.then((nodeList) => {
// Check that all circles have same color.
const color = nodeList[0].getAttribute('fill');
const circles = Array.prototype.slice.call(nodeList);
expect(circles.every(c => c.getAttribute('fill') === color)).to.equal(true);
});
});
});

View File

@@ -0,0 +1,53 @@
export default () => describe('Dual Line', () => {
const DUAL_LINE_FORM_DATA = {
datasource: '3__table',
viz_type: 'dual_line',
slice_id: 58,
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100+years+ago+:+now',
color_scheme: 'bnbColors',
x_axis_format: 'smart_date',
metric: 'avg__num',
y_axis_format: '.3s',
metric_2: 'sum__num',
y_axis_2_format: '.3s',
adhoc_filters: [],
annotation_layers: [],
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(DUAL_LINE_FORM_DATA);
cy.get('.chart-container svg path.nv-line').should('have.length', 2);
});
it('should work with filter', () => {
verify({
...DUAL_LINE_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'gender',
operator: '==',
comparator: 'girl',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_1ep6q50g8vk_48jj6qxdems',
}],
});
cy.get('.chart-container svg path.nv-line').should('have.length', 2);
});
});

View File

@@ -0,0 +1,53 @@
export default () => describe('Pie', () => {
const PIE_FORM_DATA = {
datasource: '3__table',
viz_type: 'pie',
slice_id: 55,
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100 years ago : now',
metric: 'sum__num',
adhoc_filters: [],
groupby: ['gender'],
row_limit: 50000,
pie_label_type: 'key',
donut: false,
show_legend: true,
show_labels: true,
labels_outside: true,
color_scheme: 'bnbColors',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work with ad-hoc metric', () => {
verify(PIE_FORM_DATA);
cy.get('.chart-container .nv-pie .nv-slice path').should('have.length', 2);
});
it('should work with simple filter', () => {
verify({
...PIE_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'gender',
operator: '==',
comparator: 'boy',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_tqx1en70hh_7nksse7nqic',
}],
});
cy.get('.chart-container .nv-pie .nv-slice path').should('have.length', 1);
});
});

View File

@@ -0,0 +1,92 @@
export default () => describe('Pivot Table', () => {
const PIVOT_TABLE_FORM_DATA = {
datasource: '3__table',
viz_type: 'pivot_table',
slice_id: 61,
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100+years+ago+:+now',
metrics: ['sum__num'],
adhoc_filters: [],
groupby: ['name'],
columns: ['state'],
row_limit: 50000,
pandas_aggfunc: 'sum',
pivot_margins: true,
number_format: '.3s',
combine_metric: false,
};
const TEST_METRIC = {
expressionType: 'SIMPLE',
column: {
id: 338,
column_name: 'sum_boys',
expression: '',
filterable: false,
groupby: false,
is_dttm: false,
type: 'BIGINT',
optionName: '_col_sum_boys',
},
aggregate: 'SUM',
hasCustomLabel: false,
fromFormData: false,
label: 'SUM(sum_boys)',
optionName: 'metric_gvpdjt0v2qf_6hkf56o012',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'table' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work with single groupby', () => {
verify(PIVOT_TABLE_FORM_DATA);
cy.get('.chart-container tr th').then((ths) => {
expect(ths.find(th => th.innerText.trim() === 'name')).to.not.equal(undefined);
});
});
it('should work with more than one groupby', () => {
verify({
...PIVOT_TABLE_FORM_DATA,
groupby: ['name', 'gender'],
});
cy.get('.chart-container tr th').then((ths) => {
expect(ths.find(th => th.innerText.trim() === 'name')).to.not.equal(undefined);
expect(ths.find(th => th.innerText.trim() === 'gender')).to.not.equal(undefined);
});
});
it('should work with multiple metrics', () => {
verify({
...PIVOT_TABLE_FORM_DATA,
metrics: ['sum__num', TEST_METRIC],
});
cy.get('.chart-container tr th').then((ths) => {
expect(ths.find(th => th.innerText.trim() === 'sum__num')).to.not.equal(undefined);
expect(ths.find(th => th.innerText.trim() === 'SUM(sum_boys)')).to.not.equal(undefined);
});
});
it('should work with multiple groupby and multiple metrics', () => {
verify({
...PIVOT_TABLE_FORM_DATA,
groupby: ['name', 'gender'],
metrics: ['sum__num', TEST_METRIC],
});
cy.get('.chart-container tr th').then((ths) => {
expect(ths.find(th => th.innerText.trim() === 'name')).to.not.equal(undefined);
expect(ths.find(th => th.innerText.trim() === 'gender')).to.not.equal(undefined);
expect(ths.find(th => th.innerText.trim() === 'sum__num')).to.not.equal(undefined);
expect(ths.find(th => th.innerText.trim() === 'SUM(sum_boys)')).to.not.equal(undefined);
});
});
});

View File

@@ -0,0 +1,60 @@
export default () => describe('Sankey', () => {
const SANKEY_FORM_DATA = {
datasource: '1__table',
viz_type: 'sankey',
slice_id: 1,
url_params: {},
granularity_sqla: null,
time_grain_sqla: 'P1D',
time_range: 'Last+week',
groupby: ['source', 'target'],
metric: 'sum__value',
adhoc_filters: [],
row_limit: '5000',
color_scheme: 'bnbColors',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(SANKEY_FORM_DATA);
cy.get('.chart-container svg g.node rect').should('have.length', 41);
});
it('should work with filter', () => {
verify({
...SANKEY_FORM_DATA,
adhoc_filters: [
{
expressionType: 'SQL',
sqlExpression: 'SUM(value)+>+0',
clause: 'HAVING',
subject: null,
operator: null,
comparator: null,
fromFormData: false,
filterOptionName: 'filter_jbdwe0hayaj_h9jfer8fy58',
}, {
expressionType: 'SIMPLE',
subject: 'source',
operator: '==',
comparator: 'Energy',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_8e0otka9uif_vmqri4gmbqc',
},
],
});
cy.get('.chart-container svg g.node rect').should('have.length', 6);
});
});

View File

@@ -0,0 +1,66 @@
export default () => describe('Sunburst', () => {
const SUNBURST_FORM_DATA = {
datasource: '2__table',
viz_type: 'sunburst',
slice_id: 47,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '2011-01-01+:+2011-01-01',
groupby: ['region'],
metric: 'sum__SP_POP_TOTL',
adhoc_filters: [],
row_limit: 50000,
color_scheme: 'bnbColors',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work without secondary metric', () => {
verify(SUNBURST_FORM_DATA);
// There should be 7 visible arcs + 1 hidden
cy.get('.chart-container svg g#arcs path').should('have.length', 8);
});
it('should work with secondary metric', () => {
verify({
...SUNBURST_FORM_DATA,
secondary_metric: 'sum__SP_RUR_TOTL',
});
cy.get('.chart-container svg g#arcs path').should('have.length', 8);
});
it('should work with multiple groupbys', () => {
verify({
...SUNBURST_FORM_DATA,
groupby: ['region', 'country_name'],
});
cy.get('.chart-container svg g#arcs path').should('have.length', 118);
});
it('should work with filter', () => {
verify({
...SUNBURST_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: 'in',
comparator: ['South Asia', 'North America'],
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_txje2ikiv6_wxmn0qwd1xo',
}],
});
cy.get('.chart-container svg g#arcs path').should('have.length', 3);
});
});

View File

@@ -2,7 +2,7 @@ import { FORM_DATA_DEFAULTS, NUM_METRIC, SIMPLE_FILTER } from './shared.helper';
// Table
export default() => describe('Table chart', () => {
export default () => describe('Table chart', () => {
const VIZ_DEFAULTS = { ...FORM_DATA_DEFAULTS, viz_type: 'table' };
beforeEach(() => {

View File

@@ -0,0 +1,59 @@
export default () => describe('Treemap', () => {
const TREEMAP_FORM_DATA = {
datasource: '2__table',
viz_type: 'treemap',
slice_id: 50,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '1960-01-01+:+now',
metrics: ['sum__SP_POP_TOTL'],
adhoc_filters: [],
groupby: ['country_code'],
row_limit: 50000,
color_scheme: 'bnbColors',
treemap_ratio: 1.618033988749895,
number_format: '.3s',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work', () => {
verify(TREEMAP_FORM_DATA);
cy.get('.chart-container svg rect.child').should('have.length', 214);
});
it('should work with multiple groupby', () => {
verify({
...TREEMAP_FORM_DATA,
groupby: ['region', 'country_code'],
});
cy.get('.chart-container svg rect.parent').should('have.length', 7);
cy.get('.chart-container svg rect.child').should('have.length', 214);
});
it('should work with filter', () => {
verify({
...TREEMAP_FORM_DATA,
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: '==',
comparator: 'South Asia',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_8aqxcf5co1a_x7lm2d1fq0l',
}],
});
cy.get('.chart-container svg rect.child').should('have.length', 8);
});
});

View File

@@ -0,0 +1,62 @@
export default () => describe('World Map', () => {
const WORLD_MAP_FORM_DATA = {
datasource: '2__table',
viz_type: 'world_map',
slice_id: 45,
granularity_sqla: 'year',
time_grain_sqla: 'P1D',
time_range: '2014-01-01 : 2014-01-02',
entity: 'country_code',
country_fieldtype: 'cca3',
metric: 'sum__SP_RUR_TOTL_ZS',
adhoc_filters: [],
row_limit: 50000,
show_bubbles: true,
secondary_metric: 'sum__SP_POP_TOTL',
max_bubble_size: '25',
};
function verify(formData) {
cy.visitChartByParams(JSON.stringify(formData));
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
}
beforeEach(() => {
cy.server();
cy.login();
cy.route('POST', '/superset/explore_json/**').as('getJson');
});
it('should work with ad-hoc metric', () => {
verify(WORLD_MAP_FORM_DATA);
cy.get('.bubbles circle.datamaps-bubble').should('have.length', 206);
});
it('should work with simple filter', () => {
verify({
...WORLD_MAP_FORM_DATA,
metric: 'count',
adhoc_filters: [{
expressionType: 'SIMPLE',
subject: 'region',
operator: '==',
comparator: 'South Asia',
clause: 'WHERE',
sqlExpression: null,
fromFormData: true,
filterOptionName: 'filter_8aqxcf5co1a_x7lm2d1fq0l',
}],
});
cy.get('.bubbles circle.datamaps-bubble').should('have.length', 8);
});
it('should hide bubbles when told so', () => {
verify({
...WORLD_MAP_FORM_DATA,
show_bubbles: false,
});
cy.get('.slice_container').then((containers) => {
expect(containers[0].querySelectorAll('.bubbles circle.datamaps-bubble').length).to.equal(0);
});
});
});

View File

@@ -1,15 +1,35 @@
import AreaTest from './_area';
import BigNumberTest from './_big_number';
import BigNumberTotalTest from './_big_number_total';
import BubbleTest from './_bubble';
import CompareTest from './_compare';
import DistBarTest from './_dist_bar';
import DualLineTest from './_dual_line';
import HistogramTest from './_histogram';
import LineTest from './_line';
import PieTest from './_pie';
import PivotTableTest from './_pivot_table';
import SankeyTest from './_sankey';
import SunburstTest from './_sunburst';
import TableTest from './_table';
import TreemapTest from './_treemap';
import WorldMapTest from './_world_map';
describe('All Visualizations', () => {
AreaTest();
BigNumberTest();
BigNumberTotalTest();
BubbleTest();
CompareTest();
DistBarTest();
DualLineTest();
HistogramTest();
LineTest();
PieTest();
PivotTableTest();
SankeyTest();
SunburstTest();
TableTest();
TreemapTest();
WorldMapTest();
});