You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/09/27 14:16:23 UTC
[superset] 02/02: Test color scheme across nested and main tabs
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/color-consistency-e2e
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 9bc7d4fc05d051cd9e2ef65f87a53f0e0746c3c5
Author: geido <di...@gmail.com>
AuthorDate: Tue Sep 27 17:16:04 2022 +0300
Test color scheme across nested and main tabs
---
.../cypress/integration/dashboard/editmode.test.ts | 312 ++++++++++++++++++---
.../cypress-base/cypress/support/index.d.ts | 6 +
.../cypress-base/cypress/support/index.ts | 29 ++
superset/examples/tabbed_dashboard.py | 34 ++-
4 files changed, 343 insertions(+), 38 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
index c7b5f31288..13c6b53947 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls';
-import { drag, resize } from 'cypress/utils';
+import { SAMPLE_DASHBOARD_1, TABBED_DASHBOARD } from 'cypress/utils/urls';
+import { drag, resize, waitForChartLoad } from 'cypress/utils';
import * as ace from 'brace';
import { interceptGet, interceptUpdate } from './utils';
import { interceptFiltering as interceptCharts } from '../explore/utils';
@@ -60,17 +60,46 @@ function discardChanges() {
cy.getBySel('undo-action').click({ force: true });
}
-function visitEdit() {
+function visitEdit(sampleDashboard = SAMPLE_DASHBOARD_1) {
interceptCharts();
interceptGet();
- cy.visit(SAMPLE_DASHBOARD_1);
+ cy.visit(sampleDashboard);
cy.wait('@get');
editDashboard();
cy.wait('@filtering');
cy.wait(500);
}
+function resetTabbedDashboard(go = false) {
+ cy.getDashboard('tabbed_dash').then((r: Record<string, any>) => {
+ const jsonMetadata = r?.json_metadata || '{}';
+ const metadata = JSON.parse(jsonMetadata);
+ const resetMetadata = JSON.stringify({
+ ...metadata,
+ color_scheme: '',
+ label_colors: {},
+ });
+ cy.updateDashboard(r.id, {
+ certification_details: r.certification_details,
+ certified_by: r.certified_by,
+ css: r.css,
+ dashboard_title: r.dashboard_title,
+ json_metadata: resetMetadata,
+ owners: r.owners,
+ slug: r.slug,
+ }).then(() => {
+ if (go) {
+ visitEdit(TABBED_DASHBOARD);
+ }
+ });
+ });
+}
+
+function visitResetTabbedDashboard() {
+ resetTabbedDashboard(true);
+}
+
function selectColorScheme(color: string) {
cy.get(
'[data-test="dashboard-edit-properties-form"] [aria-label="Select color scheme"]',
@@ -104,6 +133,7 @@ function assertMetadata(text: string) {
}
function clearMetadata() {
cy.get('#json_metadata').then($jsonmetadata => {
+ cy.wait(500);
cy.wrap($jsonmetadata).type('{selectall} {backspace}');
});
}
@@ -119,6 +149,247 @@ describe('Dashboard edit', () => {
cy.preserveLogin();
});
+ describe('Color consistency', () => {
+ beforeEach(() => {
+ visitResetTabbedDashboard();
+ });
+
+ after(() => {
+ resetTabbedDashboard();
+ });
+
+ it('should apply the color scheme across main tabs', () => {
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // go to second tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Trends', viz: 'line' });
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('should apply the color scheme across main tabs for rendered charts', () => {
+ waitForChartLoad({ name: 'Treemap', viz: 'treemap' });
+ openProperties();
+ selectColorScheme('bnbColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(255, 90, 95)',
+ );
+
+ // go to second tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Trends', viz: 'line' });
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 90, 95)');
+
+ // go back to first tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ // change scheme now that charts are rendered across the main tabs
+ editDashboard();
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // go to second tab again
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('should apply the color scheme in nested tabs', () => {
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // open nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+
+ // open another nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(2)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Growth Rate', viz: 'line' });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('label colors should take the precedence in nested tabs', () => {
+ openProperties();
+ openAdvancedProperties();
+ clearMetadata();
+ writeMetadata(
+ '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red","Bangladesh":"red"}}',
+ );
+ applyChanges();
+ saveChanges();
+
+ // open nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+
+ // open another nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(2)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Growth Rate', viz: 'line' });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+ });
+
+ it('should apply a valid color scheme for rendered charts in nested tabs', () => {
+ // open the tab first time and let chart load
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+
+ // go to previous tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ // re-open the tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('label colors should take the precedence for rendered charts in nested tabs', () => {
+ // open the tab first time and let chart load
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+
+ // go to previous tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ openProperties();
+ openAdvancedProperties();
+ clearMetadata();
+ writeMetadata(
+ '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}',
+ );
+ applyChanges();
+ saveChanges();
+
+ // re-open the tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+ });
+ });
+
describe('Edit properties', () => {
before(() => {
cy.createSampleDashboards();
@@ -258,39 +529,6 @@ describe('Dashboard edit', () => {
});
});
- describe('Color schemes', () => {
- beforeEach(() => {
- cy.createSampleDashboards();
- visitEdit();
- });
-
- it('should apply a valid color scheme', () => {
- dragComponent('Top 10 California Names Timeseries');
- openProperties();
- selectColorScheme('lyftColors');
- applyChanges();
- saveChanges();
- cy.get('.line .nv-legend-symbol')
- .first()
- .should('have.css', 'fill', 'rgb(234, 11, 140)');
- });
-
- it('label colors should take the precedence', () => {
- dragComponent('Top 10 California Names Timeseries');
- openProperties();
- openAdvancedProperties();
- clearMetadata();
- writeMetadata(
- '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}',
- );
- applyChanges();
- saveChanges();
- cy.get('.line .nv-legend-symbol')
- .first()
- .should('have.css', 'fill', 'rgb(255, 0, 0)');
- });
- });
-
describe('Save', () => {
beforeEach(() => {
cy.createSampleDashboards();
diff --git a/superset-frontend/cypress-base/cypress/support/index.d.ts b/superset-frontend/cypress-base/cypress/support/index.d.ts
index c60580247e..603c490ebf 100644
--- a/superset-frontend/cypress-base/cypress/support/index.d.ts
+++ b/superset-frontend/cypress-base/cypress/support/index.d.ts
@@ -65,6 +65,7 @@ declare namespace Cypress {
* Get
*/
getDashboards(): cy;
+ getDashboard(dashboardId: string | number): Record<string, any>;
getCharts(): cy;
/**
@@ -80,6 +81,11 @@ declare namespace Cypress {
deleteDashboardByName(dashboardName: string, failOnStatusCode: boolean): cy;
deleteChartByName(name: string, failOnStatusCode: boolean): cy;
deleteChart(id: number, failOnStatusCode: boolean): cy;
+
+ /**
+ * Update
+ */
+ updateDashboard(dashboardId: number, body: Record<string, any>): cy;
}
}
diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts
index 80a51fc409..aa2b168e2d 100644
--- a/superset-frontend/cypress-base/cypress/support/index.ts
+++ b/superset-frontend/cypress-base/cypress/support/index.ts
@@ -332,6 +332,35 @@ Cypress.Commands.add('getDashboards', () =>
.then(resp => resp.body.result),
);
+Cypress.Commands.add('getDashboard', (dashboardId: string | number) =>
+ cy
+ .request({
+ method: 'GET',
+ url: `api/v1/dashboard/${dashboardId}`,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
+Cypress.Commands.add(
+ 'updateDashboard',
+ (dashboardId: number, body: Record<string, any>) =>
+ cy
+ .request({
+ method: 'PUT',
+ url: `api/v1/dashboard/${dashboardId}`,
+ body,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
Cypress.Commands.add('deleteChart', (id: number, failOnStatusCode = false) =>
cy
.request({
diff --git a/superset/examples/tabbed_dashboard.py b/superset/examples/tabbed_dashboard.py
index 7a167bc357..58c0ba3e4c 100644
--- a/superset/examples/tabbed_dashboard.py
+++ b/superset/examples/tabbed_dashboard.py
@@ -137,6 +137,25 @@ def load_tabbed_dashboard(_: bool = False) -> None:
],
"type": "CHART"
},
+ "CHART-dxV7Il666H": {
+ "children": [],
+ "id": "CHART-dxV7Il666H",
+ "meta": {
+ "chartId": 5539,
+ "height": 50,
+ "sliceName": "Trends",
+ "width": 4
+ },
+ "parents": [
+ "ROOT_ID",
+ "TABS-lV0r00f4H1",
+ "TAB-gcQJxApOZS",
+ "TABS-afnrUvdxYF",
+ "TAB-jNNd4WWar1",
+ "ROW-7ygtD666Q"
+ ],
+ "type": "CHART"
+ },
"CHART-jJ5Yj1Ptaz": {
"children": [],
"id": "CHART-jJ5Yj1Ptaz",
@@ -238,6 +257,19 @@ def load_tabbed_dashboard(_: bool = False) -> None:
],
"type": "ROW"
},
+ "ROW-7ygtD666Q": {
+ "children": ["CHART-dxV7Il666H"],
+ "id": "ROW-7ygtD666Q",
+ "meta": { "background": "BACKGROUND_TRANSPARENT" },
+ "parents": [
+ "ROOT_ID",
+ "TABS-lV0r00f4H1",
+ "TAB-gcQJxApOZS",
+ "TABS-afnrUvdxYF",
+ "TAB-jNNd4WWar1"
+ ],
+ "type": "ROW"
+ },
"ROW-DnYkJgKQE": {
"children": ["CHART-06Kg-rUggO", "CHART-E4rQMdzY9-"],
"id": "ROW-DnYkJgKQE",
@@ -386,7 +418,7 @@ def load_tabbed_dashboard(_: bool = False) -> None:
"type": "TAB"
},
"TAB-jNNd4WWar1": {
- "children": ["ROW-7ygtDczaQ"],
+ "children": ["ROW-7ygtDczaQ", "ROW-7ygtD666Q"],
"id": "TAB-jNNd4WWar1",
"meta": { "text": "New Tab" },
"parents": [