restoring and fixing tests

superset-frontend/src/dashboard/components/gridComponents/Markdown.test.jsx

@@ -16,21 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { Provider } from 'react-redux';
-import {
-  act,
-  render,
-  screen,
-  fireEvent,
-  userEvent,
-} from 'spec/helpers/testing-library';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { act, render, screen, fireEvent } from 'spec/helpers/testing-library';
 import MarkdownConnected from 'src/dashboard/components/gridComponents/Markdown';
 import { mockStore } from 'spec/fixtures/mockStore';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';
-import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 
 describe('Markdown', () => {
   const props = {
@@ -345,7 +335,7 @@ describe('Markdown', () => {
 
     // Check ROW_TYPE width
     const container = screen.getByTestId('dashboard-component-chart-holder');
-    const parentElement = container.parentElement;
+    const { parentElement } = container;
     expect(parentElement).toHaveStyle('width: 248px');
 
     // Check non-ROW_TYPE width

superset-frontend/src/dashboard/components/gridComponents/Tab.test.jsx

@@ -17,25 +17,17 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, fireEvent } from 'spec/helpers/testing-library';
 
 import { Provider } from 'react-redux';
-import sinon from 'sinon';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
-import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
-import EditableTitle from 'src/components/EditableTitle';
-import Tab, {
-  RENDER_TAB,
-  RENDER_TAB_CONTENT,
-} from 'src/dashboard/components/gridComponents/Tab';
+import Tab, { RENDER_TAB } from 'src/dashboard/components/gridComponents/Tab';
 import { dashboardLayoutWithTabs } from 'spec/fixtures/mockDashboardLayout';
 import { getMockStore } from 'spec/fixtures/mockStore';
-import { initialState } from 'src/SqlLab/fixtures';
 
 // TODO: rewrite to RTL
-describe.skip('Tabs', () => {
+describe('Tabs', () => {
   const props = {
     id: 'TAB_ID',
     parentId: 'TABS_ID',
@@ -46,6 +38,7 @@ describe.skip('Tabs', () => {
     editMode: false,
     renderType: RENDER_TAB,
     filters: {},
+    dashboardId: 123,
     setDirectPathToChild: jest.fn(),
     onDropOnTab() {},
     onDeleteTab() {},
@@ -59,57 +52,88 @@ describe.skip('Tabs', () => {
     onChangeTab() {},
     deleteComponent() {},
     updateComponents() {},
+    dropToChild: false,
+    maxChildrenHeight: 100,
+    shouldDropToChild: () => false, // Add this prop
   };
-  function setup(overrideProps) {
-    // We have to wrap provide DragDropContext for the underlying DragDroppable
-    // otherwise we cannot assert on DragDroppable children
-    const mockStore = getMockStore({
-      ...initialState,
-      dashboardLayout: dashboardLayoutWithTabs,
-      dashboardFilters: {},
-    });
-    const wrapper = render(
-      <Provider store={mockStore}>
+
+  function setup(overrideProps = {}) {
+    return render(
+      <Provider
+        store={getMockStore({
+          dashboardLayout: dashboardLayoutWithTabs,
+        })}
+      >
         <DndProvider backend={HTML5Backend}>
           <Tab {...props} {...overrideProps} />
         </DndProvider>
       </Provider>,
     );
-    return wrapper;
   }
+
   describe('renderType=RENDER_TAB', () => {
     it('should render a DragDroppable', () => {
-      const wrapper = setup();
-      expect(screen.getByTestId(DragDroppable)).toExist();
+      setup();
+      expect(screen.getByTestId('dragdroppable-object')).toBeInTheDocument();
     });
+
     it('should render an EditableTitle with meta.text', () => {
-      const wrapper = setup();
-      const title = screen.getByTestId(EditableTitle);
-      expect(title).toHaveLength(1);
-      expect(screen.getByTestId('.editable-title')).toHaveText(
-        props.component.meta.defaultText,
+      setup();
+      const titleElement = screen.getByTestId('editable-title');
+      expect(titleElement).toBeInTheDocument();
+      expect(titleElement).toHaveTextContent(
+        props.component.meta.defaultText || '',
       );
     });
-    it('should call updateComponents when EditableTitle changes', () => {
-      const updateComponents = sinon.spy();
-      const wrapper = setup({
+
+    it('should call updateComponents when EditableTitle changes', async () => {
+      const updateComponents = jest.fn();
+      setup({
         editMode: true,
         updateComponents,
+        component: {
+          ...dashboardLayoutWithTabs.present.TAB_ID,
+          meta: {
+            text: 'Original Title',
+            defaultText: 'Original Title', // Add defaultText to match component
+          },
+        },
+        isFocused: true,
+      });
+
+      const titleElement = screen.getByTestId('editable-title');
+      fireEvent.click(titleElement);
+
+      const titleInput = await screen.findByTestId('editable-title-input');
+      fireEvent.change(titleInput, { target: { value: 'New title' } });
+      fireEvent.blur(titleInput);
+
+      expect(updateComponents).toHaveBeenCalledWith({
+        TAB_ID: {
+          ...dashboardLayoutWithTabs.present.TAB_ID,
+          meta: {
+            ...dashboardLayoutWithTabs.present.TAB_ID.meta,
+            text: 'New title',
+            defaultText: 'Original Title', // Keep the original defaultText
+          },
+        },
       });
-      screen.getByTestId(EditableTitle).prop('onSaveTitle')('New title');
-      expect(updateComponents.callCount).toBe(1);
-      expect(updateComponents.getCall(0).args[0].TAB_ID.meta.text).toBe(
-        'New title',
-      );
     });
   });
+
   describe('renderType=RENDER_TAB_CONTENT', () => {
-    it('should render a DashboardComponent', () => {
-      const wrapper = setup({
-        renderType: RENDER_TAB_CONTENT,
+    it('should render DashboardComponents', () => {
+      setup({
+        renderType: 'RENDER_TAB_CONTENT',
+        component: {
+          ...dashboardLayoutWithTabs.present.TAB_ID,
+          children: ['ROW_ID'],
+        },
       });
-      // We expect 2 because this Tab has a Row child and the row has a Chart
-      expect(screen.getByTestId(DashboardComponent)).toHaveLength(2);
+
+      expect(
+        screen.getByTestId('dashboard-component-chart-holder'),
+      ).toBeInTheDocument();
     });
   });
 });

superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.test.jsx

@@ -21,13 +21,8 @@ import { render, screen } from 'spec/helpers/testing-library';
 
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable';
 import DraggableNewComponent from 'src/dashboard/components/gridComponents/new/DraggableNewComponent';
-import { NEW_COMPONENTS_SOURCE_ID } from 'src/dashboard/util/constants';
-import {
-  NEW_COMPONENT_SOURCE_TYPE,
-  CHART_TYPE,
-} from 'src/dashboard/util/componentTypes';
+import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
 
 // TODO: rewrite to rtl
 describe('DraggableNewComponent', () => {