@nocobase/app-template-default 1.0.0-beta.74 → 1.0.0-beta.76

package/tests/components/default-access.test.tsx

@@ -5,9 +5,9 @@ import {
   authorizationClientToken,
   type AuthorizationOptionsResponse,
 } 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 { Routes, Route, useLocation, useNavigate } from 'react-router';
 import { expect, it, vi } from 'vitest';
 import Page from '../../client/pages/settings/default-access.js';
 import Form from '../../client/pages/settings/default-access-form.js';
@@ -552,3 +552,142 @@ it('maps a server scope validation error to the affected selector and focuses it
   expect(scope).toHaveTextContent('All records');
   expect(screen.queryByText('Private detail')).not.toBeInTheDocument();
 });
+
+it('does not reset a title-filtered page while its metadata is still loading', async () => {
+  let resolveCatalog!: (value: { data: AuthorizationOptionsResponse }) => void;
+  const pending = new Promise<{ data: AuthorizationOptionsResponse }>(
+    (resolve) => {
+      resolveCatalog = resolve;
+    },
+  );
+  const resources = Array.from({ length: 25 }, (_, i) => ({
+    ...catalog.sections[0]!.subsections[0]!.resources[0]!,
+    id: `resource-${i}`,
+    title: `Projects ${i}`,
+  }));
+  const namedCatalog = {
+    ...catalog,
+    sections: [
+      {
+        ...catalog.sections[0]!,
+        subsections: [{ ...catalog.sections[0]!.subsections[0]!, resources }],
+      },
+    ],
+  };
+  const rules = resources.map((resource, i) => ({
+    ...existing,
+    key: `rule-${i}`,
+    resource: { type: 'composite', id: resource.id },
+  }));
+  function CurrentLocation() {
+    const location = useLocation();
+    return <output data-testid='metadata-location'>{location.search}</output>;
+  }
+  const calls = vi.fn(async ({ path }: { path: string }) =>
+    path === 'authorization/permissions'
+      ? { data: { unrestricted: true, permissions: [] } }
+      : path.endsWith('/options')
+        ? pending
+        : { data: rules },
+  );
+  await renderWithApp(
+    <>
+      <Page />
+      <CurrentLocation />
+    </>,
+    {
+      route: '/default-access?q=Projects&page=2&pageSize=20',
+      namespace,
+      namespaces,
+      services,
+      fetch: answerApi(calls),
+    },
+  );
+  await waitFor(() =>
+    expect(calls).toHaveBeenCalledWith(
+      expect.objectContaining({ path: 'authorization/defaultAccess' }),
+    ),
+  );
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+  expect(screen.getByTestId('metadata-location')).toHaveTextContent('page=2');
+  await act(async () => {
+    resolveCatalog({ data: namedCatalog });
+  });
+  expect(await screen.findByText('Page 2 of 2')).toBeVisible();
+  expect(screen.getByTestId('metadata-location')).toHaveTextContent('page=2');
+});
+
+it('replaces the saved editor history entry and keeps the list query when going back', async () => {
+  const query = '?q=Projects&pageSize=20&sort=resource&order=desc';
+  function History() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    return (
+      <>
+        <output data-testid='history-location'>
+          {location.pathname}
+          {location.search}
+        </output>
+        <button onClick={() => void navigate(-1)}>Back in history</button>
+      </>
+    );
+  }
+  let patches = 0;
+  let rules = [existing];
+  await renderWithApp(
+    <>
+      {tree()}
+      <History />
+    </>,
+    {
+      route: `/default-access${query}`,
+      namespace,
+      namespaces,
+      services,
+      fetch: answerApi((request) => {
+        if (request.path === 'authorization/permissions')
+          return { data: { unrestricted: true, permissions: [] } };
+        if (request.path.endsWith('/options')) return { data: catalog };
+        if (request.method === 'PATCH') {
+          patches += 1;
+          expect(request.json).toEqual({ actions: [existing.actions[0]] });
+          rules = [{ ...existing, actions: [existing.actions[0]!] }];
+          return { data: rules[0] };
+        }
+        return { data: rules };
+      }),
+    },
+  );
+  await userEvent.click(await screen.findByRole('link', { name: 'Projects' }));
+  await userEvent.click(
+    await screen.findByRole('combobox', { name: 'Edit · Projects' }),
+  );
+  await userEvent.click(
+    await screen.findByRole('option', {
+      name: enUS.settings.defaultAccess.none,
+    }),
+  );
+  const save = screen.getByRole('button', { name: enUS.settings.save });
+  expect(save).toBeEnabled();
+  await userEvent.click(save);
+  await waitFor(() =>
+    expect(screen.getByTestId('history-location').textContent).toBe(
+      `/default-access${query}`,
+    ),
+  );
+  expect(patches).toBe(1);
+  await userEvent.click(
+    screen.getByRole('button', { name: 'Back in history' }),
+  );
+  await waitFor(() =>
+    expect(screen.getByTestId('history-location').textContent).toBe(
+      `/default-access${query}`,
+    ),
+  );
+  expect(
+    screen.queryByRole('button', { name: enUS.settings.save }),
+  ).not.toBeInTheDocument();
+  expect(patches).toBe(1);
+});

package/tests/components/role-list.test.tsx

