@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.58

package/tests/logic/route-navigation.test.ts

@@ -0,0 +1,66 @@
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { describe, expect, it } from 'vitest';
+import {
+  buildRouteNavigation,
+  selectedNavigationId,
+} from '../../client/routing/route-navigation.js';
+
+const page = (name: string, path: string): AppClientRegisteredRoute => ({
+  name,
+  id: name,
+  path,
+  auth: 'required',
+  packageName: 'test',
+  source: 'application',
+  navigation: { title: name },
+  componentLoader: async () => ({ default: () => null }),
+});
+
+describe('route navigation', () => {
+  it('promotes visible descendants of hidden pages and removes denied subtrees and empty groups', () => {
+    const routes = [
+      {
+        ...page('hidden', '/hidden'),
+        navigation: undefined,
+        children: [page('child', '/hidden/child')],
+      },
+      {
+        ...page('denied', '/denied'),
+        children: [page('secret', '/denied/secret')],
+      },
+      { ...page('empty', '/empty'), componentLoader: undefined, children: [] },
+    ];
+    expect(
+      buildRouteNavigation(routes, new Set(['test:/denied:denied'])).map(
+        ({ route }) => route.id,
+      ),
+    ).toEqual(['child']);
+  });
+  it('does not select an unrelated menu for a matched hidden root page', () => {
+    const routes = [
+      page('home', '/'),
+      { ...page('hidden', '/hidden'), navigation: undefined },
+    ];
+    expect(selectedNavigationId(routes, '/hidden')).toBeUndefined();
+  });
+
+  it('selects the deepest menu page through hidden descendants and multiple groups', () => {
+    const routes = [
+      {
+        ...page('group', '/'),
+        componentLoader: undefined,
+        children: [
+          {
+            ...page('orders', '/orders'),
+            children: [
+              { ...page('detail', '/orders/:orderId'), navigation: undefined },
+            ],
+          },
+        ],
+      },
+    ];
+    expect(selectedNavigationId(routes, '/orders/42')).toBe(
+      'test:/orders:orders',
+    );
+  });
+});

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

