This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 03764e6ae8 chore: Audit E2E tests for color schemes in Dashboard and
Explore (#20807)
03764e6ae8 is described below
commit 03764e6ae85380153b2c59e5e02149f9a157b13f
Author: Geido <[email protected]>
AuthorDate: Tue Aug 9 07:49:46 2022 +0300
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
---
.../integration/dashboard/dashboard.helper.ts | 1 +
.../integration/dashboard/edit_properties.test.ts | 129 +++++++++++++++------
.../cypress/integration/dashboard/save.test.js | 41 ++++---
.../explore/visualizations/area.test.js | 14 +++
.../explore/visualizations/box_plot.test.js | 11 ++
.../explore/visualizations/bubble.test.js | 16 +++
.../explore/visualizations/compare.test.js | 14 +++
.../explore/visualizations/dist_bar.test.js | 14 +++
.../explore/visualizations/dual_line.test.js | 14 +++
.../explore/visualizations/gauge.test.js | 11 ++
.../explore/visualizations/graph.test.ts | 11 ++
.../explore/visualizations/histogram.test.ts | 15 +++
.../explore/visualizations/line.test.ts | 5 +-
.../integration/explore/visualizations/pie.test.js | 11 ++
.../explore/visualizations/sankey.test.js | 11 ++
.../explore/visualizations/sunburst.test.js | 11 ++
.../explore/visualizations/treemap.test.js | 12 ++
.../explore/visualizations/world_map.test.js | 10 ++
18 files changed, 296 insertions(+), 55 deletions(-)
diff --git
a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
index 24eab4284f..498853164e 100644
---
a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
+++
b/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/';
diff --git
a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
index b3061cdb7d..f748a48ac6 100644
---
a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
+++
b/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
+ });
+ });
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js
b/superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js
index 3c815a222c..419346cf98 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/save.test.js
+++ b/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);
});
});
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/area.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/area.test.js
index 59b8beabe3..eea3520398 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/area.test.js
+++
b/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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js
index 6a4afba97a..43f644b92d 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/box_plot.test.js
+++
b/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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
index 9c824e5d9f..28243f6862 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
+++
b/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)',
+ );
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/compare.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/compare.test.js
index 35f56754a8..d4334bbe94 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/compare.test.js
+++
b/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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dist_bar.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dist_bar.test.js
index 6bd7c82f43..ecdab93ccf 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dist_bar.test.js
+++
b/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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js
index 3a3eb334fb..e570836d39 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/dual_line.test.js
@@ -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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js
index c4735b7b8a..0bb5cb48d5 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/gauge.test.js
@@ -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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/graph.test.ts
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/graph.test.ts
index c01d9c5099..b54ff10e76 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/graph.test.ts
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/graph.test.ts
@@ -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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/histogram.test.ts
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/histogram.test.ts
index ff6355319a..ef1a2df2d5 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/histogram.test.ts
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/histogram.test.ts
@@ -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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
index 55ad6015c0..b20f69a214 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
@@ -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', () => {
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js
index 3b28128e68..0590d64fa9 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pie.test.js
@@ -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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sankey.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sankey.test.js
index 747e8a06f2..b9f6ced3f2 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sankey.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sankey.test.js
@@ -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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sunburst.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sunburst.test.js
index e7ccacac03..5118fdfe23 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sunburst.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/sunburst.test.js
@@ -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');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/treemap.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/treemap.test.js
index 1be85e9e4c..435e363cb5 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/treemap.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/treemap.test.js
@@ -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)');
+ });
});
diff --git
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/world_map.test.js
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/world_map.test.js
index 0fab65519d..8b733ee3ff 100644
---
a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/world_map.test.js
+++
b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/world_map.test.js
@@ -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');
+ });
});
