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

package/server/config/jobs.ts

@@ -2,14 +2,22 @@ import {
   defineAppConfig,
   type AppConfigFactory,
 } from '@nocobase/app-server/config';
-import type { AppJobsConfig } from '@nocobase/app-server/jobs';
+import {
+  validateAppJobsConfig,
+  type AppJobsConfig,
+} from '@nocobase/app-server/jobs';
 
-/** Single-process persistence. Distributed jobs require an explicitly registered backend plugin. */
-const jobs: AppConfigFactory<AppJobsConfig> = defineAppConfig(({ paths }) => ({
-  memory: {
-    adapter: 'memory',
-    persistence: { path: paths.storage('jobs') },
-  },
-}));
+/** Single-process persistence. Without default, the built-in local configuration remains selected. */
+const jobs: AppConfigFactory<AppJobsConfig> = defineAppConfig({
+  defaults: ({ paths }) => ({
+    backends: {
+      memory: {
+        adapter: 'memory',
+        persistence: { path: paths.storage('jobs') },
+      },
+    },
+  }),
+  validate: validateAppJobsConfig,
+});
 
 export default jobs;

package/server/config/queue.ts

@@ -2,21 +2,22 @@ import {
   defineAppConfig,
   type AppConfigFactory,
 } from '@nocobase/app-server/config';
-import type { AppQueueConfig } from '@nocobase/app-server/queue';
+import {
+  validateAppQueueConfig,
+  type AppQueueConfig,
+} from '@nocobase/app-server/queue';
 
