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

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

@@ -0,0 +1,106 @@
+// @vitest-environment node
+import {
+  copyFile,
+  mkdtemp,
+  realpath,
+  rm,
+  symlink,
+  writeFile,
+} from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { runInNewContext } from 'node:vm';
+import { build } from 'vite';
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+
+const appRoot = path.resolve(import.meta.dirname, '../..');
+let root: string;
+
+beforeAll(async () => {
+  root = await realpath(await mkdtemp(path.join(tmpdir(), 'asset-url-build-')));
+  for (const file of ['vite.config.ts', 'package.json']) {
+    await copyFile(path.join(appRoot, file), path.join(root, file));
+  }
+  await symlink(
+    path.join(appRoot, 'node_modules'),
+    path.join(root, 'node_modules'),
+    'junction',
+  );
+  await writeFile(
+    path.join(root, 'entry.js'),
+    `import { resolveAssetUrl, resolveAppUrl } from '@nocobase/app-client';
+globalThis.resolvedUrls = {
+  asset: resolveAssetUrl('/assets/logo.png?size=2#preview'),
+  external: resolveAssetUrl('https://images.example.com/logo.png'),
+  api: resolveAppUrl('/api'),
+};`,
+  );
+});
+
+afterEach(() => vi.unstubAllEnvs());
+afterAll(async () => {
+  if (root) await rm(root, { recursive: true, force: true });
+});
+
+describe('asset URLs in the application build', () => {
+  it.each([undefined, 'https://cdn.example.com/releases/v1/'])(
+    '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({
+        root,
+        configFile: path.join(root, 'vite.config.ts'),
+        logLevel: 'silent',
+        build: {
+          write: false,
+          lib: {
+            entry: path.join(root, 'entry.js'),
+            formats: ['iife'],
+            name: 'AssetUrlFixture',
+          },
+        },
+      });
+      if ('on' in result) throw new Error('Expected a completed build');
+      const bundles = Array.isArray(result) ? result : [result];
+      const chunk = bundles
+        .flatMap((bundle) => bundle.output)
+        .find((item) => item.type === 'chunk');
+      if (!chunk || chunk.type !== 'chunk')
+        throw new Error('Expected an entry chunk');
+
+      // Execute the emitted JavaScript: stubbing an environment variable in a unit test does not prove
+      // that Vite replaced BASE_URL, or that the public library export survived the build.
+      for (const mount of ['/crm', '']) {
+        const config = {
+          textContent: JSON.stringify({
+            version: 1,
+            config: { app: { basePath: mount } },
+          }),
+        };
+        const browser = {
+          URL,
+          window: { location: { origin: 'https://app.example.com' } },
+          document: { getElementById: () => config },
+          resolvedUrls: { asset: '', external: '', api: '' },
+        };
+        runInNewContext(chunk.code, browser);
+        expect(browser.resolvedUrls).toEqual({
+          asset: `${cdn ?? `${mount}/`}assets/logo.png?size=2#preview`,
+          external: 'https://images.example.com/logo.png',
+          api: `${mount}/api`,
+        });
+      }
+    },
+  );
+});

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

