@nocobase/app-template-default 1.0.0-beta.68 → 1.0.0-beta.70

package/tests/components/app-layout-routes.test.tsx

@@ -10,6 +10,10 @@ import { MemoryRouter, Route, Routes } from 'react-router';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 
 import { AppLayout } from '../../client/layouts/app-layout.js';
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import enUS from '../../client/locales/en-US.js';
 
 // Breadcrumb titles are route data, not keys any namespace owns: the trail translates each through its package's
@@ -87,14 +91,17 @@ function OrderPage(): ReactElement {
 }
 
 function renderLayout(page: ReactElement): HTMLElement {
+  const sidebarPreference = createAppSidebarPreferenceStore('/test-app');
   render(
-    <MemoryRouter initialEntries={['/orders/42']}>
-      <Routes>
-        <Route element={<AppLayout routes={routes} />}>
-          <Route path='/orders/:id' element={page} />
-        </Route>
-      </Routes>
-    </MemoryRouter>,
+    <SidebarPreferenceProvider value={sidebarPreference}>
+      <MemoryRouter initialEntries={['/orders/42']}>
+        <Routes>
+          <Route element={<AppLayout routes={routes} />}>
+            <Route path='/orders/:id' element={page} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    </SidebarPreferenceProvider>,
     { wrapper: I18n },
   );
   return screen.getByRole('banner');

package/tests/components/data-table.test.tsx

@@ -0,0 +1,127 @@
+import { renderWithApp } from '@nocobase/app-testing/client';
+import type { ColumnDef, PaginationState } from '@tanstack/react-table';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { describe, it, expect } from 'vitest';
+import {
+  DataTable,
+  DataTableColumnHeader,
+  DataTableViewOptions,
+} from '../../client/components/data-table/index.js';
+import enUS from '../../client/locales/en-US.js';
+import zhCN from '../../client/locales/zh-CN.js';
+const namespace = '@nocobase/datatable-test';
+const namespaces = {
+  [namespace]: {
+    'en-US': async () => ({ default: enUS }),
+    'zh-CN': async () => ({ default: zhCN }),
+  },
+};
+type Item = { id: string; amount: number };
+const rows: Item[] = Array.from({ length: 12 }, (_, amount) => ({
+  id: `row-${amount}`,
+  amount,
+}));
+const columns: ColumnDef<Item>[] = [
+  { accessorKey: 'id', header: 'ID', enableHiding: false },
+  {
+    accessorKey: 'amount',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title='Amount' />
+    ),
+  },
+];
+describe('standard DataTable', () => {
+  it('uses real TanStack sorting, pagination and column visibility with restoration', async () => {
+    const user = userEvent.setup();
+    await renderWithApp(
+      <DataTable
+        columns={columns}
+        data={rows}
+        getRowId={(row) => row.id}
+        showSelectedCount={false}
+        toolbar={(table) => (
+          <DataTableViewOptions table={table} getColumnLabel={() => 'Amount'} />
+        )}
+      />,
+      { namespace, namespaces },
+    );
+    expect(screen.getByText('Page 1 of 2')).toBeVisible();
+    expect(screen.queryByText('row-10')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('row-10')).toBeVisible();
+    await user.click(
+      screen.getByRole('button', { name: 'Go to previous page' }),
+    );
+    await user.click(
+      screen.getByRole('button', { name: 'Amount', exact: true }),
+    );
+    await user.click(
+      await screen.findByRole('menuitem', { name: 'Desc', exact: true }),
+    );
+    expect(
+      within(screen.getAllByRole('row')[1]!).getByText('row-11'),
+    ).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'View', exact: true }));
+    await user.click(
+      await screen.findByRole('menuitemcheckbox', {
+        name: 'Amount',
+        exact: true,
+      }),
+    );
+    expect(screen.getAllByRole('columnheader', { hidden: true })).toHaveLength(
+      1,
+    );
+    await user.click(
+      await screen.findByRole('menuitemcheckbox', {
+        name: 'Amount',
+        exact: true,
+      }),
+    );
+    expect(screen.getByRole('columnheader', { name: 'Amount' })).toBeVisible();
+  });
+  it('preserves the server page and sort instead of applying client paging or sorting again', async () => {
+    const user = userEvent.setup();
+    const pageRows = rows.slice(0, 2);
+    function ServerPage() {
+      const [page, setPage] = useState<PaginationState>({
+        pageIndex: 2,
+        pageSize: 2,
+      });
+      return (
+        <DataTable
+          columns={columns}
+          data={pageRows}
+          manualPagination
+          rowCount={12}
+          paginationState={page}
+          onPaginationChange={setPage}
+          manualSorting
+          sortingState={[{ id: 'amount', desc: true }]}
+          showSelectedCount={false}
+          pageSizeOptions={[2]}
+        />
+      );
+    }
+    await renderWithApp(<ServerPage />, { namespace, namespaces });
+    expect(screen.getByText('Page 3 of 6')).toBeVisible();
+    expect(screen.getByText('row-0')).toBeVisible();
+    expect(
+      within(screen.getAllByRole('row')[1]!).getByText('row-0'),
+    ).toBeVisible();
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByText('Page 4 of 6')).toBeVisible();
+    expect(screen.getByText('row-0')).toBeVisible();
+  });
+  it('keeps empty-state and paging controls localized in Chinese', async () => {
+    await renderWithApp(
+      <DataTable columns={columns} data={[]} showSelectedCount={false} />,
+      { namespace, namespaces, locale: 'zh-CN' },
+    );
+    expect(screen.getByText(zhCN.dataTable.noResults)).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: zhCN.dataTable.nextPage }),
+    ).toBeDisabled();
+  });
+});

