@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.58

package/tests/components/layout-i18n.test.tsx

@@ -0,0 +1,187 @@
+import {
+  ClientApplicationContext,
+  type ClientApplication,
+  createAppClientConfig,
+} from '@nocobase/app-client';
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { I18nRuntime } from '@nocobase/i18n';
+import { I18nProvider } from '@nocobase/i18n/client';
+import userEvent from '@testing-library/user-event';
+import { act, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+
+import locales from '../../client/locales/index.js';
+import { AppLayout } from '../../client/layouts/app-layout.js';
+vi.mock('@nocobase/app-plugin-i18n/client', () => ({
+  useSyncServerLocale: () => {},
+}));
+import { SettingsLayout } from '../../client/layouts/settings-layout.js';
+
+// The header's inbox button reads the in-app notification plugin's API, which these tests do not serve; it is
+// covered by tests/components/inbox.test.tsx.
+vi.mock('../../client/components/inbox-header-button', () => ({
+  InboxHeaderButton: () => null,
+}));
+
+vi.mock('../../client/routing/client-route.js', () => ({
+  ClientRoute: () => <p>Preferences content</p>,
+}));
+vi.mock('../../client/theme/index.js', () => ({ ThemeSettings: () => null }));
+vi.mock('../../client/layouts/components/user-menu.js', () => ({
+  UserMenu: () => null,
+}));
+vi.mock('../../client/routing/route-navigation.js', async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import('../../client/routing/route-navigation.js')
+  >()),
+  useRouteNavigation: (routes: readonly AppClientRegisteredRoute[]) => ({
+    items: routes.map((route) => ({ route, children: [] })),
+    loading: false,
+    denied: new Set<string>(),
+  }),
+}));
+
+const route: AppClientRegisteredRoute = {
+  id: 'preferences',
+  name: 'preferences',
+  path: '/settings/preferences',
+  packageName: 'test',
+  source: 'application',
+  auth: 'optional',
+  navigation: { title: 'Preferences' },
+  componentLoader: async () => ({ default: () => <p>Preferences content</p> }),
+};
+
+/** The page the shell opens on: the header names it. */
+const overview: AppClientRegisteredRoute = {
+  id: 'overview',
+  name: 'overview',
+  path: '/',
+  packageName: 'test',
+  source: 'application',
+  auth: 'optional',
+  breadcrumb: { title: 'Overview' },
+  componentLoader: async () => ({ default: () => null }),
+};
+
+async function setup(children: ReactNode, path = '/') {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: true,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+  const runtime = new I18nRuntime({
+    defaultLocale: 'en-US',
+    locales: ['en-US', 'zh-CN'],
+    applicationNamespace: 'test-app',
+  });
+  runtime.registerApplicationNamespace('test-app', locales);
+  await runtime.init('en-US');
+  const app = {
+    config: createAppClientConfig({ rawConfig: {} }),
+    runtime: { settingsRouteTree: [route] },
+  } as unknown as ClientApplication;
+  render(
+    <I18nProvider runtime={runtime}>
+      <ClientApplicationContext.Provider value={app}>
+        <MemoryRouter initialEntries={[path]}>{children}</MemoryRouter>
+      </ClientApplicationContext.Provider>
+    </I18nProvider>,
+  );
+  return runtime;
+}
+
+describe('shell translations', () => {
+  it('updates header, footer, tooltips and accessible labels without remounting', async () => {
+    const runtime = await setup(<AppLayout routes={[overview]} />);
+    // The header's trail, where a tagline used to be.
+    expect(
+      screen.getByRole('navigation', { name: 'Breadcrumb' }),
+    ).toHaveTextContent('Overview');
+    expect(screen.getByText('AI builds freely.')).toBeVisible();
+    await act(() => runtime.changeLanguage('zh-CN'));
+    expect(screen.getByRole('navigation', { name: '面包屑' })).toBeVisible();
+    expect(screen.getByText('AI 自由构建。')).toBeVisible();
+    expect(
+      screen.getByRole('link', { name: 'NocoBase' }).parentElement,
+    ).toHaveTextContent('NocoBase 保障可靠。');
+    expect(
+      screen.getByRole('button', { name: '展开或收起导航' }),
+    ).toHaveAttribute('title', '展开或收起导航');
+    expect(screen.getByRole('link', { name: 'NocoBase' })).toHaveAttribute(
+      'href',
+      'https://www.nocobase.com',
+    );
+    const user = userEvent.setup();
+    const settings = screen.getByRole('link', { name: '设置' });
+    expect(settings).not.toHaveAttribute('title');
+    await user.hover(settings);
+    expect(
+      await screen.findByText('设置', {
+        selector: '[data-slot=tooltip-content]',
+      }),
+    ).toBeVisible();
+    await user.unhover(settings);
+    await act(() => runtime.changeLanguage('en-US'));
+    expect(
+      screen.getByRole('navigation', { name: 'Breadcrumb' }),
+    ).toBeVisible();
+    act(() => settings.focus());
+    expect(
+      await screen.findByText('Settings', {
+        selector: '[data-slot=tooltip-content]',
+      }),
+    ).toBeVisible();
+  });
+
+  it.each([
+    [
+      'settings',
+      SettingsLayout,
+      '暂无可用设置',
+      '没有已启用的插件提供你有权访问的设置页面。',
+    ],
+  ] as const)(
+    'translates the %s empty state',
+    async (surface, Layout, title, description) => {
+      const runtime = await setup(<Layout routeTree={[]} />, `/${surface}`);
+      await act(() => runtime.changeLanguage('zh-CN'));
+      expect(screen.getByRole('heading', { name: title })).toBeVisible();
+      expect(screen.getByText(description)).toBeVisible();
+      expect(screen.getByRole('link', { name: '返回应用' })).toHaveAttribute(
+        'href',
+        '/',
+      );
+    },
+  );
+
+  it.each(['settings'] as const)(
+    'translates the %s page header',
+    async (surface) => {
+      const Layout = SettingsLayout;
+      const page = { ...route, path: `/${surface}/preferences` };
+      const runtime = await setup(
+        <Routes>
+          <Route
+            path={`/${surface}/*`}
+            element={<Layout routeTree={[page]} />}
+          />
+        </Routes>,
+        page.path,
+      );
+      await screen.findByText('Preferences content');
+      await act(() => runtime.changeLanguage('zh-CN'));
+      expect(screen.getByRole('link', { name: '返回应用' })).toHaveAttribute(
+        'href',
+        '/',
+      );
+      expect(
+        screen.getByRole('navigation', {
+          name: '设置',
+        }),
+      ).toBeVisible();
+    },
+  );
+});