@@ -0,0 +1,122 @@
+import {
+  TestI18nProvider,
+  createTestI18nRuntime,
+} from '@nocobase/i18n/testing';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
+
+import enUS from '../../client/locales/en-US.ts';
+import LoginPage from '../../client/pages/auth/login.tsx';
+import RegisterPage from '../../client/pages/auth/register.tsx';
+
+const passwordLoginAction = vi.hoisted(() => ({
+  error: undefined as { message: string } | undefined,
+  isPending: false,
+  submit: vi.fn(),
+}));
+
+const signUpAvailable = vi.hoisted(() => ({ value: true }));
+
+vi.mock('@nocobase/app-plugin-authentication/client/actions', () => ({
+  usePasswordLogin: () => passwordLoginAction,
+  usePasswordRegistration: () => ({ isPending: false, submit: vi.fn() }),
+}));
+
+vi.mock('@nocobase/app-plugin-authentication/client', () => ({
+  useSignUpAvailable: () => signUpAvailable.value,
+}));
+
+const runtime = await createTestI18nRuntime({
+  application: { namespace: 'app', resources: enUS },
+});
+
+function renderAt(path: string, page: ReactElement) {
+  return render(
+    <TestI18nProvider runtime={runtime}>
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route element={page} path={path} />
+          <Route element={<p>Login route</p>} path='/login' />
+        </Routes>
+      </MemoryRouter>
+    </TestI18nProvider>,
+  );
+}
+
+describe('application authentication pages', () => {
+  it('wires the login form to the plugin authentication action', async () => {
+    passwordLoginAction.submit.mockClear();
+    renderAt('/', <LoginPage />);
+
+    expect(screen.getByRole('heading', { name: 'Welcome back' })).toBeVisible();
+    expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText('Username or email'), {
+      target: { value: 'alice' },
+    });
+    const passwordInput = screen.getByLabelText('Password');
+    fireEvent.change(passwordInput, { target: { value: 'password' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show password' }));
+    expect(passwordInput).toHaveAttribute('type', 'text');
+    fireEvent.click(screen.getByRole('button', { name: 'Hide password' }));
+    expect(passwordInput).toHaveAttribute('type', 'password');
+    expect(passwordLoginAction.submit).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Sign in' }));
+    await waitFor(() => {
+      expect(passwordLoginAction.submit).toHaveBeenCalledWith({
+        identifier: 'alice',
+        password: 'password',
+      });
+    });
+    expect(
+      screen.getByRole('link', { name: 'Forgot password?' }),
+    ).toHaveAttribute('href', '/forgot-password');
+  });
+
+  it('puts the brand panel beside the form on wide screens', () => {
+    renderAt('/', <LoginPage />);
+    const panel = screen.getByRole('complementary', {
+      name: 'About this application',
+    });
+    expect(panel).toHaveClass('hidden', 'xl:block');
+    expect(panel).toHaveTextContent('AI-native application platform');
+    expect(panel).toHaveTextContent('AI-native frontend');
+    expect(panel).toHaveTextContent('NocoBase foundation');
+    expect(panel).toHaveTextContent('Freedom above. Confidence below.');
+  });
+
+  it('shows the action error', () => {
+    passwordLoginAction.error = { message: 'Invalid username or password.' };
+    renderAt('/', <LoginPage />);
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'Invalid username or password.',
+    );
+    passwordLoginAction.error = undefined;
+  });
+
+  it('offers sign-up only while the server accepts it', () => {
+    signUpAvailable.value = false;
+    const { unmount } = renderAt('/', <LoginPage />);
+    expect(
+      screen.queryByRole('link', { name: 'Sign up' }),
+    ).not.toBeInTheDocument();
+    unmount();
+
+    signUpAvailable.value = true;
+    renderAt('/', <LoginPage />);
+    expect(screen.getByRole('link', { name: 'Sign up' })).toHaveAttribute(
+      'href',
+      '/register',
+    );
+  });
+
+  it('sends a visitor back to sign-in while sign-up is off', () => {
+    signUpAvailable.value = false;
+    renderAt('/register', <RegisterPage />);
+    expect(screen.getByText('Login route')).toBeVisible();
+    signUpAvailable.value = true;
+  });
+});

package/tests/logic/client-plugin-registry.test.ts

@@ -0,0 +1,63 @@
+// @vitest-environment node
+
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'vitest';
+
+import clientPlugins from '../../client/plugins.js';
+
+const appRoot = fileURLToPath(new URL('../..', import.meta.url));
+
+interface AppPackageJson {
+  readonly dependencies?: Record<string, string>;
+  readonly devDependencies?: Record<string, string>;
+}
+
+const appPackage = JSON.parse(
+  readFileSync(path.join(appRoot, 'package.json'), 'utf8'),
+) as AppPackageJson;
+
+const registeredClientPackages = clientPlugins.plugins.map(
+  (plugin) => plugin.packageName,
+);
+
+describe('client plugin registry consistency', () => {
+  it('declares every client plugin as a dependency', () => {
+    const undeclared = registeredClientPackages.filter(
+      (packageName) =>
+        appPackage.devDependencies?.[packageName] === undefined &&
+        appPackage.dependencies?.[packageName] === undefined,
+    );
+
+    expect(undeclared).toEqual([]);
+  });
+
+  it('mounts the standard user and API key pages under Settings', () => {
+    for (const [packageName, routePath] of [
+      ['@nocobase/app-plugin-users', '/users'],
+      ['@nocobase/app-plugin-api-keys', '/api-keys'],
+    ]) {
+      const plugin = clientPlugins.plugins.find(
+        (entry) => entry.packageName === packageName,
+      );
+      expect(plugin?.routes).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            parent: 'settings',
+            routes: expect.arrayContaining([
+              expect.objectContaining({ path: routePath }),
+            ]),
+          }),
+        ]),
+      );
+    }
+  });
+
+  it('registers no package twice', () => {
+    expect(new Set(registeredClientPackages).size).toBe(
+      registeredClientPackages.length,
+    );
+  });
+});

