@nocobase/app-template-default 1.0.0-beta.86 → 1.0.0-beta.88

package/tests/client/registration-feedback.test.tsx

@@ -0,0 +1,143 @@
+import {
+  AuthenticationProvider,
+  GuestAuthentication,
+  authenticationClientToken,
+} from '@nocobase/app-plugin-authentication/client';
+import { authorizationClientToken } from '@nocobase/app-plugin-authorization/client';
+import { reactProviders } from '@nocobase/app-plugin-authorization/client/react-providers';
+import { renderWithApp } from '@nocobase/app-testing/client';
+import { act, fireEvent, screen } from '@testing-library/react';
+import { Route, Routes } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+import RegisterPage from '../../client/pages/auth/register.js';
+
+const AuthorizationProvider = reactProviders[0]!.component;
+
+async function renderRegistration(signedIn = false, locale = 'en-US') {
+  let registered = false;
+  const refresh = Promise.withResolvers<void>();
+  const email = vi.fn(async () => {
+    registered = true;
+    return { token: null, user: { id: 'untrusted-id' } };
+  });
+  const getSession = vi.fn(async () => {
+    if (registered) await refresh.promise;
+    return {
+      data:
+        registered && signedIn
+          ? { user: { id: 'real-user' }, session: { id: 'real-session' } }
+          : null,
+    };
+  });
+  const view = await renderWithApp(
+    <AuthenticationProvider>
+      <AuthorizationProvider>
+        <Routes>
+          <Route
+            path='/register'
+            element={
+              <GuestAuthentication>
+                <RegisterPage />
+              </GuestAuthentication>
+            }
+          />
+          <Route path='/' element={<p>Signed-in home</p>} />
+        </Routes>
+      </AuthorizationProvider>
+    </AuthenticationProvider>,
+    {
+      route: '/register',
+      locale,
+      namespace: 'registration-test',
+      namespaces: { 'registration-test': locale === 'en-US' ? enUS : zhCN },
+      services: (app) => {
+        app.container.instance(authorizationClientToken, {
+          resetSession: vi.fn(),
+        });
+        app.container.instance(authenticationClientToken, {
+          getSession,
+          signUp: { email },
+        });
+      },
+    },
+  );
+  await screen.findByRole('heading', {
+    name: locale === 'en-US' ? 'Create an account' : '创建账户',
+  });
+  return { ...view, refresh, email };
+}
+
+function submitForm(container: HTMLElement, locale = 'en-US') {
+  const labels =
+    locale === 'en-US'
+      ? ['Name', 'Username', 'Email', 'Password', 'Confirm password']
+      : ['姓名', '用户名', '邮箱', '密码', '确认密码'];
+  const values = [
+    'Person',
+    'person',
+    'person@example.test',
+    'test-password',
+    'test-password',
+  ];
+  labels.forEach((label, index) =>
+    fireEvent.change(screen.getByLabelText(label), {
+      target: { value: values[index] },
+    }),
+  );
+  fireEvent.submit(container.querySelector('form')!);
+}
+
+describe('registration feedback with the real session provider and guest guard', () => {
+  it.each(['en-US', 'zh-CN'])(
+    'keeps accepted unsigned-in feedback after session refresh in %s',
+    async (locale) => {
+      const { container, refresh, email } = await renderRegistration(
+        false,
+        locale,
+      );
+      submitForm(container, locale);
+      try {
+        await vi.waitFor(() => expect(email).toHaveBeenCalledOnce());
+        expect(container.querySelector('form')).toBeInTheDocument();
+      } finally {
+        await act(async () => {
+          refresh.resolve();
+        });
+      }
+      const status = await screen.findByRole('status');
+      expect(status).toHaveTextContent(
+        locale === 'en-US'
+          ? 'the new details will not take effect'
+          : '新填写的信息不会生效',
+      );
+      expect(container.querySelector('form')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('link', {
+          name: locale === 'en-US' ? 'Sign in' : '登录',
+        }),
+      ).toHaveAttribute('href', '/login');
+      expect(
+        screen.getByRole('link', {
+          name: locale === 'en-US' ? 'Forgot password?' : '忘记密码？',
+        }),
+      ).toHaveAttribute('href', '/forgot-password');
+      expect(status).not.toHaveTextContent(
+        /account (?:created|has been created)|email (?:sent|has been sent)|账户已创建|邮件已发送/i,
+      );
+    },
+  );
+
+  it('uses the refreshed session to leave the guest page', async () => {
+    const { container, refresh } = await renderRegistration(true);
+    submitForm(container);
+    await act(async () => {
+      refresh.resolve();
+    });
+    expect(await screen.findByText('Signed-in home')).toBeVisible();
+    expect(
+      screen.queryByText('Registration request submitted'),
+    ).not.toBeInTheDocument();
+  });
+});

