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

package/tests/client/client-theme.test.tsx

@@ -16,10 +16,27 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
   AppThemeProvider,
-  ThemeSettings,
+  ThemeSettings as ThemeMenu,
   useTheme,
 } from '../../client/theme/index.ts';
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../../client/components/ui/dropdown-menu';
+
+function ThemeSettings(): ReactElement {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>Account</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <ThemeMenu />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 /**
  * Renders the client configuration the server would, mounted at `/crm` so the theme's storage keys are
  * `nocobase:crm:*`. It replaces any block already on the page, since the client reads the first one it finds.
@@ -38,19 +55,65 @@ function renderClientConfig(
   document.head.append(element);
 }
 
-/**
- * Opens the appearance popover from the keyboard. Its trigger opens on hover, and a pointer press landing more than
- * Base UI's 500 ms patient-click threshold after that, as on a loaded runner, closes it again.
- */
-async function openAppearance(name = 'Appearance'): Promise<void> {
-  act(() => screen.getByRole('button', { name }).focus());
+/** Opens the account menu and its Theme submenu using the keyboard. */
+async function openTheme(name = 'Theme'): Promise<void> {
+  act(() => screen.getByRole('button', { name: 'Account' }).focus());
   await userEvent.keyboard('{Enter}');
+  act(() => screen.getByRole('menuitem', { name }).focus());
+  await userEvent.keyboard('{ArrowRight}');
 }
 
 describe('app client theme', () => {
   it.each([
-    ['en-US', 'Appearance', 'Spacious'],
-    ['zh-CN', '外观', '宽松'],
+    ['Light', 'light', 'Compact', 'compact'],
+    ['Dark', 'dark', 'Compact', 'compact'],
+    ['System', 'system', 'Compact', 'compact'],
+    ['Light', 'light', 'Default', 'default'],
+    ['Dark', 'dark', 'Default', 'default'],
+    ['System', 'system', 'Default', 'default'],
+  ])(
+    'saves and restores %s mode with %s / %s density',
+    async (modeLabel, mode, presetLabel, preset) => {
+      const settings = (
+        <AppThemeProvider>
+          <ThemeSettings />
+        </AppThemeProvider>
+      );
+      const view = render(settings);
+      await openTheme();
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: modeLabel }),
+      );
+      await userEvent.click(
+        screen.getByRole('menuitemradio', { name: presetLabel }),
+      );
+      expect(localStorage.getItem('nocobase:crm:theme:color-scheme')).toBe(
+        mode,
+      );
+      expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe(preset);
+      view.unmount();
+      initializeTheme(
+        '/crm/',
+        themePresets.map(({ id }) => id),
+      );
+      render(settings);
+      await openTheme();
+      expect(document.documentElement).toHaveClass(
+        mode === 'light' ? 'light' : 'dark',
+      );
+      expect(document.documentElement).toHaveAttribute('data-theme', preset);
+      expect(
+        screen.getByRole('menuitemradio', { name: modeLabel }),
+      ).toHaveAttribute('aria-checked', 'true');
+      expect(
+        screen.getByRole('menuitemradio', { name: presetLabel }),
+      ).toHaveAttribute('aria-checked', 'true');
+    },
+  );
+
+  it.each([
+    ['en-US', 'Theme', 'Spacious'],
+    ['zh-CN', '主题', '宽松'],
   ])(
     'labels the default preset without implying default selection (%s)',
     async (locale, appearance, label) => {
@@ -68,28 +131,32 @@ describe('app client theme', () => {
           </AppThemeProvider>
         </I18nProvider>,
       );
-      await openAppearance(appearance);
-      const option = await screen.findByRole('radio', { name: label });
+      await openTheme(appearance);
+      const option = await screen.findByRole('menuitemradio', { name: label });
       await userEvent.click(option);
-      expect(option).toBeChecked();
+      expect(option).toHaveAttribute('aria-checked', 'true');
       expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
     },
   );
 
-  it('changes presets with arrow keys and returns focus on Escape', async () => {
+  it('selects a preset by keyboard and returns focus on Escape', async () => {
     render(
       <AppThemeProvider>
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
-    const compact = await screen.findByRole('radio', { name: 'Compact' });
+    await openTheme();
+    const compact = await screen.findByRole('menuitemradio', {
+      name: 'Compact',
+    });
     act(() => compact.focus());
-    await userEvent.keyboard('{ArrowRight}');
-    expect(screen.getByRole('radio', { name: 'Default' })).toBeChecked();
+    await userEvent.keyboard('{ArrowDown}{Enter}');
+    expect(
+      screen.getByRole('menuitemradio', { name: 'Default' }),
+    ).toHaveAttribute('aria-checked', 'true');
     expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
     await userEvent.keyboard('{Escape}');
-    expect(screen.getByRole('button', { name: 'Appearance' })).toHaveFocus();
+    expect(screen.getByRole('menuitem', { name: 'Theme' })).toHaveFocus();
   });
 
   it('falls back from the removed Ant Design preset without changing mode', async () => {
@@ -100,11 +167,13 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     expect(
-      screen.queryByRole('radio', { name: 'Ant-design' }),
+      screen.queryByRole('menuitemradio', { name: 'Ant-design' }),
     ).not.toBeInTheDocument();
-    expect(await screen.findByRole('radio', { name: 'Compact' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
+    ).toHaveAttribute('aria-checked', 'true');
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     expect(document.documentElement).toHaveClass('light');
   });
@@ -115,13 +184,15 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     expect(
-      screen.queryByRole('radio', { name: 'Ocean' }),
+      screen.queryByRole('menuitemradio', { name: 'Ocean' }),
     ).not.toBeInTheDocument();
-    expect(await screen.findByRole('radio', { name: 'Compact' })).toBeChecked();
     expect(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
+    ).toHaveAttribute('aria-checked', 'true');
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
   });
@@ -218,12 +289,12 @@ describe('app client theme', () => {
           <ThemeSettings />
         </AppThemeProvider>,
       );
-      await openAppearance();
+      await openTheme();
       expect(
-        await screen.findByRole('radio', {
+        await screen.findByRole('menuitemradio', {
           name: expected === 'compact' ? 'Compact' : 'Default',
         }),
-      ).toBeChecked();
+      ).toHaveAttribute('aria-checked', 'true');
       expect(document.documentElement).toHaveAttribute('data-theme', expected);
       expect(localStorage.getItem(key)).toBe(saved ?? null);
     },
@@ -334,14 +405,16 @@ describe('app client theme', () => {
       </AppThemeProvider>,
     );
 
-    await openAppearance();
+    await openTheme();
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Compact' }),
+      await screen.findByRole('menuitemradio', { name: 'Compact' }),
     );
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     expect(document.documentElement).toHaveClass('dark');
     expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('compact');
-    await userEvent.click(await screen.findByRole('radio', { name: 'Light' }));
+    await userEvent.click(
+      await screen.findByRole('menuitemradio', { name: 'Light' }),
+    );
     expect(document.documentElement).toHaveClass('light');
     expect(document.documentElement).toHaveAttribute('data-theme', 'compact');
     fireEvent(
@@ -359,10 +432,12 @@ describe('app client theme', () => {
         newValue: 'default',
       }),
     );
-    expect(await screen.findByRole('radio', { name: 'Default' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
+    ).toHaveAttribute('aria-checked', 'true');
     await userEvent.keyboard('{Escape}');
     await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Appearance' })).toHaveFocus(),
+      expect(screen.getByRole('menuitem', { name: 'Theme' })).toHaveFocus(),
     );
   });
 
@@ -395,11 +470,13 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
+    await userEvent.click(
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
+    );
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Light' }),
     );
-    await userEvent.click(await screen.findByRole('radio', { name: 'Light' }));
     expect(document.documentElement).toHaveAttribute('data-theme', 'default');
     expect(document.documentElement).toHaveClass('light');
   });
@@ -410,9 +487,9 @@ describe('app client theme', () => {
         <ThemeSettings />
       </AppThemeProvider>,
     );
-    await openAppearance();
+    await openTheme();
     await userEvent.click(
-      await screen.findByRole('radio', { name: 'Default' }),
+      await screen.findByRole('menuitemradio', { name: 'Default' }),
     );
     fireEvent(
       window,
@@ -438,7 +515,9 @@ describe('app client theme', () => {
       }),
     );
     await waitFor(() => expect(document.documentElement).toHaveClass('dark'));
-    expect(await screen.findByRole('radio', { name: 'System' })).toBeChecked();
+    expect(
+      await screen.findByRole('menuitemradio', { name: 'System' }),
+    ).toHaveAttribute('aria-checked', 'true');
   });
 });
 

