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 <[email protected]> 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": [
