From b0fa2f012f6d2eef09d138ced9119bea2606341c Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Wed, 8 Jun 2022 16:32:19 -0600 Subject: [PATCH 1/3] Reorder Dashboard Edit tabs and rename 'Components' tab to 'Layout Elements'. --- .../components/BuilderComponentPane.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx index 9d2c2fba5ad11..cb90fda69332c 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx @@ -101,7 +101,18 @@ const BuilderComponentPane: React.FC = ({ className="tabs-components" data-test="dashboard-builder-component-pane-tabs-navigation" > - + + + + @@ -117,17 +128,6 @@ const BuilderComponentPane: React.FC = ({ /> ))} - - - ); From 73cd94036d4a2d85e32b5a2a3758ba22b1e0294c Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Wed, 8 Jun 2022 17:34:21 -0600 Subject: [PATCH 2/3] Add tests for BuilderComponentPane. --- .../BuilderComponentPane.test.tsx | 39 +++++++++++++++++++ .../index.tsx} | 18 ++++----- 2 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx rename superset-frontend/src/dashboard/components/{BuilderComponentPane.tsx => BuilderComponentPane/index.tsx} (88%) diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx new file mode 100644 index 0000000000000..156e762d0d8fd --- /dev/null +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx @@ -0,0 +1,39 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import BuilderComponentPane from '.'; + +jest.mock('src/dashboard/containers/SliceAdder'); + +describe('BuilderComponentPane', () => { + const props = { isStandalone: false, topOffset: 115 }; + render(); + + test('BuilderComponentPane has correct tabs in correct order', () => { + const tabs = screen.getAllByRole('tab'); + expect(tabs).toHaveLength(2); + expect(tabs[0]).toHaveTextContent('Charts'); + expect(tabs[1]).toHaveTextContent('Layout Elements'); + expect(screen.getByRole('tab', { selected: true })).toHaveTextContent( + 'Charts', + ); + }); +}); diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx similarity index 88% rename from superset-frontend/src/dashboard/components/BuilderComponentPane.tsx rename to superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx index cb90fda69332c..bf384759826c2 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx @@ -24,15 +24,15 @@ import { ParentSize } from '@vx/responsive'; import { t, styled } from '@superset-ui/core'; -import NewColumn from './gridComponents/new/NewColumn'; -import NewDivider from './gridComponents/new/NewDivider'; -import NewHeader from './gridComponents/new/NewHeader'; -import NewRow from './gridComponents/new/NewRow'; -import NewTabs from './gridComponents/new/NewTabs'; -import NewMarkdown from './gridComponents/new/NewMarkdown'; -import SliceAdder from '../containers/SliceAdder'; -import dashboardComponents from '../../visualizations/presets/dashboardComponents'; -import NewDynamicComponent from './gridComponents/new/NewDynamicComponent'; +import SliceAdder from 'src/dashboard/containers/SliceAdder'; +import dashboardComponents from 'src/visualizations/presets/dashboardComponents'; +import NewColumn from '../gridComponents/new/NewColumn'; +import NewDivider from '../gridComponents/new/NewDivider'; +import NewHeader from '../gridComponents/new/NewHeader'; +import NewRow from '../gridComponents/new/NewRow'; +import NewTabs from '../gridComponents/new/NewTabs'; +import NewMarkdown from '../gridComponents/new/NewMarkdown'; +import NewDynamicComponent from '../gridComponents/new/NewDynamicComponent'; export interface BCPProps { isStandalone: boolean; From b1cb4118a9f17b3be732925da28f7209800f6c10 Mon Sep 17 00:00:00 2001 From: Cody Leff Date: Thu, 9 Jun 2022 16:19:40 -0600 Subject: [PATCH 3/3] Fix Cypress tests, capitalization, test nesting. --- .../integration/dashboard/edit_mode.test.js | 5 ----- .../integration/dashboard/markdown.test.ts | 5 +++++ .../BuilderComponentPane.test.tsx | 22 ++++++++----------- .../components/BuilderComponentPane/index.tsx | 2 +- 4 files changed, 15 insertions(+), 19 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js index 7a3b82705cebd..10b8a4a40de1f 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js @@ -45,11 +45,6 @@ describe('Dashboard edit mode', () => { .should('not.exist'); }); - cy.get('[data-test="dashboard-builder-component-pane-tabs-navigation"]') - .find('.ant-tabs-tab') - .last() - .click(); - // find box plot is available from list cy.get('[data-test="dashboard-charts-filter-search-input"]').type( 'Box plot', diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts index 2964241b184a2..a27382933b532 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts @@ -29,6 +29,11 @@ describe('Dashboard edit markdown', () => { .find('[aria-label="Edit dashboard"]') .click(); + cy.get('[data-test="dashboard-builder-component-pane-tabs-navigation"]') + .find('.ant-tabs-tab') + .last() + .click(); + // lazy load - need to open dropdown for the scripts to load cy.get('.header-with-actions').find('[aria-label="more-horiz"]').click(); cy.get('[data-test="grid-row-background--transparent"]') diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx index 156e762d0d8fd..a5ff5b1314f3d 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx @@ -23,17 +23,13 @@ import BuilderComponentPane from '.'; jest.mock('src/dashboard/containers/SliceAdder'); -describe('BuilderComponentPane', () => { - const props = { isStandalone: false, topOffset: 115 }; - render(); - - test('BuilderComponentPane has correct tabs in correct order', () => { - const tabs = screen.getAllByRole('tab'); - expect(tabs).toHaveLength(2); - expect(tabs[0]).toHaveTextContent('Charts'); - expect(tabs[1]).toHaveTextContent('Layout Elements'); - expect(screen.getByRole('tab', { selected: true })).toHaveTextContent( - 'Charts', - ); - }); +test('BuilderComponentPane has correct tabs in correct order', () => { + render(); + const tabs = screen.getAllByRole('tab'); + expect(tabs).toHaveLength(2); + expect(tabs[0]).toHaveTextContent('Charts'); + expect(tabs[1]).toHaveTextContent('Layout elements'); + expect(screen.getByRole('tab', { selected: true })).toHaveTextContent( + 'Charts', + ); }); diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx index bf384759826c2..4e47e161e4c19 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx @@ -112,7 +112,7 @@ const BuilderComponentPane: React.FC = ({ } /> - +