-/**
- * Configurations queues can run on. None is the default: until `queue.default` names one, queues run on the
- * built-in memory configuration, which serves one process and writes its pending jobs under storage/queue when the
- * application stops, and which is reported at startup outside development. Name `memory` to keep that choice without
- * the report. Shared Redis queues require explicit registration of @nocobase/app-plugin-queue-redis/server.
- */
-const queue: AppConfigFactory<AppQueueConfig> = defineAppConfig(
-  ({ paths }) => ({
-    memory: {
-      adapter: 'inMemory',
-      persistence: { path: paths.storage('queue') },
+/** Single-process persistence. Without default, the built-in local configuration remains selected. */
+const queue: AppConfigFactory<AppQueueConfig> = defineAppConfig({
+  defaults: ({ paths }) => ({
+    backends: {
+      memory: {
+        adapter: 'inMemory',
+        persistence: { path: paths.storage('queue') },
+      },
     },
   }),
-);
+  validate: validateAppQueueConfig,
+});
 
 export default queue;

package/server/config/realtime.ts

@@ -0,0 +1,4 @@
+import { defineRealtimeConfig } from '@nocobase/app-server/realtime';
+
+// Keep broker absent so an explicit broker without adapter fails validation.
+export default defineRealtimeConfig();

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

@@ -186,16 +186,17 @@ describe('app client routes', () => {
       { name: 'home', authorizedAs: null },
       { name: 'inbox', authorizedAs: null },
       { name: 'settingsHome', authorizedAs: null },
+      { name: 'databaseExplorer', authorizedAs: 'database-explorer' },
     ]);
   });
 
-  it('keeps a bare application free of settings modules and supports settings registration as business capabilities are developed', async () => {
-    // Only the settings home, which lists what the viewer may open and grants nothing itself.
+  it('includes database browsing and supports business settings registration', async () => {
+    // The built-in database browser joins the settings home without enabling business administration.
     expect(
       pagePaths(resolveRoutes().routes).filter((path) =>
         path.startsWith('/settings'),
       ),
-    ).toEqual(['/settings']);
+    ).toEqual(['/settings', '/settings/database-explorer']);
     const built = resolveAppClientContributions([
       {
         packageName: '@nocobase/app-template-default',
@@ -231,6 +232,7 @@ describe('app client routes', () => {
         name,
         authorizedAs: 'settings:authorization.default-access',
       })),
+      { name: 'databaseExplorer', authorizedAs: 'database-explorer' },
     ]);
     for (const loader of componentLoadersIn(built.routes))
       await expect(loader()).resolves.toMatchObject({

package/tests/client/database-explorer-integration.test.tsx

@@ -0,0 +1,30 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it } from 'vitest';
+import DatabaseExplorerPage from '../../client/pages/settings/database-explorer/index.js';
+import { createAuthenticatedClientRenderer } from '../helpers/authenticated-client.js';
+
+const renderAuthenticated = createAuthenticatedClientRenderer();
+
+it('browses real database tables and fields as an administrator', async () => {
+  await renderAuthenticated(<DatabaseExplorerPage />, {
+    route: '/settings/database-explorer',
+  });
+  const user = userEvent.setup();
+  const tables = await screen.findAllByRole('button', { pressed: false });
+  expect(tables.length).toBeGreaterThan(0);
+  await user.click(tables[0]);
+  expect(await screen.findByRole('table')).toBeInTheDocument();
+  expect(screen.getAllByRole('cell').length).toBeGreaterThan(0);
+});
+
+it('keeps database information inaccessible to an ordinary member', async () => {
+  await renderAuthenticated(<DatabaseExplorerPage />, {
+    route: '/settings/database-explorer',
+    member: true,
+  });
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'You do not have permission',
+  );
+  expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+});

package/tests/client/database-explorer.test.tsx

@@ -0,0 +1,152 @@
+import {
+  answerApi,
+  renderWithApp,
+  type ApiCall,
+} from '@nocobase/app-testing/client';
+import { act, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it } from 'vitest';
+import DatabaseExplorerPage from '../../client/pages/settings/database-explorer/index.js';
+import enUS from '../../client/locales/en-US.js';
+import packageMetadata from '../../package.json' with { type: 'json' };
+
+const table = (name: string) => ({
+  name,
+  tableName: name,
+  schema: '',
+  kind: 'table',
+});
+const detail = (name: string) => ({
+  data: {
+    collection: {
+      name,
+      collection: { fields: [{ name, type: 'string' }] },
+      warnings: [],
+    },
+    metadata: null,
+  },
+});
+const connections = {
+  data: [{ name: 'main', isDefault: true, dialect: 'postgres' }],
+};
+function mount(api: (call: ApiCall) => unknown) {
+  return renderWithApp(<DatabaseExplorerPage />, {
+    route: '/settings/database-explorer',
+    namespace: packageMetadata.name,
+    namespaces: { [packageMetadata.name]: enUS },
+    fetch: answerApi(api),
+  });
+}
+
+it('searches all pages of tables and displays the selected table fields', async () => {
+  const user = userEvent.setup();
+  let pages = 0;
+  await mount(({ path }) => {
+    if (path.endsWith('/connections')) return connections;
+    if (path.endsWith('/collections'))
+      return ++pages === 1
+        ? { data: [table('orders')], meta: { nextPageToken: 'next' } }
+        : { data: [table('customers')] };
+    if (path.endsWith('/collections/customers')) return detail('customer_name');
+    throw new Error(`Unexpected request: ${path}`);
+  });
+  await screen.findByRole('button', { name: 'customers' });
+  await user.type(
+    screen.getByRole('textbox', { name: 'Search tables' }),
+    'customers',
+  );
+  expect(
+    screen.queryByRole('button', { name: 'orders' }),
+  ).not.toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'customers' }));
+  expect(
+    await screen.findByRole('cell', { name: 'customer_name' }),
+  ).toBeInTheDocument();
+  await user.type(
+    screen.getByRole('textbox', { name: 'Search fields' }),
+    'missing',
+  );
+  expect(screen.getByText('No fields found.')).toBeInTheDocument();
+  expect(pages).toBe(2);
+});
+
+it('does not display a late response for a previously selected table', async () => {
+  const user = userEvent.setup();
+  const slow = Promise.withResolvers<unknown>();
+  await mount(({ path }) => {
+    if (path.endsWith('/connections')) return connections;
+    if (path.endsWith('/collections'))
+      return { data: [table('orders'), table('customers')] };
+    if (path.endsWith('/orders')) return slow.promise;
+    if (path.endsWith('/customers')) return detail('customer_name');
+    throw new Error(`Unexpected request: ${path}`);
+  });
+  await user.click(await screen.findByRole('button', { name: 'orders' }));
+  expect(
+    within(screen.getByRole('region', { name: 'Fields' })).getByRole('status'),
+  ).toHaveTextContent('Loading');
+  await user.click(screen.getByRole('button', { name: 'customers' }));
+  await screen.findByRole('cell', { name: 'customer_name' });
+  await act(async () => slow.resolve(detail('order_name')));
+  expect(
+    screen.queryByRole('cell', { name: 'order_name' }),
+  ).not.toBeInTheDocument();
+});
+
+it('offers retry for a failed connection listing and handles an empty listing', async () => {
+  let attempts = 0;
+  const user = userEvent.setup();
+  await mount(() =>
+    ++attempts === 1 ? new Response(null, { status: 503 }) : { data: [] },
+  );
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'Unable to load database information.',
+  );
+  await user.click(screen.getByRole('button', { name: 'Retry' }));
+  expect(
+    await screen.findByText('No database connections are configured.'),
+  ).toBeInTheDocument();
+});
+
+it('explains forbidden access without offering a retry', async () => {
+  await mount(() => new Response(null, { status: 403 }));
+  expect(await screen.findByRole('alert')).toHaveTextContent(
+    'You do not have permission',
+  );
+  expect(
+    screen.queryByRole('button', { name: 'Retry' }),
+  ).not.toBeInTheDocument();
+});
+
+it('clears the selected table when switching connections', async () => {
+  const user = userEvent.setup();
+  await mount(({ path }) => {
+    if (path.endsWith('/connections'))
+      return {
+        data: [
+          ...connections.data,
+          { name: 'external', isDefault: false, dialect: 'postgres' },
+        ],
+      };
+    if (path.endsWith('main/collections')) return { data: [table('orders')] };
+    if (path.endsWith('external/collections'))
+      return { data: [table('contacts')] };
+    if (path.endsWith('/orders')) return detail('order_name');
+    throw new Error(`Unexpected request: ${path}`);
+  });
+  await user.click(await screen.findByRole('button', { name: 'orders' }));
+  await screen.findByRole('cell', { name: 'order_name' });
+  await user.click(
+    screen.getByRole('combobox', { name: 'Database connection' }),
+  );
+  await user.click(await screen.findByRole('option', { name: /external/ }));
+  expect(
+    await screen.findByRole('button', { name: 'contacts' }),
+  ).toBeInTheDocument();
+  expect(
+    screen.queryByRole('cell', { name: 'order_name' }),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.getByText('Select a table to view its fields.'),
+  ).toBeInTheDocument();
+});

