/** * 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 { 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 TestDashboardsMenuItems = ({ chartId, dashboards, searchTerm, }: { chartId?: number; dashboards: { id: number; dashboard_title: string }[]; searchTerm?: string; }) => { const menuItems = useDashboardsMenuItems({ chartId, dashboards, searchTerm, }) as MenuItemType[]; return (
{menuItems.map(item => (
{typeof item.label === 'string' ? item!.label : 'Complex Label'} {item!.disabled && disabled}
))}
); }; const createDashboards = (numberOfItems: number) => { const dashboards = []; for (let i = 1; i <= numberOfItems; i += 1) { dashboards.push({ id: i, dashboard_title: `Dashboard ${i}` }); } return dashboards; }; describe('DashboardsSubMenu', () => { test('exports SEARCH_THRESHOLD constant', () => { expect(SEARCH_THRESHOLD).toBe(10); }); test('renders menu items for dashboards', () => { const dashboards = createDashboards(3); render( , { 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( , { 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( , { 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( , { 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(, { 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( , { 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( , { 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( , { 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(); }); });