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