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

package/tests/logic/template-package-name.test.ts

@@ -0,0 +1,88 @@
+// @vitest-environment node
+
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const appRoot = path.resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../..',
+);
+
+interface AppPackageJson {
+  readonly name: string;
+  readonly nocobase?: { readonly templatePackage?: string };
+}
+
+const appPackage = JSON.parse(
+  readFileSync(path.join(appRoot, 'package.json'), 'utf8'),
+) as AppPackageJson;
+const applicationName = appPackage.name;
+const originalTemplateName =
+  appPackage.nocobase?.templatePackage ?? applicationName;
+const isGeneratedApplication = originalTemplateName !== applicationName;
+
+/**
+ * Sources present in this template that `create-app` rewrites, from `PACKAGE_NAME_SOURCES` in
+ * `packages/tools/create-app/src/lib/scaffold.ts`.
+ */
+const REWRITTEN_SOURCES = ['client/runtime.ts', 'client/service-provider.ts'];
+
+/** Source trees shipped to a generated application, per the `files` field. */
+const SHIPPED_SOURCE_DIRECTORIES = ['client', 'server', 'database', 'cli'];
+
+const SOURCE_EXTENSIONS = new Set(['.ts', '.tsx', '.mjs', '.js']);
+
+function sourceFilesIn(directory: string): string[] {
+  const absolute = path.join(appRoot, directory);
+
+  return readdirSync(absolute, { withFileTypes: true }).flatMap((entry) => {
+    if (entry.name === 'node_modules') return [];
+
+    const relative = path.join(directory, entry.name);
+
+    if (entry.isDirectory()) return sourceFilesIn(relative);
+    if (!SOURCE_EXTENSIONS.has(path.extname(entry.name))) return [];
+
+    return [relative];
+  });
+}
+
+describe('template package name', () => {
+  /**
+   * `create-app` rewrites this name to the application's in a fixed list of files. A source that embeds it but is not
+   * on that list ships the template's name into every generated application, where the client would then declare an
+   * i18n namespace the server does not share.
+   *
+   * When this fails, either rewrite the new occurrence to derive the name at runtime, or add the file to
+   * `PACKAGE_NAME_SOURCES` in `packages/tools/create-app/src/lib/scaffold.ts` and to `REWRITTEN_SOURCES` above.
+   */
+  it('keeps the original template name only where create-app rewrites it', () => {
+    const offenders = SHIPPED_SOURCE_DIRECTORIES.filter((directory) =>
+      statSync(path.join(appRoot, directory), { throwIfNoEntry: false }),
+    )
+      .flatMap((directory) => sourceFilesIn(directory))
+      .filter(
+        (relative) =>
+          isGeneratedApplication || !REWRITTEN_SOURCES.includes(relative),
+      )
+      .filter((relative) =>
+        readFileSync(path.join(appRoot, relative), 'utf8').includes(
+          originalTemplateName,
+        ),
+      );
+
+    expect(offenders).toEqual([]);
+  });
+
+  /** The rewrite list is only correct while every file on it exists and carries the current application name. */
+  it('uses the application name in every source create-app rewrites', () => {
+    for (const relative of REWRITTEN_SOURCES) {
+      expect(
+        readFileSync(path.join(appRoot, relative), 'utf8'),
+        `${relative} does not contain ${applicationName}`,
+      ).toContain(applicationName);
+    }
+  });
+});

package/tests/logic/theme-preferences.test.ts