package/tests/components/layout-i18n.test.tsx

@@ -13,6 +13,10 @@ import { describe, expect, it, vi } from 'vitest';
 
 import locales from '../../client/locales/index.js';
 import { AppLayout } from '../../client/layouts/app-layout.js';
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 vi.mock('@nocobase/app-plugin-i18n/client', () => ({
   useSyncServerLocale: () => {},
 }));
@@ -45,6 +49,7 @@ const overview: AppClientRegisteredRoute = {
 };
 
 async function setup(children: ReactNode) {
+  const sidebarPreference = createAppSidebarPreferenceStore('/test-app');
   vi.stubGlobal('matchMedia', () => ({
     matches: true,
     addEventListener: vi.fn(),
@@ -64,7 +69,9 @@ async function setup(children: ReactNode) {
   render(
     <I18nProvider runtime={runtime}>
       <ClientApplicationContext.Provider value={app}>
-        <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
+        <SidebarPreferenceProvider value={sidebarPreference}>
+          <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
+        </SidebarPreferenceProvider>
       </ClientApplicationContext.Provider>
     </I18nProvider>,
   );

package/tests/components/navigation-menu.test.tsx

@@ -1,3 +1,7 @@
+import {
+  createAppSidebarPreferenceStore,
+  SidebarPreferenceProvider,
+} from '../../client/layouts/use-sidebar-preference.js';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import {
   act,
@@ -38,11 +42,15 @@ function I18n({ children }: { readonly children: ReactNode }) {
   return <TestI18nProvider runtime={runtime}>{children}</TestI18nProvider>;
 }
 
-const preferenceKey = 'nocobase:sidebar:collapsed';
+const sidebarPreference = createAppSidebarPreferenceStore('/main');
+
+const preferenceKey = 'nocobase:sidebar:collapsed:app:/main';
 
 function setCollapsed(collapsed: boolean) {
   localStorage.setItem(preferenceKey, String(collapsed));
-  window.dispatchEvent(new Event('nocobase:sidebar-preference-change'));
+  window.dispatchEvent(
+    new Event('nocobase:sidebar-preference-change:app:/main'),
+  );
 }
 
 function page(name: string): AppClientRegisteredRoute {
@@ -69,18 +77,20 @@ function shell(
 ) {
   return (
     <MemoryRouter>
-      <AppSidebarProvider>
-        <AppSidebar label='Navigation'>
-          <NavigationMenu
-            items={items}
-            label='Menu'
-            selectedKey={selectedKey}
-            sections={sections}
-            badges={badges}
-          />
-        </AppSidebar>
-        <AppSidebarToggle />
-      </AppSidebarProvider>
+      <SidebarPreferenceProvider value={sidebarPreference}>
+        <AppSidebarProvider>
+          <AppSidebar label='Navigation'>
+            <NavigationMenu
+              items={items}
+              label='Menu'
+              selectedKey={selectedKey}
+              sections={sections}
+              badges={badges}
+            />
+          </AppSidebar>
+          <AppSidebarToggle />
+        </AppSidebarProvider>
+      </SidebarPreferenceProvider>
     </MemoryRouter>
   );
 }