package/tests/client/settings-home.test.tsx

@@ -0,0 +1,110 @@
+import packageMetadata from '../../package.json' with { type: 'json' };
+import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
+import { resolveAppClientContributions } from '@nocobase/app-client/plugins';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import { Route, Routes, useLocation } from 'react-router';
+import { expect, it } from 'vitest';
+import { Breadcrumbs } from '../../client/components/breadcrumbs.js';
+import SettingsHomePage from '../../client/pages/settings/settings-home.js';
+import settingsRoutes from '../../client/pages/settings/routes.js';
+import shellRoutes from '../../client/pages/settings/shell-routes.js';
+import { RouteTreeProvider } from '../../client/routing/route-context.js';
+import { useRouteNavigation } from '../../client/routing/route-navigation.js';
+
+const { routes } = resolveAppClientContributions([
+  {
+    packageName: packageMetadata.name,
+    source: 'application',
+    routes: [shellRoutes, settingsRoutes],
+  },
+]);
+
+function Shell({ children }: { children: ReactNode }) {
+  const { denied, loading } = useRouteNavigation(routes);
+  return (
+    <RouteTreeProvider routes={routes} access={{ denied, loading }}>
+      <Breadcrumbs denied={denied} />
+      {children}
+    </RouteTreeProvider>
+  );
+}
+
+function Where() {
+  return <output aria-label='Route'>{useLocation().pathname}</output>;
+}
+
+function mount(
+  options: Parameters<typeof renderAuthenticatedClient>[1] = {},
+  route = '/settings',
+) {
+  return renderAuthenticatedClient(
+    <Shell>
+      <Routes>
+        <Route path='/settings' element={<SettingsHomePage />} />
+        <Route path='*' element={<Where />} />
+      </Routes>
+    </Shell>,
+    { route, ...options },
+  );
+}
+
+it('groups the modules an administrator may open into categories of cards that open by keyboard', async () => {
+  const user = userEvent.setup();
+  await mount();
+  const account = await screen.findByRole('region', {
+    name: 'Accounts and permissions',
+  });
+  const cards = within(account).getAllByRole('link');
+  expect(cards.map((card) => card.textContent)).toEqual([
+    'UsersManage accounts, access and active sessions.',
+    'Permission managementSet what each role can open and do, and the data it can see.',
+  ]);
+  expect(cards[0]).toHaveAttribute('href', '/main/settings/users');
+  expect(cards[1]).toHaveAttribute('href', '/main/settings/roles');
+  // Categories without a module this viewer may open are not shown.
+  expect(screen.getAllByRole('region')).toHaveLength(1);
+  cards[1].focus();
+  await user.keyboard('{Enter}');
+  await waitFor(() =>
+    expect(screen.getByRole('status', { name: 'Route' })).toHaveTextContent(
+      '/settings/roles',
+    ),
+  );
+});
+
+it('shows a restricted viewer only what they may open, opening a tabbed module on its readable view', async () => {
+  await mount({
+    member: true,
+    grants: [
+      {
+        resource: { type: 'settings', id: 'authorization.default-access' },
+        actions: [{ action: 'read' }],
+      },
+    ],
+  });
+  const account = await screen.findByRole('region', {
+    name: 'Accounts and permissions',
+  });
+  // Categories without a module this viewer may open are not shown.
+  expect(screen.getAllByRole('region')).toHaveLength(1);
+  const cards = within(account).getAllByRole('link');
+  expect(cards).toHaveLength(1);
+  expect(cards[0]).toHaveAttribute('href', '/main/settings/default-access');
+});
+
+it('explains when there is nothing to manage', async () => {
+  await mount({ member: true, locale: 'zh-CN' });
+  expect(await screen.findByText('暂时没有你可以管理的设置。')).toBeVisible();
+  expect(screen.getByRole('heading', { name: '系统设置' })).toBeVisible();
+});
+
+it('links the System settings breadcrumb back to the home from a module view', async () => {
+  await mount({}, '/settings/roles');
+  const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
+  expect(
+    within(trail).getByRole('link', { name: 'System settings' }),
+  ).toHaveAttribute('href', '/main/settings');
+  expect(within(trail).getByText('Roles and permissions')).toBeVisible();
+});