@@ -0,0 +1,86 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { themePresets } from '../../client/theme/theme-presets';
+import {
+  initializeTheme,
+  themeStorageKeys,
+} from '../../client/theme/theme-preferences';
+
+describe('application appearance storage', () => {
+  it('lists Compact first as the default preset', () => {
+    expect(themePresets[0].id).toBe('compact');
+  });
+  it('restores Compact when the saved Ant Design preset is removed', () => {
+    const keys = themeStorageKeys('/crm/');
+    localStorage.setItem(keys.preset, 'ant-design');
+    localStorage.setItem(keys.mode, 'light');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement.dataset.theme).toBe('compact');
+    expect(document.documentElement).toHaveClass('light');
+  });
+  afterEach(() => vi.unstubAllGlobals());
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.removeAttribute('class');
+    vi.stubGlobal('matchMedia', () => ({ matches: true }));
+  });
+
+  it('uses the first registered preset as the fallback', () => {
+    initializeTheme('/crm/', ['custom', 'default']);
+    expect(document.documentElement.dataset.theme).toBe('custom');
+  });
+
+  it('separates apps, preserves nested paths and distinguishes the root', () => {
+    expect(themeStorageKeys('/crm/').mode).toBe(
+      'nocobase:crm:theme:color-scheme',
+    );
+    expect(themeStorageKeys('/crm').preset).toBe('nocobase:crm:theme:preset');
+    expect(themeStorageKeys('/team/crm/').preset).toBe(
+      'nocobase:team%2Fcrm:theme:preset',
+    );
+    expect(themeStorageKeys('/').preset).toBe('nocobase:%2F:theme:preset');
+    expect(themeStorageKeys('/root/')).not.toEqual(themeStorageKeys('/'));
+  });
+
+  it('restores both preferences before React without reading another app', () => {
+    localStorage.setItem('nocobase:crm:theme:color-scheme', 'light');
+    localStorage.setItem('nocobase:crm:theme:preset', 'default');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'default');
+    expect(document.documentElement).toHaveClass('light');
+    initializeTheme(
+      '/erp/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
+    expect(document.documentElement).toHaveClass('dark');
+  });
+
+  it('falls back on invalid values and unavailable storage', () => {
+    localStorage.setItem('nocobase:crm:theme:color-scheme', 'invalid');
+    localStorage.setItem('nocobase:crm:theme:preset', 'deleted');
+    initializeTheme(
+      '/crm/',
+      themePresets.map(({ id }) => id),
+    );
+    expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
+    expect(document.documentElement).toHaveClass('dark');
+    const spy = vi
+      .spyOn(Storage.prototype, 'getItem')
+      .mockImplementation(() => {
+        throw new Error('blocked');
+      });
+    expect(() =>
+      initializeTheme(
+        '/crm/',
+        themePresets.map(({ id }) => id),
+      ),
+    ).not.toThrow();
+    spy.mockRestore();
+  });
+});

package/tests/logic/theme-tokens.test.ts

