@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.69

package/tests/components/sidebar-preference.test.tsx

@@ -1,42 +1,237 @@
-import { act, renderHook } from '@testing-library/react';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { useSidebarPreference } from '../../client/layouts/use-sidebar-preference';
+import { createApp } from '../../client/app.js';
+import { createAppClientConfig } from '@nocobase/app-client';
+import { defineClientPlugins } from '@nocobase/app-client/plugins';
+import {
+  defineAppRuntime,
+  resolveAppRuntime,
+} from '@nocobase/app-client/runtime';
+import { createElement, type PropsWithChildren } from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  createSidebarPreferenceStore,
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+  useSidebarPreference,
+} from '../../client/layouts/use-sidebar-preference.js';
+import {
+  SidebarProvider,
+  useSidebar,
+} from '../../client/components/ui/sidebar.js';
 
-const key = 'nocobase:sidebar:collapsed';
+const key = 'nocobase:sidebar:collapsed:app:/main';
+function wrapper(store: ReturnType<typeof createSidebarPreferenceStore>) {
+  return function PreferenceWrapper({ children }: PropsWithChildren) {
+    return createElement(SidebarPreferenceProvider, { value: store }, children);
+  };
+}
+function hook(scope = 'app:/main') {
+  return renderHook(() => useSidebarPreference(), {
+    wrapper: wrapper(createSidebarPreferenceStore(scope)),
+  });
+}
 
