feat(router): several apps on one page, and Ionic stacks in the Capacitor tab

app/src/__tests__/capacitor-ionic.test.ts

@@ -0,0 +1,123 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import type { DevframeRpcClient } from 'devframe/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { CapacitorIonic, directionText, type IonicPage } from '../pages/capacitor-ionic';
+
+function ionicPage(pageId = 'tab1'): IonicPage {
+  return {
+    pageId,
+    url: '/tabs/tab1/detail',
+    title: 'Ionic app',
+    framework: '@ionic/angular',
+    mode: 'ios',
+    reportedAt: 1,
+    outlets: [
+      {
+        id: 'c1-1',
+        name: 'primary',
+        tabs: '/tabs/tab1',
+        source: 'angular',
+        canGoBack: true,
+        direction: 'back',
+        directionSource: 'event',
+        animated: true,
+        pages: [
+          {
+            component: 'HomePage',
+            tag: 'app-home',
+            url: '/tabs/tab1',
+            active: true,
+            elementId: 'e1',
+          },
+          {
+            component: 'DetailPage',
+            tag: 'app-detail',
+            url: '/tabs/tab1/detail',
+            active: false,
+            elementId: 'e2',
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function fakeClient(pages: IonicPage[]) {
+  const calls: { name: string; arg: unknown }[] = [];
+  const rpc = {
+    call: (name: string, arg: unknown) => {
+      calls.push({ name, arg });
+      return Promise.resolve(null);
+    },
+    callEvent: () => Promise.resolve(),
+    sharedState: (name: string) =>
+      Promise.resolve({
+        value: () =>
+          name === 'ionic' ? { pages: Object.fromEntries(pages.map((p) => [p.pageId, p])) } : {},
+        on: () => () => {},
+      }),
+  };
+  const client = { connectionMeta: {}, scope: () => ({ rpc }) } as unknown as DevframeRpcClient;
+  return { client, calls };
+}
+
+async function settle(fixture: ComponentFixture<unknown>) {
+  for (let i = 0; i < 3; i++) {
+    await new Promise((resolve) => setTimeout(resolve));
+    await fixture.whenStable();
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('CapacitorIonic', () => {
+  it('lists the page stack of each outlet with the active page and the last direction', async () => {
+    const { client, calls } = fakeClient([ionicPage()]);
+    const fixture = TestBed.createComponent(CapacitorIonic);
+    fixture.componentRef.setInput('rpc', client);
+    fixture.componentRef.setInput('pageId', 'tab1');
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('h2')?.textContent).toBe('Ionic page stacks');
+    const rows = Array.from(host.querySelectorAll<HTMLButtonElement>('.stack-page'));
+    expect(rows.map((row) => row.querySelector('.component')?.textContent)).toEqual([
+      'HomePage',
+      'DetailPage',
+    ]);
+    expect(rows[0].getAttribute('aria-current')).toBe('page');
+    expect(rows[1].getAttribute('aria-current')).toBeNull();
+    expect(host.textContent).toContain('/tabs/tab1');
+    expect(host.textContent).toContain('Back');
+
+    rows[1].dispatchEvent(new Event('focus'));
+    expect(calls.at(-1)).toEqual({
+      name: 'request-page-highlight',
+      arg: { pageId: 'tab1', id: 'e2', reveal: false },
+    });
+    rows[1].dispatchEvent(new Event('blur'));
+    expect(calls.at(-1)).toEqual({ name: 'request-page-highlight', arg: null });
+  });
+
+  it('shows nothing for a page that does not use Ionic', async () => {
+    const { client } = fakeClient([ionicPage('other')]);
+    const fixture = TestBed.createComponent(CapacitorIonic);
+    fixture.componentRef.setInput('rpc', client);
+    fixture.componentRef.setInput('pageId', 'tab1');
+    await settle(fixture);
+    expect((fixture.nativeElement as HTMLElement).querySelector('section')).toBeNull();
+  });
+
+  it('words the direction with its source', () => {
+    const outlet = ionicPage().outlets[0];
+    expect(directionText({ ...outlet, direction: undefined })).toBe('Not seen yet');
+    expect(directionText({ ...outlet, directionSource: 'inferred', direction: 'forward' })).toBe(
+      'Forward (from the stack)',
+    );
+    expect(directionText({ ...outlet, direction: 'root', tabSwitch: true, animated: false })).toBe(
+      'Root (tab switch, no animation)',
+    );
+  });
+});

app/src/__tests__/live-route-apps.test.ts

@@ -0,0 +1,114 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import type { DevframeRpcClient } from 'devframe/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { LiveRoute } from '../pages/live-route';
+import type { RouterApp, RouterPage } from '../pages/router-types';
+
+const root = { path: '', url: '', outlet: 'primary', params: {}, data: {}, children: [] };
+
+function routerPage(extra: Partial<RouterPage> = {}): RouterPage {
+  return {
+    pageId: 'p1',
+    reportedAt: 1,
+    snapshot: { url: '/home', queryParams: {}, fragment: null, root },
+    navigations: [
+      {
+        id: 1,
+        url: '/home',
+        trigger: 'imperative',
+        startedAt: 1,
+        endedAt: 2,
+        outcome: 'succeeded',
+      },
+    ],
+    ...extra,
+  };
+}
+
+const apps: RouterApp[] = [
+  { id: 'app-root', name: 'ShellApp', selector: 'app-root', primary: true },
+  {
+    id: 'cart-widget',
+    name: 'CartWidget',
+    selector: 'cart-widget',
+    snapshot: { url: '/checkout', queryParams: {}, fragment: null, root },
+    navigations: [
+      {
+        id: 4,
+        url: '/checkout',
+        trigger: 'imperative',
+        startedAt: 3,
+        endedAt: 4,
+        outcome: 'failed',
+      },
+    ],
+  },
+];
+
+function fakeClient(pages: RouterPage[]) {
+  const calls: { name: string; arg: unknown }[] = [];
+  const rpc = {
+    call: (name: string, arg: unknown) => {
+      calls.push({ name, arg });
+      return Promise.resolve(null);
+    },
+    callEvent: () => Promise.resolve(),
+    sharedState: () =>
+      Promise.resolve({
+        value: () => ({ pages }),
+        on: () => () => {},
+      }),
+  };
+  const client = { connectionMeta: {}, scope: () => ({ rpc }) } as unknown as DevframeRpcClient;
+  return { client, calls };
+}
+
+async function settle(fixture: ComponentFixture<unknown>) {
+  for (let i = 0; i < 3; i++) {
+    await new Promise((resolve) => setTimeout(resolve));
+    await fixture.whenStable();
+  }
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('LiveRoute on a page with several apps', () => {
+  it('offers an app picker and shows the picked app', async () => {
+    const { client } = fakeClient([routerPage({ apps })]);
+    const fixture = TestBed.createComponent(LiveRoute);
+    fixture.componentRef.setInput('rpc', client);
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('#live-route-app-label')?.textContent).toBe('App');
+    expect(fixture.componentInstance.appId()).toBe('app-root');
+    expect(fixture.componentInstance.page()?.snapshot?.url).toBe('/home');
+    expect(fixture.componentInstance.appOptions().map((o) => o.label)).toEqual([
+      'ShellApp <app-root>',
+      'CartWidget <cart-widget>',
+    ]);
+
+    fixture.componentInstance.appId.set('cart-widget');
+    await settle(fixture);
+    const view = fixture.componentInstance.page();
+    expect(view?.appId).toBe('cart-widget');
+    expect(view?.pageId).toBe('p1');
+    expect(view?.snapshot?.url).toBe('/checkout');
+    expect(fixture.componentInstance.problems()).toBe(1);
+  });
+
+  it('shows no app picker on a page with one app', async () => {
+    const page = routerPage();
+    const { client } = fakeClient([page]);
+    const fixture = TestBed.createComponent(LiveRoute);
+    fixture.componentRef.setInput('rpc', client);
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('#live-route-app-label')).toBeNull();
+    expect(fixture.componentInstance.appId()).toBeNull();
+    expect(fixture.componentInstance.page()).toBe(page);
+  });
+});

app/src/__tests__/router-app-view.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { routerAppView, type RouterPage } from '../pages/router-types';
+
+describe('routerAppView', () => {
+  it('carries the loops of a secondary app into its view', () => {
+    const loop = {
+      kind: 'redirect' as const,
+      ids: [1, 2],
+      cycle: ['/a', '/b'],
+      hops: [],
+      guards: [],
+      bounces: 1,
+      end: '/b',
+    };
+    const page = {
+      pageId: 'p',
+      reportedAt: 1,
+      changedAt: 1,
+      snapshot: null,
+      navigations: [],
+      apps: [
+        { id: 'app-root', name: 'Shell', selector: 'app-root', primary: true },
+        { id: 'cart', name: 'Cart', selector: 'cart-widget', navigations: [], loops: [loop] },
+      ],
+    } as unknown as RouterPage;
+    expect(routerAppView(page, 'cart').loops).toEqual([loop]);
+    expect(routerAppView(page, 'app-root').loops).toBeUndefined();
+  });
+});

app/src/pages/capacitor-inspector.ts

@@ -19,6 +19,7 @@ import { LimitNote } from '../ui/limit-note';
 import { Select, type SelectOption } from '../ui/select';
 import { panelConfig } from '../devtools-config';
 import { CapacitorCallDetail } from './capacitor-call-detail';
+import { CapacitorIonic } from './capacitor-ionic';
 import { CapacitorState, pluginStateCards } from './capacitor-state';
 import {
   SLOW_MS,
@@ -54,7 +55,7 @@ const FILTER_LABELS: Record<CallFilter, string> = {
 
 @Component({
   selector: 'app-capacitor-inspector',
-  imports: [SearchField, LimitNote, Select, CapacitorCallDetail, CapacitorState],
+  imports: [SearchField, LimitNote, Select, CapacitorCallDetail, CapacitorIonic, CapacitorState],
   template: `
     @if (!loaded()) {
       <p class="state" role="status">Loading Capacitor data…</p>
@@ -164,6 +165,8 @@ const FILTER_LABELS: Record<CallFilter, string> = {
         </section>
       }
 
+      <app-capacitor-ionic [rpc]="rpc()" [pageId]="page.pageId" />
+
       <section aria-labelledby="cap-calls-title">
         <h2 id="cap-calls-title">Plugin calls</h2>
         @if (!page.info.bridge && !page.info.webCalls) {