package/tests/client/header-hover.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 import { AppThemeProvider } from '../../client/theme/theme-provider';
-import { ThemeSettings } from '../../client/theme/theme-settings';
+import { HeaderActions } from '../../client/layouts/components/header-actions';
 import { UserMenu } from '../../client/layouts/components/user-menu';
 
 import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
@@ -24,10 +24,7 @@ afterEach(() => {
   document.documentElement.removeAttribute('data-theme');
 });
 
-const panels = [
-  ['Appearance', ThemeSettings, 'dialog'],
-  ['Open account menu', UserMenu, 'menu'],
-] as const;
+const panels = [['Open account menu', UserMenu, 'menu']] as const;
 
 it.each(panels)(
   'opens and closes %s on hover',
@@ -75,3 +72,34 @@ it.each(panels)(
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   },
 );
+
+it('offers appearance only inside the account menu with keyboard selection', async () => {
+  const user = userEvent.setup();
+  await renderAuthenticatedClient(
+    <AppThemeProvider>
+      <HeaderActions />
+    </AppThemeProvider>,
+  );
+  expect(
+    screen.queryByRole('button', { name: 'Theme' }),
+  ).not.toBeInTheDocument();
+  await user.tab();
+  await user.keyboard('{Enter}');
+  const appearance = screen.getByRole('menuitem', { name: 'Theme' });
+  appearance.focus();
+  await user.keyboard('{ArrowRight}');
+  expect(screen.getAllByRole('menuitemradio')).toHaveLength(5);
+  await user.keyboard('{ArrowDown}{Enter}');
+  expect(document.documentElement).toHaveClass('dark');
+  expect(screen.getByRole('menuitemradio', { name: 'Dark' })).toHaveAttribute(
+    'aria-checked',
+    'true',
+  );
+  await user.keyboard('{Escape}');
+  expect(appearance).toHaveFocus();
+  expect(screen.getByRole('menuitem', { name: 'Sign out' })).toBeVisible();
+  await user.keyboard('{Escape}');
+  expect(
+    screen.getByRole('button', { name: 'Open account menu' }),
+  ).toHaveFocus();
+});

