@nocobase/app-template-default 1.0.0-beta.87 → 1.0.0-beta.89

package/tests/fixtures/dialog-footer.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createMemoryRouter, Link, Outlet, RouterProvider } from 'react-router';
+import {
+  createTestI18nRuntime,
+  TestI18nProvider,
+} from '@nocobase/i18n/testing';
+import { Button } from '../../client/components/ui/button';
+import { Input } from '../../client/components/ui/input';
+import { Spinner } from '../../client/components/ui/spinner';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../client/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../client/components/ui/alert-dialog';
+import { RouteDialog } from '../../client/components/route-dialog';
+import { RouteDrawer } from '../../client/components/route-drawer';
+import enUS from '../../client/locales/en-US';
+import '../../client/styles.css';
+
+// Exercise installed primitives, portals, links and route footers with the real
+// application stylesheet. No backend or authentication is needed for this fixture.
+const params = new URLSearchParams(location.search);
+const kind = params.get('kind') ?? 'dialog';
+const chinese = params.has('chinese');
+const long = params.has('long');
+const pending = params.has('pending');
+const horizontal = params.has('horizontal');
+document.documentElement.dataset.theme = params.get('preset') ?? 'default';
+document.documentElement.classList.toggle('dark', params.has('dark'));
+const runtime = await createTestI18nRuntime({
+  application: { namespace: '@nocobase/app-template-default', resources: enUS },
+});
+const cancel = chinese ? '取消并返回实例列表' : 'Cancel';
+const submit = chinese
+  ? '确认创建这个具有较长中文名称的应用实例并继续配置'
+  : long
+    ? 'Create this application instance and continue configuring its workspace'
+    : 'Create instance';
+const title = chinese ? '创建应用实例' : 'Create application instance';
+const description = chinese
+  ? '输入实例名称，然后创建实例。'
+  : 'Enter a name to create an application instance.';
+
+function Editor() {
+  return (
+    <form
+      id='instance-form'
+      onSubmit={(event) => {
+        event.preventDefault();
+        void router.navigate('/instances?created=1');
+      }}
+    >
+      <label htmlFor='instance-name'>
+        {chinese ? '实例名称' : 'Instance name'}
+      </label>
+      <Input id='instance-name' required defaultValue='Customer portal' />
+      {long && !kind.startsWith('alert') && (
+        <div className='h-[900px]' aria-hidden='true' />
+      )}
+    </form>
+  );
+}
+
+function Actions() {
+  return (
+    <>
+      {kind === 'dialog-close' ? (
+        <DialogClose
+          disabled={pending}
+          data-testid='cancel'
+          render={<Button variant='outline' />}
+        >
+          {cancel}
+        </DialogClose>
+      ) : (
+        <Button
+          variant='outline'
+          nativeButton={false}
+          disabled={pending}
+          data-testid='cancel'
+          render={<Link to='/instances?filter=recent' />}
+        >
+          {cancel}
+        </Button>
+      )}
+      <Button
+        type='submit'
+        form='instance-form'
+        disabled={pending}
+        aria-busy={pending}
+        data-testid='submit'
+      >
+        {pending && <Spinner data-icon='inline-start' />}
+        {pending ? 'Creating instance…' : submit}
+      </Button>
+    </>
+  );
+}
+
+export default function Overlay() {
+  const [open, setOpen] = useState(true);
+  if (kind === 'route' || kind === 'drawer') {
+    const Component = kind === 'drawer' ? RouteDrawer : RouteDialog;
+    return (
+      <Component
+        title={title}
+        description={description}
+        footer={<Actions />}
+        beforeClose={() => !pending}
+      >
+        <Editor />
+      </Component>
+    );
+  }
+  if (kind === 'alert' || kind === 'alert-small') {
+    return (
+      <AlertDialog
+        open={open}
+        onOpenChange={(value) => {
+          if (!pending) setOpen(value);
+        }}
+      >
+        <AlertDialogContent size={kind === 'alert-small' ? 'sm' : 'default'}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <Editor />
+          <AlertDialogFooter
+            className={horizontal ? 'flex-row items-center' : undefined}
+          >
+            <AlertDialogCancel disabled={pending} data-testid='cancel'>
+              {cancel}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              type='submit'
+              form='instance-form'
+              disabled={pending}
+              aria-busy={pending}
+              data-testid='submit'
+            >
+              {pending && <Spinner data-icon='inline-start' />}
+              {pending ? 'Creating instance…' : submit}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  }
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (!pending) setOpen(value);
+      }}
+    >
+      <DialogContent className='flex flex-col overflow-hidden'>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <div className='min-h-0 overflow-y-auto'>
+          <Editor />
+        </div>
+        <DialogFooter
+          className={horizontal ? 'flex-row items-center' : undefined}
+        >
+          <Actions />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const router = createMemoryRouter(
+  [
+    {
+      path: '/instances',
+      element: (
+        <main className='p-6'>
+          <h1>Application instances</h1>
+          <p data-testid='location'>Instance list</p>
+          <Outlet />
+        </main>
+      ),
+      children: [{ path: 'new', element: <Overlay /> }],
+    },
+  ],
+  { initialEntries: ['/instances/new?filter=recent'] },
+);
+router.subscribe((state) => {
+  const output = document.querySelector('[data-testid=location]');
+  if (output)
+    output.textContent = state.location.pathname + state.location.search;
+});
+createRoot(document.getElementById('root')!).render(
+  <TestI18nProvider runtime={runtime}>
+    <RouterProvider router={router} />
+  </TestI18nProvider>,
+);