package/tests/client/settings-navigation.test.ts

@@ -0,0 +1,230 @@
+import {
+  defineAppRoutes,
+  resolveAppClientContributions,
+  type AppClientRegisteredRoute,
+} from '@nocobase/app-client/plugins';
+import { describe, expect, it } from 'vitest';
+import foundation from '@nocobase/app-plugin-foundation/client/routes';
+import settings from '../../client/pages/settings/routes.js';
+import shell from '../../client/pages/settings/shell-routes.js';
+import { createApplicationRoutes } from '../../client/routes.js';
+import {
+  buildRouteNavigation,
+  buildSettingsCatalog,
+  filterRouteTree,
+  selectedNavigationId,
+  routeKey,
+} from '../../client/routing/route-navigation.js';
+
+const componentLoader = async () => ({ default: () => null });
+const app = '@nocobase/app-template-default';
+
+function resolve(...extra: ReturnType<typeof defineAppRoutes>[]) {
+  return resolveAppClientContributions([
+    {
+      packageName: app,
+      source: 'application',
+      routes: [shell, settings, ...extra],
+    },
+  ]).routes;
+}
+
+function find(
+  routes: readonly AppClientRegisteredRoute[],
+  name: string,
+): AppClientRegisteredRoute {
+  for (const route of routes) {
+    if (route.name === name) return route;
+    const nested = route.children && find(route.children, name);
+    if (nested) return nested;
+  }
+  return undefined as unknown as AppClientRegisteredRoute;
+}
+
+const catalog = (
+  routes: readonly AppClientRegisteredRoute[],
+  denied = new Set<string>(),
+) =>
+  buildSettingsCatalog(routes, denied).map((category) => [
+    category.route.name,
+    category.modules.map((module) => [module.route.name, module.target.path]),
+  ]);
+
+describe('System settings navigation', () => {
+  it('keeps the existing URLs and authorization of the settings pages', () => {
+    const routes = resolve();
+    expect(
+      [
+        'settingsHome',
+        'settingsUsers',
+        'settingsRoles',
+        'settingsDefaultAccess',
+      ].map((name) => {
+        const route = find(routes, name);
+        return [name, route.path, route.authz];
+      }),
+    ).toEqual([
+      ['settingsHome', '/settings', 'skip'],
+      [
+        'settingsUsers',
+        '/settings/users',
+        { resource: { type: 'user', id: '*' }, action: 'read' },
+      ],
+      [
+        'settingsRoles',
+        '/settings/roles',
+        {
+          resource: { type: 'settings', id: 'authorization.permission-sets' },
+          action: 'read',
+        },
+      ],
+      [
+        'settingsDefaultAccess',
+        '/settings/default-access',
+        {
+          resource: { type: 'settings', id: 'authorization.default-access' },
+          action: 'read',
+        },
+      ],
+    ]);
+    expect(find(routes, 'settingsUsers').id).toBe(`${app}:settingsUsers`);
+  });
+
+  it('shows one sidebar entry that opens the home and stays selected on every settings page', () => {
+    const routes = resolve();
+    const menu = buildRouteNavigation(routes, new Set());
+    expect(menu.map(({ route }) => [route.name, route.path])).toEqual([
+      ['settingsHome', '/settings'],
+    ]);
+    expect(menu[0].children).toEqual([]);
+    expect(menu[0].route.navigation?.title).toBe('settings.title');
+    const entry = routeKey(menu[0].route);
+    for (const path of [
+      '/settings',
+      '/settings/users',
+      '/settings/users/create',
+      '/settings/roles/member/edit',
+      '/settings/default-access',
+    ])
+      expect(selectedNavigationId(routes, path)).toBe(entry);
+  });
+
+  it('groups modules into categories, opens a tabbed module on its first readable tab and hides empty categories', () => {
+    const routes = resolve();
+    expect(catalog(routes)).toEqual([
+      [
+        'settingsAccount',
+        [
+          ['settingsUsers', '/settings/users'],
+          ['permissionManagement', '/settings/roles'],
+        ],
+      ],
+    ]);
+    const roles = find(routes, 'settingsRoles');
+    expect(catalog(routes, new Set([routeKey(roles)]))).toEqual([
+      [
+        'settingsAccount',
+        [
+          ['settingsUsers', '/settings/users'],
+          ['permissionManagement', '/settings/default-access'],
+        ],
+      ],
+    ]);
+    const denied = new Set(
+      ['settingsUsers', 'settingsRoles', 'settingsDefaultAccess'].map((name) =>
+        routeKey(find(routes, name)),
+      ),
+    );
+    expect(catalog(routes, denied)).toEqual([]);
+    // Without a module to open, the sidebar entry disappears too.
+    expect(buildRouteNavigation(routes, denied)).toEqual([]);
+  });
+
+  it('adds a later module with several views to its category without another sidebar entry', () => {
+    const routes = resolve(
+      defineAppRoutes([
+        {
+          parent: 'settingsSystem',
+          name: 'notificationManagement',
+          navigation: {
+            title: 'Notifications',
+            description: 'Channels and delivery records.',
+          },
+          breadcrumb: { title: 'Notifications' },
+          children: [
+            {
+              name: 'notificationLogs',
+              path: '/notifications/logs',
+              authz: {
+                resource: { type: 'page', id: 'notification.logs' },
+                action: 'access',
+              },
+              navigation: { title: 'Delivery logs' },
+              componentLoader,
+            },
+          ],
+        },
+      ]),
+    );
+    expect(find(routes, 'notificationLogs').path).toBe(
+      '/settings/notifications/logs',
+    );
+    expect(catalog(routes).at(-1)).toEqual([
+      'settingsSystem',
+      [['notificationManagement', '/settings/notifications/logs']],
+    ]);
+    expect(buildRouteNavigation(routes, new Set())).toHaveLength(1);
+    expect(selectedNavigationId(routes, '/settings/notifications/logs')).toBe(
+      routeKey(buildRouteNavigation(routes, new Set())[0].route),
+    );
+  });
+
+  it('places a plugin module registered outside the categories under System', () => {
+    const routes = resolveAppClientContributions([
+      { packageName: app, source: 'application', routes: [shell] },
+      {
+        packageName: '@nocobase/app-plugin-foundation',
+        source: 'plugin',
+        routes: foundation,
+      },
+    ]).routes;
+    // The bare shell: only App Foundation, which only an unrestricted administrator may open.
+    const menu = buildRouteNavigation(routes, new Set());
+    expect(menu.map(({ route }) => route.name)).toEqual(['settingsHome']);
+    expect(catalog(routes)).toEqual([
+      ['settingsSystem', [['foundation', '/foundation']]],
+    ]);
+    // The signed-in shell receives the tree filtered to its pages; empty categories keep their titles there.
+    const signedIn = filterRouteTree(
+      routes,
+      (route) => route.auth === 'required',
+    );
+    expect(catalog(signedIn)).toEqual([
+      ['settingsSystem', [['foundation', '/foundation']]],
+    ]);
+    const page = find(routes, 'foundation');
+    expect(page.navigation?.description).toBe('nav.foundationDescription');
+    expect(buildRouteNavigation(routes, new Set([routeKey(page)]))).toEqual([]);
+  });
+
+  it('shows the notification template view as a System card once an invitation mailer is configured', () => {
+    const routes = resolveAppClientContributions([
+      {
+        packageName: app,
+        source: 'application',
+        routes: createApplicationRoutes({
+          notificationTemplates: { invitationConfigured: true },
+        }),
+      },
+    ]).routes;
+    expect(catalog(routes)).toEqual([
+      [
+        'settingsSystem',
+        [['notificationManagement', '/settings/notifications/templates']],
+      ],
+    ]);
+    expect(
+      buildRouteNavigation(routes, new Set()).map(({ route }) => route.name),
+    ).toEqual(['home', 'settingsHome']);
+  });
+});

