chore: Refactor Menu.Item and cleanup console errors (#34536)

superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.test.tsx

@@ -16,69 +16,180 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  render,
-  screen,
-  userEvent,
-  waitFor,
-} from 'spec/helpers/testing-library';
-import { Menu } from '@superset-ui/core/components/Menu';
-import DashboardItems from './DashboardsSubMenu';
+import { render, screen } from 'spec/helpers/testing-library';
+import type { MenuItemType } from '@superset-ui/core/components';
+import { useDashboardsMenuItems } from './DashboardsSubMenu';
+import { SEARCH_THRESHOLD } from './index';
 
-const asyncRender = (numberOfItems: number) => {
+const TestDashboardsMenuItems = ({
+  chartId,
+  dashboards,
+  searchTerm,
+}: {
+  chartId?: number;
+  dashboards: { id: number; dashboard_title: string }[];
+  searchTerm?: string;
+}) => {
+  const menuItems = useDashboardsMenuItems({
+    chartId,
+    dashboards,
+    searchTerm,
+  }) as MenuItemType[];
+  return (
+    <div data-test="menu-items">
+      {menuItems.map(item => (
+        <div key={item.key} data-test={`menu-item-${item!.key}`}>
+          {typeof item.label === 'string' ? item!.label : 'Complex Label'}
+          {item!.disabled && <span data-test="disabled">disabled</span>}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const createDashboards = (numberOfItems: number) => {
   const dashboards = [];
   for (let i = 1; i <= numberOfItems; i += 1) {
     dashboards.push({ id: i, dashboard_title: `Dashboard ${i}` });
   }
-  render(
-    <Menu openKeys={['menu']}>
-      <Menu.SubMenu title="On dashboards" key="menu">
-        <DashboardItems key="menu" dashboards={dashboards} />
-      </Menu.SubMenu>
-    </Menu>,
-    {
-      useRouter: true,
-    },
-  );
+  return dashboards;
 };
 
-test('renders a submenu', async () => {
-  asyncRender(3);
-  await waitFor(() => {
-    expect(screen.getByText('Dashboard 1')).toBeInTheDocument();
-    expect(screen.getByText('Dashboard 2')).toBeInTheDocument();
-    expect(screen.getByText('Dashboard 3')).toBeInTheDocument();
+describe('DashboardsSubMenu', () => {
+  test('exports SEARCH_THRESHOLD constant', () => {
+    expect(SEARCH_THRESHOLD).toBe(10);
+  });
+
+  test('renders menu items for dashboards', () => {
+    const dashboards = createDashboards(3);
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm=""
+      />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-1')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-2')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-3')).toBeInTheDocument();
+  });
+
+  test('filters dashboards based on search term', () => {
+    const dashboards = createDashboards(20);
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm="2"
+      />,
+      { useRouter: true },
+    );
+
+    // Should show Dashboard 2, Dashboard 12, and Dashboard 20
+    expect(screen.getByTestId('menu-item-2')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-12')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-20')).toBeInTheDocument();
+
+    // Should not show Dashboard 1
+    expect(screen.queryByTestId('menu-item-1')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('menu-item-3')).not.toBeInTheDocument();
+  });
+
+  test('returns "No results found" when search has no matches', () => {
+    const dashboards = createDashboards(20);
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm="unknown"
+      />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-no-results')).toBeInTheDocument();
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+    expect(screen.getByTestId('disabled')).toBeInTheDocument();
+  });
+
+  test('returns "None" when no dashboards provided', () => {
+    render(
+      <TestDashboardsMenuItems chartId={123} dashboards={[]} searchTerm="" />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-no-dashboards')).toBeInTheDocument();
+    expect(screen.getByText('None')).toBeInTheDocument();
+    expect(screen.getByTestId('disabled')).toBeInTheDocument();
+  });
+
+  test('handles missing chart ID gracefully', () => {
+    const dashboards = createDashboards(1);
+    render(<TestDashboardsMenuItems dashboards={dashboards} searchTerm="" />, {
+      useRouter: true,
+    });
+
+    expect(screen.getByTestId('menu-item-1')).toBeInTheDocument();
+  });
+
+  test('case-insensitive search filtering', () => {
+    const dashboards = [
+      { id: 1, dashboard_title: 'Sales Dashboard' },
+      { id: 2, dashboard_title: 'Marketing Dashboard' },
+      { id: 3, dashboard_title: 'Analytics Dashboard' },
+    ];
+
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm="SALES"
+      />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-1')).toBeInTheDocument();
+    expect(screen.queryByTestId('menu-item-2')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('menu-item-3')).not.toBeInTheDocument();
+  });
+
+  test('empty search term shows all dashboards', () => {
+    const dashboards = createDashboards(5);
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm=""
+      />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-1')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-2')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-3')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-4')).toBeInTheDocument();
+    expect(screen.getByTestId('menu-item-5')).toBeInTheDocument();
+  });
+
+  test('partial string search works correctly', () => {
+    const dashboards = [
+      { id: 1, dashboard_title: 'Revenue Report' },
+      { id: 2, dashboard_title: 'User Engagement' },
+      { id: 3, dashboard_title: 'Product Performance' },
+    ];
+
+    render(
+      <TestDashboardsMenuItems
+        chartId={123}
+        dashboards={dashboards}
+        searchTerm="port"
+      />,
+      { useRouter: true },
+    );
+
+    expect(screen.getByTestId('menu-item-1')).toBeInTheDocument(); // Revenue Report
+    expect(screen.queryByTestId('menu-item-2')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('menu-item-3')).not.toBeInTheDocument();
   });
 });
-
-test('renders a submenu with search', async () => {
-  asyncRender(20);
-  expect(await screen.findByPlaceholderText('Search')).toBeInTheDocument();
-});
-
-test('displays a searched value', async () => {
-  asyncRender(20);
-  userEvent.type(screen.getByPlaceholderText('Search'), '2');
-  expect(await screen.findByText('Dashboard 2')).toBeInTheDocument();
-  expect(await screen.findByText('Dashboard 20')).toBeInTheDocument();
-});
-
-test('renders a "No results found" message when searching', async () => {
-  asyncRender(20);
-  userEvent.type(screen.getByPlaceholderText('Search'), 'unknown');
-  expect(await screen.findByText('No results found')).toBeInTheDocument();
-});
-
-test('renders a submenu with no dashboards', async () => {
-  asyncRender(0);
-  expect(await screen.findByText('None')).toBeInTheDocument();
-});
-
-test('shows link icon when hovering', async () => {
-  asyncRender(3);
-  expect(screen.queryByRole('img', { name: 'full' })).not.toBeInTheDocument();
-  userEvent.hover(await screen.findByText('Dashboard 1'));
-  expect(
-    (await screen.findAllByRole('img', { name: 'full' }))[0],
-  ).toBeInTheDocument();
-});