chore: Audit E2E tests for color schemes in Dashboard and Explore

superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts

@@ -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/';
 

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

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

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

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

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

@@ -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)');
+ });
 });

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

@@ -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');
+ });
 });

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

@@ -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)',
+ );
+ });
 });

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

@@ -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)');
+ });
 });

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

@@ -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)');
+ });
 });