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

package/tests/client/pending-button.test.tsx

@@ -0,0 +1,106 @@
+import { createRef } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { PendingButton } from '../../client/components/pending-button';
+import { useSubmission } from '@nocobase/app-client';
+
+function Editor({ operation }: { readonly operation: () => Promise<void> }) {
+  const submission = useSubmission({ scope: 'pending-button-test' });
+  return (
+    <form
+      aria-label='Editor'
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submission
+          .run({ name: 'Draft' }, operation)
+          .catch(() => undefined);
+      }}
+    >
+      <input aria-label='Name' defaultValue='Draft' />
+      <output data-testid='recoverable'>{String(submission.pending)}</output>
+      <PendingButton
+        type='submit'
+        busy={submission.submitting}
+        pendingLabel='Saving'
+      >
+        Save
+      </PendingButton>
+    </form>
+  );
+}
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+it('locks immediately, preserves native props/ref, announces once and clears on completion', () => {
+  const ref = createRef<HTMLButtonElement>();
+  const view = render(
+    <PendingButton
+      ref={ref}
+      form='editor'
+      type='submit'
+      busy={false}
+      pendingLabel='Saving changes'
+    >
+      Save
+    </PendingButton>,
+  );
+  expect(ref.current).toBe(
+    screen.getByRole('button', { name: 'Save', exact: true }),
+  );
+  view.rerender(
+    <PendingButton
+      ref={ref}
+      form='editor'
+      type='submit'
+      busy
+      pendingLabel='Saving changes'
+    >
+      Save
+    </PendingButton>,
+  );
+  expect(ref.current).toBeDisabled();
+  expect(ref.current).toHaveAttribute('aria-busy', 'true');
+  expect(ref.current).toHaveAttribute('form', 'editor');
+  expect(ref.current).toHaveAttribute('type', 'submit');
+  expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  act(() => vi.advanceTimersByTime(300));
+  expect(screen.getAllByRole('status')).toHaveLength(1);
+  expect(screen.getByRole('button', { name: 'Saving changes' })).toBeDisabled();
+  act(() => vi.advanceTimersByTime(9700));
+  expect(screen.getByRole('status')).toHaveTextContent(
+    'This is taking longer than usual',
+  );
+  view.rerender(
+    <PendingButton busy={false} disabled pendingLabel='Saving changes'>
+      Save
+    </PendingButton>,
+  );
+  expect(
+    screen.getByRole('button', { name: 'Save', exact: true }),
+  ).toBeDisabled();
+  expect(screen.queryByRole('status')).not.toBeInTheDocument();
+});
+
+it('shares the submission lock across click and form submission, retains input on failure and permits retry', async () => {
+  vi.useRealTimers();
+  let reject!: (error: Error) => void;
+  const operation = vi.fn(
+    () =>
+      new Promise<void>((_, fail) => {
+        reject = fail;
+      }),
+  );
+  render(<Editor operation={operation} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Save', exact: true }));
+  fireEvent.submit(screen.getByRole('form', { name: 'Editor' }));
+  expect(operation).toHaveBeenCalledTimes(1);
+  await act(async () => reject(new Error('Rejected')));
+  expect(screen.getByRole('textbox')).toHaveValue('Draft');
+  expect(screen.getByTestId('recoverable')).toHaveTextContent('true');
+  expect(
+    screen.getByRole('button', { name: 'Save', exact: true }),
+  ).toBeEnabled();
+  fireEvent.submit(screen.getByRole('form', { name: 'Editor' }));
+  expect(operation).toHaveBeenCalledTimes(2);
+  await act(async () => reject(new Error('Rejected again')));
+});

package/tests/client/permission-management-tabs.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 { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -27,6 +27,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,
@@ -266,10 +268,15 @@ it.each(['tab', 'breadcrumb'])(
     );
     const draft = await screen.findByRole('textbox', { name: 'Draft' });
     await user.type(draft, 'Unsaved inline draft');
+    await waitFor(() =>
+      expect(
+        screen.getByRole('status', { name: 'Permission check' }),
+      ).toHaveTextContent('Ready'),
+    );
     const target =
       destination === 'tab'
         ? await screen.findByRole('tab', { name: 'Default data scopes' })
-        : screen.getByRole('link', { name: 'System settings' });
+        : await screen.findByRole('link', { name: 'System settings' });
     await user.click(target);
     expect(await screen.findByRole('alertdialog')).toBeVisible();
     await user.click(
@@ -302,6 +309,7 @@ function HistoryControls() {
   return (
     <>
       <button onClick={() => navigate(-1)}>Browser back</button>
+      <button onClick={() => navigate('/settings')}>Open settings</button>
       <output aria-label='Current URL'>{location.pathname}</output>
     </>
   );
@@ -371,7 +379,7 @@ function beforeUnload() {
 }
 
 it.each(['breadcrumb', 'back'])(
-  'protects a nested hidden draft during a pending permission request: %s',
+  'protects a nested draft when leaving across a permission recheck: %s',
   async (destination) => {
     const pending = Promise.withResolvers<void>();
     let hold = false;
@@ -393,15 +401,33 @@ it.each(['breadcrumb', 'back'])(
     try {
       await waitFor(() => expect(draft).not.toBeVisible());
       expect(beforeUnload()).toBe(true);
-      const leave = async () => {
+      expect(
+        screen.queryByRole('link', { name: 'System settings' }),
+      ).not.toBeInTheDocument();
+      // Permission-sensitive breadcrumbs are absent during the check. Exercise
+      // the same destination through the router, then the real breadcrumb after recovery.
+      const leave = async (duringRecheck = false) => {
         await user.click(
           destination === 'breadcrumb'
-            ? screen.getByRole('link', { name: 'System settings' })
+            ? duringRecheck
+              ? screen.getByRole('button', { name: 'Open settings' })
+              : await screen.findByRole('link', { name: 'System settings' })
             : screen.getByRole('button', { name: 'Browser back' }),
         );
-        expect(await screen.findByRole('alertdialog')).toBeVisible();
       };
+      await leave(true);
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('status', { name: 'Current URL' }),
+      ).toHaveTextContent('/settings/roles/test/edit');
+      expect(beforeUnload()).toBe(true);
+      hold = false;
+      pending.resolve();
+      await waitFor(() => expect(draft).toBeVisible());
+      expect(draft).toHaveValue('Nested unsaved draft');
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
       await leave();
+      expect(await screen.findByRole('alertdialog')).toBeVisible();
       await user.click(
         screen.getByRole('button', { name: 'Cancel', exact: true }),
       );
@@ -452,12 +478,17 @@ it('restores the draft and restarts only the mounted data effect after permissio
   try {
     await waitFor(() => expect(draft).not.toBeVisible());
     expect(count('/users')).toBe(users);
+    expect(
+      screen.queryByRole('link', { name: 'System settings' }),
+    ).not.toBeInTheDocument();
     await userEvent.click(
-      screen.getByRole('link', { name: 'System settings' }),
-    );
-    await userEvent.click(
-      await screen.findByRole('button', { name: 'Cancel', exact: true }),
+      screen.getByRole('button', { name: 'Open settings' }),
     );
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('status', { name: 'Current URL' }),
+    ).toHaveTextContent('/settings/roles/test/edit');
+    expect(beforeUnload()).toBe(true);
   } finally {
     hold = false;
     pending.resolve();
@@ -496,7 +527,10 @@ it('drops a hidden draft and its shell guard when the final permission result de
     expect(beforeUnload()).toBe(true);
     await view.server.application.container
       .resolve(authorizationToken)
-      .permissionSets.update('test-access', { key: 'test-access', grants: [] });
+      .permissionSets.update(view.permissionSetKey, {
+        key: view.permissionSetKey,
+        grants: [],
+      });
   } finally {
     hold = false;
     pending.resolve();
@@ -504,7 +538,9 @@ it('drops a hidden draft and its shell guard when the final permission result de
   expect(await screen.findByText('Access denied')).toBeVisible();
   expect(draft).not.toBeInTheDocument();
   await waitFor(() => expect(beforeUnload()).toBe(false));
-  await userEvent.click(screen.getByRole('link', { name: 'System settings' }));
+  await userEvent.click(
+    await screen.findByRole('link', { name: 'System settings' }),
+  );
   expect(
     await screen.findByRole('heading', { name: 'Settings destination' }),
   ).toBeVisible();

package/tests/client/primitive-labels.test.tsx

@@ -82,7 +82,7 @@ describe('labels built into the shipped primitives', () => {
     expect(close).toHaveAttribute('data-slot', 'toast-close');
   });
 
-  it('labels brand loading and allows decorative inline indicators', () => {
+  it('labels brand loading and allows decorative inline indicators', async () => {
     const { rerender } = render(<BrandSpinner />, { wrapper: I18n });
     expect(
       screen.getByRole('status', { name: zhCN['status.loading'] }),
@@ -91,7 +91,7 @@ describe('labels built into the shipped primitives', () => {
     expect(screen.queryByRole('status')).not.toBeInTheDocument();
     rerender(<Loading label='正在加载客户' />);
     expect(
-      screen.getByRole('status', { name: '正在加载客户' }),
+      await screen.findByRole('status', { name: '正在加载客户' }),
     ).toHaveTextContent('正在加载客户');
   });
 

package/tests/client/role-return.test.tsx

@@ -1,3 +1,5 @@
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { RouteTreeProvider } from '../../client/routing/route-context.js';
 import { renderSettingsClient as renderWithApp } from '../helpers/settings-client.js';
 import { answerApi } from '@nocobase/app-testing/client';
 import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
@@ -14,8 +16,24 @@ import enUS from '../../client/locales/en-US.js';
 import zhCN from '../../client/locales/zh-CN.js';
 
 const namespace = '@nocobase/role-return-test';
-function Parent() {
-  return <Outlet context={{ reload: () => undefined }} />;
+function Parent({ path }: { path: string }) {
+  const routes: AppClientRegisteredRoute[] = [
+    {
+      id: 'roles',
+      name: 'roles',
+      path,
+      packageName: namespace,
+      source: 'application',
+      auth: 'required',
+      authz: 'skip',
+      componentLoader: async () => ({ default: () => null }),
+    },
+  ];
+  return (
+    <RouteTreeProvider routes={routes}>
+      <Outlet context={{ reload: () => undefined }} />
+    </RouteTreeProvider>
+  );
 }
 function Location() {
   const { pathname, search } = useLocation();
@@ -50,7 +68,7 @@ it.each(
   const result = await renderWithApp(
     <>
       <Routes>
-        <Route path={parent} element={<Parent />}>
+        <Route path={parent} element={<Parent path={parent} />}>
           <Route index element={<h1>Role list</h1>} />
           <Route path=':key/edit' element={<RoleForm />} />
         </Route>

package/tests/client/roles.test.tsx

@@ -4,10 +4,10 @@ import {
   AuthorizationClient,
   authorizationClientToken,
 } from '@nocobase/app-plugin-authorization/client';
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Routes, Route } from 'react-router';
-import { expect, it } from 'vitest';
+import { Routes, Route, useNavigate } from 'react-router';
+import { expect, it, vi } from 'vitest';
 import RolesPage from '../../client/pages/settings/roles.js';
 import enUS from '../../client/locales/en-US.js';
 import zhCN from '../../client/locales/zh-CN.js';
@@ -83,3 +83,84 @@ it('keeps the standard role table sorted, searchable and linked to the current q
     '/settings/roles/cp-customer/edit?q=Customer',
   );
 });
+
+function Navigate({ to, label }: { to: string; label: string }) {
+  const navigate = useNavigate();
+  return (
+    <button type='button' onClick={() => void navigate(to)}>
+      {label}
+    </button>
+  );
+}
+
+it('announces a slow retry after a refresh failure once, from the retry button', async () => {
+  const user = userEvent.setup();
+  const roles = { data: [{ key: 'team', title: 'NocoBase team', grants: [] }] };
+  let reads = 0;
+  let finish!: () => void;
+  const slow = new Promise<void>((resolve) => {
+    finish = resolve;
+  });
+  await renderWithApp(
+    <>
+      <Routes>
+        <Route path='/settings/roles' element={<RolesPage />}>
+          <Route
+            path='covered'
+            element={<Navigate to='/settings/roles' label='Back to roles' />}
+          />
+        </Route>
+      </Routes>
+      <Navigate to='/settings/roles/covered' label='Cover roles' />
+    </>,
+    {
+      route: '/settings/roles',
+      namespace: settingsNamespace,
+      namespaces,
+      services,
+      fetch: answerApi(async ({ path }) => {
+        if (path === 'authorization/permissions')
+          return { data: { unrestricted: true, permissions: [] } };
+        reads += 1;
+        if (reads === 2)
+          return Response.json(
+            { error: { status: 'INTERNAL', message: 'Unavailable' } },
+            { status: 500 },
+          );
+        if (reads === 3) await slow;
+        return roles;
+      }),
+    },
+  );
+  await screen.findByTitle('NocoBase team');
+  // Returning from a covering route reads the list again; that read fails.
+  await user.click(screen.getByRole('button', { name: 'Cover roles' }));
+  await user.click(
+    await screen.findByRole('button', { name: 'Back to roles' }),
+  );
+  await screen.findByText(enUS.listFeedback.refreshFailed);
+  vi.useFakeTimers();
+  try {
+    await act(async () => {
+      screen.getByRole('button', { name: enUS.listFeedback.retry }).click();
+    });
+    await act(() => vi.advanceTimersByTimeAsync(300));
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+    expect(
+      screen.getByRole('button', { name: enUS.listFeedback.retrying }),
+    ).toBeDisabled();
+    expect(screen.getByTitle('NocoBase team')).toBeVisible();
+    await act(async () => {
+      finish();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+  } finally {
+    vi.useRealTimers();
+  }
+  await waitFor(() =>
+    expect(
+      screen.queryByText(enUS.listFeedback.refreshFailed),
+    ).not.toBeInTheDocument(),
+  );
+  expect(screen.queryByRole('status')).not.toBeInTheDocument();
+});

package/tests/client/route-leave-recheck.test.tsx

@@ -0,0 +1,74 @@
+import { Activity, useState, useLayoutEffect } from 'react';
+import { Link, Route, Routes, useLocation } from 'react-router';
+import { renderWithApp } from '@nocobase/app-testing/client';
+import { act, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it } from 'vitest';
+import {
+  RouteLeaveBoundary,
+  usePageLeave,
+} from '../../client/routing/route-leave-boundary.js';
+import enUS from '../../client/locales/en-US.js';
+import metadata from '../../package.json' with { type: 'json' };
+
+it('cancels a shell leave confirmation on concealment and requires a fresh decision after recovery', async () => {
+  let conceal: (hidden: boolean) => void;
+  function Editor() {
+    const leave = usePageLeave(true, false);
+    return (
+      <>
+        <p>Unsaved editor</p>
+        {leave.dialog}
+      </>
+    );
+  }
+  function Harness() {
+    const [hidden, setHidden] = useState(false);
+    useLayoutEffect(() => {
+      conceal = setHidden;
+    }, []);
+    return (
+      <RouteLeaveBoundary hidden={hidden}>
+        <Link to='/other'>Leave page</Link>
+        <output data-testid='location'>{useLocation().pathname}</output>
+        <Routes>
+          <Route
+            path='/editor'
+            element={
+              <Activity mode={hidden ? 'hidden' : 'visible'}>
+                <Editor />
+              </Activity>
+            }
+          />
+          <Route path='/other' element={<p>Other page</p>} />
+        </Routes>
+      </RouteLeaveBoundary>
+    );
+  }
+  const user = userEvent.setup();
+  await renderWithApp(<Harness />, {
+    route: '/editor',
+    namespace: metadata.name,
+    namespaces: { [metadata.name]: enUS },
+  });
+  await user.click(screen.getByRole('link', { name: 'Leave page' }));
+  await screen.findByRole('alertdialog');
+  await act(async () => conceal(true));
+  expect(screen.queryByRole('alertdialog')).toBeNull();
+  await user.click(screen.getByRole('link', { name: 'Leave page' }));
+  expect(screen.getByTestId('location')).toHaveTextContent('/editor');
+  const unload = new Event('beforeunload', { cancelable: true });
+  window.dispatchEvent(unload);
+  expect(unload.defaultPrevented).toBe(true);
+  await act(async () => conceal(false));
+  expect(screen.getByText('Unsaved editor')).toBeVisible();
+  expect(screen.getByTestId('location')).toHaveTextContent('/editor');
+  expect(screen.queryByRole('alertdialog')).toBeNull();
+  await user.click(screen.getByRole('link', { name: 'Leave page' }));
+  const question = await screen.findByRole('alertdialog');
+  await user.click(within(question).getByRole('button', { name: 'Confirm' }));
+  await waitFor(() => expect(screen.getByText('Other page')).toBeVisible());
+  const after = new Event('beforeunload', { cancelable: true });
+  window.dispatchEvent(after);
+  expect(after.defaultPrevented).toBe(false);
+});