-describe('shared sidebar preference', () => {
-  beforeEach(() => localStorage.clear());
+describe('application sidebar preference', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
 
   it('shares changes across layouts and restores them after remount', () => {
-    const first = renderHook(() => useSidebarPreference());
-    const second = renderHook(() => useSidebarPreference());
+    const first = hook();
+    const second = hook();
     expect(first.result.current[0]).toBe(false);
     act(() => first.result.current[1]((value) => !value));
     expect(second.result.current[0]).toBe(true);
     expect(localStorage.getItem(key)).toBe('true');
     first.unmount();
     second.unmount();
-    const restored = renderHook(() => useSidebarPreference());
+    const restored = hook();
     expect(restored.result.current[0]).toBe(true);
     act(() => restored.result.current[1](false));
     expect(localStorage.getItem(key)).toBe('false');
   });
 
-  it('reads saved state and follows storage changes from another tab', () => {
+  it('follows its own cross-tab events and clear, ignoring other application keys', () => {
     localStorage.setItem(key, 'true');
-    const { result } = renderHook(() => useSidebarPreference());
+    const { result } = hook();
     expect(result.current[0]).toBe(true);
     act(() => {
       localStorage.removeItem(key);
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: 'nocobase:sidebar:collapsed:app:/other',
+        }),
+      );
+    });
+    expect(result.current[0]).toBe(true);
+    act(() => window.dispatchEvent(new StorageEvent('storage', { key })));
+    expect(result.current[0]).toBe(false);
+    act(() => {
+      localStorage.setItem(key, 'true');
       window.dispatchEvent(new StorageEvent('storage', { key }));
     });
+    expect(result.current[0]).toBe(true);
+    act(() => {
+      localStorage.clear();
+      window.dispatchEvent(new StorageEvent('storage', { key: null }));
+    });
     expect(result.current[0]).toBe(false);
   });
 
-  it('defaults to expanded for an invalid stored value', () => {
-    localStorage.setItem(key, 'invalid');
-    expect(renderHook(() => useSidebarPreference()).result.current[0]).toBe(
+  it.each(['false', 'invalid'])(
+    'defaults to expanded for stored %s',
+    (value) => {
+      localStorage.setItem(key, value);
+      expect(hook().result.current[0]).toBe(false);
+    },
+  );
+
+  it('does not migrate the old shared preference', () => {
+    localStorage.setItem('nocobase:sidebar:collapsed', 'true');
+    expect(hook().result.current[0]).toBe(false);
+    expect(localStorage.getItem(key)).toBeNull();
+  });
+
+  it('isolates Studio and multiple applications, including an application named studio', () => {
+    const scopes = ['studio', 'app:/studio', 'app:/a', 'app:/b'];
+    const hooks = scopes.map((scope) => hook(scope));
+    hooks.forEach((item, index) => {
+      act(() => item.result.current[1](true));
+      hooks.forEach((other, otherIndex) =>
+        expect(other.result.current[0]).toBe(otherIndex <= index),
+      );
+      scopes.forEach((scope, otherIndex) =>
+        expect(
+          localStorage.getItem(`nocobase:sidebar:collapsed:${scope}`),
+        ).toBe(otherIndex <= index ? 'true' : null),
+      );
+    });
+    act(() => hooks[0].result.current[1](false));
+    expect(hooks.map((item) => item.result.current[0])).toEqual([
       false,
+      true,
+      true,
+      true,
+    ]);
+  });
+
+  it('isolates memory fallback when storage writes fail', () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('blocked');
+    });
+    const store = createSidebarPreferenceStore('app:/blocked');
+    const first = renderHook(() => useSidebarPreference(), {
+      wrapper: wrapper(store),
+    });
+    const second = renderHook(() => useSidebarPreference(), {
+      wrapper: wrapper(store),
+    });
+    const other = hook('app:/other');
+    act(() => first.result.current[1](true));
+    expect(second.result.current[0]).toBe(true);
+    expect(other.result.current[0]).toBe(false);
+    act(() => other.result.current[1](true));
+    act(() => first.result.current[1](false));
+    expect(second.result.current[0]).toBe(false);
+    expect(other.result.current[0]).toBe(true);
+  });
+
+  it('does not write a shared cookie when the real SidebarProvider toggles', () => {
+    const cookie = vi.spyOn(document, 'cookie', 'set');
+    function Toggle() {
+      const { toggleSidebar, state } = useSidebar();
+      return <button onClick={toggleSidebar}>{state}</button>;
+    }
+    render(
+      <SidebarProvider>
+        <Toggle />
+      </SidebarProvider>,
     );
+    fireEvent.click(screen.getByRole('button', { name: 'expanded' }));
+    expect(
+      screen.getByRole('button', { name: 'collapsed' }),
+    ).toBeInTheDocument();
+    expect(cookie).not.toHaveBeenCalled();
+  });
+});
+
+describe('runtime sidebar scope', () => {
+  it.each(['', '/', '///', 'a', '/a/', '/Team/Nested///'])(
+    'normalizes only boundary slashes for %s',
+    (basename) => {
+      localStorage.clear();
+      const store = createAppSidebarPreferenceStore(basename);
+      store.setCollapsed(true);
+      const normalized = '/' + basename.replace(/^\/+|\/+$/g, '');
+      expect(
+        localStorage.getItem(`nocobase:sidebar:collapsed:app:${normalized}`),
+      ).toBe('true');
+    },
+  );
+
+  it('provides stable, independent stores from each actual runtime basename', async () => {
+    localStorage.clear();
+    async function application(basename: string) {
+      const runtime = await resolveAppRuntime(
+        defineAppRuntime({
+          packageName: '@example/app',
+          createAppConfig: createAppClientConfig,
+          serviceProviders: [],
+          reactProviders: [],
+          routes: [],
+          plugins: defineClientPlugins([]),
+        }),
+        { rawConfig: { app: { basePath: basename } } },
+      );
+      const app = createApp(runtime);
+      await app.start();
+      return app;
+    }
+    const a = await application('/studio');
+    const b = await application('/Team/Nested');
+    try {
+      const providerA = a.renderConfig.reactProviders![1];
+      const providerB = b.renderConfig.reactProviders![1];
+      const first = renderHook(() => useSidebarPreference(), {
+        wrapper: providerA,
+      });
+      const second = renderHook(() => useSidebarPreference(), {
+        wrapper: providerA,
+      });
+      const other = renderHook(() => useSidebarPreference(), {
+        wrapper: providerB,
+      });
+      act(() => first.result.current[1](true));
+      expect(second.result.current[0]).toBe(true);
+      expect(other.result.current[0]).toBe(false);
+      expect(
+        localStorage.getItem('nocobase:sidebar:collapsed:app:/studio'),
+      ).toBe('true');
+      act(() => other.result.current[1](true));
+      expect(
+        localStorage.getItem('nocobase:sidebar:collapsed:app:/Team/Nested'),
+      ).toBe('true');
+      first.unmount();
+      second.unmount();
+      other.unmount();
+    } finally {
+      await a.shutdown();
+      await b.shutdown();
+    }
   });
 });