@@ -0,0 +1,353 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  TestI18nProvider,
+  createTestI18nRuntime,
+} from '@nocobase/i18n/testing';
+import { useEffect, type ReactNode } from 'react';
+import { createMemoryRouter, Link, Outlet, RouterProvider } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+import { RouteDialog } from '../../client/components/route-dialog';
+import { RouteDrawer } from '../../client/components/route-drawer';
+import { useRouteOverlay } from '../../client/components/use-route-overlay';
+import enUS from '../../client/locales/en-US.js';
+
+const runtime = await createTestI18nRuntime({
+  application: { namespace: '@nocobase/app-template-default', resources: enUS },
+});
+
+function I18n({ children }: { readonly children: ReactNode }) {
+  return <TestI18nProvider runtime={runtime}>{children}</TestI18nProvider>;
+}
+
+function Actions() {
+  const { close, isClosing } = useRouteOverlay();
+  return (
+    <button disabled={isClosing} onClick={() => void close()}>
+      Cancel
+    </button>
+  );
+}
+function setup(
+  beforeClose?: () => boolean | Promise<boolean>,
+  closeTo?: string,
+  nested = false,
+) {
+  const router = createMemoryRouter(
+    [
+      {
+        path: '/orders',
+        element: (
+          <>
+            <span>Orders</span>
+            <Outlet />
+          </>
+        ),
+        children: [
+          {
+            path: 'edit/:id',
+            element: (
+              <RouteDialog
+                title='Edit'
+                beforeClose={beforeClose}
+                closeTo={closeTo}
+                footer={<Actions />}
+              >
+                <input aria-label='Name' defaultValue='Original' />
+                <Link to='details'>Open details</Link>
+                {/* A page places the outlet wherever its next child belongs. */}
+                <Outlet />
+              </RouteDialog>
+            ),
+            children: [
+              {
+                path: 'details',
+                element: (
+                  <RouteDrawer title='Details' footer={<Actions />}>
+                    Detail
+                  </RouteDrawer>
+                ),
+              },
+            ],
+          },
+        ],
+      },
+      { path: '/other', element: <span>Other</span> },
+    ],
+    {
+      basename: '/main',
+      initialEntries: [
+        `/main/orders/edit/42${nested ? '/details' : ''}?filter=recent#field`,
+      ],
+    },
+  );
+  render(<RouterProvider router={router} />, { wrapper: I18n });
+  return router;
+}
+
+describe('route overlays', () => {
+  it('closes a direct link to its route parent, preserving query and removing hash', async () => {
+    const router = setup();
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/orders'),
+    );
+    expect(router.state.location.search).toBe('?filter=recent');
+    expect(router.state.location.hash).toBe('');
+    expect(router.state.historyAction).toBe('REPLACE');
+  });
+  it('uses the explicit target without merging query', async () => {
+    const router = setup(undefined, '/other');
+    fireEvent.click(await screen.findByRole('button', { name: 'Close' }));
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/other'),
+    );
+    expect(router.state.location.search).toBe('');
+  });
+  it('keeps the dialog open while checking and when rejected', async () => {
+    let resolve!: (value: boolean) => void;
+    const check = vi.fn(
+      () =>
+        new Promise<boolean>((done) => {
+          resolve = done;
+        }),
+    );
+    const router = setup(check);
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+    await waitFor(() => expect(check).toHaveBeenCalledTimes(1));
+    await act(async () => {
+      resolve(false);
+    });
+    expect(check).toHaveBeenCalledTimes(1);
+    expect(router.state.location.pathname).toBe('/main/orders/edit/42');
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
+  });
+  it('ignores a pending result after navigation away', async () => {
+    let resolve!: (value: boolean) => void;
+    const router = setup(
+      () =>
+        new Promise<boolean>((done) => {
+          resolve = done;
+        }),
+    );
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
+    await act(() => router.navigate('/other'));
+    await act(async () => {
+      resolve(true);
+    });
+    expect(router.state.location.pathname).toBe('/main/other');
+  });
+  it('closes only the top drawer and retains its parent dialog', async () => {
+    const router = setup(undefined, undefined, true);
+    fireEvent.click(await screen.findByRole('button', { name: 'Cancel' }));
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/orders/edit/42'),
+    );
+    expect(await screen.findByRole('dialog', { name: 'Edit' })).toBeVisible();
+    expect(screen.getByRole('textbox', { name: 'Name' })).toHaveValue(
+      'Original',
+    );
+  });
+});
+
+describe('route overlay interactions', () => {
+  it('renders an owning backdrop for the nested layer and dismisses only that layer', async () => {
+    const user = userEvent.setup();
+    const parentCheck = vi.fn(() => true);
+    const router = setup(parentCheck, undefined, true);
+    const child = await screen.findByRole('dialog', { name: 'Details' });
+    await waitFor(() =>
+      expect(child.contains(document.activeElement)).toBe(true),
+    );
+    // The hit target must belong to the child portal. A parent's z-indexed
+    // backdrop otherwise obscures the child's unstyled internal backdrop.
+    const portal = child.closest('[data-base-ui-portal]');
+    const backdrop = portal?.querySelector(
+      ':scope > [data-slot="dialog-overlay"]',
+    );
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/orders/edit/42'),
+    );
+    expect(parentCheck).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(screen.getByRole('dialog', { name: 'Edit' })).toBeVisible(),
+    );
+  });
+
+  it('dismisses only the top layer with Escape', async () => {
+    const user = userEvent.setup();
+    const parentCheck = vi.fn(() => true);
+    const router = setup(parentCheck, undefined, true);
+    const child = await screen.findByRole('dialog', { name: 'Details' });
+    await waitFor(() =>
+      expect(child.contains(document.activeElement)).toBe(true),
+    );
+    await user.keyboard('{Escape}');
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/orders/edit/42'),
+    );
+    expect(parentCheck).not.toHaveBeenCalled();
+    expect(await screen.findByRole('dialog', { name: 'Edit' })).toBeVisible();
+  });
+
+  it('retains edited parent state and restores focus to the link that opened its child', async () => {
+    const user = userEvent.setup();
+    const router = setup();
+    const name = await screen.findByRole('textbox', { name: 'Name' });
+    await user.clear(name);
+    await user.type(name, 'Changed');
+    const link = screen.getByRole('link', { name: 'Open details' });
+    await user.click(link);
+    const child = await screen.findByRole('dialog', { name: 'Details' });
+    await waitFor(() =>
+      expect(child.contains(document.activeElement)).toBe(true),
+    );
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe('/main/orders/edit/42'),
+    );
+    await waitFor(() =>
+      expect(screen.getByRole('textbox', { name: 'Name' })).toHaveValue(
+        'Changed',
+      ),
+    );
+    await waitFor(() => expect(link).toHaveFocus());
+  });
+
+  it('restores focus into the parent when closing a directly loaded nested route', async () => {
+    const user = userEvent.setup();
+    setup(undefined, undefined, true);
+    const child = await screen.findByRole('dialog', { name: 'Details' });
+    await waitFor(() =>
+      expect(child.contains(document.activeElement)).toBe(true),
+    );
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    const parent = await screen.findByRole('dialog', { name: 'Edit' });
+    await waitFor(() =>
+      expect(parent.contains(document.activeElement)).toBe(true),
+    );
+  });
+
+  it('allows history back and forward without running the close guard', async () => {
+    const guard = vi.fn(() => false);
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/orders',
+          element: (
+            <>
+              <span>Orders</span>
+              <Outlet />
+            </>
+          ),
+          children: [
+            {
+              path: 'edit',
+              element: (
+                <RouteDialog title='Edit' beforeClose={guard}>
+                  Form
+                </RouteDialog>
+              ),
+            },
+          ],
+        },
+      ],
+      { initialEntries: ['/orders', '/orders/edit'] },
+    );
+    render(<RouterProvider router={router} />, { wrapper: I18n });
+    expect(await screen.findByRole('dialog', { name: 'Edit' })).toBeVisible();
+    await act(() => router.navigate(-1));
+    expect(router.state.location.pathname).toBe('/orders');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await act(() => router.navigate(1));
+    expect(await screen.findByRole('dialog', { name: 'Edit' })).toBeVisible();
+    expect(guard).not.toHaveBeenCalled();
+  });
+
+  it('logs a rejected internal close request and leaves the dialog open', async () => {
+    const failure = new Error('Confirmation unavailable');
+    const log = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      const router = setup(() => Promise.reject(failure));
+      fireEvent.click(await screen.findByRole('button', { name: 'Close' }));
+      await waitFor(() =>
+        expect(log).toHaveBeenCalledWith(
+          'Failed to close route overlay',
+          failure,
+        ),
+      );
+      expect(router.state.location.pathname).toBe('/main/orders/edit/42');
+      expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
+    } finally {
+      log.mockRestore();
+    }
+  });
+
+  it('propagates a failed close check to the hook caller and permits a retry', async () => {
+    const failure = new Error('Confirmation unavailable');
+    const guard = vi
+      .fn()
+      .mockRejectedValueOnce(failure)
+      .mockResolvedValueOnce(true);
+    let overlay: ReturnType<typeof useRouteOverlay> | undefined;
+    function Capture() {
+      const value = useRouteOverlay();
+      useEffect(() => {
+        overlay = value;
+      }, [value]);
+      return <span>Form</span>;
+    }
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/orders',
+          element: <Outlet />,
+          children: [
+            {
+              path: 'edit',
+              element: (
+                <RouteDialog title='Edit' beforeClose={guard}>
+                  <Capture />
+                </RouteDialog>
+              ),
+            },
+          ],
+        },
+      ],
+      { initialEntries: ['/orders/edit'] },
+    );
+    render(<RouterProvider router={router} />, { wrapper: I18n });
+    await screen.findByRole('dialog', { name: 'Edit' });
+    await act(async () => {
+      await expect(overlay!.close()).rejects.toBe(failure);
+    });
+    expect(router.state.location.pathname).toBe('/orders/edit');
+    expect(overlay!.isClosing).toBe(false);
+    await act(async () => {
+      await overlay!.close();
+    });
+    expect(router.state.location.pathname).toBe('/orders');
+    expect(guard).toHaveBeenCalledTimes(2);
+  });
+
+  it('reports hook use outside a route overlay', () => {
+    const log = vi.spyOn(console, 'error').mockImplementation(() => {});
+    try {
+      expect(() => render(<Actions />)).toThrow(
+        'useRouteOverlay must be used inside RouteDialog or RouteDrawer',
+      );
+    } finally {
+      log.mockRestore();
+    }
+  });
+});