package/tests/logic/client-route-recovery.test.tsx

@@ -0,0 +1,80 @@
+import type {
+  AppClientRegisteredRoute,
+  AppClientRouteComponentModule,
+} from '@nocobase/app-client/plugins';
+import { act, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ClientRoute } from '../../client/routing/client-route.tsx';
+
+vi.mock('@nocobase/app-plugin-authorization/client', () => ({
+  useCan: () => ({ can: true, isPending: false }),
+}));
+
+const route: AppClientRegisteredRoute = {
+  id: 'recoverable',
+  name: 'recoverable',
+  path: '/recoverable',
+  auth: 'required',
+  authz: 'skip',
+  packageName: 'test',
+  source: 'application',
+  componentLoader: async () => {
+    throw new Error('Module unavailable');
+  },
+};
+
+// Loading a lazy route and rendering its error boundary can take longer than Testing Library's one-second default on
+// a loaded CI runner. A page that never renders still fails, well inside the 30-second test timeout.
+const ROUTE_LOAD_TIMEOUT = { timeout: 10_000 };
+
+const healthyModule: AppClientRouteComponentModule = {
+  default: () => <h2>Recovered page</h2>,
+};
+
+describe('client route loading recovery', () => {
+  it('clears a previous failure when the same mounted route loads successfully', async () => {
+    const { rerender } = render(<ClientRoute route={route} />);
+    expect(
+      await screen.findByText('Unable to load page', {}, ROUTE_LOAD_TIMEOUT),
+    ).toBeVisible();
+
+    rerender(
+      <ClientRoute
+        route={{ ...route, componentLoader: async () => healthyModule }}
+      />,
+    );
+
+    expect(
+      await screen.findByText('Recovered page', {}, ROUTE_LOAD_TIMEOUT),
+    ).toBeVisible();
+    expect(screen.queryByText('Unable to load page')).not.toBeInTheDocument();
+  });
+
+  it('ignores a superseded loader failure after the replacement succeeds', async () => {
+    let rejectLoad!: (error: Error) => void;
+    const pending = new Promise<AppClientRouteComponentModule>(
+      (_resolve, reject) => {
+        rejectLoad = reject;
+      },
+    );
+    const { rerender } = render(
+      <ClientRoute route={{ ...route, componentLoader: () => pending }} />,
+    );
+    rerender(
+      <ClientRoute
+        route={{ ...route, componentLoader: async () => healthyModule }}
+      />,
+    );
+    expect(
+      await screen.findByText('Recovered page', {}, ROUTE_LOAD_TIMEOUT),
+    ).toBeVisible();
+
+    await act(async () => {
+      rejectLoad(new Error('Stale failure'));
+      await pending.catch(() => undefined);
+    });
+    expect(screen.getByText('Recovered page')).toBeVisible();
+    expect(screen.queryByText('Unable to load page')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,126 @@
+import {
+  resolveAppClientContributions,
+  type AppClientRegisteredRoute,
+  type AppClientRouteComponentLoader,
+} from '@nocobase/app-client/plugins';
+import { describe, expect, it } from 'vitest';
+
+import applicationRoutes from '../../client/routes.ts';
+
+describe('app client routes', () => {
+  it('keeps the landing page and the authentication pages', () => {
+    // The authentication plugin and this application have to agree on these paths: it sends an unknown visitor to
+    // /login, sends a signed-in user who opens a guest page back to /, and mails a reset link to /reset-password,
+    // while the sign-in form links to /register and /forgot-password. Only their presence is asserted, so a page the
+    // application adds is not a defect. Whether these four are guest pages is not checked here either: app-client
+    // refuses any route that claims one of those paths without `auth: 'guest'`.
+    expect(pagePaths(resolveRoutes().routes)).toEqual(
+      expect.arrayContaining([
+        '/',
+        '/login',
+        '/register',
+        '/forgot-password',
+        '/reset-password',
+        // The page `deviceAuthorization()`'s verificationUri names, where a CLI's sign-in is approved.
+        '/device',
+      ]),
+    );
+  });
+
+  it('loads every page component', async () => {
+    const resolved = resolveRoutes();
+    const loaders = [
+      ...componentLoadersIn(resolved.routes),
+      ...componentLoadersIn(resolved.settingsRouteTree),
+      ...componentLoadersIn(resolved.devRouteTree),
+    ];
+    // The trees above are filtered by loader, so an empty list would make the loop below pass without loading
+    // anything at all.
+    expect(loaders).not.toHaveLength(0);
+
+    for (const componentLoader of loaders) {
+      // The registered loader is already the wrapped one, so awaiting it holds every page to the contract that its
+      // module default-exports a component. A page that moved or lost its default export fails here.
+      await expect(componentLoader()).resolves.toMatchObject({
+        default: expect.any(Function),
+      });
+    }
+  });
+
+  it('pins the page authorization of every signed-in page', () => {
+    // A stored page grant records the page's `authz` resource id (`authorizedAs`), not its route `name`: changing an
+    // id is a data change that has to migrate the grants that reference it, not a refactor — so changing this list
+    // deliberately is the point. A new page that requires sign-in adds an entry here, because a page that checks
+    // access is a new grant somebody has to be given.
+    const resolved = resolveRoutes();
+
+    // The landing page and the inbox opted out of page authorization, so they are reachable by every signed-in user.
+    expect(pageAuthorizations(resolved.routes)).toEqual([
+      { name: 'home', authorizedAs: null },
+      { name: 'inbox', authorizedAs: null },
+    ]);
+  });
+
+  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(
+      applicationRoutes[0].routes.find((route) => route.name === 'inbox'),
+    ).not.toHaveProperty('navigation');
+  });
+});
+
+/** This application's own contribution, registered the way the client runtime registers it. */
+function resolveRoutes() {
+  return resolveAppClientContributions([
+    {
+      packageName: '@nocobase/app-template-default',
+      routes: applicationRoutes,
+      source: 'application',
+    },
+  ]);
+}
+
+/**
+ * The paths of the pages a route tree registers. A menu group names no component, so it carries no path of its own
+ * and inherits its parent's — filtering on `componentLoader` is what keeps that inherited path out of the list.
+ */
+function pagePaths(routes: readonly AppClientRegisteredRoute[]): string[] {
+  return routes.flatMap((route) => [
+    ...(route.componentLoader ? [route.path] : []),
+    ...pagePaths(route.children ?? []),
+  ]);
+}
+
+/** Every page loader in a tree, at any depth. */
+function componentLoadersIn(
+  routes: readonly AppClientRegisteredRoute[],
+): AppClientRouteComponentLoader[] {
+  return routes.flatMap((route) => [
+    ...(route.componentLoader ? [route.componentLoader] : []),
+    ...componentLoadersIn(route.children ?? []),
+  ]);
+}
+
+/** Page authorization comes directly from the registered tree. */
+function pageAuthorizations(
+  routes: readonly AppClientRegisteredRoute[],
+): { name: string; authorizedAs: string | null }[] {
+  return routes.flatMap((route) => [
+    ...(route.componentLoader && route.auth === 'required'
+      ? [
+          {
+            name: route.name,
+            authorizedAs:
+              route.authz === 'skip'
+                ? null
+                : route.authz === 'unrestricted'
+                  ? 'unrestricted'
+                  : route.authz.resource.type === 'page'
+                    ? route.authz.resource.id
+                    : `${route.authz.resource.type}:${route.authz.resource.id}`,
+          },
+        ]
+      : []),
+    ...pageAuthorizations(route.children ?? []),
+  ]);
+}

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

@@ -0,0 +1,112 @@
+import { createApp } from '../../client/app.js';
+import { ServiceProvider } from '@nocobase/service-provider';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ClientApplication, toasterToken } from '@nocobase/app-client';
+import {
+  createAppClientConfig,
+  defineAppClientRenderConfig,
+  defineClientPlugins,
+} from '@nocobase/app-client';
+import {
+  defineAppRuntime,
+  resolveAppRuntime,
+  type AppRuntimeDefinition,
+} from '@nocobase/app-client/runtime';
+import type { ClientApplication as ClientApplicationType } from '@nocobase/app-client';
+
+import appRuntime from '../../client/runtime.ts';
+
+describe('app client runtime', () => {
+  it('resolves static contributions without running ServiceProvider lifecycle', async () => {
+    const calls: string[] = [];
+    class Provider extends ServiceProvider<ClientApplicationType> {
+      public readonly name: string = '@example/provider';
+
+      public override boot(): Promise<void> {
+        calls.push('boot');
+        return Promise.resolve();
+      }
+    }
+    const runtime = await resolveAppRuntime(
+      defineAppRuntime({
+        packageName: '@example/app',
+        createAppConfig: createAppClientConfig,
+        serviceProviders: [Provider],
+        reactProviders: [],
+        routes: [],
+        plugins: defineClientPlugins([]),
+      }),
+    );
+
+    expect(runtime.serviceProviders[0]).toMatchObject({
+      Provider,
+      context: { packageName: '@example/app', source: 'application' },
+    });
+    expect(runtime.reactProviders).toEqual([]);
+    expect(calls).toEqual([]);
+  });
+
+  it('runs provider lifecycle and exposes Refine config through ClientApplication', async () => {
+    const authProvider = {
+      check: vi.fn(),
+      getIdentity: vi.fn(),
+      login: vi.fn(),
+      logout: vi.fn(),
+      onError: vi.fn(),
+    };
+    class Provider extends ServiceProvider<ClientApplicationType> {
+      public readonly name: string = '@example/provider';
+
+      public override boot(): Promise<void> {
+        this.app.refine.setAuthProvider(authProvider);
+        return Promise.resolve();
+      }
+    }
+    const runtime = await resolveAppRuntime(
+      defineAppRuntime({
+        packageName: '@example/app',
+        createAppConfig: createAppClientConfig,
+        serviceProviders: [Provider],
+        plugins: defineClientPlugins([]),
+      }),
+    );
+    const app = new ClientApplication({
+      runtime,
+      createRenderConfig: () => defineAppClientRenderConfig({ routes: null }),
+    });
+
+    await app.start();
+    expect(app.refineConfig.authProvider).toBe(authProvider);
+    await app.shutdown();
+  });
+
+  it('uses the default template Application and static plugin declarations', async () => {
+    const runtime = await resolveAppRuntime(appRuntime, {
+      rawConfig: { app: { title: 'Configured application' } },
+    });
+    const app = createApp(runtime);
+
+    expect(app).toBeInstanceOf(ClientApplication);
+    await expect(app.start()).resolves.toBeUndefined();
+    expect(app.config.get('app.title')).toBe('Configured application');
+    expect(app.refineConfig.options?.title).toEqual({
+      text: 'Configured application',
+    });
+    // Plugins and pages report through the registered toaster, and the mounted Toaster renders what it forwards.
+    // Without either half, toasts disappear.
+    expect(app.services.has(toasterToken)).toBe(true);
+    expect(runtime.reactProviders).toContainEqual(
+      expect.objectContaining({ name: 'toaster', layer: 'application' }),
+    );
+    expect(app.refineConfig.resources ?? []).toEqual([]);
+    await app.shutdown();
+  });
+
+  it('requires a Client config factory in the breaking static Runtime protocol', async () => {
+    const { createAppConfig: _createAppConfig, ...withoutConfig } = appRuntime;
+    await expect(
+      resolveAppRuntime(withoutConfig as AppRuntimeDefinition),
+    ).rejects.toThrow();
+  });
+});