iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Audit E2E tests for color schemes in Dashboard and Explore (#20807) 

* Update properties tests

* Update selectors

* Verify charts changing colors

* Test shared and label colors

* Update dashboard edit test

* Enhance viz tests

* Remove chart ids

* Update color
This commit is contained in:
Geido 2022-08-09 07:49:46 +03:00 committed by GitHub
parent 58245dd7f7
commit 03764e6ae8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 296 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
View File

@ -20,6 +20,7 @@ import { dashboardView } from 'cypress/support/directories';
* under the License.
*/
export const WORLD_HEALTH_DASHBOARD = '/superset/dashboard/world_health/';
export const USA_BIRTH_NAMES_DASHBOARD = '/superset/dashboard/births/';
export const testDashboard = '/superset/dashboard/538/';
export const TABBED_DASHBOARD = '/superset/dashboard/tabbed_dash/';

129
superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
View File

@ -20,7 +20,7 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import * as ace from 'brace';
import * as shortid from 'shortid';
import { WORLD_HEALTH_DASHBOARD } from './dashboard.helper';
import { USA_BIRTH_NAMES_DASHBOARD } from './dashboard.helper';
function selectColorScheme(color: string) {
// open color scheme dropdown
@ -48,12 +48,11 @@ function assertMetadata(text: string) {
expect(ace.edit(metadata).getValue()).to.match(regex);
});
}
function typeMetadata(text: string) {
cy.get('.ant-modal-body')
.find('#json_metadata')
.should('be.visible')
.type(text);
function clear(input: string) {
cy.get(input).type('{selectall}{backspace}');
}
function type(input: string, text: string) {
cy.get(input).type(text, { parseSpecialCharSequences: false });
}
function openAdvancedProperties() {
@ -79,8 +78,8 @@ function openDashboardEditProperties() {
describe('Dashboard edit action', () => {
beforeEach(() => {
cy.login();
cy.visit(WORLD_HEALTH_DASHBOARD);
cy.intercept(`/api/v1/dashboard/1`).as('dashboardGet');
cy.visit(USA_BIRTH_NAMES_DASHBOARD);
cy.intercept(`/api/v1/dashboard/births`).as('dashboardGet');
cy.get('.dashboard-grid', { timeout: 50000 })
.should('be.visible') // wait for 50 secs to load dashboard
.then(() => {
@ -119,40 +118,32 @@ describe('Dashboard edit action', () => {
describe('the color picker is changed', () => {
describe('the metadata has a color scheme', () => {
describe('the advanced tab is open', () => {
// TODO test passes locally but not on ci
xit('should overwrite the color scheme', () => {
it('should overwrite the color scheme', () => {
openAdvancedProperties();
cy.wait('@dashboardGet').then(() => {
selectColorScheme('d3Category20b');
assertMetadata('d3Category20b');
});
selectColorScheme('d3Category20b');
assertMetadata('d3Category20b');
});
});
describe('the advanced tab is not open', () => {
// TODO test passes locally but not on ci
xit('should overwrite the color scheme', () => {
it('should overwrite the color scheme', () => {
selectColorScheme('bnbColors');
openAdvancedProperties();
cy.wait('@dashboardGet').then(() => {
assertMetadata('bnbColors');
});
assertMetadata('bnbColors');
});
});
});
});
describe('a valid colorScheme is entered', () => {
// TODO test passes locally but not on ci
xit('should save json metadata color change to dropdown', () => {
it('should save json metadata color change to dropdown', () => {
// edit json metadata
openAdvancedProperties().then(() => {
typeMetadata(
'{selectall}{backspace}{{}"color_scheme":"d3Category20"{}}',
);
clear('#json_metadata');
type('#json_metadata', '{"color_scheme":"d3Category20"}');
});
// save edit changes
cy.get('.modal-footer')
.contains('Save')
cy.get('.ant-modal-footer')
.contains('Apply')
.click()
.then(() => {
// assert that modal edit window has closed
@ -163,7 +154,7 @@ describe('Dashboard edit action', () => {
openAdvancedProperties().then(() => {
assertMetadata('d3Category20');
});
cy.get('.color-scheme-container').should(
cy.get('.ant-select-selection-item ul').should(
'have.attr',
'data-test',
'd3Category20',
@ -172,18 +163,16 @@ describe('Dashboard edit action', () => {
});
});
describe('an invalid colorScheme is entered', () => {
// TODO test passes locally but not on ci
xit('should throw an error', () => {
it('should throw an error', () => {
// edit json metadata
openAdvancedProperties().then(() => {
typeMetadata(
'{selectall}{backspace}{{}"color_scheme":"THIS_DOES_NOT_WORK"{}}',
);
clear('#json_metadata');
type('#json_metadata', '{"color_scheme":"THIS_DOES_NOT_WORK"}');
});
// save edit changes
cy.get('.modal-footer')
.contains('Save')
cy.get('.ant-modal-footer')
.contains('Apply')
.click()
.then(() => {
// assert that modal edit window has closed
@ -201,4 +190,74 @@ describe('Dashboard edit action', () => {
});
});
});
describe('the color scheme affects the chart colors', () => {
it('should change the chart colors', () => {
openAdvancedProperties().then(() => {
clear('#json_metadata');
type(
'#json_metadata',
'{"color_scheme":"lyftColors", "label_colors": {}}',
);
});
cy.get('.ant-modal-footer')
.contains('Apply')
.click()
.then(() => {
cy.get('.ant-modal-body').should('not.exist');
// assert that the chart has changed colors
cy.get('.line .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(117, 96, 170)');
});
});
it('the label colors should take precedence over the scheme', () => {
openAdvancedProperties().then(() => {
clear('#json_metadata');
type(
'#json_metadata',
'{"color_scheme":"lyftColors","label_colors":{"Amanda":"red"}}',
);
});
cy.get('.ant-modal-footer')
.contains('Apply')
.click()
.then(() => {
cy.get('.ant-modal-body').should('not.exist');
// assert that the chart has changed colors
cy.get('.line .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(255, 0, 0)');
});
});
it('the shared label colors and label colors are applied correctly', () => {
openAdvancedProperties().then(() => {
clear('#json_metadata');
type(
'#json_metadata',
'{"color_scheme":"lyftColors","label_colors":{"Amanda":"red"}}',
);
});
cy.get('.ant-modal-footer')
.contains('Apply')
.click()
.then(() => {
cy.get('.ant-modal-body').should('not.exist');
// assert that the chart has changed colors
cy.get('.line .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(255, 0, 0)'); // label: amanda
cy.get('.line .nv-legend-symbol')
.eq(11)
.should('have.css', 'fill', 'rgb(234, 11, 140)'); // label: jennifer
cy.get('.word_cloud')
.first()
.find('svg text')
.first()
.should('have.css', 'fill', 'rgb(234, 11, 140)'); // label: jennifer
});
});
});
});

41
superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js
View File

@ -25,11 +25,18 @@ import {
} from './dashboard.helper';
function openDashboardEditProperties() {
cy.get('.header-with-actions [aria-label="Edit dashboard"]').click();
// open dashboard properties edit modal
cy.get('.header-with-actions [aria-label="Edit dashboard"]')
.should('be.visible')
.click();
cy.get(
'.header-with-actions .right-button-panel .ant-dropdown-trigger',
).trigger('click', { force: true });
cy.get('.dropdown-menu').contains('Edit properties').click();
).trigger('click', {
force: true,
});
cy.get('[data-test=header-actions-menu]')
.contains('Edit properties')
.click({ force: true });
}
describe('Dashboard save action', () => {
@ -98,8 +105,7 @@ describe('Dashboard save action', () => {
.should('not.exist');
});
// TODO: Fix broken test
xit('should save after edit', () => {
it('should save after edit', () => {
cy.get('.dashboard-grid', { timeout: 50000 }) // wait for 50 secs to load dashboard
.then(() => {
const dashboardTitle = `Test dashboard [${shortid.generate()}]`;
@ -110,14 +116,13 @@ describe('Dashboard save action', () => {
cy.get('.ant-modal-body')
.contains('Color scheme')
.parents('.ControlHeader')
.next('.Select')
.next('.ant-select')
.click()
.then($colorSelect => {
.then(() => {
// select a new color scheme
cy.wrap($colorSelect)
.find('.Select__option')
cy.get('.ant-modal-body')
.find('.ant-select-item-option-active')
.first()
.next()
.click();
});
@ -130,14 +135,13 @@ describe('Dashboard save action', () => {
});
// update title
cy.get('.ant-modal-body')
.contains('Title')
.siblings('input')
.type(`{selectall}{backspace}${dashboardTitle}`);
cy.get('[data-test="dashboard-title-input"]').type(
`{selectall}{backspace}${dashboardTitle}`,
);
// save edit changes
cy.get('.ant-modal-footer')
.contains('Save')
.contains('Apply')
.click()
.then(() => {
// assert that modal edit window has closed
@ -150,10 +154,9 @@ describe('Dashboard save action', () => {
cy.contains('saved successfully').should('be.visible');
// assert title has been updated
cy.get('.editable-title [data-test="editable-title-input"]').should(
'have.value',
dashboardTitle,
);
cy.get(
'.header-with-actions .title-panel [data-test="editable-title"]',
).should('have.text', dashboardTitle);
});
});
});

14
superset-frontend/cypress-base/cypress/integration/explore/visualizations/area.test.js
View File

@ -103,4 +103,18 @@ describe('Visualization > Area', () => {
});
cy.get('.nv-area').should('have.length', 2);
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('.area .nv-legend .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(31, 168, 201)');
});
});

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js
View File

@ -46,4 +46,15 @@ describe('Visualization > Box Plot', () => {
verify(BOX_PLOT_FORM_DATA);
cy.get('.chart-container .box_plot canvas').should('have.length', 1);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
});
});

16
superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
View File

@ -107,4 +107,20 @@ describe('Visualization > Bubble', () => {
);
});
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('[data-test=run-query-button]').click();
cy.get('.bubble .nv-legend .nv-legend-symbol').should(
'have.css',
'fill',
'rgb(31, 168, 201)',
);
});
});

14
superset-frontend/cypress-base/cypress/integration/explore/visualizations/compare.test.js
View File

@ -86,4 +86,18 @@ describe('Visualization > Compare', () => {
});
cy.get('.chart-container .nvd3 path.nv-line').should('have.length', 1);
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('.compare .nv-legend .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(31, 168, 201)');
});
});

14
superset-frontend/cypress-base/cypress/integration/explore/visualizations/dist_bar.test.js
View File

@ -77,4 +77,18 @@ describe('Visualization > Distribution bar chart', () => {
cy.visitChartByParams(formData);
cy.verifySliceSuccess({ waitAlias: '@getJson', chartSelector: 'svg' });
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('bnbColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="bnbColors"]',
).should('exist');
cy.get('.dist_bar .nv-legend .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(255, 90, 95)');
});
});

14
superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js
View File

@ -66,4 +66,18 @@ describe('Visualization > Dual Line', () => {
});
cy.get('.chart-container svg path.nv-line').should('have.length', 2);
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('.dual_line .nv-legend .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(31, 168, 201)');
});
});

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js
View File

@ -60,4 +60,15 @@ describe('Visualization > Gauge', () => {
});
cy.get('.chart-container .gauge_chart canvas').should('have.length', 1);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('bnbColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="bnbColors"]',
).should('exist');
});
});

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/graph.test.ts
View File

@ -77,4 +77,15 @@ describe('Visualization > Graph', () => {
});
cy.get('.chart-container .graph_chart canvas').should('have.length', 1);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('bnbColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="bnbColors"]',
).should('exist');
});
});

15
superset-frontend/cypress-base/cypress/integration/explore/visualizations/histogram.test.ts
View File

@ -84,4 +84,19 @@ describe('Visualization > Histogram', () => {
});
cy.get('.chart-container svg .vx-bar').should('have.length', numBins);
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('.histogram .vx-legend .vx-legend-shape div')
.first()
.should('have.css', 'background')
.and('contains', 'rgb(31, 168, 201)');
});
});

5
superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
View File

@ -75,7 +75,7 @@ describe('Visualization > Line', () => {
cy.get('.ant-alert-warning').should('not.exist');
});
it('should allow type to search color schemes', () => {
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
@ -84,6 +84,9 @@ describe('Visualization > Line', () => {
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="bnbColors"]',
).should('exist');
cy.get('.line .nv-legend .nv-legend-symbol')
.first()
.should('have.css', 'fill', 'rgb(255, 90, 95)');
});
it('should work with adhoc metric', () => {

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js
View File

@ -68,4 +68,15 @@ describe('Visualization > Pie', () => {
});
cy.get('.chart-container .pie canvas').should('have.length', 1);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
});
});

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/sankey.test.js
View File

@ -73,4 +73,15 @@ describe('Visualization > Sankey', () => {
});
cy.get('.chart-container svg g.node rect').should('have.length', 6);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('bnbColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="bnbColors"]',
).should('exist');
});
});

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/sunburst.test.js
View File

@ -80,4 +80,15 @@ describe('Visualization > Sunburst', () => {
});
cy.get('.chart-container svg g#arcs path').should('have.length', 3);
});
it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
});
});

12
superset-frontend/cypress-base/cypress/integration/explore/visualizations/treemap.test.js
View File

@ -80,4 +80,16 @@ describe('Visualization > Treemap', () => {
});
cy.get(level1).should('have.length', 8);
});
it('should allow type to search color schemes and apply the scheme', () => {
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('supersetColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item ul[data-test="supersetColors"]',
).should('exist');
cy.get('[data-test=run-query-button]').click();
cy.get('#rect-IND').should('have.css', 'fill', 'rgb(69, 78, 124)');
});
});

10
superset-frontend/cypress-base/cypress/integration/explore/visualizations/world_map.test.js
View File

@ -80,4 +80,14 @@ describe('Visualization > World Map', () => {
).to.equal(0);
});
});
it('should allow type to search color schemes', () => {
cy.get('.Control[data-test="linear_color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="linear_color_scheme"] input[type="search"]')
.focus()
.type('greens{enter}');
cy.get(
'.Control[data-test="linear_color_scheme"] .ant-select-selection-item ul[data-test="greens"]',
).should('exist');
});
});