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

package/tests/components/header-hover.test.tsx

@@ -0,0 +1,87 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { AppThemeProvider } from '../../client/theme/theme-provider';
+import { ThemeSettings } from '../../client/theme/theme-settings';
+import { UserMenu } from '../../client/layouts/components/user-menu';
+
+// Session requests belong to the authentication tests.
+vi.mock('@nocobase/app-plugin-authentication/client', () => ({
+  useAuthentication: () => ({
+    session: { user: { id: 'operator', name: 'Operator' } },
+    isPending: false,
+  }),
+}));
+// Language selection has its own integration tests with the real i18n runtime.
+vi.mock('../../client/layouts/components/language-switcher.js', () => ({
+  LanguageSwitcher: () => null,
+}));
+
+beforeEach(() => {
+  // jsdom does not implement the media queries used by the real theme provider.
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  localStorage.clear();
+  document.documentElement.removeAttribute('class');
+  document.documentElement.removeAttribute('style');
+  document.documentElement.removeAttribute('data-theme');
+});
+
+const panels = [
+  ['Appearance', ThemeSettings, 'dialog'],
+  ['Open account menu', UserMenu, 'menu'],
+] as const;
+
+it.each(panels)(
+  'opens and closes %s on hover',
+  async (label, Component, role) => {
+    const user = userEvent.setup();
+    render(
+      <AppThemeProvider>
+        <Component />
+      </AppThemeProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: label });
+
+    await user.hover(trigger);
+    const panel = screen.getByRole(role);
+    expect(trigger).not.toHaveAttribute('title');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    // Supply the destination because user-event does not set relatedTarget.
+    fireEvent.mouseLeave(trigger, { relatedTarget: panel });
+    fireEvent.mouseEnter(panel, { relatedTarget: trigger });
+    fireEvent.mouseMove(panel);
+    expect(panel).toBeVisible();
+
+    fireEvent.mouseLeave(panel, { relatedTarget: document.body });
+    fireEvent.mouseMove(document.body, { clientX: 1000, clientY: 1000 });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  },
+);
+
+it.each(panels)(
+  'opens %s by keyboard and closes with Escape',
+  async (label, Component, role) => {
+    const user = userEvent.setup();
+    render(
+      <AppThemeProvider>
+        <Component />
+      </AppThemeProvider>,
+    );
+    const trigger = screen.getByRole('button', { name: label });
+
+    await user.tab();
+    expect(trigger).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(screen.getByRole(role)).toBeVisible();
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  },
+);

package/tests/components/inbox.test.tsx