package/tests/logic/server-imports.test.ts

@@ -0,0 +1,88 @@
+// @vitest-environment node
+import { execFile } from 'node:child_process';
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { promisify } from 'node:util';
+
+import { expect, it } from 'vitest';
+
+const exec = promisify(execFile);
+async function compile(config: string): Promise<void> {
+  try {
+    await exec('pnpm', ['exec', 'tsc', '-p', config], { cwd: appRoot });
+  } catch (error) {
+    throw new Error((error as { stdout: string }).stdout, { cause: error });
+  }
+}
+const appRoot = fileURLToPath(new URL('../../', import.meta.url));
+
+it('runs compiled extensionless server imports without source files or a loader', async () => {
+  const directory = await mkdtemp(path.join(os.tmpdir(), 'app-esm-imports-'));
+  try {
+    const source = path.join(directory, 'source');
+    await mkdir(path.join(source, 'nested'), { recursive: true });
+    await writeFile(path.join(directory, 'package.json'), '{"type":"module"}');
+    await writeFile(
+      path.join(source, 'value.ts'),
+      'export const value: number = 42;',
+    );
+    await writeFile(
+      path.join(source, 'nested/index.ts'),
+      "export { value } from '../value';",
+    );
+    await writeFile(
+      path.join(source, 'main.ts'),
+      `
+      import { value } from './nested';
+      import { value as explicit } from './value.js';
+      const dynamic = await import('./value');
+      export const result: number[] = [value, explicit, dynamic.value];
+    `,
+    );
+    const config = path.join(directory, 'tsconfig.json');
+    await writeFile(
+      config,
+      JSON.stringify({
+        extends: path.join(appRoot, 'tsconfig.server.json'),
+        compilerOptions: {
+          rootDir: source,
+          outDir: path.join(directory, 'dist'),
+          types: [],
+        },
+        include: [path.join(source, '**/*.ts')],
+      }),
+    );
+    // Use the same two stages as the shared application build.
+    await compile(config);
+    await exec(
+      'pnpm',
+      [
+        'exec',
+        'tsc-alias',
+        '-p',
+        'tsconfig.server.json',
+        '--outDir',
+        path.join(directory, 'dist'),
+      ],
+      { cwd: appRoot },
+    );
+    await rm(source, { recursive: true });
+    const runner = path.join(directory, 'runner.mjs');
+    await writeFile(
+      runner,
+      `
+      import { result } from './dist/main.js';
+      import { writeFileSync } from 'node:fs';
+      writeFileSync(new URL('./result.json', import.meta.url), JSON.stringify(result));
+    `,
+    );
+    await exec(process.execPath, [runner], { env: { PATH: process.env.PATH } });
+    expect(
+      JSON.parse(await readFile(path.join(directory, 'result.json'), 'utf8')),
+    ).toEqual([42, 42, 42]);
+  } finally {
+    await rm(directory, { recursive: true, force: true });
+  }
+}, 30_000);

