@nutin/cli 2.0.0 → 2.1.1

package/templates/base/src/core/base-classes/base-component/helpers/pipe.helper.test.js.hbs

@@ -74,9 +74,16 @@ describe('PipeHelper', () => {
     expect(container.querySelector('input').value).toBe('FROM SOURCE');
   });
 
-  it('stops processing pipes when a pipe segment resolves to an empty name', () => {
-    container.innerHTML = '<span data-pipe=":arg">hi</span>';
+  it('warns and skips a pipe segment that resolves to an empty name, continuing the rest of the chain', () => {
+    const warnSpy = spyOn(console, 'warn');
+    warnSpy.andCallFake(() => {});
+
+    container.innerHTML = '<span data-pipe=":arg|upper">hi</span>';
     PipeHelper.parsePipeAttributes(container);
-    expect(container.querySelector('span').textContent).toBe('hi');
+
+    expect(container.querySelector('span').textContent).toBe('HI');
+    expect(warnSpy.callCount).toBe(1);
+
+    warnSpy.restore();
   });
 });

package/templates/base/src/core/base-classes/base-component/helpers/pipe.helper.ts.hbs

@@ -29,7 +29,10 @@ export class PipeHelper {
     for (const pipe of pipes) {
       const [pipeName, ...argParts] = pipe.split(':');
 
-      if(!pipeName) return;
+      if (!pipeName) {
+        console.warn(`Empty pipe name in segment "${pipe}" - skipping.`);
+        continue;
+      }
 
       const args = argParts.length ? argParts.join(':').split(',') : [];
       value = AppPipeRegistry.apply(pipeName.trim(), value, args.map(a => a.trim()));

package/templates/base/src/core/base-classes/view/view.test.js.hbs

@@ -1,7 +1,6 @@
 import { View } from '#root/dist/src/core/index.js';
 
 class HomeView extends View {}
-class MyFancyView extends View {}
 class NamedView extends View {}
 
 describe('View', () => {
@@ -16,38 +15,36 @@ describe('View', () => {
     app = null;
   });
 
-  it('derives a kebab-case viewName from the class name, stripping a trailing "View"', () => {
-    const view = new HomeView({});
-    expect(view.viewName).toBe('home');
+  it('throws when viewName is omitted', () => {
+    expect(() => new HomeView({})).toThrow();
   });
 
-  it('derives a kebab-case viewName for a multi-word class name', () => {
-    const view = new MyFancyView({});
-    expect(view.viewName).toBe('my-fancy');
+  it('throws when viewName is an empty string', () => {
+    expect(() => new HomeView({ viewName: '' })).toThrow();
   });
 
-  it('uses an explicit viewName option instead of deriving one', () => {
+  it('uses the explicit viewName option', () => {
     const view = new NamedView({ viewName: 'custom-name' });
     expect(view.viewName).toBe('custom-name');
   });
 
   it('generateTemplate() returns the constructor template', () => {
-    const view = new HomeView({ template: '<p>hi</p>' });
+    const view = new HomeView({ viewName: 'home', template: '<p>hi</p>' });
     expect(view.render().innerHTML).toBe('<p>hi</p>');
   });
 
   it('defaults the template to an empty string', () => {
-    const view = new HomeView({});
+    const view = new HomeView({ viewName: 'home' });
     expect(view.render().innerHTML).toBe('');
   });
 
   it('defaults the tagName to "section"', () => {
-    const view = new HomeView({});
+    const view = new HomeView({ viewName: 'home' });
     expect(view.getElement().tagName).toBe('SECTION');
   });
 
   it('setRouteParams/getRouteParams/getRouteParam/hasRouteParam manage route params', () => {
-    const view = new HomeView({});
+    const view = new HomeView({ viewName: 'home' });
     expect(view.hasRouteParam('id')).toBe(false);
     expect(view.getRouteParam('id')).toBeUndefined();
 
@@ -59,7 +56,7 @@ describe('View', () => {
   });
 
   it('getRouteParams() returns a copy, not a live reference', () => {
-    const view = new HomeView({});
+    const view = new HomeView({ viewName: 'home' });
     view.setRouteParams({ id: '1' });
     const params = view.getRouteParams();
     params.id = 'mutated';
@@ -67,7 +64,7 @@ describe('View', () => {
   });
 
   it('onEnter and onExit are present as no-op hooks', () => {
-    const view = new HomeView({});
+    const view = new HomeView({ viewName: 'home' });
     expect(() => view.onEnter()).not.toThrow();
     expect(() => view.onExit()).not.toThrow();
   });

package/templates/base/src/core/base-classes/view/view.ts.hbs

@@ -1,11 +1,11 @@
 import { BaseComponent, BaseComponentOptions } from '../../index.js';
 
 export interface ViewOptions extends BaseComponentOptions {
-  viewName?: string;
+  viewName: string;
 }
 
 export abstract class View<T extends HTMLElement = HTMLElement> extends BaseComponent<T> {
-  public viewName: string;
+  private _viewName: string;
   protected routeParams: Record<string, string> = {};
   private _template: string;
 
@@ -17,8 +17,13 @@ export abstract class View<T extends HTMLElement = HTMLElement> extends BaseComp
     trustLevel,
   }: ViewOptions) {
     super({ mountTarget, tagName, trustLevel });
+    if (!viewName) throw new Error('View requires a viewName.');
     this._template = template ?? '';
-    this.viewName = viewName || this.getKebabCaseViewName();
+    this._viewName = viewName;
+  }
+
+  public get viewName(): string {
+    return this._viewName;
   }
 
   protected override generateTemplate(): string {
@@ -41,12 +46,6 @@ export abstract class View<T extends HTMLElement = HTMLElement> extends BaseComp
     return key in this.routeParams && this.routeParams[key] !== undefined;
   }
 
-  private getKebabCaseViewName(): string {
-    const className = this.constructor.name;
-    const baseName = className.replace(/View$/, '');
-    return baseName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  }
-
   // Navigation hooks — called by router only, never by render lifecycle
   public onEnter(): void {}
   public onExit(): void {}

package/templates/base/src/core/config.ts.hbs

@@ -1,7 +1,10 @@
 import langs from '../../config/languages.json' with { type: 'json' };
+import seo from '../../config/seo.json' with { type: 'json' };
 import nutinConfig from '../../nutin.config.js';
 
 export const CONFIG = {
   langs,
+  seo,
   i18n: nutinConfig.i18n,
+  generateSEOFiles: nutinConfig.generateSEOFiles,
 } as const;

package/templates/base/src/core/services/globals/globals.test.js.hbs

@@ -106,6 +106,9 @@ describe('globals (hideGlobals/revealGlobals)', () => {
     [...document.body.children].forEach((el) => {
       if (el.id !== 'app') el.remove();
     });
+    // Globals is a process-wide singleton - drop its captured-display state so
+    // a later test's ids can't inherit an earlier test's original display value.
+    Globals.testingResetAll();
   });
 
   it('toggle display for every given id that is present', () => {
@@ -146,4 +149,39 @@ describe('globals (hideGlobals/revealGlobals)', () => {
     expect(() => hideGlobals(['missing'])).not.toThrow();
     expect(() => revealGlobals(['missing'])).not.toThrow();
   });
+
+  it('revealGlobals restores the display value captured when hideGlobals was called', () => {
+    const header = document.createElement('div');
+    header.id = 'header';
+    header.style.display = 'flex';
+    document.body.appendChild(header);
+
+    hideGlobals(['header']);
+    expect(header.style.display).toBe('none');
+
+    revealGlobals(['header']);
+    expect(header.style.display).toBe('flex');
+  });
+
+  it('revealGlobals accepts an explicit display override that wins over the captured value', () => {
+    const header = document.createElement('div');
+    header.id = 'header';
+    header.style.display = 'flex';
+    document.body.appendChild(header);
+
+    hideGlobals(['header']);
+    revealGlobals(['header'], 'inline-block');
+
+    expect(header.style.display).toBe('inline-block');
+  });
+
+  it('revealGlobals falls back to "block" when there is no prior hideGlobals call for that id', () => {
+    const header = document.createElement('div');
+    header.id = 'header';
+    document.body.appendChild(header);
+
+    revealGlobals(['header']);
+
+    expect(header.style.display).toBe('block');
+  });
 });

package/templates/base/src/core/services/globals/globals.ts.hbs

@@ -21,6 +21,7 @@ export interface RegisterGlobalsOptions {
 
 export class Globals extends Service<Globals> {
   private _mounted: Record<string, GlobalMountable> = {};
+  private _originalDisplay: Record<string, string> = {};
 
   constructor() { super(); }
 
@@ -51,23 +52,28 @@ export class Globals extends Service<Globals> {
   }
 
   public hide(globalIds: string[]): void {
-    this.setDisplay(globalIds, 'none');
-  }
-
-  public reveal(globalIds: string[]): void {
-    this.setDisplay(globalIds, 'block');
+    globalIds.forEach((id) => {
+      const el = document.getElementById(id) as HTMLElement | null;
+      if (!el) return;
+      if (!(id in this._originalDisplay)) {
+        this._originalDisplay[id] = el.style.display || getComputedStyle(el).display;
+      }
+      el.style.display = 'none';
+    });
   }
 
-  private setDisplay(globalIds: string[], display: 'none' | 'block'): void {
+  public reveal(globalIds: string[], display?: string): void {
     globalIds.forEach((id) => {
       const el = document.getElementById(id) as HTMLElement | null;
-      if (el) el.style.display = display;
+      if (!el) return;
+      el.style.display = display ?? this._originalDisplay[id] ?? 'block';
     });
   }
 
   protected onDestroy(): void {
     Object.values(this._mounted).forEach((instance) => instance.destroy?.());
     this._mounted = {};
+    this._originalDisplay = {};
   }
 }
 
@@ -89,7 +95,10 @@ export const hideGlobals = (globalIds: string[]): void => {
   Globals.getInstance().hide(globalIds);
 };
 
-/** Reveal the elements with the given ids (as registered via `registerGlobals`). */
-export const revealGlobals = (globalIds: string[]): void => {
-  Globals.getInstance().reveal(globalIds);
+/**
+ * Reveal the elements with the given ids (as registered via `registerGlobals`), restoring
+ * each element's display value as captured by `hideGlobals` — pass `display` to override.
+ */
+export const revealGlobals = (globalIds: string[], display?: string): void => {
+  Globals.getInstance().reveal(globalIds, display);
 };

package/templates/base/src/core/services/http-client/http-client.test.js.hbs

@@ -197,13 +197,41 @@ describe('HttpClient', () => {
 
   it('should handle custom headers', async () => {
     fetchMock.mockJsonResponse('https://api.example.com/users', []);
-    
+
     await httpClient.get('https://api.example.com/users', { headers: { 'Authorization': 'Bearer custom-token' } });
-    
+
     const lastCall = fetchMock.getLastCall();
     expect(lastCall.options.headers['Authorization']).toBe('Bearer custom-token');
   });
 
+  it('should send the constructor default headers on a request with no custom headers', async () => {
+    fetchMock.mockJsonResponse('https://api.example.com/users', []);
+
+    await httpClient.get('https://api.example.com/users');
+
+    const lastCall = fetchMock.getLastCall();
+    expect(lastCall.options.headers['Content-Type']).toBe('application/json');
+  });
+
+  it('should merge default headers with per-call headers on different keys', async () => {
+    fetchMock.mockJsonResponse('https://api.example.com/users', []);
+
+    await httpClient.get('https://api.example.com/users', { headers: { 'Authorization': 'Bearer custom-token' } });
+
+    const lastCall = fetchMock.getLastCall();
+    expect(lastCall.options.headers['Content-Type']).toBe('application/json');
+    expect(lastCall.options.headers['Authorization']).toBe('Bearer custom-token');
+  });
+
+  it('should let a per-call header override a default header on the same key', async () => {
+    fetchMock.mockJsonResponse('https://api.example.com/users', []);
+
+    await httpClient.get('https://api.example.com/users', { headers: { 'Content-Type': 'text/plain' } });
+
+    const lastCall = fetchMock.getLastCall();
+    expect(lastCall.options.headers['Content-Type']).toBe('text/plain');
+  });
+
   it('should invoke request interceptors with the final url and options before sending', async () => {
     fetchMock.mockJsonResponse('https://api.example.com/users', []);
     const calls = [];

package/templates/base/src/core/services/http-client/http-client.ts.hbs

@@ -56,7 +56,10 @@ export class HttpClient extends Service<HttpClient> {
   ): Promise<T> {
     const { controller, timeoutId } = HttpManager.createAbortController(config?.timeout);
     const fullUrl = `${this._baseUrl}${endpoint}`;
-    const mergedConfig = { ...this._defaultHeaders, ...config };
+    const mergedConfig: IRequestConfig = {
+      ...config,
+      headers: { ...this._defaultHeaders, ...config?.headers },
+    };
 
     try {
       const url = HttpBuilder.buildRequestUrl(fullUrl, config?.queryParams);

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.test.js.hbs

@@ -39,6 +39,40 @@ describe('NavigationManager', () => {
     window.history.pushState = originalPushState;
   });
 
+  it('replaceState calls history.replaceState (not pushState) with the locale-prefixed path', () => {
+    const originalReplaceState = window.history.replaceState;
+    const originalPushState = window.history.pushState;
+    let pushCalled = false;
+    let replaceArgs = null;
+
+    window.history.pushState = () => { pushCalled = true; };
+    window.history.replaceState = (state, title, url) => { replaceArgs = url; };
+
+    try {
+      NavigationManager.replaceState('/section/first-page');
+      expect(replaceArgs).toBe('/section/first-page');
+      expect(pushCalled).toBe(false);
+    } finally {
+      window.history.replaceState = originalReplaceState;
+      window.history.pushState = originalPushState;
+    }
+  });
+
+  it('replaceState preserves an existing hash fragment', () => {
+    const originalReplaceState = window.history.replaceState;
+    window.history.pushState({}, '', '/section#some-heading');
+    let replaceArgs = null;
+    window.history.replaceState = (state, title, url) => { replaceArgs = url; };
+
+    try {
+      NavigationManager.replaceState('/section/first-page');
+      expect(replaceArgs).toBe('/section/first-page#some-heading');
+    } finally {
+      window.history.replaceState = originalReplaceState;
+      window.history.pushState({}, '', '/');
+    }
+  });
+
   it('should return current path from location', () => {
     // This test assumes a DOM-like environment
     const currentPath = window.location.pathname;
@@ -191,4 +225,112 @@ describe('NavigationManager', () => {
   it('matchPattern returns null when the path does not match the pattern at all', () => {
     expect(NavigationManager.matchPattern('/posts/:id', '/other/123')).toBe(null);
   });
+
+  it('updateDocumentTitle falls back to the view\'s viewName when generateSEOFiles is disabled', () => {
+    CONFIG.generateSEOFiles = false;
+    CONFIG.seo = { routes: [{ path: '/', title: 'Should not be used' }] };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('home');
+    } finally {
+      CONFIG.generateSEOFiles = false;
+    }
+  });
+
+  it('updateDocumentTitle falls back to the view\'s viewName when no seo.json route matches the pattern', () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/other', title: 'Other' }] };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('home');
+    } finally {
+      CONFIG.generateSEOFiles = false;
+    }
+  });
+
+  it('updateDocumentTitle uses a flat seo.json title when generateSEOFiles is enabled and the pattern matches', () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: 'My App — Home' }] };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('My App — Home');
+    } finally {
+      CONFIG.generateSEOFiles = false;
+    }
+  });
+
+  it('updateDocumentTitle resolves a per-language seo.json title to the current language', () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: { en: 'Home', fr: 'Accueil' } }] };
+    I18nService['_LANGUAGES'] = ['en', 'fr'];
+    I18nService['_currentLanguage'] = 'fr';
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('Accueil');
+    } finally {
+      CONFIG.generateSEOFiles = false;
+      I18nService['_currentLanguage'] = 'en';
+    }
+  });
+
+  it('updateDocumentTitle falls back to the default language, then any available language, then viewName', () => {
+    CONFIG.generateSEOFiles = true;
+    I18nService['_LANGUAGES'] = ['en', 'fr'];
+
+    CONFIG.seo = { routes: [{ path: '/', title: { fr: 'Accueil' } }] };
+    I18nService['_currentLanguage'] = 'en';
+    try {
+      // current lang ('en') missing -> falls back to default lang's value, present here as 'fr' only,
+      // so it falls further to the first available value
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('Accueil');
+
+      CONFIG.seo = { routes: [{ path: '/', title: {} }] };
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('home');
+    } finally {
+      CONFIG.generateSEOFiles = false;
+      I18nService['_currentLanguage'] = 'en';
+    }
+  });
+
+  it('updateDocumentTitle uses the view\'s locale title when i18n is enabled and no seo.json route matches', () => {
+    CONFIG.i18n = true;
+    CONFIG.generateSEOFiles = false;
+    I18nService['_translations'] = { home: { title: 'Accueil' } };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('Accueil');
+    } finally {
+      CONFIG.i18n = false;
+      I18nService['_translations'] = {};
+    }
+  });
+
+  it('updateDocumentTitle prefers seo.json title over the locale title when both are present', () => {
+    CONFIG.i18n = true;
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: 'From seo.json' }] };
+    I18nService['_translations'] = { home: { title: 'From locale' } };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('From seo.json');
+    } finally {
+      CONFIG.i18n = false;
+      CONFIG.generateSEOFiles = false;
+      I18nService['_translations'] = {};
+    }
+  });
+
+  it('updateDocumentTitle ignores the locale title when i18n is disabled, falling back to viewName', () => {
+    CONFIG.i18n = false;
+    CONFIG.generateSEOFiles = false;
+    I18nService['_translations'] = { home: { title: 'Should not be used' } };
+    try {
+      NavigationManager.updateDocumentTitle({ viewName: 'home' }, '/');
+      expect(document.title).toBe('home');
+    } finally {
+      I18nService['_translations'] = {};
+    }
+  });
 });

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.ts.hbs

@@ -1,4 +1,4 @@
-import { I18nService } from "../../../index.js";
+import { I18nService, View } from "../../../index.js";
 import { Language } from "../../i18n/languages.js";
 import { CONFIG } from "../../../config.js";
 
@@ -48,18 +48,56 @@ export class NavigationManager {
   public static updateHistory(
     normalizedPath: string,
     currentPath: string,
-    pushState: boolean
+    pushState: boolean,
+    hash?: string
   ): void {
-    const localizedPath = this.addLocalePrefix(normalizedPath);
-    if (pushState && window.location.pathname !== localizedPath) {
+    const localizedPath = this.addLocalePrefix(normalizedPath) + (hash ? `#${hash}` : '');
+    const currentUrl = window.location.pathname + window.location.hash;
+    if (pushState && currentUrl !== localizedPath) {
       window.history.pushState({}, '', localizedPath);
     }
   }
 
+  // Rewrites the current history entry's URL to match content already rendered
+  // (e.g. a route that fell back to a default sub-page) without adding a
+  // new back/forward-navigable entry.
+  public static replaceState(path: string): void {
+    const localizedPath = this.addLocalePrefix(path) + window.location.hash;
+    window.history.replaceState({}, '', localizedPath);
+  }
+
+  // Scrolls to the element matching `hash` (a bare fragment, no leading "#") if it
+  // exists; falls back to the top of the page otherwise (no hash, or a stale/broken
+  // id) — matches the browser's own native fallback for an unresolvable fragment.
+  public static scrollToHash(hash?: string): void {
+    const target = hash ? document.getElementById(hash) : null;
+    if (target) {
+      target.scrollIntoView({ block: 'start' });
+    } else {
+      window.scrollTo({ top: 0 });
+    }
+  }
+
   public static getCurrentPath(): string {
     return this.normalizePath(window.location.pathname);
   }
 
+  public static updateDocumentTitle(view: View, pattern: string): void {
+    const route = CONFIG.generateSEOFiles
+      ? CONFIG.seo?.routes?.find((r) => r.path === pattern)
+      : undefined;
+    const seoTitle = route?.title ? this.resolveSeoTitle(route.title) : undefined;
+    const localeTitle = CONFIG.i18n ? I18nService.getTranslationObject<string>(`${view.viewName}.title`) : null;
+    document.title = seoTitle || localeTitle || view.viewName;
+  }
+
+  private static resolveSeoTitle(title: string | Record<string, string>): string | undefined {
+    if (typeof title !== 'object') return title;
+    const lang = I18nService.currentLanguage;
+    const defaultLang = I18nService.defaultLanguage;
+    return title[lang] ?? title[defaultLang] ?? Object.values(title)[0];
+  }
+
   public static matchPattern(pattern: string, path: string): Record<string, string> | null {
     const paramNames: string[] = [];
 

package/templates/base/src/core/services/router/router.test.js.hbs

@@ -21,6 +21,7 @@ describe('Router', () => {
 
   beforeEach(() => {
     CONFIG.i18n = false;
+    CONFIG.generateSEOFiles = false;
     window.history.pushState({}, '', '/');
   });
 
@@ -30,6 +31,7 @@ describe('Router', () => {
       router = null;
     }
     CONFIG.i18n = false;
+    CONFIG.generateSEOFiles = false;
     window.history.pushState({}, '', '/');
   });
 
@@ -58,6 +60,21 @@ describe('Router', () => {
     ]);
   });
 
+  it('navigate() applies a view\'s onEnter() history rewrite without it being overwritten by the router\'s own history update', async () => {
+    const home = makeView('home');
+    const section = makeView('section');
+    section.onEnter = () => {
+      section.calls.push(['onEnter']);
+      window.history.replaceState({}, '', '/section/first-page');
+    };
+    router = AppRouter({ '/': () => home, '/section': () => section });
+    await flushPromises();
+
+    await router.navigate('/section');
+
+    expect(window.location.pathname).toBe('/section/first-page');
+  });
+
   it('navigate() passes matched route params to the rendered view', async () => {
     const home = makeView('home');
     const userView = makeView('user');
@@ -211,6 +228,82 @@ describe('Router', () => {
     expect(home.calls.some(c => c[0] === 'render')).toBe(true);
   });
 
+  it('sets document.title to the view\'s viewName when generateSEOFiles is disabled', async () => {
+    CONFIG.generateSEOFiles = false;
+    CONFIG.seo = { routes: [{ path: '/', title: 'Should not be used' }] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('home');
+  });
+
+  it('falls back to the view\'s viewName when generateSEOFiles is enabled but no seo.json route matches', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('home');
+  });
+
+  it('sets document.title from config/seo.json when generateSEOFiles is enabled and a route matches', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: 'My App — Home' }] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('My App — Home');
+  });
+
+  it('sets document.title for the /404 route', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/404', title: 'Not Found' }] };
+
+    const home = makeView('home');
+    const notFound = makeView('not-found');
+    router = AppRouter({ '/': () => home, '/404': () => notFound });
+    await flushPromises();
+
+    await router.navigate('/nope');
+
+    expect(document.title).toBe('Not Found');
+  });
+
+  it('resolves a per-language title when i18n is enabled', async () => {
+    CONFIG.i18n = true;
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: { en: 'Home', fr: 'Accueil' } }] };
+    I18nService['_LANGUAGES'] = ['en', 'fr'];
+    I18nService['_currentLanguage'] = 'fr';
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('Accueil');
+
+    I18nService['_currentLanguage'] = 'en';
+  });
+
+  it('falls back to the view\'s locale title when i18n is enabled and no seo.json route matches', async () => {
+    CONFIG.i18n = true;
+    I18nService['_translations'] = { home: { title: 'Accueil' } };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('Accueil');
+
+    I18nService['_translations'] = {};
+  });
+
   it('removeEventListeners() stops the router from responding to further navigate/popstate events', async () => {
     const home = makeView('home');
     const about = makeView('about');