package/tests/client/standalone-page-layout.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+
+import { StandalonePageLayout } from '../../client/routing/standalone-page-layout.js';
+import { AppThemeProvider } from '../../client/theme/index.js';
+
+beforeEach(() => {
+  // jsdom does not implement the media queries used by the real theme provider.
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute('class');
+  document.documentElement.removeAttribute('style');
+  document.documentElement.removeAttribute('data-theme');
+});
+
+it.each(['/login', '/device'])(
+  'renders standalone content at %s without an account menu',
+  (path) => {
+    render(
+      <AppThemeProvider>
+        <MemoryRouter initialEntries={[path]}>
+          <Routes>
+            <Route element={<StandalonePageLayout />}>
+              <Route path={path} element={<h1>Standalone page</h1>} />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      </AppThemeProvider>,
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Standalone page' }),
+    ).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Theme' }),
+    ).not.toBeInTheDocument();
+  },
+);

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

@@ -1,9 +1,19 @@
+import { AppThemeProvider } from '../../client/theme/index.js';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { UserMenu } from '../../client/layouts/components/user-menu.tsx';
 import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
 
+// jsdom has no media queries; the real account menu includes the theme provider.
+beforeEach(() => {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
 async function openAccountMenu(): Promise<void> {
   act(() => screen.getByRole('button', { name: 'Open account menu' }).focus());
   await userEvent.keyboard('{Enter}');
@@ -15,7 +25,11 @@ async function signOutFromMenu() {
 
 describe('account menu sign out', () => {
   it('ends the server session and refreshes the displayed identity', async () => {
-    const view = await renderAuthenticatedClient(<UserMenu />);
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.identity().session).toBeNull());
     expect(
@@ -26,13 +40,18 @@ describe('account menu sign out', () => {
     expect(screen.queryByText(view.session.user.email)).not.toBeInTheDocument();
   });
   it('reports a rejected origin without pretending the session ended', async () => {
-    const view = await renderAuthenticatedClient(<UserMenu />, {
-      beforeRequest(request) {
-        // Exercise the real origin guard and error resolver, not a fabricated authentication result.
-        if (request.url.endsWith('/sign-out'))
-          request.headers.set('origin', 'https://untrusted.example');
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+      {
+        beforeRequest(request) {
+          // Exercise the real origin guard and error resolver, not a fabricated authentication result.
+          if (request.url.endsWith('/sign-out'))
+            request.headers.set('origin', 'https://untrusted.example');
+        },
       },
-    });
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.toasts()).toHaveLength(1));
     expect(view.toasts()[0]).toMatchObject({
@@ -50,13 +69,18 @@ describe('account menu sign out', () => {
   });
   it('reports a network failure and successfully retries sign-out', async () => {
     let offline = true;
-    const view = await renderAuthenticatedClient(<UserMenu />, {
-      beforeRequest(request) {
-        // Network loss cannot be produced by the in-process server.
-        if (offline && request.url.endsWith('/sign-out'))
-          throw new TypeError('Failed to fetch');
+    const view = await renderAuthenticatedClient(
+      <AppThemeProvider>
+        <UserMenu />
+      </AppThemeProvider>,
+      {
+        beforeRequest(request) {
+          // Network loss cannot be produced by the in-process server.
+          if (offline && request.url.endsWith('/sign-out'))
+            throw new TypeError('Failed to fetch');
+        },
       },
-    });
+    );
     await signOutFromMenu();
     await waitFor(() => expect(view.toasts()).toHaveLength(1));
     expect(view.toasts()[0]).toMatchObject({

package/tests/client/user-menu.test.tsx

@@ -0,0 +1,65 @@
+import { AppThemeProvider } from '../../client/theme/index.js';
+import { act, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+
+import { UserMenu } from '../../client/layouts/components/user-menu.js';
+import { renderAuthenticatedClient } from '../helpers/authenticated-client.js';
+
+// jsdom has no media queries; the real account menu includes the theme provider.
+beforeEach(() => {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+  }));
+});
+
+it('uses CJK name endings in the avatar while retaining the full account name and picture', async () => {
+  const view = await renderAuthenticatedClient(
+    <AppThemeProvider>
+      <UserMenu />
+    </AppThemeProvider>,
+  );
+  const user = userEvent.setup();
+  const trigger = screen.getByRole('button', { name: 'Open account menu' });
+  await user.tab();
+  for (const [name, expected] of [
+    ['周建国', '建国'],
+    ['欧阳娜娜', '娜娜'],
+    ['李雷', '李雷'],
+    ['周 建国', '建国'],
+    ['Li Lei', 'LL'],
+    ['周', '周'],
+  ] as const) {
+    await act(async () => {
+      const response = await view.identity().client.updateUser({ name });
+      expect(response.error).toBeNull();
+      await view.identity().refresh();
+    });
+    expect(trigger).toHaveTextContent(expected);
+    await user.keyboard('{Enter}');
+    expect(
+      within(screen.getByRole('menu')).getByText(name, { exact: true }),
+    ).toBeVisible();
+    await user.keyboard('{Escape}');
+  }
+  await act(async () => {
+    const response = await view.identity().client.updateUser({ name: '' });
+    expect(response.error).toBeNull();
+    await view.identity().refresh();
+  });
+  expect(trigger).toHaveTextContent(view.session.user.email[0]!.toUpperCase());
+  await act(async () => {
+    const response = await view
+      .identity()
+      .client.updateUser({ image: 'https://example.test/avatar.png' });
+    expect(response.error).toBeNull();
+    await view.identity().refresh();
+  });
+  expect(trigger.querySelector('img')).toHaveAttribute(
+    'src',
+    'https://example.test/avatar.png',
+  );
+  expect(trigger).not.toHaveTextContent('周');
+});

package/tests/fixtures/theme-tokens.tsx

@@ -1,3 +1,8 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from '../../client/components/ui/dropdown-menu';
 import {
   createAppSidebarPreferenceStore,
   SidebarPreferenceProvider,
@@ -35,7 +40,14 @@ export default function Fixture() {
           </AppSidebar>
           <main className='min-w-0 flex-1 space-y-6 overflow-y-auto p-6'>
             <div className='flex flex-wrap gap-2'>
-              <ThemeSettings />
+              <DropdownMenu>
+                <DropdownMenuTrigger render={<Button />}>
+                  Account
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <ThemeSettings />
+                </DropdownMenuContent>
+              </DropdownMenu>
               <AppSidebarToggle />
             </div>
             <h1 className='text-3xl'>Theme tokens · 主题样式</h1>

package/tests/server/auth-email-config.test.ts

@@ -10,6 +10,7 @@ import {
   buildVariablesManifest,
 } from '@nocobase/app-server/config';
 import auth from '../../server/config/auth.js';
+import mailers from '../../server/config/mailers.js';
 
 it('inherits private authentication sender mappings without changing other mail consumers', async () => {
   const defaults = defaultAppConfigs({ auth });
@@ -50,30 +51,63 @@ it('inherits private authentication sender mappings without changing other mail
   ).toBe(true);
 });
 
-it('ships separate, valid SMTP and Resend authentication examples', async () => {
+it('ships a valid shared mailer example with private mapped credentials', async () => {
   const example = await readFile(
     new URL('../../config.example.yml', import.meta.url),
     'utf8',
   );
-  const blocks = [...example.matchAll(/^ {2}# email:\n(?: {2}# {3}.*\n)+/gm)];
-  expect(blocks).toHaveLength(2);
-  const directory = await mkdtemp(
-    path.join(os.tmpdir(), 'auth-email-example-'),
-  );
+  const block = example.match(/^# mailers:\n(?:#.*\n)+/m)?.[0];
+  expect(block).toBeTruthy();
+  const directory = await mkdtemp(path.join(os.tmpdir(), 'mailers-example-'));
   try {
-    for (const block of blocks) {
-      const text = 'auth:\n' + block[0].replace(/^ {2}# /gm, '  ');
-      const file = path.join(directory, 'config.yml');
-      await writeFile(file, text);
-      const config = new AppConfig().loadFile(file);
-      await config.loadAll();
-      const defaults = defaultAppConfigs({ auth });
-      config.mergeDefaults(defaults({} as never));
-      config.defineSections(defaults.sections!);
-      expect(await config.validate()).toEqual([]);
-    }
+    const file = path.join(directory, 'config.yml');
+    await writeFile(file, block!.replace(/^# ?/gm, ''));
+    const config = new AppConfig().loadFile(file);
+    await config.loadAll();
+    const defaults = defaultAppConfigs({ auth, mailers });
+    config.mergeDefaults(defaults({} as never));
+    config.defineSections(defaults.sections!);
+    await config.loadSectionEnvironment({
+      MAILERS_SYSTEM_PASSWORD: 'synthetic-password',
+    });
+    expect(await config.validate()).toEqual([]);
+    expect(config.get('mailers.default')).toBe('system');
+    expect(config.get('mailers.system.auth.pass')).toBe('synthetic-password');
+    expect(JSON.stringify(config.publicValues())).not.toContain(
+      'synthetic-password',
+    );
+    expect(config.get('auth.passwordReset.enabled')).toBeUndefined();
   } finally {
     await rm(directory, { recursive: true, force: true });
   }
   expect(example).not.toContain('emailChannel:');
 });
+
+it('accepts an entirely environment-configured shared sender without enabling recovery', async () => {
+  const config = new AppConfig();
+  await config.loadAll();
+  const defaults = defaultAppConfigs({ auth, mailers });
+  config.mergeDefaults(defaults({} as never));
+  config.defineSections(defaults.sections!);
+  await config.loadSectionEnvironment({
+    MAILERS_DEFAULT: 'system',
+    MAILERS_SYSTEM_PROVIDER: 'smtp',
+    MAILERS_SYSTEM_HOST: 'localhost',
+    MAILERS_SYSTEM_PORT: '2525',
+    MAILERS_SYSTEM_SECURE: 'false',
+  });
+  expect(await config.validate()).toEqual([]);
+  expect(config.get('mailers.system')).toMatchObject({
+    provider: 'smtp',
+    port: 2525,
+    secure: false,
+  });
+  expect(config.get('auth.passwordReset.enabled')).toBeUndefined();
+  expect(config.environmentVariableMappings()).toMatchObject({
+    MAILERS_DEFAULT: { path: 'mailers.default' },
+    MAILERS_SYSTEM_PASSWORD: {
+      path: 'mailers.system.auth.pass',
+      secret: true,
+    },
+  });
+});