package/tests/logic/tailwind-sources.test.ts

@@ -0,0 +1,151 @@
+import clientPlugins from '../../client/plugins.js';
+// @vitest-environment node
+
+import {
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+import tailwindConfig, { contentFilesIn } from '../../tailwind.config.mjs';
+
+const appRoot = path.resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../..',
+);
+
+describe('tailwind content sources', () => {
+  const content = tailwindConfig.content as string[];
+
+  it('scans the client files of every enabled plugin', () => {
+    const plugins = clientPlugins.plugins.map((plugin) =>
+      plugin.packageName.slice('@nocobase/'.length),
+    );
+
+    expect(plugins.length).toBeGreaterThan(0);
+
+    // A plugin with no client surface contributes no files, so only those that ship one are required to appear.
+    const withClient = plugins.filter((plugin) =>
+      ['client', 'dist/client'].some((directory) =>
+        existsSync(
+          path.join(appRoot, 'node_modules/@nocobase', plugin, directory),
+        ),
+      ),
+    );
+    expect(withClient.length).toBeGreaterThan(0);
+
+    for (const plugin of withClient) {
+      expect(
+        content.some((file) => file.includes(plugin)),
+        `${plugin} contributes no scanned files; its utility classes would be missing from the stylesheet`,
+      ).toBe(true);
+    }
+  });
+
+  it('resolves past the symlinks pnpm installs dependencies as', () => {
+    // The bug this guards: a wildcard `@source` matches nothing through a pnpm symlink, so every path here must be a
+    // real one that exists. An empty list would mean the whole mechanism silently stopped working.
+    expect(content.length).toBeGreaterThan(0);
+    for (const file of content.slice(0, 20)) {
+      expect(path.isAbsolute(file)).toBe(true);
+      expect(existsSync(file)).toBe(true);
+    }
+
+    // Every file must be its canonical path rather than a path that only reaches the file through a package symlink.
+    // pnpm's canonical store path legitimately contains a nested `node_modules/@nocobase` segment.
+    for (const file of content) {
+      expect(file).toBe(realpathSync(file));
+    }
+  });
+
+  it('scans build output the same way, which is the layout an installed plugin has', () => {
+    // The original failure was invisible in this repository, where plugins expose TypeScript sources, and only showed
+    // up in a generated application, where they ship `dist/client`. `dist` is a build artefact that a clean checkout
+    // does not have, so rather than requiring one, this drives the configuration's own resolution over a fixture
+    // laid out the way pnpm lays out an installed package: a symlink into a store directory.
+    const store = mkdtempSync(path.join(tmpdir(), 'nb3-tailwind-'));
+    try {
+      const installed = path.join(
+        store,
+        'store/app-plugin-fixture/dist/client',
+      );
+      mkdirSync(installed, { recursive: true });
+      writeFileSync(
+        path.join(installed, 'page.js'),
+        'export const cls = "mt-[77px]";',
+      );
+
+      const scope = path.join(store, 'node_modules/@nocobase');
+      mkdirSync(scope, { recursive: true });
+      symlinkSync(
+        path.join(store, 'store/app-plugin-fixture'),
+        path.join(scope, 'app-plugin-fixture'),
+        'junction',
+      );
+
+      const files = contentFilesIn(store);
+
+      expect(files).toHaveLength(1);
+      expect(files[0]).toBe(path.join(realpathSync(installed), 'page.js'));
+      expect(files[0]).toBe(realpathSync(files[0]));
+    } finally {
+      rmSync(store, { recursive: true, force: true });
+    }
+  });
+
+  it('scans canonical Registry source exposed by a plugin', () => {
+    const store = mkdtempSync(path.join(tmpdir(), 'nb3-tailwind-registry-'));
+    try {
+      const registry = path.join(
+        store,
+        'store/app-plugin-fixture/registry/example',
+      );
+      mkdirSync(registry, { recursive: true });
+      writeFileSync(
+        path.join(registry, 'demo.tsx'),
+        'export const cls = "xl:grid-cols-5";',
+      );
+
+      const scope = path.join(store, 'node_modules/@nocobase');
+      mkdirSync(scope, { recursive: true });
+      symlinkSync(
+        path.join(store, 'store/app-plugin-fixture'),
+        path.join(scope, 'app-plugin-fixture'),
+        'junction',
+      );
+
+      const files = contentFilesIn(store);
+
+      expect(files).toContain(path.join(realpathSync(registry), 'demo.tsx'));
+    } finally {
+      rmSync(store, { recursive: true, force: true });
+    }
+  });
+
+  it('is wired into the stylesheet, without the wildcard sources it replaced', () => {
+    const styles = readFileSync(
+      path.join(appRoot, 'client/styles.css'),
+      'utf8',
+    );
+
+    expect(styles).toContain('@config "../tailwind.config.mjs"');
+    expect(styles).not.toContain('app-plugin-*');
+  });
+
+  it('is published, so a generated application has the file @config points at', () => {
+    const packageJson = JSON.parse(
+      readFileSync(path.join(appRoot, 'package.json'), 'utf8'),
+    ) as { files?: string[] };
+
+    expect(packageJson.files).toContain('tailwind.config.mjs');
+  });
+});