@@ -0,0 +1,248 @@
+// @vitest-environment node
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import tailwind from '@tailwindcss/postcss';
+import postcss, { type Root } from 'postcss';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { themePresets } from '../../client/theme/theme-presets';
+
+const appRoot = fileURLToPath(new URL('../..', import.meta.url));
+const sizes = [
+  'xs',
+  'sm',
+  'base',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+];
+const shadows = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const colors = [
+  'background',
+  'foreground',
+  'card',
+  'card-foreground',
+  'popover',
+  'popover-foreground',
+  'primary',
+  'primary-foreground',
+  'secondary',
+  'secondary-foreground',
+  'muted',
+  'muted-foreground',
+  'accent',
+  'accent-foreground',
+  'destructive',
+  'border',
+  'input',
+  'ring',
+  ...Array.from({ length: 5 }, (_, i) => `chart-${i + 1}`),
+  'sidebar',
+  'sidebar-foreground',
+  'sidebar-primary',
+  'sidebar-primary-foreground',
+  'sidebar-accent',
+  'sidebar-accent-foreground',
+  'sidebar-border',
+  'sidebar-ring',
+];
+const sharedTokens = [
+  'radius',
+  'spacing',
+  'font-sans',
+  'font-serif',
+  'font-mono',
+  'font-heading',
+  ...sizes.flatMap((size) => [`text-${size}`, `text-${size}--line-height`]),
+  ...shadows.map((size) => `shadow-${size}`),
+];
+const radii = {
+  sm: 0.6,
+  md: 0.8,
+  lg: 1,
+  xl: 1.4,
+  '2xl': 1.8,
+  '3xl': 2.2,
+  '4xl': 2.6,
+};
+
+function declarations(root: Root, selector: string): Record<string, string> {
+  const values: Record<string, string> = {};
+  root.walkRules((rule) => {
+    if (rule.selectors.includes(selector)) {
+      rule.walkDecls((decl) => {
+        values[decl.prop] = decl.value;
+      });
+    }
+  });
+  return values;
+}
+
+describe('theme token contract', () => {
+  it('keeps compact identical to default except for dimensions', () => {
+    const readPreset = (id: string) =>
+      postcss.parse(
+        readFileSync(
+          new URL(`../../client/theme/themes/${id}.css`, import.meta.url),
+          'utf8',
+        ),
+      );
+    const defaultCss = readPreset('default');
+    const compactCss = readPreset('compact');
+    const withoutDimensions = (values: Record<string, string>) =>
+      Object.fromEntries(
+        Object.entries(values).filter(
+          ([key]) =>
+            key !== '--spacing' &&
+            key !== '--radius' &&
+            !key.startsWith('--text-'),
+        ),
+      );
+    for (const mode of ['', '.dark']) {
+      expect(
+        withoutDimensions(
+          declarations(compactCss, `:root${mode}[data-theme='compact']`),
+        ),
+      ).toEqual(
+        withoutDimensions(
+          declarations(defaultCss, `:root${mode}[data-theme='default']`),
+        ),
+      );
+    }
+    const compact = declarations(compactCss, ":root[data-theme='compact']");
+    const standard = declarations(defaultCss, ":root[data-theme='default']");
+    expect(parseFloat(compact['--spacing'])).toBeLessThan(
+      parseFloat(standard['--spacing']),
+    );
+  });
+
+  for (const { id } of themePresets) {
+    it(`${id} defines complete tokens for the page and isolated previews`, () => {
+      const root = postcss.parse(
+        readFileSync(
+          new URL(`../../client/theme/themes/${id}.css`, import.meta.url),
+          'utf8',
+        ),
+      );
+      const light = declarations(root, `:root[data-theme='${id}']`);
+      const dark = declarations(root, `:root.dark[data-theme='${id}']`);
+      for (const token of [...colors, ...sharedTokens]) {
+        expect(light[`--${token}`], `${id} light: ${token}`).toBeTruthy();
+      }
+      for (const token of colors) {
+        expect(dark[`--${token}`], `${id} dark: ${token}`).toBeTruthy();
+      }
+      expect(declarations(root, `.theme-preview[data-theme='${id}']`)).toEqual(
+        light,
+      );
+      expect(
+        declarations(root, `:root.dark .theme-preview[data-theme='${id}']`),
+      ).toEqual(dark);
+    });
+  }
+});
+
+describe('compiled theme utilities', () => {
+  let compiled: Root;
+  beforeAll(async () => {
+    const candidates = [
+      ...colors.map((color) => `bg-${color}`),
+      ...sizes.map((size) => `text-${size}`),
+      ...shadows.map((size) => `shadow-${size}`),
+      ...Object.keys(radii).map((size) => `rounded-${size}`),
+      'font-sans',
+      'font-serif',
+      'font-mono',
+      'font-heading',
+      'p-4',
+      'gap-2',
+      'h-8',
+      'fill-chart-1',
+      'stroke-chart-5',
+    ];
+    const source = readFileSync(
+      new URL('../../client/styles.css', import.meta.url),
+      'utf8',
+    );
+    const result = await postcss([
+      tailwind({ base: appRoot, optimize: false }),
+    ]).process(source + `\n@source inline("${candidates.join(' ')}");`, {
+      from: fileURLToPath(new URL('../../client/styles.css', import.meta.url)),
+    });
+    compiled = result.root;
+  }, 30_000);
+
+  it('maps every semantic color to a runtime variable', () => {
+    for (const color of colors) {
+      expect(declarations(compiled, `.bg-${color}`)['background-color']).toBe(
+        `var(--${color})`,
+      );
+    }
+    expect(declarations(compiled, '.fill-chart-1').fill).toBe('var(--chart-1)');
+    expect(declarations(compiled, '.stroke-chart-5').stroke).toBe(
+      'var(--chart-5)',
+    );
+  });
+
+  it('keeps fonts, sizes, line heights, spacing and shadows overridable', () => {
+    for (const font of ['sans', 'serif', 'mono', 'heading']) {
+      expect(declarations(compiled, `.font-${font}`)['font-family']).toBe(
+        `var(--font-${font})`,
+      );
+    }
+    for (const size of sizes) {
+      const rule = declarations(compiled, `.text-${size}`);
+      expect(rule['font-size']).toBe(`var(--text-${size})`);
+      expect(rule['line-height']).toContain(`var(--text-${size}--line-height)`);
+    }
+    for (const [selector, property, multiplier] of [
+      ['.p-4', 'padding', '4'],
+      ['.gap-2', 'gap', '2'],
+      ['.h-8', 'height', '8'],
+    ]) {
+      expect(declarations(compiled, selector)[property]).toBe(
+        `calc(var(--spacing) * ${multiplier})`,
+      );
+    }
+    for (const size of shadows) {
+      expect(
+        Object.values(declarations(compiled, `.shadow-${size}`)).join(' '),
+      ).toContain(`var(--shadow-${size})`);
+    }
+  });
+
+  it('derives all seven corner sizes from the current preset', () => {
+    for (const [size, multiplier] of Object.entries(radii)) {
+      const expected =
+        multiplier === 1
+          ? 'var(--radius)'
+          : `calc(var(--radius) * ${multiplier})`;
+      expect(declarations(compiled, `.rounded-${size}`)['border-radius']).toBe(
+        expected,
+      );
+    }
+  });
+
+  it('connects default text, headings and code to font tokens', () => {
+    expect(declarations(compiled, 'body')['font-family']).toBe(
+      'var(--font-sans)',
+    );
+    expect(declarations(compiled, 'body')['font-size']).toBe(
+      'var(--text-base)',
+    );
+    expect(declarations(compiled, 'h1')['font-family']).toBe(
+      'var(--font-heading)',
+    );
+    expect(declarations(compiled, 'code')['font-family']).toBe(
+      'var(--font-mono)',
+    );
+  });
+});