package/tests/helpers/authenticated-client.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
+import { randomUUID } from 'node:crypto';
 import { CookieJar } from 'jsdom';
-import { onTestFinished, vi } from 'vitest';
+import { afterAll, beforeAll, onTestFinished, vi } from 'vitest';
 import { act, waitFor } from '@testing-library/react';
 import { createTestApp, type TestApp } from '@nocobase/app-testing/server';
 import { renderWithApp } from '@nocobase/app-testing/client';
@@ -36,27 +37,18 @@ export async function renderAuthenticatedClient(
       response: Response,
     ) => void | Promise<void>;
   } = {},
+  sharedServer?: TestApp,
 ) {
-  const server = await createTestApp({
-    createServer: createStandaloneServer,
-    connections: ['main'],
-    config: {
-      logging: { enabled: false },
-      app: { publicOrigin: 'http://localhost' },
-      auth: {
-        secret: 'test-auth-secret-at-least-32-characters',
-        emailAndPassword: { disableSignUp: false },
-        advanced: { disableOriginCheck: false, disableCSRFCheck: false },
-      },
-    },
-  });
-  onTestFinished(() => server.close());
+  const server = sharedServer ?? (await createClientTestServer());
+  if (!sharedServer) onTestFinished(() => server.close());
+  const identity = sharedServer ? randomUUID() : '';
+  const permissionSetKey = identity ? `test-access-${identity}` : 'test-access';
   const member = {
     name: 'Test member',
-    email: 'member@example.test',
+    email: identity ? `member-${identity}@example.test` : 'member@example.test',
     password: 'test-member-password',
   };
-  if (options.member) {
+  if (options.member || sharedServer) {
     const response = await server.request('/auth/sign-up/email', {
       method: 'POST',
       headers: {
@@ -68,22 +60,77 @@ export async function renderAuthenticatedClient(
     if (!response.ok)
       throw new Error(`Member registration failed: ${await response.text()}`);
   }
+  const authz = server.application.container.resolve(authorizationToken);
   const session = await signIn(
     server,
-    options.member ? member : DEFAULT_ADMIN_CREDENTIALS,
+    options.member || sharedServer ? member : DEFAULT_ADMIN_CREDENTIALS,
   );
+  if (sharedServer && !options.member) {
+    await authz.permissionSets.assign({
+      id: randomUUID(),
+      permissionSet: 'root',
+      subject: { type: 'user', id: session.user.id },
+    });
+  }
   if (options.grants) {
-    const authz = server.application.container.resolve(authorizationToken);
     await authz.permissionSets.create({
-      key: 'test-access',
+      key: permissionSetKey,
       grants: options.grants,
     });
     await authz.permissionSets.assign({
-      id: 'test-assignment',
-      permissionSet: 'test-access',
+      id: identity ? `test-assignment-${identity}` : 'test-assignment',
+      permissionSet: permissionSetKey,
       subject: { type: 'user', id: session.user.id },
     });
   }
+  return renderClient(server, session, permissionSetKey, ui, options);
+}
+
+function createClientTestServer() {
+  return createTestApp({
+    createServer: createStandaloneServer,
+    connections: ['main'],
+    config: {
+      logging: { enabled: false },
+      app: { publicOrigin: 'http://localhost' },
+      auth: {
+        secret: 'test-auth-secret-at-least-32-characters',
+        emailAndPassword: { disableSignUp: false },
+        advanced: { disableOriginCheck: false, disableCSRFCheck: false },
+      },
+    },
+  });
+}
+
+/**
+ * Reuse installation within a file whose tests only change their own identity's state.
+ * Each render gets a new user, session, grants, cookies and client. Tests that mutate
+ * shared application configuration or business data use renderAuthenticatedClient instead.
+ */
+export function createAuthenticatedClientRenderer() {
+  let server: TestApp | undefined;
+  beforeAll(async () => {
+    server = await createClientTestServer();
+  });
+  afterAll(async () => {
+    await server?.close();
+  });
+  return (
+    ui: ReactElement,
+    options: Parameters<typeof renderAuthenticatedClient>[1] = {},
+  ) => {
+    if (!server) throw new Error('The test application has not started.');
+    return renderAuthenticatedClient(ui, options, server);
+  };
+}
+
+async function renderClient(
+  server: TestApp,
+  session: TestSession,
+  permissionSetKey: string,
+  ui: ReactElement,
+  options: NonNullable<Parameters<typeof renderAuthenticatedClient>[1]>,
+) {
   await options.prepare?.(server, session);
   const jar = new CookieJar();
   const root = `http://localhost${server.publicBasePath.replace(/\/$/u, '')}`;
@@ -135,6 +182,7 @@ export async function renderAuthenticatedClient(
     ...view,
     server,
     session,
+    permissionSetKey,
     identity: () => identity!,
     async signInAs(credentials: SignInCredentials) {
       const next = await signIn(server, credentials);

package/tests/playwright/dialog-footer.test.ts

@@ -0,0 +1,227 @@
+/// <reference lib="dom" />
+import { expect, test, type Locator, type Page } from '@playwright/test';
+import path from 'node:path';
+
+const applicationUrl = process.env.APP_URL;
+test.skip(!applicationUrl, 'Set APP_URL to the running application entry.');
+const fixture = `${applicationUrl?.replace(/\/$/, '')}/tests/fixtures/dialog-footer.html`;
+
+async function geometry(page: Page) {
+  return page.getByTestId('cancel').evaluate((cancel) => {
+    const submit = document.querySelector('[data-testid=submit]')!;
+    const footer = cancel.parentElement!;
+    const panel = cancel.closest('[role=dialog], [role=alertdialog]')!;
+    const measure = (element: Element) => {
+      const rect = element.getBoundingClientRect();
+      const css = getComputedStyle(element);
+      return {
+        x: rect.x,
+        y: rect.y,
+        right: rect.right,
+        bottom: rect.bottom,
+        height: rect.height,
+        width: rect.width,
+        paddingLeft: css.paddingLeft,
+        paddingRight: css.paddingRight,
+        paddingTop: css.paddingTop,
+        paddingBottom: css.paddingBottom,
+        minHeight: parseFloat(css.minHeight),
+        overflow: element.scrollWidth > element.clientWidth + 1,
+      };
+    };
+    return {
+      cancel: measure(cancel),
+      submit: measure(submit),
+      footer: measure(footer),
+      panel: measure(panel),
+      horizontal:
+        getComputedStyle(footer).flexDirection === 'row' ||
+        getComputedStyle(footer).display === 'grid',
+    };
+  });
+}
+
+async function checkGeometry(page: Page) {
+  await expect(page.getByTestId('cancel')).toBeVisible();
+  let previous = '';
+  await expect
+    .poll(async () => {
+      const current = JSON.stringify(await geometry(page));
+      const stable = current === previous;
+      previous = current;
+      return stable;
+    })
+    .toBe(true);
+  const result = await geometry(page);
+  const { cancel, submit, footer, panel, horizontal } = result;
+  expect(cancel.height).toBeGreaterThanOrEqual(cancel.minHeight - 1);
+  expect(submit.height).toBeGreaterThanOrEqual(submit.minHeight - 1);
+  expect(cancel.paddingLeft).toBe(submit.paddingLeft);
+  expect(cancel.paddingRight).toBe(submit.paddingRight);
+  expect(cancel.paddingTop).toBe(submit.paddingTop);
+  expect(cancel.paddingBottom).toBe(submit.paddingBottom);
+  if (horizontal) {
+    expect(Math.abs(cancel.y - submit.y)).toBeLessThan(1);
+    expect(Math.abs(cancel.bottom - submit.bottom)).toBeLessThan(1);
+    expect(cancel.right).toBeLessThanOrEqual(submit.x + 1);
+  } else {
+    expect(submit.bottom).toBeLessThanOrEqual(cancel.y + 1);
+  }
+  for (const button of [cancel, submit]) {
+    expect(button.overflow).toBe(false);
+    expect(button.x).toBeGreaterThanOrEqual(panel.x);
+    expect(button.right).toBeLessThanOrEqual(panel.right + 1);
+    expect(button.y).toBeGreaterThanOrEqual(footer.y);
+    expect(button.bottom).toBeLessThanOrEqual(panel.bottom + 1);
+    expect(button.bottom).toBeLessThanOrEqual(page.viewportSize()!.height);
+  }
+  expect(panel.x).toBeGreaterThanOrEqual(0);
+  expect(panel.right).toBeLessThanOrEqual(page.viewportSize()!.width);
+  expect(panel.overflow).toBe(false);
+  return result;
+}
+
+async function screenshot(page: Page, name: string) {
+  if (process.env.DIALOG_EVIDENCE_DIR) {
+    await page.screenshot({
+      path: path.join(process.env.DIALOG_EVIDENCE_DIR, `${name}.png`),
+    });
+  }
+}
+
+for (const kind of [
+  'dialog',
+  'dialog-close',
+  'alert',
+  'alert-small',
+  'route',
+  'drawer',
+]) {
+  for (const preset of ['compact', 'default']) {
+    for (const width of [1440, 375]) {
+      test(`${kind}, ${preset}, ${width}: semantic actions align and keep their padding`, async ({
+        page,
+      }) => {
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto(`${fixture}?kind=${kind}&preset=${preset}`);
+        const result = await checkGeometry(page);
+        expect(result.cancel.height).toBeCloseTo(result.submit.height, 0);
+        expect(result.cancel.minHeight).toBe(preset === 'compact' ? 36 : 40);
+        expect(result.cancel.paddingLeft).toBe(
+          preset === 'compact' ? '14.4px' : '16px',
+        );
+        if (width > 640 && kind !== 'alert-small')
+          expect(result.cancel.width).toBeLessThan(result.submit.width);
+        if (preset === 'default') await screenshot(page, `${kind}-${width}-en`);
+      });
+    }
+  }
+
+  for (const language of ['english', 'chinese']) {
+    test(`${kind}: long ${language} labels remain visible on a short phone viewport`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.goto(
+        `${fixture}?kind=${kind}&long&${language === 'chinese' ? 'chinese&' : ''}dark`,
+      );
+      await checkGeometry(page);
+      await screenshot(page, `${kind}-375-long-${language}`);
+    });
+  }
+
+  test(`${kind}: disabled and submitting actions retain geometry`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 900 });
+    await page.goto(`${fixture}?kind=${kind}&pending`);
+    await checkGeometry(page);
+    await expect(page.getByTestId('cancel')).toBeDisabled();
+    await expect(page.getByTestId('submit')).toBeDisabled();
+    await expect(page.getByTestId('submit')).toHaveAttribute(
+      'aria-busy',
+      'true',
+    );
+    await page.keyboard.press('Escape');
+    await expect(page.getByTestId('submit')).toBeVisible();
+  });
+}
+
+for (const kind of ['dialog', 'alert']) {
+  test(`${kind}: a phone row wraps long labels without overflowing`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 667 });
+    await page.goto(`${fixture}?kind=${kind}&horizontal&chinese`);
+    await checkGeometry(page);
+  });
+}
+
+async function expectKeyboardFocus(action: Locator) {
+  await action.focus();
+  await expect(action).toBeFocused();
+  expect(
+    await action.evaluate(
+      (element) =>
+        getComputedStyle(element).outlineStyle !== 'none' ||
+        getComputedStyle(element).boxShadow !== 'none',
+    ),
+  ).toBe(true);
+}
+
+for (const kind of ['dialog', 'route', 'drawer']) {
+  test(`${kind}: link cancel and native form submit remain independent`, async ({
+    page,
+  }) => {
+    await page.goto(`${fixture}?kind=${kind}`);
+    await checkGeometry(page);
+    const cancel = page.getByTestId('cancel');
+    await expect(cancel).toHaveAttribute('href', '/instances?filter=recent');
+    expect(await cancel.evaluate((element) => element.tagName)).toBe('A');
+    await expectKeyboardFocus(cancel);
+    await page.keyboard.press('Enter');
+    await expect(page.getByTestId('location')).toHaveText(
+      '/instances?filter=recent',
+    );
+    await expect(page.getByTestId('submit')).toHaveCount(0);
+    await page.goto(`${fixture}?kind=${kind}`);
+    await checkGeometry(page);
+    await page.getByLabel('Instance name').fill('New customer portal');
+    await expectKeyboardFocus(page.getByTestId('submit'));
+    await page.keyboard.press('Enter');
+    await expect(page.getByTestId('location')).toHaveText(
+      '/instances?created=1',
+    );
+  });
+}
+
+test('route footer stays visible when the body scrolls', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 667 });
+  await page.goto(`${fixture}?kind=route&long`);
+  const before = await checkGeometry(page);
+  await page.locator('[data-slot=route-overlay-body]').evaluate((element) => {
+    element.scrollTop = element.scrollHeight;
+  });
+  await expect
+    .poll(() =>
+      page
+        .locator('[data-slot=route-overlay-body]')
+        .evaluate((element) => element.scrollTop),
+    )
+    .toBeGreaterThan(0);
+  const after = await checkGeometry(page);
+  expect(after.footer.y).toBe(before.footer.y);
+  await page.getByTestId('cancel').click();
+  await expect(page.getByTestId('location')).toHaveText(
+    '/instances?filter=recent',
+  );
+});
+
+// DialogClose replaces Button's semantic slot just as AlertDialog's actions do.
+test('DialogClose cancels without submitting the form', async ({ page }) => {
+  await page.goto(`${fixture}?kind=dialog-close`);
+  await checkGeometry(page);
+  await page.getByTestId('cancel').click();
+  await expect(page.getByTestId('submit')).toHaveCount(0);
+  await expect(page.getByTestId('location')).toHaveText('Instance list');
+});