@@ -1,9 +1,25 @@
-import { render, screen } from '@testing-library/react';
+import {
+  TestI18nProvider,
+  createTestI18nRuntime,
+} from '@nocobase/i18n/testing';
+import type { ReactElement } from 'react';
+import { render as renderView, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router';
 import { describe, expect, it } from 'vitest';
 import { RoleList } from '../../client/components/role-list.js';
 
+import enUS from '../../client/locales/en-US.js';
+
+const runtime = await createTestI18nRuntime({
+  application: { namespace: 'role-table-test', resources: enUS },
+});
+function render(view: ReactElement) {
+  return renderView(
+    <TestI18nProvider runtime={runtime}>{view}</TestI18nProvider>,
+  );
+}
+
 const roles = [
   {
     key: 'member',
@@ -18,19 +34,30 @@ const roles = [
     protected: false,
   },
 ];
-describe('compact role list', () => {
-  it('renders ordinary list content with full names, identifiers and translated state labels', () => {
+describe('standard role table', () => {
+  it('renders standard table headers, full names, identifiers and translated state labels', () => {
     render(
       <MemoryRouter>
         <RoleList
           roles={roles}
           ariaLabel='角色与权限'
-          labels={{ protected: '受保护', custom: '自定义' }}
+          labels={{
+            name: '角色名称',
+            key: '标识',
+            type: '类型',
+            protected: '受保护',
+            custom: '自定义',
+          }}
         />
       </MemoryRouter>,
     );
-    expect(screen.getByRole('list', { name: '角色与权限' })).toBeVisible();
-    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(
+      within(screen.getByRole('region', { name: '角色与权限' })).getByRole(
+        'table',
+      ),
+    ).toBeVisible();
+    expect(screen.getAllByRole('columnheader')).toHaveLength(3);
+    expect(screen.getAllByRole('row')).toHaveLength(3);
     expect(
       screen.queryByRole('heading', { name: 'Member' }),
     ).not.toBeInTheDocument();
@@ -51,7 +78,13 @@ describe('compact role list', () => {
             element={
               <RoleList
                 roles={roles}
-                labels={{ protected: 'Protected', custom: 'Custom' }}
+                labels={{
+                  name: 'Role name',
+                  key: 'Key',
+                  type: 'Type',
+                  protected: 'Protected',
+                  custom: 'Custom',
+                }}
               />
             }
           />
@@ -63,9 +96,41 @@ describe('compact role list', () => {
       name: 'Member',
     });
     expect(link).toHaveAttribute('href', '/roles/member/edit?q=team');
-    await user.tab();
+    for (let i = 0; i < 8 && document.activeElement !== link; i++)
+      await user.tab();
     expect(link).toHaveFocus();
     await user.keyboard('{Enter}');
     expect(screen.getByText('Edit member')).toBeVisible();
   });
+  it('uses standard pagination without losing edit links on later pages', async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <RoleList
+          roles={Array.from({ length: 12 }, (_, i) => ({
+            key: `role-${i}`,
+            title: `Role ${i}`,
+            to: `/roles/role-${i}/edit`,
+            protected: false,
+          }))}
+          labels={{
+            name: 'Role name',
+            key: 'Key',
+            type: 'Type',
+            protected: 'Protected',
+            custom: 'Custom',
+          }}
+        />
+      </MemoryRouter>,
+    );
+    expect(screen.getAllByRole('row')).toHaveLength(11);
+    expect(
+      screen.queryByRole('link', { name: 'Role 11', exact: true }),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+    expect(
+      screen.getByRole('link', { name: 'Role 11', exact: true }),
+    ).toHaveAttribute('href', '/roles/role-11/edit');
+  });
 });

package/tests/components/roles.test.tsx

@@ -4,7 +4,7 @@ import {
   AuthorizationClient,
   authorizationClientToken,
 } from '@nocobase/app-plugin-authorization/client';
-import { screen, waitFor } from '@testing-library/react';
+import { 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';
@@ -24,7 +24,7 @@ const namespaces = {
   },
 };
 
-it('keeps the compact role list sorted, searchable and linked to the current query', async () => {
+it('keeps the standard role table sorted, searchable and linked to the current query', async () => {
   const user = userEvent.setup();
   await renderWithApp(
     <Routes>
@@ -54,11 +54,15 @@ it('keeps the compact role list sorted, searchable and linked to the current que
     },
   );
   await screen.findByTitle('Customer');
-  const list = screen.getByRole('list', { name: 'Roles and permissions' });
+  const region = screen.getByRole('region', {
+    name: 'Roles and permissions',
+  });
+  const table = within(region).getByRole('table');
+  expect(within(table).getAllByRole('columnheader')).toHaveLength(3);
   expect(
-    Array.from(list.querySelectorAll('li')).map((item) =>
-      item.querySelector('[title]')?.getAttribute('title'),
-    ),
+    within(table)
+      .getAllByRole('link')
+      .map((link) => link.textContent),
   ).toEqual(['Customer', 'Member', 'NocoBase team']);
   expect(
     screen.queryByRole('heading', { name: 'Customer' }),
@@ -70,7 +74,10 @@ it('keeps the compact role list sorted, searchable and linked to the current que
     screen.getByRole('textbox', { name: 'Search role names' }),
     'Customer',
   );
-  await waitFor(() => expect(list.querySelectorAll('li')).toHaveLength(1));
+  await waitFor(() => {
+    expect(within(table).getAllByRole('row')).toHaveLength(2);
+    expect(within(table).getAllByRole('link')).toHaveLength(1);
+  });
   expect(screen.getByTitle('Customer').closest('a')).toHaveAttribute(
     'href',
     '/settings/roles/cp-customer/edit?q=Customer',