package/tests/logic/toaster.test.tsx

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { createToastManager, Toaster } from '#components/ui/toast';
+import { createToaster } from '#lib/toaster';
+
+describe('application toaster', () => {
+  it('forwards what a toast reports to the Base UI toast manager', () => {
+    const manager = createToastManager();
+    const add = vi.spyOn(manager, 'add');
+    const close = vi.spyOn(manager, 'close');
+    const onClose = vi.fn();
+    const toaster = createToaster(manager);
+
+    const id = toaster.show({
+      id: 'saved',
+      type: 'success',
+      title: 'Saved',
+      description: 'All changes are stored.',
+      duration: 4000,
+      onClose,
+    });
+    toaster.close(id);
+
+    expect(id).toBe('saved');
+    expect(add).toHaveBeenCalledWith({
+      id: 'saved',
+      type: 'success',
+      title: 'Saved',
+      description: 'All changes are stored.',
+      timeout: 4000,
+      priority: 'low',
+      onClose,
+    });
+    expect(close).toHaveBeenCalledWith('saved');
+    expect(toaster.show({ title: 'Saved again' })).toEqual(expect.any(String));
+  });
+
+  it('renders an action as a button that leaves the toast open', async () => {
+    const manager = createToastManager();
+    const onClick = vi.fn();
+    render(<Toaster toastManager={manager} />);
+
+    act(() => {
+      createToaster(manager).show({
+        type: 'info',
+        title: 'Archived',
+        action: { label: 'Undo', onClick },
+      });
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Undo' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+  });
+
+  it('closes one toast, never all of them', () => {
+    const manager = createToastManager();
+    const close = vi.spyOn(manager, 'close');
+
+    // A JavaScript caller can pass no id, which Base UI would take as "close every toast".
+    createToaster(manager).close(undefined as unknown as string);
+
+    expect(close).not.toHaveBeenCalled();
+  });
+
+  it('announces a plain-text error at once and keeps every other toast at the default priority', () => {
+    const manager = createToastManager();
+    const add = vi.spyOn(manager, 'add');
+    const toaster = createToaster(manager);
+
+    toaster.show({
+      type: 'error',
+      title: 'Unable to save',
+      description: 'The server is unavailable.',
+    });
+    toaster.show({
+      type: 'error',
+      title: 'Unable to deploy',
+      description: <button type='button'>Show technical details</button>,
+    });
+    toaster.show({
+      type: 'error',
+      title: 'Unable to save',
+      action: { label: 'Retry', onClick: vi.fn() },
+    });
+    toaster.show({ type: 'success', title: 'Saved' });
+
+    expect(add.mock.calls.map(([options]) => options.priority)).toEqual([
+      'high',
+      'low',
+      'low',
+      'low',
+    ]);
+  });
+
+  it('shows what it forwards in the Toaster mounted with its defaults', async () => {
+    // Both defaults are the module's toast manager: that shared manager is what connects the registered toaster to the
+    // Toaster that client/react-providers.ts mounts.
+    render(<Toaster />);
+
+    act(() => {
+      createToaster().show({ type: 'success', title: 'Connected' });
+    });
+
+    expect(await screen.findByText('Connected')).toBeInTheDocument();
+  });
+});

package/tests/logic/user-menu-sign-out.test.tsx

@@ -0,0 +1,98 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  TestI18nProvider,
+  createTestI18nRuntime,
+} from '@nocobase/i18n/testing';
+import type { ReactNode } from 'react';
+import { UserMenu } from '../../client/layouts/components/user-menu.tsx';
+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>;
+}
+
+const { signOut, refresh, showToast } = vi.hoisted(() => ({
+  signOut: vi.fn(),
+  refresh: vi.fn(),
+  showToast: vi.fn(),
+}));
+vi.mock('@nocobase/app-client', () => {
+  const toaster = { show: showToast, close: vi.fn() };
+  return { useToaster: () => toaster };
+});
+vi.mock('@nocobase/app-plugin-authentication/client', () => ({
+  useAuthentication: () => ({
+    client: { signOut },
+    session: {
+      user: { id: 'operator', name: 'Operator', email: 'operator@example.com' },
+    },
+    isPending: false,
+    refresh,
+  }),
+}));
+vi.mock('../../client/layouts/components/language-switcher.js', () => ({
+  LanguageSwitcher: () => null,
+}));
+
+/**
+ * Opens the account menu from the keyboard. A pointer opens it on hover and again on the press, one frame later, which
+ * can reopen the menu after a test has already chosen an item and closed it.
+ */
+async function openAccountMenu(): Promise<void> {
+  act(() => screen.getByRole('button', { name: 'Open account menu' }).focus());
+  await userEvent.keyboard('{Enter}');
+}
+
+describe('account menu sign out', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    refresh.mockResolvedValue(undefined);
+  });
+  async function signOutFromMenu() {
+    render(<UserMenu />, { wrapper: I18n });
+    await openAccountMenu();
+    fireEvent.click(await screen.findByRole('menuitem', { name: 'Sign out' }));
+  }
+  it('refreshes the server session after successful sign-out', async () => {
+    signOut.mockResolvedValue({ data: { success: true }, error: null });
+    await signOutFromMenu();
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+    expect(showToast).not.toHaveBeenCalled();
+  });
+  it('reports a rejected origin without pretending the session ended', async () => {
+    signOut.mockResolvedValue({
+      data: null,
+      error: { status: 403, code: 'INVALID_ORIGIN' },
+    });
+    await signOutFromMenu();
+    await waitFor(() =>
+      expect(showToast).toHaveBeenCalledWith({
+        type: 'error',
+        title: 'Unable to sign out. Please try again.',
+      }),
+    );
+    expect(refresh).not.toHaveBeenCalled();
+    await openAccountMenu();
+    expect(
+      await screen.findByRole('menuitem', { name: 'Sign out' }),
+    ).not.toHaveAttribute('aria-disabled', 'true');
+  });
+  it('reports network failures and allows retry', async () => {
+    signOut.mockRejectedValue(new Error('Network unavailable'));
+    await signOutFromMenu();
+    await waitFor(() => expect(showToast).toHaveBeenCalledTimes(1));
+    expect(refresh).not.toHaveBeenCalled();
+  });
+});

