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

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

@@ -1,4 +1,7 @@
-import { renderSettingsClient as renderWithApp } from '../helpers/settings-client.js';
+import type { ReactElement } from 'react';
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { RouteTreeProvider } from '../../client/routing/route-context.js';
+import { renderSettingsClient } from '../helpers/settings-client.js';
 import { answerApi } from '@nocobase/app-testing/client';
 import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
 import {
@@ -23,6 +26,28 @@ import { BackButton } from '../../client/components/back-button.js';
 import enUS from '../../client/locales/en-US.js';
 import zhCN from '../../client/locales/zh-CN.js';
 const namespace = '@nocobase/continuity-test';
+const routes: AppClientRegisteredRoute[] = [
+  '/settings/roles',
+  '/settings/processes/loan',
+].map((path) => ({
+  id: path,
+  name: path,
+  path,
+  packageName: namespace,
+  source: 'application',
+  auth: 'required',
+  authz: 'skip',
+  componentLoader: async () => ({ default: () => null }),
+}));
+// Return targets are registered fixture pages, as they are in the running shell.
+const renderWithApp = (
+  ui: ReactElement,
+  options: Parameters<typeof renderSettingsClient>[1] = {},
+) =>
+  renderSettingsClient(
+    <RouteTreeProvider routes={routes}>{ui}</RouteTreeProvider>,
+    options,
+  );
 const namespaces = {
   [namespace]: {
     'en-US': async () => ({ default: enUS }),
@@ -47,6 +72,7 @@ const options = {
     ],
   },
 };
+const refreshing = enUS['status.refreshing'];
 const row = {
   id: 'alice',
   name: 'Alice',
@@ -77,9 +103,8 @@ it.each(['fast', 'slow'] as const)(
     await renderWithApp(
       <Routes>
         <Route path='/settings/users' element={<UsersPage />}>
-          <Route path=':userId' element={<UserDetail />}>
-            <Route path='edit' element={<UserForm />} />
-          </Route>
+          <Route path=':userId' element={<UserDetail />} />
+          <Route path=':userId/edit' element={<UserForm />} />
         </Route>
       </Routes>,
       {
@@ -110,17 +135,17 @@ it.each(['fast', 'slow'] as const)(
     vi.useFakeTimers();
     try {
       await act(() => vi.advanceTimersByTimeAsync(1000));
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
       await act(async () => {
         fireEvent.click(
           screen.getByRole('button', { name: 'Cancel', exact: true }),
         );
       });
       expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
       if (speed === 'slow') {
         await act(() => vi.advanceTimersByTimeAsync(1000));
-        expect(screen.getByText(enUS.settings.loading)).toBeVisible();
+        expect(screen.getByRole('status', { name: refreshing })).toBeVisible();
         expect(screen.getByRole('link', { name: 'Alice' })).toBeVisible();
       }
       await act(async () => {
@@ -131,7 +156,7 @@ it.each(['fast', 'slow'] as const)(
       expect(
         screen.getByRole('link', { name: 'Alice refreshed' }),
       ).toBeVisible();
-      expect(screen.queryByText(enUS.settings.loading)).not.toBeInTheDocument();
+      expect(screen.queryByRole('status', { name: refreshing })).toBeNull();
     } finally {
       vi.useRealTimers();
     }
@@ -320,9 +345,8 @@ it.each(['/settings/users', '/users'])(
       <>
         <Routes>
           <Route path={base} element={<UsersPage />}>
-            <Route path=':userId' element={<UserDetail />}>
-              <Route path='edit' element={<UserForm />} />
-            </Route>
+            <Route path=':userId' element={<UserDetail />} />
+            <Route path=':userId/edit' element={<UserForm />} />
           </Route>
         </Routes>
         <Location />

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

@@ -1,5 +1,5 @@
 import packageMetadata from '../../package.json' with { type: 'json' };
-import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
+import { createAuthenticatedClientRenderer } 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';
@@ -13,6 +13,8 @@ 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 renderAuthenticatedClient = createAuthenticatedClientRenderer();
+
 const { routes } = resolveAppClientContributions([
   {
     packageName: packageMetadata.name,
@@ -104,7 +106,7 @@ it('links the System settings breadcrumb back to the home from a module view', a
   await mount({}, '/settings/roles');
   const trail = await screen.findByRole('navigation', { name: 'Breadcrumb' });
   expect(
-    within(trail).getByRole('link', { name: 'System settings' }),
+    await within(trail).findByRole('link', { name: 'System settings' }),
   ).toHaveAttribute('href', '/main/settings');
   expect(within(trail).getByText('Roles and permissions')).toBeVisible();
 });

package/tests/client/settings-idle-list.test.tsx

@@ -0,0 +1,124 @@
+import { answerApi } from '@nocobase/app-testing/client';
+import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
+import {
+  AuthorizationClient,
+  authorizationClientToken,
+} from '@nocobase/app-plugin-authorization/client';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { Route, Routes, useNavigate } from 'react-router';
+import { expect, it, vi } from 'vitest';
+import { renderSettingsClient } from '../helpers/settings-client.js';
+import UsersPage from '../../client/pages/settings/users.js';
+import UserForm from '../../client/pages/settings/user-form.js';
+import RolesPage from '../../client/pages/settings/roles.js';
+import enUS from '../../client/locales/en-US.js';
+
+const namespace = '@nocobase/idle-list-test';
+const services = (app: ClientApplication) =>
+  app.container.instance(
+    authorizationClientToken,
+    new AuthorizationClient(app.container.resolve(apiClientToken)),
+  );
+function ReturnToRoles() {
+  const navigate = useNavigate();
+  return (
+    <button onClick={() => void navigate('/settings/roles')}>
+      Return to roles
+    </button>
+  );
+}
+
+it.each(['users', 'roles'] as const)(
+  'keeps a cold %s child route silent and starts real loading on return',
+  async (kind) => {
+    const listPath =
+      kind === 'users' ? 'users' : 'authorization/permissionSets';
+    let finish!: (value: unknown) => void;
+    const response = new Promise((resolve) => {
+      finish = resolve;
+    });
+    const calls = vi.fn(({ path }: { path: string }) => {
+      if (path === 'authorization/permissions')
+        return { data: { unrestricted: true, permissions: [] } };
+      if (path === 'users/options') return { data: { roleScopes: [] } };
+      if (path === listPath) return response;
+      return new Response(null, { status: 404 });
+    });
+    await renderSettingsClient(
+      <Routes>
+        <Route path='/settings/users' element={<UsersPage />}>
+          <Route path='create' element={<UserForm />} />
+        </Route>
+        <Route path='/settings/roles' element={<RolesPage />}>
+          <Route path='create' element={<ReturnToRoles />} />
+        </Route>
+      </Routes>,
+      {
+        route: `/settings/${kind}/create`,
+        namespace,
+        namespaces: {
+          [namespace]: { 'en-US': async () => ({ default: enUS }) },
+        },
+        services,
+        fetch: answerApi(calls),
+      },
+    );
+    // The real Users form is interactive; Roles uses the real list with a nested route.
+    const close = await screen.findByRole('button', {
+      name: kind === 'users' ? 'Cancel' : 'Return to roles',
+      exact: true,
+    });
+    vi.useFakeTimers();
+    try {
+      await act(() => vi.advanceTimersByTimeAsync(10_000));
+      expect(
+        calls.mock.calls.filter(([call]) => call.path === listPath),
+      ).toHaveLength(0);
+      expect(document.querySelector('[data-slot="loading"]')).toBeNull();
+      expect(screen.queryByText(enUS.pendingFeedback.longWait)).toBeNull();
+      expect(screen.queryByText(enUS.listFeedback.empty)).toBeNull();
+      await act(async () => {
+        fireEvent.click(close);
+      });
+      expect(
+        calls.mock.calls.filter(([call]) => call.path === listPath),
+      ).toHaveLength(1);
+      await act(() => vi.advanceTimersByTimeAsync(299));
+      expect(screen.queryByRole('status')).toBeNull();
+      await act(() => vi.advanceTimersByTimeAsync(1));
+      expect(screen.getAllByRole('status')).toHaveLength(1);
+      expect(screen.getByRole('status')).toHaveTextContent(
+        enUS.listFeedback.loading,
+      );
+      await act(async () => {
+        finish(
+          kind === 'users'
+            ? {
+                data: [
+                  {
+                    id: 'alice',
+                    name: 'Alice',
+                    username: 'alice',
+                    email: 'alice@example.test',
+                    roleScopes: {},
+                    disabledAt: null,
+                  },
+                ],
+                meta: { total: 1 },
+              }
+            : { data: [{ key: 'team', title: 'Team', grants: [] }] },
+        );
+        await response;
+      });
+    } finally {
+      finish({ data: [], meta: { total: 0 } });
+      vi.useRealTimers();
+    }
+    await waitFor(() =>
+      expect(
+        screen.getByText(kind === 'users' ? 'Alice' : 'Team', { exact: true }),
+      ).toBeVisible(),
+    );
+    expect(screen.queryByRole('status')).toBeNull();
+  },
+);

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

@@ -51,9 +51,8 @@ function Pages({ base }: { readonly base: string }) {
       <Routes>
         <Route path={base} element={<UsersPage />}>
           <Route path='create' element={<UserForm />} />
-          <Route path=':userId' element={<UserDetail />}>
-            <Route path='edit' element={<UserForm />} />
-          </Route>
+          <Route path=':userId' element={<UserDetail />} />
+          <Route path=':userId/edit' element={<UserForm />} />
         </Route>
         <Route path='*' element={<h1>Fallback home</h1>} />
       </Routes>
@@ -451,7 +450,7 @@ it('blocks closing and duplicate submission until the unified save completes', a
   await user.click(screen.getByRole('button', { name: 'Save', exact: true }));
   await waitFor(() => expect(name).toBeDisabled());
   expect(
-    screen.getByRole('button', { name: enUS.settings.saving }),
+    await screen.findByRole('button', { name: enUS.settings.saving }),
   ).toBeDisabled();
   expect(
     screen.getByRole('button', { name: 'Cancel', exact: true }),

package/tests/fixtures/dialog-footer.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Dialog footer regression</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/tests/fixtures/dialog-footer.tsx"></script>
+  </body>
+</html>

package/tests/fixtures/dialog-footer.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createMemoryRouter, Link, Outlet, RouterProvider } from 'react-router';
+import {
+  createTestI18nRuntime,
+  TestI18nProvider,
+} from '@nocobase/i18n/testing';
+import { Button } from '../../client/components/ui/button';
+import { Input } from '../../client/components/ui/input';
+import { Spinner } from '../../client/components/ui/spinner';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../client/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../client/components/ui/alert-dialog';
+import { RouteDialog } from '../../client/components/route-dialog';
+import { RouteDrawer } from '../../client/components/route-drawer';
+import enUS from '../../client/locales/en-US';
+import '../../client/styles.css';
+
+// Exercise installed primitives, portals, links and route footers with the real
+// application stylesheet. No backend or authentication is needed for this fixture.
+const params = new URLSearchParams(location.search);
+const kind = params.get('kind') ?? 'dialog';
+const chinese = params.has('chinese');
+const long = params.has('long');
+const pending = params.has('pending');
+const horizontal = params.has('horizontal');
+document.documentElement.dataset.theme = params.get('preset') ?? 'default';
+document.documentElement.classList.toggle('dark', params.has('dark'));
+const runtime = await createTestI18nRuntime({
+  application: { namespace: '@nocobase/app-template-default', resources: enUS },
+});
+const cancel = chinese ? '取消并返回实例列表' : 'Cancel';
+const submit = chinese
+  ? '确认创建这个具有较长中文名称的应用实例并继续配置'
+  : long
+    ? 'Create this application instance and continue configuring its workspace'
+    : 'Create instance';
+const title = chinese ? '创建应用实例' : 'Create application instance';
+const description = chinese
+  ? '输入实例名称，然后创建实例。'
+  : 'Enter a name to create an application instance.';
+
+function Editor() {
+  return (
+    <form
+      id='instance-form'
+      onSubmit={(event) => {
+        event.preventDefault();
+        void router.navigate('/instances?created=1');
+      }}
+    >
+      <label htmlFor='instance-name'>
+        {chinese ? '实例名称' : 'Instance name'}
+      </label>
+      <Input id='instance-name' required defaultValue='Customer portal' />
+      {long && !kind.startsWith('alert') && (
+        <div className='h-[900px]' aria-hidden='true' />
+      )}
+    </form>
+  );
+}
+
+function Actions() {
+  return (
+    <>
+      {kind === 'dialog-close' ? (
+        <DialogClose
+          disabled={pending}
+          data-testid='cancel'
+          render={<Button variant='outline' />}
+        >
+          {cancel}
+        </DialogClose>
+      ) : (
+        <Button
+          variant='outline'
+          nativeButton={false}
+          disabled={pending}
+          data-testid='cancel'
+          render={<Link to='/instances?filter=recent' />}
+        >
+          {cancel}
+        </Button>
+      )}
+      <Button
+        type='submit'
+        form='instance-form'
+        disabled={pending}
+        aria-busy={pending}
+        data-testid='submit'
+      >
+        {pending && <Spinner data-icon='inline-start' />}
+        {pending ? 'Creating instance…' : submit}
+      </Button>
+    </>
+  );
+}
+
+export default function Overlay() {
+  const [open, setOpen] = useState(true);
+  if (kind === 'route' || kind === 'drawer') {
+    const Component = kind === 'drawer' ? RouteDrawer : RouteDialog;
+    return (
+      <Component
+        title={title}
+        description={description}
+        footer={<Actions />}
+        beforeClose={() => !pending}
+      >
+        <Editor />
+      </Component>
+    );
+  }
+  if (kind === 'alert' || kind === 'alert-small') {
+    return (
+      <AlertDialog
+        open={open}
+        onOpenChange={(value) => {
+          if (!pending) setOpen(value);
+        }}
+      >
+        <AlertDialogContent size={kind === 'alert-small' ? 'sm' : 'default'}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <Editor />
+          <AlertDialogFooter
+            className={horizontal ? 'flex-row items-center' : undefined}
+          >
+            <AlertDialogCancel disabled={pending} data-testid='cancel'>
+              {cancel}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              type='submit'
+              form='instance-form'
+              disabled={pending}
+              aria-busy={pending}
+              data-testid='submit'
+            >
+              {pending && <Spinner data-icon='inline-start' />}
+              {pending ? 'Creating instance…' : submit}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  }
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (!pending) setOpen(value);
+      }}
+    >
+      <DialogContent className='flex flex-col overflow-hidden'>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className='min-h-0 overflow-y-auto'>
+          <Editor />
+        </div>
+        <DialogFooter
+          className={horizontal ? 'flex-row items-center' : undefined}
+        >
+          <Actions />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const router = createMemoryRouter(
+  [
+    {
+      path: '/instances',
+      element: (
+        <main className='p-6'>
+          <h1>Application instances</h1>
+          <p data-testid='location'>Instance list</p>
+          <Outlet />
+        </main>
+      ),
+      children: [{ path: 'new', element: <Overlay /> }],
+    },
+  ],
+  { initialEntries: ['/instances/new?filter=recent'] },
+);
+router.subscribe((state) => {
+  const output = document.querySelector('[data-testid=location]');
+  if (output)
+    output.textContent = state.location.pathname + state.location.search;
+});
+createRoot(document.getElementById('root')!).render(
+  <TestI18nProvider runtime={runtime}>
+    <RouterProvider router={router} />
+  </TestI18nProvider>,
+);

package/tests/helpers/authenticated-client.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
+import { randomUUID } from 'node:crypto';
 import { CookieJar } from 'jsdom';
-import { onTestFinished, vi } from 'vitest';
+import { afterAll, beforeAll, onTestFinished, vi } from 'vitest';
 import { act, waitFor } from '@testing-library/react';
 import { createTestApp, type TestApp } from '@nocobase/app-testing/server';
 import { renderWithApp } from '@nocobase/app-testing/client';
@@ -36,27 +37,18 @@ export async function renderAuthenticatedClient(
       response: Response,
     ) => void | Promise<void>;
   } = {},
+  sharedServer?: TestApp,
 ) {
-  const server = await createTestApp({
-    createServer: createStandaloneServer,
-    connections: ['main'],
-    config: {
-      logging: { enabled: false },
-      app: { publicOrigin: 'http://localhost' },
-      auth: {
-        secret: 'test-auth-secret-at-least-32-characters',
-        emailAndPassword: { disableSignUp: false },
-        advanced: { disableOriginCheck: false, disableCSRFCheck: false },
-      },
-    },
-  });
-  onTestFinished(() => server.close());
+  const server = sharedServer ?? (await createClientTestServer());
+  if (!sharedServer) onTestFinished(() => server.close());
+  const identity = sharedServer ? randomUUID() : '';
+  const permissionSetKey = identity ? `test-access-${identity}` : 'test-access';
   const member = {
     name: 'Test member',
-    email: 'member@example.test',
+    email: identity ? `member-${identity}@example.test` : 'member@example.test',
     password: 'test-member-password',
   };
-  if (options.member) {
+  if (options.member || sharedServer) {
     const response = await server.request('/auth/sign-up/email', {
       method: 'POST',
       headers: {
@@ -68,22 +60,77 @@ export async function renderAuthenticatedClient(
     if (!response.ok)
       throw new Error(`Member registration failed: ${await response.text()}`);
   }
+  const authz = server.application.container.resolve(authorizationToken);
   const session = await signIn(
     server,
-    options.member ? member : DEFAULT_ADMIN_CREDENTIALS,
+    options.member || sharedServer ? member : DEFAULT_ADMIN_CREDENTIALS,
   );
+  if (sharedServer && !options.member) {
+    await authz.permissionSets.assign({
+      id: randomUUID(),
+      permissionSet: 'root',
+      subject: { type: 'user', id: session.user.id },
+    });
+  }
   if (options.grants) {
-    const authz = server.application.container.resolve(authorizationToken);
     await authz.permissionSets.create({
-      key: 'test-access',
+      key: permissionSetKey,
       grants: options.grants,
     });
     await authz.permissionSets.assign({
-      id: 'test-assignment',
-      permissionSet: 'test-access',
+      id: identity ? `test-assignment-${identity}` : 'test-assignment',
+      permissionSet: permissionSetKey,
       subject: { type: 'user', id: session.user.id },
     });
   }
+  return renderClient(server, session, permissionSetKey, ui, options);
+}
+
+function createClientTestServer() {
+  return createTestApp({
+    createServer: createStandaloneServer,
+    connections: ['main'],
+    config: {
+      logging: { enabled: false },
+      app: { publicOrigin: 'http://localhost' },
+      auth: {
+        secret: 'test-auth-secret-at-least-32-characters',
+        emailAndPassword: { disableSignUp: false },
+        advanced: { disableOriginCheck: false, disableCSRFCheck: false },
+      },
+    },
+  });
+}
+
+/**
+ * Reuse installation within a file whose tests only change their own identity's state.
+ * Each render gets a new user, session, grants, cookies and client. Tests that mutate
+ * shared application configuration or business data use renderAuthenticatedClient instead.
+ */
+export function createAuthenticatedClientRenderer() {
+  let server: TestApp | undefined;
+  beforeAll(async () => {
+    server = await createClientTestServer();
+  });
+  afterAll(async () => {
+    await server?.close();
+  });
+  return (
+    ui: ReactElement,
+    options: Parameters<typeof renderAuthenticatedClient>[1] = {},
+  ) => {
+    if (!server) throw new Error('The test application has not started.');
+    return renderAuthenticatedClient(ui, options, server);
+  };
+}
+
+async function renderClient(
+  server: TestApp,
+  session: TestSession,
+  permissionSetKey: string,
+  ui: ReactElement,
+  options: NonNullable<Parameters<typeof renderAuthenticatedClient>[1]>,
+) {
   await options.prepare?.(server, session);
   const jar = new CookieJar();
   const root = `http://localhost${server.publicBasePath.replace(/\/$/u, '')}`;
@@ -135,6 +182,7 @@ export async function renderAuthenticatedClient(
     ...view,
     server,
     session,
+    permissionSetKey,
     identity: () => identity!,
     async signInAs(credentials: SignInCredentials) {
       const next = await signIn(server, credentials);