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

package/tests/client/permission-management-tabs.test.tsx

@@ -1,12 +1,55 @@
+import packageMetadata from '../../package.json' with { type: 'json' };
 import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
-import { screen, waitFor } from '@testing-library/react';
+import { resolveAppClientContributions } from '@nocobase/app-client/plugins';
+import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Route, Routes, useLocation } from 'react-router';
+import { useState, type ReactNode } from 'react';
+import { RouteLeaveBoundary } from '../../client/routing/route-leave-boundary.js';
+import { Breadcrumbs } from '../../client/components/breadcrumbs.js';
+import { useSettingsData } from '../../client/pages/settings/hooks.js';
+import { authorizationToken } from '@nocobase/app-plugin-authorization/server';
+import { useSettingsLeave } from '../../client/pages/settings/hooks.js';
+import { BodyPortal } from '../../client/components/body-portal.js';
+import { ClientRoute } from '../../client/routing/client-route.js';
+import { authorizationClientToken } from '@nocobase/app-plugin-authorization/client';
+import {
+  Link,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from 'react-router';
 import { expect, it } from 'vitest';
 import { PermissionManagementPage } from '../../client/pages/settings/permission-management-page.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],
+  },
+]);
+
+/** The shell's route tree and permission check, as `AppLayout` provides them. */
+function Shell({ children }: { children: ReactNode }) {
+  const { denied, loading } = useRouteNavigation(routes);
+  return (
+    <RouteTreeProvider routes={routes} access={{ denied, loading }}>
+      <output aria-label='Permission check'>
+        {loading ? 'Checking' : 'Ready'}
+      </output>
+      <RouteLeaveBoundary hidden={loading}>{children}</RouteLeaveBoundary>
+    </RouteTreeProvider>
+  );
+}
 
 function mount(prefix: string, tab = 'roles', roles = true, locale = 'en-US') {
-  return renderAuthenticatedClient(tree(prefix), {
+  return renderAuthenticatedClient(<Shell>{tree(prefix)}</Shell>, {
     route: `${prefix}/${tab}`,
     locale,
     member: true,
@@ -41,8 +84,8 @@ function tree(prefix: string) {
     </Routes>
   );
 }
-it.each(['', '/settings'])(
-  'uses two URL-backed tabs under one heading, preserves the existing %s route prefix and keyboard focus',
+it.each(['/settings'])(
+  'uses two URL-backed tabs under one heading at the existing %s URLs and keeps keyboard focus',
   async (prefix) => {
     const user = userEvent.setup();
     await mount(prefix);
@@ -85,23 +128,385 @@ it.each(['', '/settings'])(
     );
   },
 );
-it('hides an unreadable tab while keeping direct navigation on the readable default scope page', async () => {
-  await mount('', 'default-access', false);
-  await screen.findByRole('tab', { name: 'Default data scopes' });
-  expect(
-    screen.queryByRole('tab', { name: 'Roles and permissions' }),
-  ).not.toBeInTheDocument();
-  expect(
-    screen.getByRole('tab', { name: 'Default data scopes' }),
-  ).toHaveAttribute('aria-selected', 'true');
+it('shows a readable view without a single-tab bar and keeps direct navigation on it', async () => {
+  await mount('/settings', 'default-access', false);
+  await screen.findByRole('heading', { name: 'Permission management' });
+  // The module has one view this viewer may open, so it shows that view without a tab bar.
+  await waitFor(() =>
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument(),
+  );
+  expect(screen.queryByRole('tab')).not.toBeInTheDocument();
   expect(screen.getByRole('status', { name: 'Route' })).toHaveTextContent(
-    '/default-access',
+    '/settings/default-access',
   );
 });
 it('uses the agreed Chinese menu and tab names', async () => {
-  await mount('', 'roles', true, 'zh-CN');
+  await mount('/settings', 'roles', true, 'zh-CN');
   await screen.findByRole('tab', { name: '角色与权限' });
   expect(screen.getByRole('heading', { name: '权限管理' })).toBeVisible();
   expect(screen.getByRole('tab', { name: '角色与权限' })).toBeVisible();
   expect(screen.getByRole('tab', { name: '默认数据范围' })).toBeVisible();
 });
+
+function Draft() {
+  const [value, setValue] = useState('');
+  const leave = useSettingsLeave(value !== '', false);
+  return (
+    <>
+      <input
+        aria-label='Draft'
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+      <BodyPortal>
+        <div aria-label='Draft overlay' role='dialog'>
+          {value}
+        </div>
+      </BodyPortal>
+      {leave.dialog}
+    </>
+  );
+}
+
+function DraftPage() {
+  return (
+    <PermissionManagementPage tab='roles'>
+      <Draft />
+    </PermissionManagementPage>
+  );
+}
+
+it.each([false, true])(
+  'preserves the mounted draft during permission rechecks (page guard: %s)',
+  async (guarded) => {
+    let hold = false;
+    let release!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const view = await renderAuthenticatedClient(
+      <Shell>
+        {guarded ? (
+          <ClientRoute
+            route={{
+              id: 'draft',
+              name: 'draft',
+              path: '/draft',
+              auth: 'required',
+              authz: 'unrestricted',
+              packageName: packageMetadata.name,
+              source: 'application',
+              componentLoader: async () => ({ default: DraftPage }),
+            }}
+          />
+        ) : (
+          <DraftPage />
+        )}
+      </Shell>,
+      {
+        route: '/settings/roles',
+        beforeRequest: async (request) => {
+          if (
+            hold &&
+            new URL(request.url).pathname.endsWith('/authorization/permissions')
+          )
+            await pending;
+        },
+      },
+    );
+    await screen.findByRole('tab', { name: 'Roles and permissions' });
+    const draft = screen.getByRole('textbox', { name: 'Draft' });
+    await userEvent.type(draft, 'Keep this unsaved value');
+    try {
+      hold = true;
+      act(() =>
+        view.app.container.resolve(authorizationClientToken).invalidate(),
+      );
+      await waitFor(() =>
+        expect(
+          screen.getByRole('status', { name: 'Permission check' }),
+        ).toHaveTextContent('Checking'),
+      );
+      expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+      expect(draft).toBeInTheDocument();
+      if (guarded) {
+        expect(draft).not.toBeVisible();
+        expect(
+          screen.queryByRole('dialog', { name: 'Draft overlay' }),
+        ).not.toBeInTheDocument();
+      }
+      expect(draft).toHaveValue('Keep this unsaved value');
+    } finally {
+      hold = false;
+      release();
+    }
+    await screen.findByRole('tab', { name: 'Roles and permissions' });
+    expect(screen.getByRole('textbox', { name: 'Draft' })).toBe(draft);
+    expect(draft).toHaveValue('Keep this unsaved value');
+  },
+);
+
+it.each(['tab', 'breadcrumb'])(
+  'protects an inline module draft when leaving by %s',
+  async (destination) => {
+    const user = userEvent.setup();
+    await renderAuthenticatedClient(
+      <Shell>
+        <Breadcrumbs />
+        <Routes>
+          <Route path='/settings/roles' element={<DraftPage />} />
+          <Route
+            path='/settings/default-access'
+            element={<Content tab='default-access' />}
+          />
+          <Route path='/settings' element={<h1>Settings destination</h1>} />
+        </Routes>
+      </Shell>,
+      { route: '/settings/roles' },
+    );
+    const draft = await screen.findByRole('textbox', { name: 'Draft' });
+    await user.type(draft, 'Unsaved inline draft');
+    const target =
+      destination === 'tab'
+        ? await screen.findByRole('tab', { name: 'Default data scopes' })
+        : screen.getByRole('link', { name: 'System settings' });
+    await user.click(target);
+    expect(await screen.findByRole('alertdialog')).toBeVisible();
+    await user.click(
+      screen.getByRole('button', { name: 'Cancel', exact: true }),
+    );
+    expect(draft).toHaveValue('Unsaved inline draft');
+    await user.click(target);
+    await user.click(
+      await screen.findByRole('button', { name: 'Confirm', exact: true }),
+    );
+    if (destination === 'tab')
+      await waitFor(() =>
+        expect(screen.getByRole('status', { name: 'Route' })).toHaveTextContent(
+          '/settings/default-access',
+        ),
+      );
+    else
+      expect(
+        await screen.findByRole('heading', { name: 'Settings destination' }),
+      ).toBeVisible();
+    expect(
+      screen.queryByRole('textbox', { name: 'Draft' }),
+    ).not.toBeInTheDocument();
+  },
+);
+
+function HistoryControls() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <>
+      <button onClick={() => navigate(-1)}>Browser back</button>
+      <output aria-label='Current URL'>{location.pathname}</output>
+    </>
+  );
+}
+function NestedDraft() {
+  const request = useSettingsData<{ data: unknown[] }>('users');
+  return (
+    <>
+      <DraftPage />
+      <output aria-label='Loaded users'>
+        {request.data ? 'Ready' : 'Loading'}
+      </output>
+    </>
+  );
+}
+const nestedRoute = {
+  id: 'nested-draft',
+  name: 'Nested draft',
+  path: '/settings/roles/test/edit',
+  auth: 'required',
+  authz: {
+    resource: { type: 'settings', id: 'authorization.permission-sets' },
+    action: 'read',
+  },
+  packageName: packageMetadata.name,
+  source: 'application',
+  componentLoader: async () => ({ default: NestedDraft }),
+} as const;
+const parentRoute = {
+  ...nestedRoute,
+  id: 'parent-draft',
+  path: '/settings/roles',
+  componentLoader: async () => ({ default: Outlet }),
+};
+function nestedTree() {
+  return (
+    <Shell>
+      <Breadcrumbs />
+      <HistoryControls />
+      <Routes>
+        <Route
+          path='/settings'
+          element={
+            <>
+              <h1>Settings destination</h1>
+              <Link to='/settings/roles/test/edit'>Edit role</Link>
+            </>
+          }
+        />
+        <Route
+          path='/settings/roles'
+          element={<ClientRoute route={parentRoute} />}
+        >
+          <Route
+            path='test/edit'
+            element={<ClientRoute route={nestedRoute} />}
+          />
+        </Route>
+      </Routes>
+    </Shell>
+  );
+}
+function beforeUnload() {
+  const event = new Event('beforeunload', { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+it.each(['breadcrumb', 'back'])(
+  'protects a nested hidden draft during a pending permission request: %s',
+  async (destination) => {
+    const pending = Promise.withResolvers<void>();
+    let hold = false;
+    const view = await renderAuthenticatedClient(nestedTree(), {
+      route: '/settings',
+      beforeRequest: (request) =>
+        hold && request.url.endsWith('/authorization/permissions')
+          ? pending.promise
+          : undefined,
+    });
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('link', { name: 'Edit role' }));
+    const draft = await screen.findByRole('textbox', { name: 'Draft' });
+    await user.type(draft, 'Nested unsaved draft');
+    hold = true;
+    act(() =>
+      view.app.container.resolve(authorizationClientToken).invalidate(),
+    );
+    try {
+      await waitFor(() => expect(draft).not.toBeVisible());
+      expect(beforeUnload()).toBe(true);
+      const leave = async () => {
+        await user.click(
+          destination === 'breadcrumb'
+            ? screen.getByRole('link', { name: 'System settings' })
+            : screen.getByRole('button', { name: 'Browser back' }),
+        );
+        expect(await screen.findByRole('alertdialog')).toBeVisible();
+      };
+      await leave();
+      await user.click(
+        screen.getByRole('button', { name: 'Cancel', exact: true }),
+      );
+      expect(
+        screen.getByRole('status', { name: 'Current URL' }),
+      ).toHaveTextContent('/settings/roles/test/edit');
+      expect(draft).toHaveValue('Nested unsaved draft');
+      expect(beforeUnload()).toBe(true);
+      await leave();
+      await user.click(
+        screen.getByRole('button', { name: 'Confirm', exact: true }),
+      );
+      expect(
+        await screen.findByRole('heading', { name: 'Settings destination' }),
+      ).toBeVisible();
+      expect(
+        screen.getByRole('status', { name: 'Current URL' }),
+      ).toHaveTextContent(/^\/settings$/);
+      await waitFor(() => expect(beforeUnload()).toBe(false));
+    } finally {
+      hold = false;
+      pending.resolve();
+    }
+  },
+);
+
+it('restores the draft and restarts only the mounted data effect after permission revalidation', async () => {
+  const requests: string[] = [];
+  const pending = Promise.withResolvers<void>();
+  let hold = false;
+  const view = await renderAuthenticatedClient(nestedTree(), {
+    route: '/settings/roles/test/edit',
+    beforeRequest(request) {
+      requests.push(new URL(request.url).pathname);
+      if (hold && request.url.endsWith('/authorization/permissions'))
+        return pending.promise;
+    },
+  });
+  const draft = await screen.findByRole('textbox', { name: 'Draft' });
+  await screen.findByText('Ready', { selector: '[aria-label="Loaded users"]' });
+  await userEvent.type(draft, 'Retained after cancel');
+  const count = (suffix: string) =>
+    requests.filter((path) => path.endsWith(suffix)).length;
+  const permissions = count('/authorization/permissions');
+  const users = count('/users');
+  hold = true;
+  act(() => view.app.container.resolve(authorizationClientToken).invalidate());
+  try {
+    await waitFor(() => expect(draft).not.toBeVisible());
+    expect(count('/users')).toBe(users);
+    await userEvent.click(
+      screen.getByRole('link', { name: 'System settings' }),
+    );
+    await userEvent.click(
+      await screen.findByRole('button', { name: 'Cancel', exact: true }),
+    );
+  } finally {
+    hold = false;
+    pending.resolve();
+  }
+  await waitFor(() => expect(draft).toBeVisible());
+  expect(screen.getByRole('textbox', { name: 'Draft' })).toBe(draft);
+  expect(draft).toHaveValue('Retained after cancel');
+  await waitFor(() => expect(count('/users')).toBe(users + 1));
+  expect(count('/authorization/permissions')).toBe(permissions + 1);
+  expect(beforeUnload()).toBe(true);
+});
+
+it('drops a hidden draft and its shell guard when the final permission result denies access', async () => {
+  const pending = Promise.withResolvers<void>();
+  let hold = false;
+  const view = await renderAuthenticatedClient(nestedTree(), {
+    route: '/settings/roles/test/edit',
+    member: true,
+    grants: [
+      {
+        resource: { type: 'settings', id: 'authorization.permission-sets' },
+        actions: [{ action: 'read' }],
+      },
+    ],
+    beforeRequest: (request) =>
+      hold && request.url.endsWith('/authorization/permissions')
+        ? pending.promise
+        : undefined,
+  });
+  const draft = await screen.findByRole('textbox', { name: 'Draft' });
+  await userEvent.type(draft, 'Must be discarded on denial');
+  hold = true;
+  act(() => view.app.container.resolve(authorizationClientToken).invalidate());
+  try {
+    await waitFor(() => expect(draft).not.toBeVisible());
+    expect(beforeUnload()).toBe(true);
+    await view.server.application.container
+      .resolve(authorizationToken)
+      .permissionSets.update('test-access', { key: 'test-access', grants: [] });
+  } finally {
+    hold = false;
+    pending.resolve();
+  }
+  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' }));
+  expect(
+    await screen.findByRole('heading', { name: 'Settings destination' }),
+  ).toBeVisible();
+  expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+});

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();
+  });
+});