package/tests/setup/client-config.ts

@@ -0,0 +1,27 @@
+import { beforeEach } from 'vitest';
+
+const RUNTIME_CONFIG_ELEMENT_ID = 'nocobase-runtime-config';
+
+/**
+ * The application server renders the client configuration into every page, and the client reads its mount path and
+ * API URL from nowhere else. A test page has no server in front of it, so this puts the same block in place, mounted
+ * at `/main`. A test that needs other values removes it and renders its own.
+ */
+function renderClientConfig(): void {
+  // Server-side tests run under `@vitest-environment node`, where there is no page to render into.
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(RUNTIME_CONFIG_ELEMENT_ID)) return;
+  const element = document.createElement('script');
+  element.id = RUNTIME_CONFIG_ELEMENT_ID;
+  element.type = 'application/json';
+  element.textContent = JSON.stringify({
+    version: 1,
+    config: { app: { basePath: '/main' }, api: { baseURL: '/main/api' } },
+  });
+  document.head.append(element);
+}
+
+// Before the test file is imported, as the server renders it before the entry module runs: some modules resolve
+// URLs at the top level.
+renderClientConfig();
+beforeEach(renderClientConfig);

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@nocobase/dev-config/tsconfig/client.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
+  },
+  // A workflow package's client form is browser code that the application's
+  // Vite build resolves through the workflow plugin's virtual module, so it is
+  // typechecked here rather than by the server build.
+  "include": ["client", "workflows/*/client"],
+  "exclude": ["registry"]
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@nocobase/dev-config/tsconfig/node-tooling.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": [
+    "vite.config.ts",
+    "cli/**/*.ts",
+    "playwright.config.ts",
+    "tests/playwright/**/*.ts"
+  ]
+}