@@ -0,0 +1,139 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nRuntime } from '@nocobase/i18n';
+import { I18nProvider } from '@nocobase/i18n/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { MemoryRouter } from 'react-router';
+import { beforeEach, expect, it, vi } from 'vitest';
+
+import locales from '../../client/locales/index.js';
+import { TooltipProvider } from '../../client/components/ui/tooltip';
+
+const mocks = vi.hoisted(() => ({
+  session: { user: { id: 'user-1' } } as { user: { id: string } } | null,
+  unread: 2,
+  request: vi.fn(),
+}));
+vi.mock('@nocobase/app-plugin-authentication/client', () => ({
+  useAuthentication: () => ({ session: mocks.session, isPending: false }),
+}));
+vi.mock('@nocobase/app-client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@nocobase/app-client')>();
+  const client = { request: mocks.request };
+  const realtime = { subscribe: () => vi.fn(), onOpen: () => vi.fn() };
+  return {
+    ...actual,
+    useApiClient: () => client,
+    useService: (token: unknown) =>
+      token === actual.realtimeClientToken ? realtime : client,
+  };
+});
+
+import { InboxHeaderButton } from '../../client/components/inbox-header-button.tsx';
+import InboxPage from '../../client/pages/inbox.tsx';
+
+const messages = [
+  {
+    id: 'm1',
+    deliveryId: 'd1',
+    notificationId: 'n1',
+    title: 'Weekly report is ready',
+    body: 'The sales report for week 40 is ready.',
+    createdAt: '2026-10-01T08:00:00.000Z',
+  },
+  {
+    id: 'm2',
+    deliveryId: 'd2',
+    notificationId: 'n2',
+    title: 'Backup finished',
+    body: 'All databases were backed up.',
+    readAt: '2026-10-01T09:00:00.000Z',
+    createdAt: '2026-10-01T07:00:00.000Z',
+  },
+];
+
+let runtime: I18nRuntime;
+beforeEach(async () => {
+  mocks.session = { user: { id: 'user-1' } };
+  mocks.unread = 2;
+  mocks.request.mockReset();
+  mocks.request.mockImplementation(
+    async ({ path }: { readonly path: string }) => {
+      if (path.endsWith('/unreadCount'))
+        return { data: { count: mocks.unread } };
+      if (path.startsWith('notificationInApp/messages?'))
+        return { data: messages, meta: {} };
+      return { data: { ...messages[0], readAt: '2026-10-01T10:00:00.000Z' } };
+    },
+  );
+  runtime = new I18nRuntime({
+    defaultLocale: 'en-US',
+    locales: ['en-US', 'zh-CN'],
+    applicationNamespace: 'test-app',
+  });
+  runtime.registerApplicationNamespace('test-app', locales);
+  await runtime.init('en-US');
+});
+
+function Frame({
+  children,
+  path,
+}: {
+  readonly children: ReactElement;
+  readonly path: string;
+}): ReactElement {
+  return (
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <MemoryRouter initialEntries={[path]}>
+        <I18nProvider runtime={runtime}>
+          <TooltipProvider>{children}</TooltipProvider>
+        </I18nProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+it('links the header to the inbox with the unread count, for a signed-in person only', async () => {
+  const view = render(
+    <Frame path='/'>
+      <InboxHeaderButton />
+    </Frame>,
+  );
+  const link = await screen.findByRole('link', { name: 'Inbox, 2 unread' });
+  expect(link).toHaveAttribute('href', '/inbox');
+  expect(screen.getByText('2')).toBeInTheDocument();
+  mocks.session = null;
+  view.rerender(
+    <Frame path='/'>
+      <InboxHeaderButton />
+    </Frame>,
+  );
+  expect(screen.queryByRole('link')).toBeNull();
+});
+
+it("lists the plugin's messages as notifications and marks one read when it is opened", async () => {
+  render(
+    <Frame path='/inbox'>
+      <InboxPage />
+    </Frame>,
+  );
+  expect(
+    await screen.findByRole('heading', { name: /Notifications/u }),
+  ).toBeInTheDocument();
+  expect(screen.getByText('Backup finished')).toBeInTheDocument();
+  // The first message is shown, and opening it marks it read.
+  expect(
+    screen.getByRole('heading', { name: 'Weekly report is ready', level: 2 }),
+  ).toBeInTheDocument();
+  fireEvent.click(screen.getAllByText('Weekly report is ready')[0]!);
+  await waitFor(() =>
+    expect(mocks.request).toHaveBeenCalledWith({
+      path: 'notificationInApp/messages/m1/markRead',
+      method: 'POST',
+    }),
+  );
+});

package/tests/components/language-switcher.test.tsx

@@ -0,0 +1,298 @@
+import {
+  ClientApplication,
+  ClientApplicationContext,
+  createAppClientConfig,
+  defineAppClientRenderConfig,
+  readStoredLocale,
+  toasterToken,
+  type Toaster,
+} from '@nocobase/app-client';
+import { defineClientPlugins } from '@nocobase/app-client/plugins';
+import {
+  defineAppRuntime,
+  resolveAppRuntime,
+} from '@nocobase/app-client/runtime';
+import { I18nProvider } from '@nocobase/i18n/client';
+import { I18nRuntime } from '@nocobase/i18n';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+
+import { LanguageSwitcher } from '../../client/layouts/components/language-switcher.js';
+
+const APP = '@nocobase/app-template-default';
+const FALLBACK_NOTICE = '服务端不支持该语言，服务端内容已回落为英文。';
+const CHANGE_FAILED_NOTICE = '未能完成语言切换，请重试。';
+const fetchMock = vi.fn();
+const toaster = {
+  show: vi.fn<Toaster['show']>(() => 'toast'),
+  close: vi.fn<Toaster['close']>(),
+};
+const applications: ClientApplication[] = [];
+
+function createServerResponse(fallback = false): Response {
+  return new Response(
+    JSON.stringify({
+      data: {
+        locale: fallback ? 'en-US' : 'zh-CN',
+        requestedLocale: 'zh-CN',
+        fallback,
+      },
+    }),
+    { headers: { 'Content-Type': 'application/json' } },
+  );
+}
+
+async function createRuntime(locales: string[]): Promise<{
+  app: ClientApplication;
+  runtime: I18nRuntime;
+}> {
+  const runtime = new I18nRuntime({
+    defaultLocale: 'en-US',
+    locales,
+    applicationNamespace: APP,
+  });
+  runtime.registerApplicationNamespace(APP, {
+    'en-US': () =>
+      Promise.resolve({
+        default: {
+          actions: { language: 'Language' },
+          notices: {
+            serverLocaleFallback:
+              'The server does not support this language, so server messages will use English.',
+            languageChangeFailed:
+              'Unable to complete the language change. Please try again.',
+          },
+        },
+      }),
+    'zh-CN': () =>
+      Promise.resolve({
+        default: {
+          actions: { language: '语言' },
+          notices: {
+            serverLocaleFallback: FALLBACK_NOTICE,
+            languageChangeFailed: CHANGE_FAILED_NOTICE,
+          },
+        },
+      }),
+  });
+  await runtime.init('en-US');
+  const appRuntime = await resolveAppRuntime(
+    defineAppRuntime({
+      packageName: APP,
+      createAppConfig: createAppClientConfig,
+      plugins: defineClientPlugins([]),
+    }),
+    { rawConfig: { api: { baseURL: '/api' } } },
+  );
+  const app = new ClientApplication({
+    runtime: appRuntime,
+    createRenderConfig: () => defineAppClientRenderConfig({ routes: null }),
+  });
+  // Stands in for the toaster client/service-provider.ts registers, so the test sees what the menu reports.
+  app.container.instance(toasterToken, toaster);
+  await app.start();
+  applications.push(app);
+  return { app, runtime };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  globalThis.localStorage.clear();
+  fetchMock.mockImplementation(() => Promise.resolve(createServerResponse()));
+  vi.stubGlobal('fetch', fetchMock);
+});
+
+afterEach(async () => {
+  await Promise.all(applications.splice(0).map((app) => app.shutdown()));
+});
+
+function renderMenu(app: ClientApplication, runtime: I18nRuntime) {
+  return render(
+    <ClientApplicationContext.Provider value={app}>
+      <I18nProvider runtime={runtime}>
+        <DropdownMenu>
+          <DropdownMenuTrigger>Account</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <LanguageSwitcher />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </I18nProvider>
+    </ClientApplicationContext.Provider>,
+  );
+}
+
+describe('LanguageSwitcher', () => {
+  it('shows the current language by name rather than by locale code', async () => {
+    const { app, runtime } = await createRuntime(['en-US', 'zh-CN']);
+
+    renderMenu(app, runtime);
+    screen.getByRole('button', { name: 'Account' }).focus();
+    await userEvent.keyboard('{ArrowDown}');
+
+    const trigger = await screen.findByRole('menuitem', {
+      name: /Language\s*English/,
+    });
+    expect(trigger).toHaveTextContent('English');
+    expect(trigger).not.toHaveTextContent('en-US');
+    await userEvent.click(trigger);
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'English' }),
+    ).toBeChecked();
+    expect(
+      screen.getByRole('menuitemradio', { name: '中文' }),
+    ).not.toBeChecked();
+  });
+
+  it('switches the language when another is chosen', async () => {
+    const { app, runtime } = await createRuntime(['en-US', 'zh-CN']);
+    const user = userEvent.setup();
+
+    renderMenu(app, runtime);
+    screen.getByRole('button', { name: 'Account' }).focus();
+    await userEvent.keyboard('{ArrowDown}');
+
+    await user.click(
+      await screen.findByRole('menuitem', { name: /Language\s*English/ }),
+    );
+    // jsdom has no submenu geometry for the pointer safe corridor.
+    fireEvent.click(await screen.findByRole('menuitemradio', { name: '中文' }));
+
+    await waitFor(() => expect(runtime.getLocale()).toBe('zh-CN'));
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledOnce());
+    await waitFor(() =>
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument(),
+    );
+    await user.click(screen.getByRole('button', { name: 'Account' }));
+    await user.click(
+      await screen.findByRole('menuitem', { name: /语言\s*中文/ }),
+    );
+    expect(
+      await screen.findByRole('menuitemradio', { name: '中文' }),
+    ).toBeChecked();
+    expect(toaster.show).not.toHaveBeenCalled();
+  });
+
+  it('closes while synchronization is pending and reports server fallback', async () => {
+    const { app, runtime } = await createRuntime(['en-US', 'zh-CN']);
+    const user = userEvent.setup();
+    let resolveRequest: ((response: Response) => void) | undefined;
+    fetchMock.mockImplementation(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveRequest = resolve;
+        }),
+    );
+
+    renderMenu(app, runtime);
+    screen.getByRole('button', { name: 'Account' }).focus();
+    await user.keyboard('{ArrowDown}');
+    await user.click(
+      await screen.findByRole('menuitem', { name: /Language\s*English/ }),
+    );
+    fireEvent.click(await screen.findByRole('menuitemradio', { name: '中文' }));
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledOnce());
+    expect(runtime.getLocale()).toBe('zh-CN');
+    expect(readStoredLocale()).toBe('zh-CN');
+    await waitFor(() =>
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument(),
+    );
+    if (!resolveRequest) throw new Error('Locale request did not start.');
+    resolveRequest(createServerResponse(true));
+
+    await waitFor(() =>
+      expect(toaster.show).toHaveBeenCalledWith({
+        type: 'info',
+        title: FALLBACK_NOTICE,
+      }),
+    );
+    await user.click(screen.getByRole('button', { name: 'Account' }));
+    expect(
+      await screen.findByRole('menuitem', { name: /语言\s*中文/ }),
+    ).not.toHaveAttribute('aria-disabled');
+    expect(toaster.show).toHaveBeenCalledOnce();
+    await user.keyboard('{Escape}{Escape}');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Account' })).toHaveFocus(),
+    );
+  });
+
+  it('keeps the interface language and reports a server synchronization failure', async () => {
+    const { app, runtime } = await createRuntime(['en-US', 'zh-CN']);
+    const user = userEvent.setup();
+    fetchMock.mockImplementation(() => Promise.reject(new Error('offline')));
+
+    renderMenu(app, runtime);
+    screen.getByRole('button', { name: 'Account' }).focus();
+    await user.keyboard('{ArrowDown}');
+    await user.click(
+      await screen.findByRole('menuitem', { name: /Language\s*English/ }),
+    );
+    fireEvent.click(await screen.findByRole('menuitemradio', { name: '中文' }));
+
+    await waitFor(() => expect(runtime.getLocale()).toBe('zh-CN'));
+    await waitFor(() =>
+      expect(toaster.show).toHaveBeenCalledWith({
+        type: 'error',
+        title: CHANGE_FAILED_NOTICE,
+      }),
+    );
+    expect(readStoredLocale()).toBe('zh-CN');
+    expect(toaster.show).toHaveBeenCalledOnce();
+    await user.keyboard('{Escape}{Escape}');
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Account' })).toHaveFocus(),
+    );
+  });
+
+  it('supports switching from the keyboard', async () => {
+    const { app, runtime } = await createRuntime(['en-US', 'zh-CN']);
+    const user = userEvent.setup();
+    renderMenu(app, runtime);
+
+    await user.tab();
+    await user.keyboard('{ArrowDown}');
+    await waitFor(() =>
+      expect(
+        screen.getByRole('menuitem', { name: /Language\s*English/ }),
+      ).toHaveFocus(),
+    );
+    await user.keyboard('{ArrowRight}');
+    await waitFor(() =>
+      expect(
+        screen.getByRole('menuitemradio', { name: 'English' }),
+      ).toHaveFocus(),
+    );
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(runtime.getLocale()).toBe('zh-CN');
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledOnce());
+    expect(readStoredLocale()).toBe('zh-CN');
+    await waitFor(() =>
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument(),
+    );
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Account' })).toHaveFocus(),
+    );
+  });
+
+  it('renders nothing when the application offers one language', async () => {
+    const { app, runtime } = await createRuntime(['en-US']);
+
+    const { container } = render(
+      <ClientApplicationContext.Provider value={app}>
+        <I18nProvider runtime={runtime}>
+          <LanguageSwitcher />
+        </I18nProvider>
+      </ClientApplicationContext.Provider>,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { LayoutHeader } from '../../client/layouts/components/layout-header.js';
+
+it('renders arbitrary header content and native attributes without providers', () => {
+  render(
+    <LayoutHeader aria-label='Tools' className='justify-end'>
+      <input aria-label='Search' />
+    </LayoutHeader>,
+  );
+  expect(screen.getByRole('banner', { name: 'Tools' })).toHaveClass(
+    'justify-end',
+  );
+  expect(screen.getByRole('textbox', { name: 'Search' })).toBeVisible();
+});