package/tests/client/foundation-integration.test.ts

@@ -1,12 +1,19 @@
 import { describe, expect, it } from 'vitest';
+import {
+  createCapabilityCatalog,
+  entryContent,
+  guideContent,
+  type DependencyManifest,
+} from '@nocobase/app-plugin-foundation/capability-guide';
+import packageMetadata from '../../package.json' with { type: 'json' };
 import { resolveAppRuntime } from '@nocobase/app-client/runtime';
 import { defineAppRuntime } from '@nocobase/app-client/runtime';
 import appRuntime from '../../client/runtime.js';
 import { createApplicationRoutes } from '../../client/routes.js';
 import cliPlugins from '../../cli/plugins.js';
-import serverPlugins from '../../server/plugins.js';
 import settingsRoutes from '../../client/pages/settings/routes.js';
 import {
+  routeKey,
   buildRouteNavigation,
   buildSettingsCatalog,
 } from '../../client/routing/route-navigation.js';
@@ -19,38 +26,21 @@ describe('default Foundation integration', () => {
       ),
     ).toHaveLength(1);
   });
-  it('exposes Foundation in System settings for an unrestricted administrator and removes the entry when denied', async () => {
+  it('provides Features and extensions in System settings with its existing route', async () => {
     const runtime = await resolveAppRuntime(appRuntime);
-    const menu = buildRouteNavigation(runtime.routes, new Set());
-    // One System settings entry; Foundation is a card on its home, not a sidebar entry of its own.
-    expect(menu.map(({ route }) => route.name)).toEqual([
-      'home',
-      'settingsHome',
-    ]);
     const category = buildSettingsCatalog(runtime.routes, new Set()).find(
       ({ route }) => route.name === 'settingsSystem',
     );
-    const page = category?.modules.find(
-      ({ route }) => route.name === 'foundation',
-    )?.route;
-    expect(page).toMatchObject({
-      path: '/foundation',
-      auth: 'required',
-      authz: 'unrestricted',
-    });
-    if (!page) throw new Error('Foundation route missing');
-    const denied = new Set([`${page.packageName}:${page.path}:${page.id}`]);
-    expect(
-      buildRouteNavigation(runtime.routes, denied).map(
-        ({ route }) => route.name,
-      ),
-    ).toEqual(['home']);
-    expect(buildSettingsCatalog(runtime.routes, denied)).toEqual([]);
+    const guide = category?.modules.find(
+      ({ route }) => route.name === 'capabilityGuide',
+    );
+    expect(guide?.target.path).toBe('/capabilities');
+    expect(guide?.route.auth).toBe('required');
     expect(
-      serverPlugins.plugins.filter(
-        (plugin) => plugin.packageName === '@nocobase/app-plugin-foundation',
-      ),
-    ).toHaveLength(1);
+      buildSettingsCatalog(runtime.routes, new Set([routeKey(guide!.route)]))
+        .flatMap((item) => item.modules)
+        .some((item) => item.route.name === 'capabilityGuide'),
+    ).toBe(false);
   });
 
   it('keeps Foundation beside business settings without changing its protected URL', async () => {
@@ -77,7 +67,59 @@ describe('default Foundation integration', () => {
           ['permissionManagement', '/settings/roles'],
         ],
       ],
-      ['settingsSystem', [['foundation', '/foundation']]],
+      ['settingsSystem', [['capabilityGuide', '/capabilities']]],
     ]);
   });
