bDS/tests/renderer/components/MenuEditorView.test.tsx

import React from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';

import { MenuEditorView } from '../../../src/renderer/components/MenuEditorView/MenuEditorView';

describe('MenuEditorView entry editor', () => {
  beforeEach(() => {
    vi.clearAllMocks();

    (window as any).electronAPI = {
      ...(window as any).electronAPI,
      menu: {
        get: vi.fn().mockResolvedValue({
          items: [
            {
              id: 'root-page',
              title: 'Home',
              kind: 'page',
              children: [],
            },
          ],
        }),
        save: vi.fn().mockResolvedValue({ items: [] }),
      },
      posts: {
        ...(window as any).electronAPI?.posts,
        filter: vi.fn().mockResolvedValue([
          {
            id: 'page-about',
            projectId: 'project-1',
            title: 'About',
            slug: 'about',
            content: '',
            status: 'published',
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            tags: [],
            categories: ['page'],
          },
        ]),
      },
    };
  });

  it('uses the same selector control pattern as tag input for page selection', async () => {
    const { container } = render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    expect(input.closest('.tag-input-wrapper')).not.toBeNull();
    expect(input.closest('.menu-editor-row')).not.toBeNull();
    expect(container.querySelector('.menu-editor-inline-search')).toBeNull();
    expect(container.querySelector('.menu-editor-picker-list')).toBeNull();
    expect(container.querySelector('.menu-editor-picker-item')).toBeNull();

    fireEvent.input(input, { target: { value: 'ab' } });
    const suggestion = await screen.findByRole('button', { name: /^about$/i });
    expect(suggestion.className).toContain('tag-suggestion');

    const wrapper = input.closest('.tag-input-wrapper');
    expect(wrapper).not.toBeNull();
    expect(wrapper?.className).toContain('page-input-wrapper-inline');
  });

  it('focuses the new in-row page input immediately after creating an entry', async () => {
    render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    expect(document.activeElement).toBe(input);
  });

  it('sets the current row as submenu from typed input instead of creating another entry', async () => {
    render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    fireEvent.input(input, { target: { value: 'Products' } });

    const createSubmenuOption = await screen.findByRole('button', { name: /add submenu/i });
    fireEvent.click(createSubmenuOption);

    expect(screen.queryByPlaceholderText(/type a page title or submenu label/i)).not.toBeInTheDocument();
    expect(screen.getByText('Products')).toBeInTheDocument();
  });

  it('sets the current row to selected page from the suggestion list', async () => {
    render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    fireEvent.input(input, { target: { value: 'about' } });

    const pageSuggestion = await screen.findByRole('button', { name: /^about$/i });
    fireEvent.click(pageSuggestion);

    expect(screen.queryByPlaceholderText(/type a page title or submenu label/i)).not.toBeInTheDocument();
    expect(screen.getByText('About')).toBeInTheDocument();
  });

  it('keeps focus while typing multiple characters', async () => {
    const { container } = render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    fireEvent.input(input, { target: { value: 'a' } });
    fireEvent.input(input, { target: { value: 'ab' } });
    fireEvent.input(input, { target: { value: 'abc' } });

    expect((input as HTMLInputElement).value).toBe('abc');
    expect(container.querySelector('.tag-input-field')).toBe(input);
  });

  it('caps matching page suggestions to the same limit as tag input', async () => {
    const pagePosts = Array.from({ length: 12 }).map((_, index) => ({
      id: `page-${index + 1}`,
      projectId: 'project-1',
      title: `Page ${index + 1}`,
      slug: `page-${index + 1}`,
      content: '',
      status: 'published',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      tags: [],
      categories: ['page'],
    }));

    (window as any).electronAPI.posts.filter = vi.fn().mockResolvedValue(pagePosts);

    render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    fireEvent.input(input, { target: { value: 'page' } });

    const options = await screen.findAllByRole('button', { name: /page\s+\d+/i });
    expect(options).toHaveLength(8);
  });

  it('shows standard outliner control buttons in the toolbar', async () => {
    render(<MenuEditorView />);

    await screen.findByRole('button', { name: /add entry/i });

    expect(screen.getByRole('button', { name: /^move up$/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /^move down$/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /^indent$/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /^unindent$/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /^delete$/i })).toBeInTheDocument();
  });

  it('marks outliner rows as drag handles so drag-and-drop can start from rows', async () => {
    const { container } = render(<MenuEditorView />);

    await screen.findByRole('button', { name: /add entry/i });

    const row = container.querySelector('.menu-editor-row');
    expect(row).not.toBeNull();
    expect(row).toHaveAttribute('data-drag-handle', 'true');
  });

  it('finalizes entry as page on a single-click suggestion selection', async () => {
    render(<MenuEditorView />);

    const addButton = await screen.findByRole('button', { name: /add entry/i });
    fireEvent.click(addButton);

    const input = await screen.findByPlaceholderText(/type a page title or submenu label/i);
    fireEvent.input(input, { target: { value: 'about' } });

    const pageOption = await screen.findByRole('button', { name: /about/i });
    fireEvent.click(pageOption);

    expect(screen.queryByPlaceholderText(/type a page title or submenu label/i)).not.toBeInTheDocument();
    expect(screen.getByText('About')).toBeInTheDocument();
  });

});