package/tests/components/loading.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Loading } from '../../client/components/loading';
+
+describe('Loading', () => {
+  it('renders one accessible loading status', () => {
+    render(<Loading label='Loading page' />);
+
+    expect(
+      screen.getByRole('status', { name: 'Loading page' }),
+    ).toBeInTheDocument();
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+  });
+
+  it('supports the standard fullscreen presentation', () => {
+    render(<Loading fullscreen />);
+
+    expect(screen.getByRole('status')).toHaveClass(
+      'min-h-svh',
+      'w-full',
+      'bg-background',
+    );
+  });
+});

package/tests/components/navigation-menu.test.tsx

@@ -0,0 +1,355 @@
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  TestI18nProvider,
+  createTestI18nRuntime,
+} from '@nocobase/i18n/testing';
+import type { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  routeKey,
+  type RouteNavigationItem,
+} from '../../client/routing/route-navigation.js';
+import {
+  AppSidebar,
+  AppSidebarProvider,
+  AppSidebarToggle,
+} from '../../client/layouts/components/app-sidebar.js';
+import { NavigationMenu } from '../../client/layouts/components/navigation-menu.js';
+
+// Navigation titles are route data, not keys any namespace owns: the menu translates each through its package's
+// namespace with the title itself as `defaultValue`, so the runtime is not strict.
+const runtime = await createTestI18nRuntime({ strict: false });
+
+function I18n({ children }: { readonly children: ReactNode }) {
+  return <TestI18nProvider runtime={runtime}>{children}</TestI18nProvider>;
+}
+
+const preferenceKey = 'nocobase:sidebar:collapsed';
+
+function setCollapsed(collapsed: boolean) {
+  localStorage.setItem(preferenceKey, String(collapsed));
+  window.dispatchEvent(new Event('nocobase:sidebar-preference-change'));
+}
+
+function page(name: string): AppClientRegisteredRoute {
+  return {
+    name,
+    id: name,
+    path: `/${name}`,
+    auth: 'required',
+    packageName: 'test',
+    source: 'application',
+    navigation: { title: name },
+    componentLoader: async () => ({ default: () => null }),
+  };
+}
+
+const child = page('child');
+const sibling = page('sibling');
+
+function shell(items: readonly RouteNavigationItem[], selectedKey?: string) {
+  return (
+    <MemoryRouter>
+      <AppSidebarProvider>
+        <AppSidebar label='Navigation'>
+          <NavigationMenu
+            items={items}
+            label='Menu'
+            selectedKey={selectedKey}
+          />
+        </AppSidebar>
+        <AppSidebarToggle />
+      </AppSidebarProvider>
+    </MemoryRouter>
+  );
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe.each([
+  { title: 'navigation group', clickable: false },
+  { title: 'clickable parent', clickable: true },
+])('$title', ({ clickable }) => {
+  const item: RouteNavigationItem = {
+    route: {
+      ...page('Group'),
+      componentLoader: clickable ? page('Group').componentLoader : undefined,
+    },
+    children: [
+      { route: child, children: [] },
+      { route: sibling, children: [] },
+    ],
+  };
+  const tree = (selectedKey: string | undefined) => shell([item], selectedKey);
+  function toggle() {
+    return screen.getByRole('button', { name: 'Group' });
+  }
+  function expectExpanded(expanded: boolean) {
+    expect(toggle()).toHaveAttribute('aria-expanded', String(expanded));
+  }
+
+  it('keeps an active group open when navigating to another group', () => {
+    const { rerender } = render(tree(routeKey(child)), { wrapper: I18n });
+    expectExpanded(true);
+    rerender(tree('elsewhere'));
+    expectExpanded(true);
+  });
+
+  it('preserves a manually expanded group across navigation', async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(tree('elsewhere'), { wrapper: I18n });
+    await user.click(toggle());
+    expectExpanded(true);
+    rerender(tree('another-page'));
+    expectExpanded(true);
+    rerender(tree(routeKey(child)));
+    rerender(tree('elsewhere'));
+    expectExpanded(true);
+  });
+
+  it('preserves manual collapse until navigating into the group', async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(tree(routeKey(child)), { wrapper: I18n });
+    await user.click(toggle());
+    expectExpanded(false);
+    rerender(tree(routeKey(child)));
+    expectExpanded(false);
+    rerender(tree('elsewhere'));
+    expectExpanded(false);
+    rerender(tree(routeKey(sibling)));
+    expectExpanded(true);
+  });
+});
+
+it('marks the selected page with the selected navigation colors', () => {
+  render(
+    shell([{ route: page('Home'), children: [] }], routeKey(page('Home'))),
+    {
+      wrapper: I18n,
+    },
+  );
+  const link = screen.getByRole('link', { name: 'Home' });
+  expect(link).toHaveAttribute('aria-current', 'page');
+  expect(link).toHaveAttribute('data-active');
+  expect(link).toHaveClass(
+    'data-active:bg-sidebar-primary',
+    'data-active:text-sidebar-primary-foreground',
+  );
+});
+
+describe('collapsed navigation', () => {
+  beforeEach(() => setCollapsed(true));
+
+  function show(item: RouteNavigationItem, selectedKey = routeKey(child)) {
+    return render(shell([item], selectedKey), { wrapper: I18n });
+  }
+
+  it('shows a leaf label immediately on hover and dismisses it on leave', async () => {
+    const user = userEvent.setup();
+    show({ route: page('Home'), children: [] });
+    const link = screen.getByRole('link', { name: 'Home' });
+    await user.hover(link);
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Home');
+    expect(link).not.toHaveAttribute('title');
+    await user.unhover(link);
+    await waitFor(() =>
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(),
+    );
+  });
+
+  it.each([false, true])(
+    'opens a group list immediately on hover (clickable parent: %s)',
+    async (clickable) => {
+      const user = userEvent.setup();
+      show({
+        route: {
+          ...page('Group'),
+          componentLoader: clickable
+            ? page('Group').componentLoader
+            : undefined,
+        },
+        children: [{ route: child, children: [] }],
+      });
+      const trigger = screen.getByRole(clickable ? 'link' : 'button', {
+        name: 'Group',
+      });
+      // The group holding the selected page is highlighted.
+      expect(trigger).toHaveAttribute('data-active');
+      fireEvent.mouseEnter(trigger);
+      const popup = screen.getByRole('dialog', { name: 'Group' });
+      const link = within(popup).getByRole('link', { name: 'child' });
+      expect(link).toHaveAttribute('aria-current', 'page');
+      expect(link).toHaveAttribute('href', '/child');
+      // user-event omits mouseleave.relatedTarget; with zero close delay and
+      // JSDOM's empty rectangles, safePolygon would close before pointer entry.
+      fireEvent.mouseLeave(trigger, { relatedTarget: popup });
+      await user.hover(popup);
+      await user.click(link);
+      await waitFor(() =>
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+      );
+    },
+  );
+
+  it('opens on keyboard focus and closes with Escape', async () => {
+    const user = userEvent.setup();
+    show({
+      route: { ...page('Group'), componentLoader: undefined },
+      children: [{ route: child, children: [] }],
+    });
+    // The brand link comes first in the sidebar.
+    await user.tab();
+    await user.tab();
+    expect(await screen.findByRole('dialog', { name: 'Group' })).toBeVisible();
+    await user.tab();
+    expect(screen.getByRole('link', { name: 'child' })).toHaveFocus();
+    await user.keyboard('{Escape}');
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('keeps a parent link navigable and expands nested groups inside the popup', async () => {
+    const user = userEvent.setup();
+    show({
+      route: page('Parent'),
+      children: [
+        {
+          route: { ...page('Nested'), componentLoader: undefined },
+          children: [{ route: sibling, children: [] }],
+        },
+      ],
+    });
+    const parent = screen.getByRole('link', { name: 'Parent' });
+    expect(parent).toHaveAttribute('href', '/Parent');
+    fireEvent.mouseEnter(parent);
+    const popup = screen.getByRole('dialog', { name: 'Parent' });
+    fireEvent.mouseLeave(parent, { relatedTarget: popup });
+    await user.hover(popup);
+    await user.click(within(popup).getByText('Nested'));
+    expect(within(popup).getByRole('link', { name: 'sibling' })).toBeVisible();
+    await user.click(parent);
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('does not reopen an old popup after expanding and collapsing the sidebar', async () => {
+    const user = userEvent.setup();
+    show(
+      {
+        route: { ...page('Group'), componentLoader: undefined },
+        children: [{ route: child, children: [] }],
+      },
+      'elsewhere',
+    );
+    await user.hover(screen.getByRole('button', { name: 'Group' }));
+    expect(await screen.findByRole('dialog')).toBeVisible();
+    act(() => setCollapsed(false));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    act(() => setCollapsed(true));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it.each(['expanded', 'mobile'])(
+    'does not add hover overlays when %s',
+    async (mode) => {
+      if (mode === 'expanded') setCollapsed(false);
+      else vi.stubGlobal('innerWidth', 390);
+      const user = userEvent.setup();
+      show({ route: page('Home'), children: [] });
+      if (mode === 'mobile')
+        await user.click(
+          screen.getByRole('button', { name: 'Open navigation' }),
+        );
+      await user.hover(screen.getByRole('link', { name: 'Home' }));
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('dialog', { name: 'Home' }),
+      ).not.toBeInTheDocument();
+    },
+  );
+});
+
+describe('sidebar shell', () => {
+  it('collapses from the header toggle into the shared preference', async () => {
+    const user = userEvent.setup();
+    render(shell([{ route: page('Home'), children: [] }]), { wrapper: I18n });
+    const sidebar = screen.getByRole('complementary', { name: 'Navigation' });
+    await user.click(
+      screen.getByRole('button', { name: 'Collapse navigation' }),
+    );
+    expect(localStorage.getItem(preferenceKey)).toBe('true');
+    expect(sidebar.closest('[data-state]')).toHaveAttribute(
+      'data-state',
+      'collapsed',
+    );
+    expect(
+      screen.getByRole('button', { name: 'Expand navigation' }),
+    ).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('ignores Ctrl/Cmd+B, leaving the key to whatever is focused', async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn<(key: string) => void>();
+    render(
+      <>
+        {shell([{ route: page('Home'), children: [] }])}
+        <textarea
+          aria-label='Editor'
+          onKeyDown={(event) => onKeyDown(event.key)}
+        />
+      </>,
+      { wrapper: I18n },
+    );
+    await user.click(screen.getByRole('textbox', { name: 'Editor' }));
+    await user.keyboard('{Control>}b{/Control}');
+    await user.keyboard('{Meta>}b{/Meta}');
+    expect(onKeyDown.mock.calls.filter(([key]) => key === 'b')).toHaveLength(2);
+    expect(localStorage.getItem(preferenceKey)).toBeNull();
+    expect(
+      screen.getByRole('button', { name: 'Collapse navigation' }),
+    ).toBeInTheDocument();
+  });
+
+  it('opens the phone sheet with a translated title and closes it on navigation', async () => {
+    vi.stubGlobal('innerWidth', 390);
+    const user = userEvent.setup();
+    render(shell([{ route: page('Home'), children: [] }]), { wrapper: I18n });
+    await user.click(screen.getByRole('button', { name: 'Open navigation' }));
+    const sheet = await screen.findByRole('dialog', { name: 'Navigation' });
+    expect(sheet).toHaveAttribute('data-sidebar', 'sidebar');
+    await user.click(within(sheet).getByRole('link', { name: 'Home' }));
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+    await user.click(screen.getByRole('button', { name: 'Open navigation' }));
+    await user.click(
+      within(await screen.findByRole('dialog')).getByRole('button', {
+        name: 'Close navigation',
+      }),
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+});