+
+  it('lists every plugin this application declares in the capability guide, with the standalone core modules', () => {
+    const manifest = packageMetadata as DependencyManifest;
+    const { entries } = createCapabilityCatalog(manifest);
+    const declared = Object.keys({
+      ...manifest.dependencies,
+      ...manifest.devDependencies,
+    })
+      .filter((name) => name.includes('app-plugin-'))
+      .sort();
+    expect(
+      entries
+        .filter((entry) => entry.source === 'plugin')
+        .map((entry) => entry.packageName)
+        .sort(),
+    ).toEqual(declared);
+    expect(
+      entries
+        .filter((entry) => entry.source === 'kernel')
+        .map((entry) => entry.name),
+    ).toEqual(['db', 'jobs', 'lifecycle', 'queue', 'realtime']);
+    // Installed extensions may use the guide's generic introduction.
+    for (const entry of entries) {
+      for (const locale of ['en-US', 'zh-CN']) {
+        const text = entryContent(guideContent(locale), entry);
+        expect(text.title.trim()).not.toBe('');
+        expect(text.summary.trim()).not.toBe('');
+      }
+    }
+  });
+
+  it('keeps an additional plugin discoverable without built-in wording', () => {
+    const packageName = '@example/app-plugin-business-extension';
+    const catalog = createCapabilityCatalog({
+      ...packageMetadata,
+      dependencies: {
+        ...packageMetadata.dependencies,
+        [packageName]: '1.0.0',
+      },
+    });
+    const entry = catalog.entries.find(
+      (item) => item.packageName === packageName,
+    )!;
+    expect(entry).toMatchObject({ source: 'plugin', known: false });
+    expect(catalog.find(entry.id)).toBe(entry);
+    for (const locale of ['en-US', 'zh-CN']) {
+      const text = entryContent(guideContent(locale), entry);
+      expect(text.title).toContain(packageName);
+      expect(text.summary.trim()).not.toBe('');
+      expect(text.prompts.main?.template).toContain(packageName);
+    }
+  });
 });

package/tests/client/home.test.tsx

@@ -1,13 +1,23 @@
 import { renderWithApp } from '@nocobase/app-testing/client';
-import { screen, waitFor, within } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import packageMetadata from '../../package.json' with { type: 'json' };
 import enUS from '../../client/locales/en-US.js';
-import zhCN from '../../client/locales/zh-CN.js';
 import HomePage from '../../client/pages/home/index.js';