package/tests/client/standalone-page-layout.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { StandalonePageLayout } from '../../client/routing/standalone-page-layout.js';
+import { AppThemeProvider } from '../../client/theme/index.js';
+
+beforeEach(() => {
+  // jsdom does not implement the media queries used by the real theme provider.
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute('class');
+  document.documentElement.removeAttribute('style');
+  document.documentElement.removeAttribute('data-theme');
+});
+
+it.each(['/login', '/device'])(
+  'renders standalone content at %s without an account menu',
+  (path) => {
+    render(
+      <AppThemeProvider>
+        <MemoryRouter initialEntries={[path]}>
+          <Routes>
+            <Route element={<StandalonePageLayout />}>
+              <Route path={path} element={<h1>Standalone page</h1>} />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      </AppThemeProvider>,
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Standalone page' }),
+    ).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Theme' }),
+    ).not.toBeInTheDocument();
+  },
+);

package/tests/client/user-menu-sign-out.test.tsx

@@ -1,9 +1,19 @@
+import { AppThemeProvider } from '../../client/theme/index.js';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { UserMenu } from '../../client/layouts/components/user-menu.tsx';
 import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
 
+// jsdom has no media queries; the real account menu includes the theme provider.
+beforeEach(() => {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
 async function openAccountMenu(): Promise<void> {
   act(() => screen.getByRole('button', { name: 'Open account menu' }).focus());
   await userEvent.keyboard('{Enter}');
@@ -15,7 +25,11 @@ async function signOutFromMenu() {
 
 describe('account menu sign out', () => {
   it('ends the server session and refreshes the displayed identity', async () => {
-    const view = await renderAuthenticatedClient(<UserMenu />);
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.identity().session).toBeNull());
     expect(
@@ -26,13 +40,18 @@ describe('account menu sign out', () => {
     expect(screen.queryByText(view.session.user.email)).not.toBeInTheDocument();
   });
   it('reports a rejected origin without pretending the session ended', async () => {
-    const view = await renderAuthenticatedClient(<UserMenu />, {
-      beforeRequest(request) {
-        // Exercise the real origin guard and error resolver, not a fabricated authentication result.
-        if (request.url.endsWith('/sign-out'))
-          request.headers.set('origin', 'https://untrusted.example');
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+      {
+        beforeRequest(request) {
+          // Exercise the real origin guard and error resolver, not a fabricated authentication result.
+          if (request.url.endsWith('/sign-out'))
+            request.headers.set('origin', 'https://untrusted.example');
+        },
       },
-    });
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.toasts()).toHaveLength(1));
     expect(view.toasts()[0]).toMatchObject({
@@ -50,13 +69,18 @@ describe('account menu sign out', () => {
   });
   it('reports a network failure and successfully retries sign-out', async () => {
     let offline = true;
-    const view = await renderAuthenticatedClient(<UserMenu />, {
-      beforeRequest(request) {
-        // Network loss cannot be produced by the in-process server.
-        if (offline && request.url.endsWith('/sign-out'))
-          throw new TypeError('Failed to fetch');
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+      {
+        beforeRequest(request) {
+          // Network loss cannot be produced by the in-process server.
+          if (offline && request.url.endsWith('/sign-out'))
+            throw new TypeError('Failed to fetch');
+        },
       },
-    });
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.toasts()).toHaveLength(1));
     expect(view.toasts()[0]).toMatchObject({

package/tests/client/user-menu.test.tsx

@@ -0,0 +1,65 @@
+import { AppThemeProvider } from '../../client/theme/index.js';
+import { act, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+
+import { UserMenu } from '../../client/layouts/components/user-menu.js';
+import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
+
+// jsdom has no media queries; the real account menu includes the theme provider.
+beforeEach(() => {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
+it('uses CJK name endings in the avatar while retaining the full account name and picture', async () => {
+  const view = await renderAuthenticatedClient(
+    <AppThemeProvider>
+      <UserMenu />
+    </AppThemeProvider>,
+  );
+  const user = userEvent.setup();
+  const trigger = screen.getByRole('button', { name: 'Open account menu' });
+  await user.tab();
+  for (const [name, expected] of [
+    ['周建国', '建国'],
+    ['欧阳娜娜', '娜娜'],
+    ['李雷', '李雷'],
+    ['周 建国', '建国'],
+    ['Li Lei', 'LL'],
+    ['周', '周'],
+  ] as const) {
+    await act(async () => {
+      const response = await view.identity().client.updateUser({ name });
+      expect(response.error).toBeNull();
+      await view.identity().refresh();
+    });
+    expect(trigger).toHaveTextContent(expected);
+    await user.keyboard('{Enter}');
+    expect(
+      within(screen.getByRole('menu')).getByText(name, { exact: true }),
+    ).toBeVisible();
+    await user.keyboard('{Escape}');
+  }
+  await act(async () => {
+    const response = await view.identity().client.updateUser({ name: '' });
+    expect(response.error).toBeNull();
+    await view.identity().refresh();
+  });
+  expect(trigger).toHaveTextContent(view.session.user.email[0]!.toUpperCase());
+  await act(async () => {
+    const response = await view
+      .identity()
+      .client.updateUser({ image: 'https://example.test/avatar.png' });
+    expect(response.error).toBeNull();
+    await view.identity().refresh();
+  });
+  expect(trigger.querySelector('img')).toHaveAttribute(
+    'src',
+    'https://example.test/avatar.png',
+  );
+  expect(trigger).not.toHaveTextContent('周');
+});