package/tests/components/status-badge.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { StatusBadge } from '#components/status-badge';
+
+// The two badge sizes are drawn by client/styles.css from `data-size`, which jsdom does not apply, so this checks the
+// attribute that selects them.
+describe('StatusBadge', () => {
+  it('is the default badge unless asked for the small one', () => {
+    render(
+      <>
+        <StatusBadge tone='success'>Done</StatusBadge>
+        <StatusBadge tone='warning' size='sm'>
+          Waiting
+        </StatusBadge>
+      </>,
+    );
+    expect(screen.getByText('Done')).not.toHaveAttribute('data-size');
+    expect(screen.getByText('Waiting')).toHaveAttribute('data-size', 'sm');
+    expect(screen.getByText('Waiting')).toHaveAttribute('data-slot', 'badge');
+  });
+});

package/tests/components/user-permissions.test.tsx

@@ -0,0 +1,142 @@
+import { answerApi, renderWithApp } from '@nocobase/app-testing/client';
+import { apiClientToken, type ClientApplication } from '@nocobase/app-client';
+import {
+  AuthorizationClient,
+  authorizationClientToken,
+  type PermissionGrant,
+} from '@nocobase/app-plugin-authorization/client';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Routes, Route } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+import RoleForm from '../../client/pages/settings/role-form.js';
+import RolesPage from '../../client/pages/settings/roles.js';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+
+const namespace = '@nocobase/user-permissions-test';
+const namespaces = {
+  [namespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+
+describe('user permission configuration', () => {
+  it.each(['en-US', 'zh-CN'] as const)(
+    'saves, reloads and revokes the missing actions in %s without replacing existing grants',
+    async (locale) => {
+      const user = userEvent.setup();
+      const words = locale === 'zh-CN' ? zhCN.settings : enUS.settings;
+      const role = {
+        key: 'operators',
+        title: 'Operators',
+        revision: 'original',
+        grants: [
+          {
+            resource: { type: 'user', id: '*' },
+            actions: [{ action: 'read' }, { action: 'disable' }],
+          },
+        ] as readonly PermissionGrant[],
+      };
+      const calls = vi.fn(
+        ({
+          path,
+          method,
+          json,
+        }: {
+          path: string;
+          method: string;
+          json?: {
+            grants: readonly PermissionGrant[];
+            expectedRevision?: string;
+          };
+        }) => {
+          if (path === 'authorization/permissions')
+            return { data: { unrestricted: true, permissions: [] } };
+          if (path.endsWith('/options'))
+            return {
+              data: {
+                sections: [],
+                recordAccess: [],
+                subjectTypes: [],
+                collections: [],
+              },
+            };
+          if (path === 'authorization/permissionSets') return { data: [role] };
+          if (method === 'PATCH' && json) {
+            role.grants = json.grants;
+            role.revision = 'updated';
+          }
+          return { data: role };
+        },
+      );
+      const mount = () =>
+        renderWithApp(
+          <Routes>
+            <Route path='/settings/roles' element={<RolesPage />}>
+              <Route path=':key/edit' element={<RoleForm />} />
+            </Route>
+          </Routes>,
+          {
+            route: '/settings/roles/operators/edit',
+            namespace,
+            namespaces,
+            locale,
+            services: (app: ClientApplication) =>
+              app.container.instance(
+                authorizationClientToken,
+                new AuthorizationClient(app.container.resolve(apiClientToken)),
+              ),
+            fetch: answerApi(calls),
+          },
+        );
+      const first = await mount();
+      const labels = [
+        words.inviteUsers,
+        words.deleteUsers,
+        words.resetUserPassword,
+      ];
+      for (const label of labels) {
+        const checkbox = await screen.findByRole('checkbox', { name: label });
+        await waitFor(() =>
+          expect(checkbox).not.toHaveAttribute('aria-disabled', 'true'),
+        );
+        expect(checkbox).not.toBeChecked();
+        await user.click(checkbox);
+      }
+      await user.click(
+        screen.getByRole('button', { name: words.save, exact: true }),
+      );
+      await waitFor(() =>
+        expect(calls).toHaveBeenCalledWith(
+          expect.objectContaining({
+            method: 'PATCH',
+            json: expect.objectContaining({ expectedRevision: 'original' }),
+          }),
+        ),
+      );
+      const all = ['read', 'disable', 'invite', 'delete', 'reset-password'];
+      expect(role.grants[0]?.actions.map((action) => action.action)).toEqual(
+        all,
+      );
+      first.unmount();
+      await mount();
+      for (const label of labels)
+        expect(
+          await screen.findByRole('checkbox', { name: label }),
+        ).toBeChecked();
+      await user.click(
+        screen.getByRole('checkbox', { name: words.deleteUsers }),
+      );
+      await user.click(
+        screen.getByRole('button', { name: words.save, exact: true }),
+      );
+      await waitFor(() =>
+        expect(role.grants[0]?.actions.map((action) => action.action)).toEqual(
+          all.filter((action) => action !== 'delete'),
+        ),
+      );
+    },
+  );
+});

package/tests/fixtures/theme-tokens.tsx

@@ -1,3 +1,7 @@
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import { Refine } from '@refinedev/core';
 import { createRoot } from 'react-dom/client';
 import { MemoryRouter } from 'react-router';
@@ -114,5 +118,9 @@ export default function Fixture() {
 }
 
 const root = createRoot(document.getElementById('root')!);
-root.render(<Fixture />);
+root.render(
+  <SidebarPreferenceProvider value={createAppSidebarPreferenceStore('/main')}>
+    <Fixture />
+  </SidebarPreferenceProvider>,
+);
 import.meta.hot?.dispose(() => root.unmount());

package/tests/logic/asset-url-build.test.ts

@@ -55,7 +55,6 @@ describe('asset URLs in the application build', () => {
     'uses the compiled asset base while keeping API URLs on the runtime mount (%s)',
     async (cdn) => {
       vi.stubEnv('CDN_BASE_URL', cdn);
-      vi.stubEnv('AGENT_ANNOTATIONS_ENABLED', 'false');
       // The same build must work when the deployment chooses a different mount path.
       vi.stubEnv('APP_BASE_PATH', '/build-machine');
       const result = await build({

package/tests/logic/client-routes.test.ts

@@ -5,6 +5,7 @@ import {
 } from '@nocobase/app-client/plugins';
 import { describe, expect, it } from 'vitest';
 
+import systemSettingsRoutes from '../../client/pages/settings/routes.js';
 import applicationRoutes from '../../client/routes.ts';
 
 describe('app client routes', () => {
@@ -57,6 +58,45 @@ describe('app client routes', () => {
     ]);
   });
 
+  it('keeps a bare application home-only and supports settings registration as business capabilities are developed', async () => {
+    expect(
+      pagePaths(resolveRoutes().routes).some((path) =>
+        path.startsWith('/settings'),
+      ),
+    ).toBe(false);
+    const built = resolveAppClientContributions([
+      {
+        packageName: '@nocobase/app-template-default',
+        routes: [...applicationRoutes, systemSettingsRoutes],
+        source: 'application',
+      },
+    ]);
+    expect(pageAuthorizations(built.routes)).toEqual([
+      { name: 'home', authorizedAs: null },
+      { name: 'inbox', authorizedAs: null },
+      { name: 'settingsUsers', authorizedAs: 'user:*' },
+      { name: 'settingsUserCreate', authorizedAs: 'user:*' },
+      { name: 'settingsUser', authorizedAs: 'user:*' },
+      { name: 'settingsUserEdit', authorizedAs: 'user:*' },
+      {
+        name: 'settingsRoles',
+        authorizedAs: 'settings:authorization.permission-sets',
+      },
+      {
+        name: 'settingsRoleCreate',
+        authorizedAs: 'settings:authorization.permission-sets',
+      },
+      {
+        name: 'settingsRoleEdit',
+        authorizedAs: 'settings:authorization.permission-sets',
+      },
+    ]);
+    for (const loader of componentLoadersIn(built.routes))
+      await expect(loader()).resolves.toMatchObject({
+        default: expect.any(Function),
+      });
+  });
+
   it('keeps the inbox out of the application navigation', () => {
     // The inbox is reached from the header's inbox button, so it deliberately declares no menu entry.
     expect(

package/tests/logic/client-shell.test.tsx

@@ -1,3 +1,7 @@
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import {
   apiClientToken,
   ClientApplicationContext,
@@ -305,7 +309,11 @@ function renderApplication(
       <AuthenticationProvider>
         <MemoryRouter initialEntries={[initialEntry]}>
           <AppThemeProvider>
-            <AppRouter clientRoutes={clientRoutes} />
+            <SidebarPreferenceProvider
+              value={createAppSidebarPreferenceStore('/main')}
+            >
+              <AppRouter clientRoutes={clientRoutes} />
+            </SidebarPreferenceProvider>
           </AppThemeProvider>
         </MemoryRouter>
       </AuthenticationProvider>
@@ -318,7 +326,7 @@ function createTestAuthClient(authenticated: boolean) {
     getSession: vi.fn().mockResolvedValue({
       data: authenticated
         ? {
-            session: null,
+            session: { id: 'session-1' },
             user: {
               email: 'alice@example.com',
               id: '1',

package/tests/logic/config-example.test.ts

@@ -0,0 +1,30 @@
+// @vitest-environment node
+
+import { readFile } from 'node:fs/promises';
+
+import { describe, expect, it } from 'vitest';
+
+// `pnpm nocobase config init` writes config.yml from this file: it replaces the instruction on the first line with
+// its own header and fills the placeholder key of the live `secrets` section, keeping everything else verbatim. These
+// are the parts of the example it relies on.
+describe('config.example.yml', () => {
+  const read = () =>
+    readFile(new URL('../../config.example.yml', import.meta.url), 'utf8');
+
+  it('opens with the instruction config init replaces', async () => {
+    expect((await read()).split('\n')[0]).toMatch(
+      /^# Copy this file to config\.yml\b/u,
+    );
+  });
+
+  it('carries a live secrets section whose first key is a placeholder', async () => {
+    expect(await read()).toContain(
+      [
+        'secrets:',
+        '  keys:',
+        '    - version: 1',
+        '      key: replace-with-a-unique-secret',
+      ].join('\n'),
+    );
+  });
+});

package/tests/logic/dev-client-watch.test.ts

@@ -60,7 +60,8 @@ describe('development client file watching', () => {
       'junction',
     );
 
-    vi.stubEnv('AGENT_ANNOTATIONS_ENABLED', 'false');
+    // A leftover opt-in from an existing application must not restore the removed toolbar.
+    vi.stubEnv('AGENT_ANNOTATIONS_ENABLED', 'true');
     vi.stubEnv('PROXY_TARGET_URL', '');
     // `pnpm dev` always passes the mount path; the Vite preset refuses to serve without one.
     vi.stubEnv('APP_BASE_PATH', '/main');
@@ -77,6 +78,12 @@ describe('development client file watching', () => {
         watch: { usePolling: true, interval: 20 },
       },
     });
+    const html = await server.transformIndexHtml(
+      '/main/',
+      '<!doctype html><html><head></head><body></body></html>',
+    );
+    expect(html).not.toContain('agent-annotations');
+
     const watcher = server.watcher;
     const changes: string[] = [];
     watcher.on('change', (file) => changes.push(file));

package/tests/logic/route-overlay.test.tsx

@@ -4,6 +4,7 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
@@ -158,6 +159,47 @@ describe('route overlays', () => {
   });
 });
 
+describe('route overlay presentation', () => {
+  it('composes the dialog primitives so it follows the dialog styles', async () => {
+    setup();
+    const dialog = await screen.findByRole('dialog', { name: 'Edit' });
+    expect(dialog).toHaveAttribute('data-slot', 'route-overlay-content');
+    expect(dialog).toHaveAttribute('data-presentation', 'dialog');
+    const header = dialog.querySelector(
+      ':scope > [data-slot="route-overlay-header"] > [data-slot="dialog-header"]',
+    );
+    expect(
+      header?.querySelector('[data-slot="dialog-title"]'),
+    ).toHaveTextContent('Edit');
+    expect(
+      dialog.querySelector(':scope > [data-slot="route-overlay-body"]'),
+    ).toContainElement(screen.getByRole('textbox', { name: 'Name' }));
+    const footer = dialog.querySelector(
+      ':scope > [data-slot="route-overlay-footer"] > [data-slot="dialog-footer"]',
+    );
+    expect(footer).toContainElement(
+      screen.getByRole('button', { name: 'Cancel' }),
+    );
+    // The footer sits at the panel's edges, so the margins it uses inside `DialogContent` are reset.
+    expect(footer).toHaveClass('mx-0', 'mb-0');
+    expect(footer).not.toHaveClass('-mx-6', '-mb-6');
+    expect(
+      dialog.querySelector(':scope > [data-slot="dialog-close"]'),
+    ).toHaveAccessibleName('Close');
+  });
+
+  it('presents a drawer with the same regions', async () => {
+    setup(undefined, undefined, true);
+    const drawer = await screen.findByRole('dialog', { name: 'Details' });
+    expect(drawer).toHaveAttribute('data-presentation', 'drawer');
+    expect(
+      drawer.querySelector(
+        ':scope > [data-slot="route-overlay-footer"] > [data-slot="dialog-footer"]',
+      ),
+    ).toContainElement(within(drawer).getByRole('button', { name: 'Cancel' }));
+  });
+});
+
 describe('route overlay interactions', () => {
   it('renders an owning backdrop for the nested layer and dismisses only that layer', async () => {
     const user = userEvent.setup();