-import { CAPABILITIES } from '../../client/pages/home/capabilities.js';
+import {
+  CAPABILITY_GUIDE_PATH,
+  capabilityPath,
+  createCapabilityCatalog,
+  entryContent,
+  format,
+  guideContent,
+} from '@nocobase/app-plugin-foundation/capability-guide';
+
+const catalog = createCapabilityCatalog(packageMetadata);
+const escape = (text: string): string =>
+  text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
 function renderHome() {
   return renderWithApp(<HomePage />, {
@@ -48,79 +58,28 @@ describe('home page', () => {
     expect(screen.getByText(enUS.home.steps.describe.title)).toBeVisible();
   });
 
-  it('shows one card per built-in capability', async () => {
+  it('features capabilities from the shared guide catalog, each linking to its entry', async () => {
     await renderHome();
+    const content = guideContent('en-US');
 
-    for (const { id } of CAPABILITIES) {
-      const title =
-        enUS.home.capabilities[id as keyof typeof enUS.home.capabilities].title;
+    expect(catalog.featured.length).toBeGreaterThan(0);
+    for (const entry of catalog.featured) {
+      const title = entryContent(content, entry).title;
       expect(
-        screen.getByRole('button', { name: new RegExp(title) }),
-      ).toBeInTheDocument();
+        screen.getByRole('link', { name: new RegExp(escape(title)) }),
+      ).toHaveAttribute('href', capabilityPath(entry.id));
     }
   });
 
-  it('opens a capability, switches prompts, and copies the edited text', async () => {
-    const user = setup();
-    const view = await renderHome();
-    const scheduler = enUS.home.capabilities.scheduler;
-
-    await user.click(
-      screen.getByRole('button', { name: new RegExp(scheduler.title) }),
-    );
-    const dialog = await screen.findByRole('dialog');
-    const prompt = within(dialog).getByRole('textbox', {
-      name: enUS.home.prompt.label,
-    });
-    expect(prompt).toHaveValue(scheduler.prompts.reminder.text);
-
-    await user.click(
-      within(dialog).getByRole('tab', {
-        name: scheduler.prompts.weeklyReport.label,
-      }),
-    );
-    expect(prompt).toHaveValue(scheduler.prompts.weeklyReport.text);
-
-    await user.clear(prompt);
-    await user.type(prompt, 'Every Friday');
-    await user.click(
-      within(dialog).getByRole('button', { name: enUS.home.prompt.copy }),
-    );
-
-    expect(writeText).toHaveBeenCalledWith('Every Friday');
-    expect(view.toasts()).toEqual([
-      expect.objectContaining({
-        type: 'success',
-        title: enUS.home.prompt.copied,
-      }),
-    ]);
-
-    await user.click(
-      within(dialog).getByRole('button', { name: enUS.home.prompt.reset }),
-    );
-    expect(prompt).toHaveValue(scheduler.prompts.weeklyReport.text);
-  });
-
-  it('starts from the default prompt each time the dialog opens', async () => {
-    const user = setup();
+  it('leads to the full catalog, counted from the dependencies this application declares', async () => {
     await renderHome();
-    const theme = enUS.home.capabilities.theme;
-    const card = screen.getByRole('button', { name: new RegExp(theme.title) });
+    const content = guideContent('en-US');
 
-    await user.click(card);
-    const prompt = within(await screen.findByRole('dialog')).getByRole(
-      'textbox',
-    );
-    await user.type(prompt, ' Edited.');
-    await user.keyboard('{Escape}');
-    await waitFor(() =>
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
-    );
-
-    await user.click(card);
     expect(
-      within(await screen.findByRole('dialog')).getByRole('textbox'),
-    ).toHaveValue(theme.prompts.changeTheme.text);
+      screen.getByRole('link', {
+        name: format(content.home.viewAll, { count: catalog.entries.length }),
+      }),
+    ).toHaveAttribute('href', CAPABILITY_GUIDE_PATH);
   });
 
   it('reports a copy the browser refuses', async () => {
@@ -140,21 +99,3 @@ describe('home page', () => {
     ]);
   });
 });
-
-describe('home page copy', () => {
-  it('translates every capability prompt into Chinese', () => {
-    for (const { id, prompts } of CAPABILITIES) {
-      const key = id as keyof typeof zhCN.home.capabilities;
-      for (const prompt of prompts) {
-        const zh = (
-          zhCN.home.capabilities[key].prompts as Record<
-            string,
-            { label: string; text: string }
-          >
-        )[prompt];
-        expect(zh?.text, `${id}.${prompt}`).toBeTruthy();
-        expect(zh?.label, `${id}.${prompt}`).toBeTruthy();
-      }
-    }
-  });
-});

package/tests/client/layout-i18n.test.tsx

@@ -1,3 +1,4 @@
+import foundation from '@nocobase/app-plugin-foundation/client/plugin';
 import {
   ClientApplicationContext,
   NavigationGuardProvider,
@@ -7,10 +8,17 @@ import {
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import { I18nRuntime } from '@nocobase/i18n';
 import { I18nProvider } from '@nocobase/i18n/client';
-import { act, render, screen } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import locales from '../../client/locales/index.js';
 import { AppLayout } from '../../client/layouts/app-layout.js';
@@ -37,6 +45,8 @@ vi.mock('../../client/routing/route-navigation.js', async (importOriginal) => ({
   }),
 }));
 
+afterEach(() => vi.unstubAllGlobals());
+
 /** The page the shell opens on: the header names it. */
 const overview: AppClientRegisteredRoute = {
   id: 'overview',
@@ -62,6 +72,10 @@ async function setup(children: ReactNode) {
     applicationNamespace: 'test-app',
   });
   runtime.registerApplicationNamespace('test-app', locales);
+  runtime.registerNamespace(
+    '@nocobase/app-plugin-foundation',
+    foundation().locales!,
+  );
   await runtime.init('en-US');
   const app = {
     config: createAppClientConfig({ rawConfig: {} }),
@@ -110,3 +124,70 @@ describe('shell translations', () => {
     ).toBeVisible();
   });
 });
+
+it('translates the settings navigation without a separate resources footer', async () => {
+  const settings: AppClientRegisteredRoute = {
+    ...overview,
+    id: 'settings',
+    name: 'settings',
+    path: '/settings',
+    packageName: 'test',
+    source: 'application',
+    auth: 'required',
+    authz: 'skip',
+    navigation: { title: 'settings.title' },
+  };
+  const runtime = await setup(<AppLayout routes={[overview, settings]} />);
+  const navigation = screen.getByRole('navigation', {
+    name: 'Application navigation',
+  });
+  const link = within(navigation).getByRole('link', {
+    name: 'System settings',
+  });
+  expect(link).toHaveAttribute('href', '/settings');
+  expect(link.closest('[data-slot="sidebar-content"]')).not.toBeNull();
+  expect(
+    screen.queryByRole('navigation', { name: 'Resources' }),
+  ).not.toBeInTheDocument();
+  fireEvent.click(link);
+  await waitFor(() =>
+    expect(
+      within(navigation).getByRole('link', { name: 'System settings' }),
+    ).toHaveAttribute('aria-current', 'page'),
+  );
+  await act(() => runtime.changeLanguage('zh-CN'));
+  expect(
+    within(screen.getByRole('navigation', { name: '应用导航' })).getByRole(
+      'link',
+      { name: '系统设置' },
+    ),
+  ).toHaveAttribute('href', '/settings');
+});
+
+it('closes the mobile sidebar after opening System settings', async () => {
+  vi.stubGlobal('innerWidth', 375);
+  const settings: AppClientRegisteredRoute = {
+    ...overview,
+    id: 'settings',
+    name: 'settings',
+    path: '/settings',
+    packageName: 'test',
+    source: 'application',
+    auth: 'required',
+    authz: 'skip',
+    navigation: { title: 'settings.title' },
+  };
+  await setup(<AppLayout routes={[overview, settings]} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Open navigation' }));
+  const navigation = await screen.findByRole('navigation', {
+    name: 'Application navigation',
+  });
+  fireEvent.click(
+    within(navigation).getByRole('link', { name: 'System settings' }),
+  );
+  await waitFor(() =>
+    expect(
+      screen.queryByRole('navigation', { name: 'Application navigation' }),
+    ).not.toBeInTheDocument(),
+  );
+});